/* ============================================================
   DESIGNX STUDIO — Mobile Vertical Override v1.0
   Forces vertical stacking on all inline-style grids & flex rows
   that cannot be targeted through class-based responsive rules.
   Applied AFTER responsive.css so specificity wins.
   ============================================================ */

/* ─────────────────────────────────────────────────────────
   UNIVERSAL RULE: At ≤768px, ALL multi-column CSS grids
   defined via inline style become a single column.
   We target the most common parent selectors.
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── About page: Studio Story 2-col → 1-col ── */
    /* "display: grid; grid-template-columns: 1fr 1fr; gap: 6rem" */
    .container-wide > div[style*="grid-template-columns: 1fr 1fr"],
    .container-wide > div[style*="grid-template-columns:1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* ── About page: 3 Values columns → 1-col ── */
    .container-wide > div[style*="grid-template-columns: repeat(3, 1fr)"],
    .container-wide > div[style*="grid-template-columns:repeat(3, 1fr)"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    /* ── Tieups page: Header editorial 7fr 5fr → 1-col ── */
    div[style*="grid-template-columns: 7fr 5fr"],
    div[style*="grid-template-columns:7fr 5fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* ── Tieups page: Global Footprint metrics 4-col → 2-col ── */
    div[style*="grid-template-columns: repeat(4, 1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
        padding: 1.75rem !important;
    }

    /* ── Tieups: Exhibition rows 5fr 7fr → column ── */
    .tieup-exhibition-row,
    div[style*="grid-template-columns: 5fr 7fr"],
    div[style*="grid-template-columns:5fr 7fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        padding: 1.75rem !important;
    }

    /* Image frame in tieup rows */
    .tieup-image-frame,
    div[style*="max-width: 390px; height: 485px"] {
        max-width: 100% !important;
        height: 280px !important;
    }

    /* Location + button row in tieup card footer → stack */
    div[style*="justify-content: space-between; align-items: center; padding-top: 1.5rem"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* ── Tieups: Freelance designers header 1.3fr 1fr → col ── */
    div[style*="grid-template-columns: 1.3fr 1fr"],
    div[style*="grid-template-columns:1.3fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* ── Tieups: Freelance 4-col grid → 2-col ── */
    div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
    div[style*="grid-template-columns:repeat(4, minmax(0, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    /* ── Tieups: Bespoke Sourcing section 5fr 7fr → col ── */
    div[style*="grid-template-columns: 5fr 7fr"],
    div[style*="grid-template-columns:5fr 7fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2.5rem !important;
    }

    /* ── Tieups: 2-col feature cards inside sourcing → col ── */
    div[style*="grid-template-columns: 1fr 1fr; gap: 2rem"],
    div[style*="grid-template-columns:1fr 1fr; gap: 2rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.25rem !important;
    }

    /* ── Dossier modal: 4fr 8fr side-by-side → col ── */
    div[style*="grid-template-columns: 4fr 8fr"],
    div[style*="grid-template-columns:4fr 8fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    /* Modal image section: center and shrink */
    div[style*="grid-template-columns: 4fr 8fr"] > div:first-child {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
    }
    #modalImg {
        width: 90px !important;
        height: 110px !important;
    }

    /* ── Dossier modal bottom: location + button → col ── */
    div[style*="justify-content: space-between; align-items: center; font-size: 0.85rem"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* ── Projects page: portfolio grid minmax(420px) → 1-col ── */
    div[style*="grid-template-columns: repeat(auto-fill, minmax(420px, 1fr))"],
    div[style*="grid-template-columns:repeat(auto-fill, minmax(420px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }
    /* Project card image height */
    #portfolio-grid .project-image-box {
        height: 260px !important;
    }

    /* ── Services/About: about image height ── */
    div[style*="height: 700px"] {
        height: 260px !important;
    }

    /* ── About: large image section ── */
    div[data-tilt][style*="height: 700px"] {
        height: 240px !important;
    }

    /* ── About page: tieup hero card (services index) ── */
    div[style*="grid-template-columns: 6fr 6fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* ── About: Tieup hero card image ── */
    .tieup-hero-img-box {
        height: 240px !important;
    }

    /* ── Journal: 1fr 1fr grid → col ── */
    div[style*="grid-template-columns: 1fr 1fr; gap: 3rem"],
    div[style*="grid-template-columns: 1fr 1fr; gap: 4rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* ── Project detail: 4fr 8fr info grid → col ── */
    div[style*="grid-template-columns: 4fr 8fr; gap: 6rem"],
    div[style*="grid-template-columns: 4fr 8fr; gap: 3rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }

    /* ── Project detail: 1fr 1fr photo grid → col ── */
    div[style*="grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 4rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* ── Services: 3-col service cards → col ── */
    div[style*="grid-template-columns: repeat(3, 1fr); gap: 2.5rem"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    /* ── World capitals ticker → wrap tightly ── */
    div[style*="justify-content: space-between; flex-wrap: wrap"] {
        justify-content: center !important;
        gap: 0.5rem 1rem !important;
        font-size: 0.65rem !important;
        padding: 1rem !important;
    }

    /* ── Tieup filter buttons → tighter wrap ── */
    #tieup-filters,
    #portfolio-filters {
        gap: 0.5rem !important;
        padding-bottom: 1rem !important;
        margin-bottom: 2rem !important;
    }
    #tieup-filters button,
    #portfolio-filters button {
        padding: 0.5rem 1rem !important;
        font-size: 0.72rem !important;
    }

    /* ── Footer bottom flex row → col ── */
    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    /* ── Philosophy bullets 2-col → 1-col ── */
    .philosophy-bullets {
        grid-template-columns: 1fr !important;
    }
}

/* ─── 480px: further tighten ───────────────────────────── */
@media (max-width: 480px) {
    /* 4-col metrics → 2-col on all small phones */
    div[style*="grid-template-columns: repeat(4, 1fr)"],
    div[style*="grid-template-columns:repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Freelance 4-col → 1-col */
    div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"],
    div[style*="grid-template-columns:repeat(4, minmax(0, 1fr))"] {
        grid-template-columns: 1fr !important;
    }

    /* Large heading clamp override */
    h1[style*="font-size: clamp(3.5rem"] {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }
    h1[style*="font-size: clamp(3.25rem"] {
        font-size: clamp(1.9rem, 9vw, 2.75rem) !important;
    }

    /* Dossier image row → stacked small */
    div[style*="grid-template-columns: 4fr 8fr"] > div:first-child {
        flex-direction: column !important;
    }
    #modalImg {
        width: 100% !important;
        height: 160px !important;
        object-fit: cover !important;
    }

    /* Tieup exhibition row padding */
    .tieup-exhibition-row {
        padding: 1.25rem !important;
    }

    /* Tieup image frame */
    .tieup-image-frame,
    div[style*="max-width: 390px; height: 485px"] {
        height: 220px !important;
    }

    /* Hero h1 large override */
    div[style*="height: 700px"] {
        height: 200px !important;
    }
}

/* ─── Ensure inline display:flex rows with space-between stack ─ */
@media (max-width: 640px) {
    /* Section header editorial with space-between */
    .section-header-editorial {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1.25rem !important;
        margin-bottom: 2.5rem !important;
    }

    /* btn-primary-editorial full width in stacked rows */
    .tieup-exhibition-row .btn-primary-editorial {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Hero CTA group → col */
    .hero-slide-cta {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}