/* ═══════════════════════════════════════════════════════════════
   SMART INSTALLERS — MOBILE LAYER
   Loaded AFTER styles.css on every page. Every rule is scoped to
   ≤768px. Desktop (≥769px) is never touched by this file.
   Holds: mobile design tokens, shared utilities (tap target, press
   state, safe area, snap carousel, sticky CTA) and shared-component
   mobile overrides. Per-page bespoke rules live in each page's
   inline <style>.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    /* Mobile spacing scale — collapses the desktop 80–120px section
       rhythm into a tighter, native-feeling cadence. */
    --m-space-2xs: 6px;
    --m-space-xs: 10px;
    --m-space-sm: 16px;
    --m-space-md: 24px;
    --m-space-lg: 40px;
    --m-space-xl: 56px;
    --m-space-2xl: 72px;
    /* Mobile section vertical padding (replaces 100px desktop) */
    --m-section-y: 56px;
    /* Mobile horizontal gutter */
    --m-gutter: 20px;
    /* Type scale — hard 12px floor for any label/caption */
    --m-fs-label: 12px;
    --m-fs-body: 16px;
    --m-fs-h3: clamp(22px, 6vw, 30px);
    /* Tap target minimum */
    --m-tap: 44px;
    /* iOS safe-area shorthands (0 on non-notch devices) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }

  /* ── NATIVE BASELINE ─────────────────────────────────────────── */
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }
  /* Kill the grey iOS tap flash; we provide our own press states. */
  a, button, summary, [role="button"], .btn-amber, .btn-primary,
  .btn-ghost, .btn-outline-light, .btn-outline-dark, label {
    -webkit-tap-highlight-color: transparent;
  }
  /* Inputs at <16px trigger an iOS zoom-on-focus — force the floor.
     !important + form-scoped selectors beat the per-page inline rules
     (e.g. .form-group input { font-size:14px }) that load after this. */
  input, select, textarea,
  .form-group input, .form-group textarea, .form-group select,
  .form-field input, .form-field textarea, .form-field select {
    font-size: 16px !important;
  }
  /* Momentum scrolling for any internal scroller. */
  .cert-row, [data-snap], .m-snap {
    -webkit-overflow-scrolling: touch;
  }

  /* ── TAP TARGETS ─────────────────────────────────────────────── */
  /* Anything clearly interactive meets the 44px minimum height. */
  .btn-amber, .btn-primary, .btn-ghost,
  .btn-outline-light, .btn-outline-dark, .btn-sage {
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .back-link { min-height: var(--m-tap); }

  /* ── PRESS STATES (touch feedback) ───────────────────────────── */
  /* On touch there is no hover; press feedback replaces it. The
     49-hover/2-active gap: give the common interactive surfaces a
     uniform pressed look. Transform is dropped under reduced-motion. */
  .btn-amber:active, .btn-primary:active, .btn-ghost:active,
  .btn-outline-light:active, .btn-outline-dark:active, .btn-sage:active,
  .sg-explore-card:active, .content-card:active, .division-card:active,
  .process-card:active, .audience-item:active, .cert-badge:active,
  .feature-row:active {
    transform: scale(0.98);
  }
  .content-card:active, .division-card:active, .process-card:active,
  .audience-item:active, .cert-badge:active, .sg-explore-card:active,
  .feature-row:active {
    filter: brightness(0.985);
  }
  @media (prefers-reduced-motion: reduce) {
    .btn-amber:active, .btn-primary:active, .btn-ghost:active,
    .btn-outline-light:active, .btn-outline-dark:active, .btn-sage:active,
    .sg-explore-card:active, .content-card:active, .division-card:active,
    .process-card:active, .audience-item:active, .cert-badge:active,
    .feature-row:active { transform: none; }
  }

  /* ── FULL-WIDTH STACKED CTAs ─────────────────────────────────── */
  /* Hero + CTA action rows stack to full-width thumb-friendly buttons. */
  .page-hero-actions, .cta-actions, .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .page-hero-actions > .btn-amber,
  .page-hero-actions > .btn-outline-light,
  .page-hero-actions > .btn-outline-dark,
  .page-hero-actions > a,
  .cta-actions > .btn-amber,
  .cta-actions > .btn-outline-light,
  .cta-actions > .btn-outline-dark,
  .cta-actions > a,
  .hero-actions > a {
    width: 100%;
    justify-content: center;
  }

  /* ── NAV / SAFE AREA ─────────────────────────────────────────── */
  nav { padding-top: calc(12px + var(--safe-top)); }
  .nav-mobile-toggle {
    min-width: var(--m-tap);
    min-height: var(--m-tap);
  }
  /* Drawer respects notch + home indicator, locks momentum scroll. */
  .nav-drawer {
    padding-top: calc(24px + var(--safe-top));
    padding-bottom: calc(24px + var(--safe-bottom));
    padding-right: calc(24px + var(--safe-right));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav-drawer-close { min-width: var(--m-tap); min-height: var(--m-tap); }
  /* Scroll-lock helper toggled by nav JS. */
  body.nav-open { overflow: hidden; touch-action: none; }

  /* ── SNAP CAROUSEL UTILITY ───────────────────────────────────── */
  /* Add class="m-snap" to a horizontal row to get scroll-snap with a
     peek of the next card and edge fades. Cards use .m-snap-item. */
  .m-snap {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px var(--m-gutter) 12px;
    margin: 0 calc(-1 * var(--m-gutter));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .m-snap::-webkit-scrollbar { display: none; }
  .m-snap-item {
    scroll-snap-align: center;
    flex: 0 0 84%;
  }
  /* Dot indicators (rendered by carousel JS or static markup). */
  .m-dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 16px;
  }
  .m-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--border-strong);
    border: none; padding: 0;
    transition: background 0.2s, width 0.2s;
  }
  .m-dot.is-active { background: var(--sage); width: 20px; border-radius: 4px; }

  /* ── STICKY BOTTOM CTA ───────────────────────────────────────── */
  /* Optional component: <div class="m-sticky-cta"><a ...>…</a></div> */
  .m-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    padding: 12px var(--m-gutter);
    padding-bottom: calc(12px + var(--safe-bottom));
    background: rgba(20,39,71,0.92);
    backdrop-filter: blur(14px) saturate(1.2);
    border-top: 1px solid rgba(247,246,243,0.1);
    display: flex; gap: 10px;
    transform: translateY(110%);
    transition: transform 0.35s var(--ease-out);
  }
  .m-sticky-cta.is-visible { transform: translateY(0); }
  .m-sticky-cta > a, .m-sticky-cta > .btn-amber {
    flex: 1;
    min-height: var(--m-tap);
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SHARED-COMPONENT MOBILE OVERRIDES (≤768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 12px TYPE FLOOR ──────────────────────────────────────────
     Recurring bespoke labels/tags/indices/meta that the audit found
     rendering at 9–11.5px. Hard floor at 12px. !important is required
     because these are defined in each page's inline <style>, which is
     later in source order than this file. */
  .md-related-card-index, .md-impacts-tag, .sensor-card-name,
  .md-stat-label, .feature-label, .ai-flow-label, .ai-cap-step,
  .ai-cap-metric-label, .delivery-chain-head-title,
  .delivery-chain-head-kicker, .timeline-label, .cert-desc,
  .platform-feat-tag, .partner-panel-tag, .sensor-card-tag,
  .ledger-row-stat-label, .partner-panel-meta, .cap-meta-label,
  .phv-desk-url, .dash-url, .hd-chip-label, .cert-eyebrow,
  .realtime-live-badge, .ledger-foot-label, .sr-compliance-chip,
  .ta-syllabus-header-label, .ta-syllabus-header-meta,
  .void-stat-foot, .num, .delivery-chain-foot span,
  .md-breadcrumb a, .md-breadcrumb span, .wwm-card-index span,
  .editorial-band-body ol li > span:first-child {
    font-size: 12px !important;
  }

  /* Sensor-page breadcrumb link: also a 36px-tall tap target. */
  .md-breadcrumb a {
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
  }

  /* ── MAPBOX CONTROLS (index map) ──────────────────────────────
     Default Mapbox nav buttons are 29×29px — below the 44px tap
     minimum. The audit can't see them (no text node), so fix here. */
  .mapboxgl-ctrl-group button,
  .mapboxgl-ctrl button {
    width: 44px !important;
    height: 44px !important;
  }
  .mapboxgl-ctrl-group { border-radius: 10px !important; }
  .mapboxgl-ctrl button .mapboxgl-ctrl-icon { transform: scale(1.15); }

  /* ── TAP TARGETS: footer + drawer links to 44px ──────────────── */
  /* Footer column links rendered at ~41px (15px font + 8px×2 pad). */
  .footer-col ul li a {
    min-height: var(--m-tap);
    display: inline-flex;
    align-items: center;
  }
  /* Nav-drawer submenu links rendered at ~43px (14px font + 10px×2). */
  .nav-drawer-group ul li a {
    min-height: var(--m-tap);
    display: flex;
    align-items: center;
  }

  /* ── HERO REVEAL: kill flash-of-empty above the fold ──────────
     Hero content uses [data-reveal]/.rw which start at opacity:0 and
     reveal on intersection — fine below the fold, but above the fold
     it flashes empty on first paint. On mobile, show hero content
     immediately. Below-fold reveals still animate (they start
     off-screen, so no flash). */
  .page-hero [data-reveal],
  .hero [data-reveal],
  .page-hero .rw,
  .hero .rw,
  .hero-line,
  .hero-sub,
  .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  /* ── SECTION HEADER: label + meta stack ───────────────────────
     The "label / meta" two-part section headers (.sensors-header,
     .delivery-chain-head) are flex space-between on desktop. On a
     phone the two halves collide — the CTA button overlaps the
     heading and the kicker jams against the title. Stack them. */
  .sensors-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
  }
  .sensors-header .btn-sage {
    align-self: flex-start !important;
    width: auto !important;
    flex: 0 0 auto;
  }
  .delivery-chain-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  /* ── PLATFORM FEATURE SPLIT: collapse to one column ───────────
     .platform-grid (Smart Monitor "one dashboard" section) is a
     5fr/7fr split that never collapsed on mobile, leaving the
     feature list crushed into a ~40% column. Stack it. */
  .platform-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    margin-top: 40px !important;
  }

  /* ── CAP LIST: prevent numbered-row clipping ──────────────────
     .cap-row (Smart Void "our approach" list) keeps an 80px number
     column on mobile; the 1fr body then can't shrink (grid items
     default to min-width:auto) and the heading overflows the card,
     which has overflow:hidden — so titles get clipped. Tighten the
     number column, allow the body to shrink, and trim card padding. */
  /* ── SMART PLATFORM HERO: drop the broken isometric mockup ─────
     .platform-hero-visual is a CSS-constructed isometric dashboard
     (.phv-desk layers) that relies on aspect-ratio + absolutely
     positioned children. On mobile it collapses to a 2px sliver,
     leaving a stray vertical line above the centred hero text.
     The text hero stands alone on mobile — hide the artifact. */
  .platform-hero-visual { display: none !important; }

  /* ── SMART PLATFORM HERO: re-centre the text ──────────────────
     .page-hero is a centred column flex, so its child .section-inner
     sizes to max-content. With the title spans set to white-space:
     nowrap and the grid carrying 32px side padding on top of the
     hero's 20px gutter, the longest line ("Smarter Monitoring.",
     ~327px at 36px) forces the flex item ~56px wider than the
     viewport. It can't centre, so it pins left and the whole hero
     drifts right. Pin the flex item to 100%, drop the redundant grid
     padding (the hero gutter already provides it), and scale the
     title to a width that fits the narrowest phones. */
  .page-hero > .section-inner:has(.platform-hero-grid) { width: 100%; }
  .page-hero .platform-hero-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-hero .platform-hero-title { font-size: clamp(27px, 8vw, 36px) !important; }

  .cap-list { padding-left: 20px !important; padding-right: 20px !important; }
  .cap-row {
    grid-template-columns: 44px 1fr !important;
    gap: 16px !important;
  }
  .cap-row-body { min-width: 0 !important; }
  .cap-row-body h3 { font-size: 19px !important; overflow-wrap: break-word; }
}