/* ==========================================================================
   MONANI DIGITAL SOLUTION — RESPONSIVE ARCHITECTURE
   Target Viewports:
   - Ultra-Wide / Large Desktop: >= 1440px
   - Standard Desktop / Laptop: 1200px – 1439px
   - Small Laptop / Tablet Landscape: 992px – 1199px (includes 1366x768, 1280x720)
   - Tablet Portrait: 768px – 991px (includes 1024x768, 820x1180)
   - Mobile: 576px – 767px
   - Small Mobile: 320px – 575px (includes 430px, 390px, 375px, 360px, 320px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. GLOBAL RESPONSIVE CONTAINERS & TOKENS
   -------------------------------------------------------------------------- */
:root {
    --page-gutter: clamp(20px, 4vw, 88px);
}

.site-container,
.container {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(18px, 3vw, 40px);
    padding-right: clamp(18px, 3vw, 40px);
}

/* --------------------------------------------------------------------------
   02. LARGE DESKTOP & ULTRA-WIDE (>= 1440px)
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) {
    .work-project-title {
        font-size: clamp(3.5rem, 5vw, 5.5rem);
    }
}

/* --------------------------------------------------------------------------
   03. STANDARD DESKTOP & LAPTOPS (1200px – 1439px)
   -------------------------------------------------------------------------- */
@media (max-width: 1439.98px) {
    .nav-links-desktop {
        gap: 1.75rem;
    }
}

/* --------------------------------------------------------------------------
   04. SMALL LAPTOP & TABLET LANDSCAPE (992px – 1199px)
   Includes 1366x768, 1280x720 Viewports
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .nav-links-desktop {
        gap: 1.25rem;
        font-size: 0.85rem;
    }
    
    .btn-mds-primary,
    .btn-mds-secondary {
        padding: 0.65rem 1.25rem;
        font-size: 0.8rem;
    }

    .project-row {
        grid-template-columns: 0.5fr 2fr 1.5fr 0.8fr 0.4fr;
    }

    .work-page-hero,
    .hero-section {
        min-height: min(70vh, 600px);
        padding-top: 130px;
    }
}

/* Low vertical height laptops (1366x768, 1280x720) */
@media (max-height: 768px) and (min-width: 992px) {
    .site-header {
        padding: 12px 0;
    }
    .hero-section,
    .work-page-hero {
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 40px;
    }
}

/* --------------------------------------------------------------------------
   05. TABLET PORTRAIT & MEDIUM SCREENS (768px – 991.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Header & Mobile Toggle */
    .site-header {
        padding: 16px 0;
    }
    .nav-links-desktop {
        display: none !important;
    }
    .mobile-toggle {
        display: flex !important;
    }

    /* Convert Home Desktop Rows to Tablet/Mobile Cards */
    .project-rows-list {
        display: none !important;
    }
    .project-preview-container {
        display: none !important;
    }
    .mobile-project-list {
        display: block !important;
    }
    .mobile-project-card {
        margin-bottom: 2rem;
    }
    .mobile-project-img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid var(--color-border);
        margin-bottom: 1rem;
    }

    /* Work Page Alternating Layout Override */
    .work-project-entry {
        padding: 70px 0;
    }
    .work-project-entry.dark-variant {
        margin: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .work-project-entry .work-project-title {
        font-size: clamp(2.4rem, 6vw, 4rem);
    }
    .work-project-media {
        aspect-ratio: 16 / 10;
        margin-top: 1.5rem;
    }

    /* Team Page Asymmetric Layout Override */
    .team-showcase-item {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Footer Adjustment */
    .site-footer {
        padding: 80px 0 32px 0;
    }
    .footer-statement {
        font-size: clamp(3rem, 9vw, 6rem);
        margin-bottom: 2.5rem;
    }
}

/* --------------------------------------------------------------------------
   06. MOBILE SCREENS (<= 767.98px)
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    :root {
        --fz-hero: clamp(2.6rem, 10vw, 4rem);
        --fz-h1: clamp(2.1rem, 7.5vw, 3.2rem);
        --fz-h2: clamp(1.75rem, 5.5vw, 2.5rem);
        --fz-h3: clamp(1.3rem, 4vw, 1.8rem);
    }

    /* General Spacing */
    main#main-content {
        padding-top: 100px !important;
    }
    .work-page-hero,
    .hero-section {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 40px;
    }

    /* Digital Route Lines Stack */
    .digital-route-line {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .digital-route-line .route-path {
        width: 30px;
    }

    /* Work Filter Bar Horizontal Scroll */
    .work-filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.85rem 0;
        gap: 1.5rem;
        scrollbar-width: none;
    }
    .work-filter-bar::-webkit-scrollbar {
        display: none;
    }
    .work-filter-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Buttons */
    .btn-mds-primary,
    .btn-mds-secondary {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.25rem;
    }

    /* Capabilities Accordion Mobile Stack */
    .capability-drawer {
        padding-left: 0;
        margin-top: 1rem;
    }

    /* Footer Bottom Alignment */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* --------------------------------------------------------------------------
   07. SMALL MOBILE SCREENS (<= 430px, 390px, 375px, 360px, 320px)
   -------------------------------------------------------------------------- */
@media (max-width: 479.98px) {
    :root {
        --fz-hero: clamp(2.3rem, 11vw, 3.4rem);
        --fz-h1: clamp(1.9rem, 8vw, 2.7rem);
        --fz-h2: clamp(1.5rem, 6.5vw, 2.2rem);
    }

    .brand-logo {
        font-size: 1.1rem;
    }

    .mobile-nav-link {
        font-size: 2.1rem;
    }

    /* Form Fields */
    .form-group-custom {
        margin-bottom: 1.25rem;
    }

    /* Budget Pills Stack */
    .budget-pills {
        gap: 0.5rem;
    }
    .budget-pill-item label {
        padding: 0.5rem 0.9rem;
        font-size: 0.775rem;
    }

    /* Footer Watermark Safety */
    .footer-bg-watermark {
        font-size: clamp(5rem, 25vw, 12rem);
        bottom: -20px;
    }
}

@media (max-width: 360px) {
    :root {
        --fz-hero: clamp(2.1rem, 12vw, 2.8rem);
    }
    .site-container,
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}