/* Sphinx — global mobile fixes
   ALL rules below are gated to ≤900px or ≤768px / ≤540px / ≤480px.
   None of these media queries fire on desktop viewports (>900px),
   so the desktop layout is unchanged. */

/* P0 #3 — Horizontal-overflow safety net.
   IMPORTANT: must use `overflow-x: clip` (NOT `hidden`). `hidden` creates a
   scrolling context that breaks `position: sticky` for any descendant —
   including the AxIS baseline page's scroll-driven Success Formula stack
   assembly, which has an inline comment in its source warning about this. */
html, body { overflow-x: clip; }

@media (max-width: 1024px) {
    /* P1 #4 — AxIS Counterintelligence 4-up grids collapse 4 → 2 */
    .impact-row,
    .layer-capabilities { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 900px) {
    /* P1 #8 — anchor-target offset for the 60px mobile navbar */
    section[id],
    div[id] { scroll-margin-top: 76px; }
}

@media (max-width: 768px) {
    /* P1 #7 — footer link touch targets */
    .footer-col li { padding: 0.6rem 0 !important; }
    .footer-col h5 { margin-bottom: 0.85rem !important; }

    /* P2 #9 — drop the hero visual letterboxing minimum */
    .sx-service-hero .sx-sh-visual { min-height: 0 !important; }

    /* P2 #12 — About vehicle card text doesn't overflow */
    .sx-vehicle-card .wm-primary { font-size: clamp(18px, 4vw, 30px) !important; }
    .sx-vehicle-card .wm-secondary { font-size: clamp(11px, 2.5vw, 13px) !important; }
}

@media (max-width: 580px) {
    /* P2 #10 — hero h1 floor lowered so long titles don't blow up at 360-580px.
       Slope (5.5vw) and max (72px) match the existing clamp, so desktop is
       unchanged; only the lower bound shifts from 44px to 32px. */
    .sx-service-hero h1 { font-size: clamp(32px, 5.5vw, 72px) !important; }
}

@media (max-width: 540px) {
    /* P1 #6 — AAD + CORE + general tier rows collapse 2 → 1 */
    .sx-impact-row,
    .sx-ops-grid,
    .sx-tier-row { grid-template-columns: 1fr !important; }

    /* P1 #4 (cont.) — AxIS CI 4-up grids fully collapse on phone */
    .impact-row,
    .layer-capabilities { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    /* P1 #5 — homepage serve-grid + stats fully collapse on small phones */
    .serve-grid,
    .brand-strip .stats { grid-template-columns: 1fr !important; }
}

/* AxIS Baseline — keep the comparison pairs side-by-side at narrow widths.
   The in-page 1024px collapse stacks red → arrow → cyan vertically, which
   loses the visual pairing of Fragmented↔Integrated etc. Override so each
   row keeps both cards next to each other with a thin arrow between. */
@media (max-width: 900px) {
    .compare-head,
    .compare-row {
        grid-template-columns: 1fr 18px 1fr !important;
        gap: 6px !important;
    }
    .compare-arrow {
        transform: none !important;
        padding: 0 !important;
        font-size: 14px !important;
    }
    .compare-card { padding: 0.6rem 0.7rem !important; }
    .compare-label { font-size: 13.5px !important; line-height: 1.15 !important; margin-bottom: 0.2rem !important; }
    .compare-sub { font-size: 11.5px !important; line-height: 1.35 !important; }
    .compare-side { padding: 0.9rem 0.85rem !important; }
    .compare-title { font-size: 17px !important; margin-bottom: 0.5rem !important; }
    .compare-head-q { font-size: 12.5px !important; line-height: 1.3 !important; }
    .compare-kicker { font-size: 9.5px !important; margin-bottom: 0.3rem !important; }
    .compare-card.red,
    .compare-card.cyan { text-align: left !important; }
    .compare-card.cyan {
        border-right: 3px solid #00AEE6 !important;
        border-left: 0 !important;
    }
    .compare-right {
        border-right: 3px solid #00AEE6 !important;
        border-left: 0 !important;
        text-align: left !important;
        grid-column: 3 !important;
    }
    .compare-left { text-align: left !important; }
}

/* What's New hero graphic — the page-local rule pins it to 480px wide with
   max-width:none, so on a ~390px iPhone the globe SVG overflows the viewport
   and gets clipped by `overflow-x: clip`. Force the container to fit the
   viewport on mobile. */
@media (max-width: 900px) {
    .sx-emblem-hero.has-globe .sx-eh-graphic {
        width: min(360px, 82vw) !important;
        max-width: 82vw !important;
    }
    .sx-emblem-hero.has-globe .sx-eh-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* What's New — reduce oversized featured-stat + tighten paddings on mobile
   so featured post + grid cards don't overflow. */
@media (max-width: 768px) {
    .featured-stat .stat-big { font-size: 48px !important; }
    .featured-stat .stat-kicker { font-size: 11px !important; }
    .featured-stat .stat-sub { font-size: 11px !important; }
    .featured-stat { padding: 20px !important; }
    .featured-post-image { min-height: 220px !important; }
    .featured-post-content { padding: 24px !important; }
    .featured-post h2 { font-size: 22px !important; line-height: 1.2 !important; }
    .post-card-content { padding: 18px !important; }
    .post-card h3 { font-size: 16px !important; line-height: 1.25 !important; }
    .post-card p { font-size: 13px !important; }
    .post-card-image .pc-glyph { font-size: 32px !important; }
    .category-filter { gap: 8px !important; margin-bottom: 32px !important; }
    .filter-btn { padding: 8px 14px !important; font-size: 12.5px !important; }
}

/* About hero pillars — collapse the 4-up pillar strip to a 2x2 grid at narrow
   viewports so "INTELLIGENCE" / "DEVELOPMENT" don't get cut off inside the
   ~330px hero container. `!important` is required because about.html has
   per-element font-size rules outside any media query that would otherwise
   override the in-page mobile rule. */
@media (max-width: 560px) {
    .sx-emblem-hero.has-origins .sx-eh-graphic .about-pillars {
        grid-template-columns: repeat(2, 1fr) !important;
        row-gap: 10px !important;
        left: 18px !important;
        right: 18px !important;
        bottom: 18px !important;
        padding-top: 12px !important;
    }
    .sx-emblem-hero.has-origins .sx-eh-graphic .about-pillar {
        padding: 4px 10px !important;
    }
    .sx-emblem-hero.has-origins .sx-eh-graphic .about-pillar:nth-child(2) { border-right: none !important; }
    .sx-emblem-hero.has-origins .sx-eh-graphic .about-pillar:nth-child(3) { border-right: 1px solid rgba(0,174,230,.18) !important; }
    .sx-emblem-hero.has-origins .sx-eh-graphic .about-pillar .name {
        font-size: 11.5px !important;
        letter-spacing: .03em !important;
    }
    .sx-emblem-hero.has-origins .sx-eh-graphic .about-pillar .num {
        font-size: 9.5px !important;
        letter-spacing: .18em !important;
    }
}