/* ============================================================
   Colendi AI — Mobile / Responsive layer
   Loaded LAST in <head>, after each page's inline <style>.
   Single source of truth for the phone & small-tablet experience.
   Desktop (>900px) is untouched. Uses !important only where it
   must beat inline section rules (padding shorthands, fixed grids).
   ============================================================ */

/* ---- Global mobile hygiene ---- */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }

/* ============================================================
   TIER 1 — Tablet & down (<= 900px)
   ============================================================ */
@media (max-width: 900px) {
  /* Prevent iOS focus auto-zoom: form controls must be >= 16px */
  input, select, textarea,
  .field input, .field select, .field textarea { font-size: 16px !important; }

  /* Sticky sub-nav must clear the fixed nav: 601-900 nav is 88px tall
     (22px padding x2 + 44px menu-btn); <=600 nav shrinks to 64px */
  .jumpbar { top: 88px !important; }

  /* hamburger appears from 900px down — give it its tap size here, not just <=600 */
  .menu-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 !important;
  }
  .mobile-menu { padding-left: 24px !important; padding-right: 24px !important; }
  /* single-column card paragraphs on tablets need a reading measure */
  .card p, .value-card p, .feature p, .gov p { max-width: 62ch; }
  .hero-stats div { padding: 0 24px; }
  /* industry heroes keep 72vh on tablets otherwise */
  .hero:not(:has(.hero-stats)) { min-height: auto !important; padding-top: 130px !important; padding-bottom: 70px !important; }

  /* Latent desktop mega-menu grid can never force width on small screens */
  .mega-grid { grid-template-columns: 1fr !important; }
  .mega-inner { padding-left: 24px !important; }
}

/* ============================================================
   TIER 2 — Phone (<= 600px)  ·  the main mobile system
   ============================================================ */
