/* 📱 SCARAL - Index Mobile Module (v3.2.0-Hardened)
 * Optimized for: iPhone, Android, and PWAs
 * Hierarchy: Readability > Interaction > Compactness
 */

/* 🛡️ LAYER GOVERNANCE (Z-INDEX MAP)
 * Bottom Nav: 1000
 * Chatbot Wrapper: 1100
 * Mobile Overlay: 1200
 * Modals/Alerts: 1500+
 */

@media screen and (max-width: 1024px) {

    /* 🏗️ MOBILE RESET & SCALING GOVERNANCE */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
        scroll-behavior: smooth;
    }

    /* 🏗️ SCROLL LOCK SYSTEM */
    body.os-scroll-lock {
        overflow: hidden !important;
        touch-action: none;
    }

    body {
        -webkit-text-size-adjust: 100%;
        overflow-x: hidden;
        width: 100%;
    }

    /* 🏗️ Mobile Header managed by Global Navbar.css */

    body .user-info-text {
        display: none;
    }

    body .user-avatar {
        width: 42px !important;
        height: 42px !important;
        border-width: 2px;
    }

    body .hero-section {
        min-height: 100vh;
        padding: 120px 20px 60px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    body .hero-content {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        text-align: center;
    }

    body .hero-title {
        font-size: 2.2rem;
        line-height: 1.1;
        margin-bottom: 20px;
        width: 100%;
    }

    body .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 35px;
        opacity: 0.9;
        padding: 0 10px;
    }

    /* Unified Search Stacking Logic (EDA v4.5 - Minimalist) */
    body .sc-search-orchestrator {
        flex-direction: column;
        border-radius: 20px;
        padding: 12px;
        gap: 8px;
        background: rgba(3, 7, 18, 0.6);
    }

    body .search-main-input {
        width: 100%;
        text-align: center;
        padding: 4px 0 !important;
        font-size: 0.95rem !important;
    }

    body .search-divider {
        width: 60%;
        height: 1px;
        background: rgba(255, 255, 255, 0.05);
        margin: 2px auto;
    }

    body .search-select-inline {
        width: 100%;
        text-align: center;
        font-size: 0.8rem !important;
        background-position: center right 10px;
        padding: 6px !important;
        color: rgba(255, 255, 255, 0.95) !important; /* Force high contrast */
    }

    body .sc-search-orchestrator .sc-btn {
        width: 100%;
        margin-top: 5px;
        height: 48px;
        font-size: 0.95rem;
        border-radius: 12px !important;
    }

    /* Filter Dropdowns Grid (EDP v3.0 Native) */
    .sc-home-filters {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px !important;
        margin-top: 20px !important;
        width: 100%;
        max-width: 100%;
    }

    .sc-home-filters .filter-dropdown {
        width: 100%;
        padding: 12px 30px 12px 15px;
        font-size: 0.85rem;
        margin: 0 !important;
        color: white !important; /* Maximum contrast on mobile tags */
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* Stats Mobile Layout (The Modular Pulse Grid v4.0) */
    .sc-pulse-strip {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        padding: 20px !important;
        border-radius: 24px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 30px !important;
    }

    .sc-pulse-item {
        justify-content: center !important;
        border-right: none !important;
        padding-right: 0 !important;
        background: rgba(255, 255, 255, 0.04);
        padding: 15px 10px !important;
        border-radius: 15px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .sc-pulse-val {
        font-size: 1.4rem !important;
    }

    .sc-pulse-label {
        font-size: 0.6rem !important;
    }

    /* 🛡️ CRITICAL READABILITY FIX: Force Single Column for Lists (EDA v3.0) */
    .sc-grid-2,
    .sc-grid-3,
    .sc-grid-4,
    body .collection-grid,
    body #featured-projects-grid {
        grid-template-columns: 1fr !important;
        padding: 30px 15px !important;
        gap: 20px !important;
    }

    .sc-card,
    .sc-project-card,
    body .card,
    body .project-card {
        border-radius: 20px !important;
        background: rgba(15, 23, 42, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .sc-card__media,
    body .card-img-container {
        height: 240px !important;
    }

    .sc-card__media img {
        height: 100% !important;
    }

    .sc-card__body,
    body .card-content {
        padding: 20px !important;
    }

    .sc-heading-md.sc-color-primary,
    body .card-price {
        font-size: 1.6rem !important;
        margin-bottom: 5px !important;
    }

    .sc-heading-sm,
    body .card-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 10px !important;
    }

    .sc-text-muted.sc-text-xs,
    body .card-location {
        font-size: 0.85rem !important;
        opacity: 0.8;
    }

    /* Upscale Smart Info Icons (Bed, Bath, etc) */
    .smart-info-grid {
        margin-top: 15px !important;
        padding-top: 15px !important;
        gap: 12px !important;
    }

    .smart-info-item {
        font-size: 0.85rem !important;
    }

    body .smart-info-item i {
        font-size: 1.3rem !important;
    }

    /* Chatbot adjustments */
    body #ai-chat-wrapper {
        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
        right: 20px;
        z-index: 1100;
        /* Governance Applied */
    }

    body #chat-toggle-btn {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* 📱 BOTTOM NAVIGATION Styles moved to centralized system/bottom-nav.css */

    /* 🏗️ Mobile Overlay managed by Global Navbar.css */

    /* Extra padding for body to ensure content isn't hidden by Bottom Nav */
    body {
        padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    }
}

/* Extra Small Devices */
@media screen and (max-width: 480px) {
    body .hero-title {
        font-size: 2rem;
    }

    .sc-home-filters {
        grid-template-columns: 1fr !important;
    }
}