@media (max-width: 600px) {

  /* ---- 1. CONSISTENT GUTTERS ----
     One 20px gutter everywhere. !important defeats every section
     class that combines with .container and zeroes its padding
     (.statement.container, .cases.container, .stat-strip.container,
      .statement-sec.container, .family.container, .press-featured…). */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100% !important;
  }
  /* full-bleed sections whose OWN padding shorthand kills side padding */
  .statement, .statement-sec, .cases, .logos, .industries, .team,
  .cta, .press-featured, .family, .stat-strip, .mind, .values, .band,
  .cards, .platform, .more, .arch-band, .timeline-band {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Some of the above sections wrap content in an INNER <div class="container">,
     so the section (20px) AND the inner container (20px) stack to a 40px inset —
     a visible 20<->40 gutter zig-zag vs combined-class .X.container sections.
     Where a direct .container child already supplies the gutter, zero the
     section's own side padding -> a single uniform 20px everywhere. Combined
     .X.container sections have no inner .container child, so they never match
     here and keep their 20px (no flush risk). */
  .statement:has(> .container), .cases:has(> .container), .logos:has(> .container),
  .industries:has(> .container), .team:has(> .container), .cta:has(> .container),
  .press-featured:has(> .container), .family:has(> .container), .stat-strip:has(> .container),
  .mind:has(> .container), .values:has(> .container), .band:has(> .container),
  .cards:has(> .container), .platform:has(> .container), .more:has(> .container),
  .arch-band:has(> .container), .timeline-band:has(> .container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---- 2. VERTICAL RHYTHM ----  kill the 110–170px dead space */
  /* homepage immersive hero: stable full viewport height, content centered */
  .hero:has(.hero-stats) {
    min-height: 100svh;
    padding-top: 92px !important;
    padding-bottom: 52px !important;
  }
  /* secondary / industry heroes (no stats): height driven by content,
     no giant empty band from a tall min-height on a phone */
  .hero:not(:has(.hero-stats)) {
    min-height: auto !important;
    padding-top: 104px !important;
    padding-bottom: 44px !important;
  }
  .page-hero  { padding-top: 96px !important; padding-bottom: 40px !important; min-height: 0 !important; }
  /* the bobbing scroll cue lands on the last hero stat once the hero grows past 100svh */
  .scroll-cue { display: none !important; }
  /* moved from index.html inline media blocks (tier discipline) */
  .hero-stats { flex-direction: column; gap: 20px; margin-top: 54px; }
  .hero-stats div { padding: 0; border-left: none; }
  .hero-stats strong { font-size: 26px; }
  .industry-grid { grid-template-columns: 1fr !important; }
  .article-hero { padding-top: 92px !important; padding-bottom: 28px !important; }
  .featured   { padding-top: 96px !important; padding-bottom: 44px !important; }
  .statement, .statement-sec, .band, .cards, .platform, .industries,
  .team, .values, .mind, .arch-band, .timeline-band, .logos, .more,
  .press-featured, .cases, .tc-section, .gov-band, .family, .layers, .proof {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
  .legal { padding-bottom: 60px !important; }
  .cert-grid { grid-template-columns: 1fr !important; }
  .post-grid { grid-template-columns: 1fr !important; }
  /* industry heroes (no stats) get the page-hero mobile type scale */
  .hero:not(:has(.hero-stats)) h1 { font-size: clamp(30px, 8.5vw, 44px) !important; }
  /* heading→content gaps on industry/section grids */
  .value-grid, .feature-grid, .mind-grid { margin-top: 38px !important; }
  /* industry pages: values+mind grouped pair stays fused on phones */
  .values + .mind { padding-top: 0 !important; }
  /* industry pages: proof cards stack */
  .proof-grid { grid-template-columns: 1fr !important; }
  /* platform: layer index rows collapse to number + content */
  .lrow { grid-template-columns: 40px 1fr !important; gap: 8px 16px !important; }
  .lrow p { grid-column: 2; }
  .cards .card-grid { margin-top: 32px !important; }
  .statement-sec + .cards { padding-top: 0 !important; }
  /* timeline variant with a .sub line under the h2 (deployment) */
  .timeline-band h2:has(+ .sub) { margin-bottom: 24px !important; }
  .timeline-band .sub { margin-bottom: 40px !important; }
  /* industry .platform sections have their own .sub — homepage rule was too broad */
  .platform h2:has(+ .sub) { margin-bottom: 26px !important; }
  /* email links need a 44px tap area */
  .contact-emails a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  /* homepage product-directory links need tap height too */
  .dir-item { padding-top: 15px !important; padding-bottom: 15px !important; }
  .pv-dir { height: auto !important; }
  /* trust-center: desktop-only gap above the governance band */
  .gov-band { margin-top: 0 !important; }
  .family + .family { padding-top: 0 !important; }
  .contact-info h1 { font-size: clamp(30px, 8.5vw, 44px) !important; }
  .logo-cell { font-size: 13px !important; }
  .cta { padding-top: 72px !important; padding-bottom: 72px !important; margin-top: 0 !important; }
  article, .article { padding-top: 40px !important; padding-bottom: 60px !important; }
  .contact-wrap { padding-top: 96px !important; padding-bottom: 64px !important; }
  /* last content section before the CTA kept a 110-120px desktop bottom pad,
     producing a ~180px empty band above the CTA on a phone — trim the bottom
     only (leave their top padding untouched) */
  .pillar-links, .listing { padding-bottom: 60px !important; }

  /* trim oversized internal gaps between heading and content */
  .platform h2 { margin-bottom: 40px !important; }
  .platform h2:has(+ .plead) { margin-bottom: 14px !important; }
  .platform .plead { margin-bottom: 44px !important; }
  .cases h2, .industries h2, .team h2, .values h2 { margin-bottom: 26px !important; }
  .timeline-band h2 { margin-bottom: 40px !important; } /* was 76px desktop gap */
  .pillar { padding-top: 32px !important; padding-bottom: 32px !important; }

  /* ---- 3. TYPOGRAPHY ----  legible, wraps, never overflows ---- */
  h1, h2, h3, p, li { overflow-wrap: break-word; }
  .page-hero h1 { font-size: clamp(30px, 8.5vw, 44px) !important; }
  .statement p, .statement-sec p { font-size: clamp(23px, 6.6vw, 30px) !important; }

  /* ---- 4. NAV + TAP TARGETS (>=44px) ---- */
  .jumpbar { top: 64px !important; }
  .jumpbar .container { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .jumpbar .container::-webkit-scrollbar { display: none; }
  .jump { white-space: nowrap; }
  nav { padding-top: 10px !important; padding-bottom: 10px !important; }
  .menu-btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 !important;
  }
  .mobile-menu { padding-left: 24px !important; padding-right: 24px !important; }
  .mobile-menu a { padding-top: 12px !important; padding-bottom: 12px !important; }
  .footer-grid li { margin-bottom: 2px !important; }
  .footer-grid li a { display: inline-block; padding: 8px 0; }
  /* section-nav (products) & filter (case-studies) pills → 44px tap height */
  .jump, .filter { min-height: 44px !important; display: inline-flex !important; align-items: center; }

  /* ---- 5. FOOTER: single column ---- */
  .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }

  /* ---- 6. STACK PAIRED CTAS full-width ---- */
  .hero-actions, .team-actions,
  div[style*="display:flex"][style*="gap:14px"] {
    flex-direction: column !important; align-items: stretch !important;
    width: 100%; flex-wrap: wrap;
  }
  .hero-actions .btn, .team-actions .btn { width: 100%; justify-content: center; }

  /* ---- 7. OVERFLOW CONTAINMENT (real bugs, previously clipped) ---- */
  /* homepage pillar console: fit + wrap instead of nowrap clip */
  .pillar-visual, .pv-console { width: 100% !important; max-width: 100% !important; }
  /* the console is a fixed-height 300px "terminal". Its 8 hardcoded log lines
     fit nowrap (~298px). An earlier fix forced them to WRAP, which blew the
     content to ~455px and spilled it onto the next section. Keep them nowrap
     (they fit the full-width card now) and clip any residual at tiny widths. */
  .pv-console { overflow: hidden !important; }
  .console-body { font-size: 11px !important; }
  .console-body .a { min-width: 60px !important; }
  .pf-card { min-height: 0 !important; }
  .console-body .ln { white-space: nowrap !important; }
  .dir-item { margin-left: 0 !important; margin-right: 0 !important; }
  /* platform trace rows stack */
  .trace-row { flex-direction: column !important; gap: 2px !important; }
  .trace-row .k { min-width: 0 !important; }
  /* industries: cards go single column (were cramped 2-col to 360px) */
  .mind-grid { grid-template-columns: 1fr !important; }
  /* homepage brand logo grid: 3 columns x 2 rows on mobile */
  .logo-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* stat strip (about-us etc.): stack the stats vertically instead of an
     uneven wrapping row */
  .stat-strip .row { flex-direction: column !important; }
  .stat-strip .row div { padding: 14px 0 !important; border-left: none !important; }
  .stat-strip .row div:first-child { padding-top: 0 !important; }

  /* ---- 8. PRODUCTS mockups: no clipped text ---- */
  .ps-meta, .ps-nd, .ps-line, .ps-tabs, .ps-track, .ps-cols { min-width: 0 !important; }
  .ps-meta > *, .ps-nd span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---- 9. case-studies: card height driven by content ---- */
  .featured-card { min-height: 0 !important; }
  .post-thumb { height: 160px !important; }

  /* 404 / any full-height body: stable dynamic viewport unit */
  body { min-height: 100svh; }
}

/* ============================================================
   TIER 3 — Small phone (<= 360px)
   ============================================================ */
@media (max-width: 360px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  .statement, .statement-sec, .cases, .logos, .industries, .team, .cta,
  .press-featured, .family, .stat-strip, .mind, .values, .band, .cards,
  .platform, .more, .arch-band, .timeline-band {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  /* keep the trusted-by logos as a 2x3 grid even on small phones (was 1 column) */
}

/* ============================================================
   Reduced motion — global safety layer (all pages, all widths)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}
