/* Mobile refinements. Loaded after every page stylesheet; desktop is untouched. */

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .challenge-section { padding: 112px 0; }
  .next-era { padding: 160px 0; }
}

@media (max-width: 640px) {
  /* Compact header: logo, actions and menu share one row. */
  .navbar .container { flex-wrap: nowrap; min-height: 64px; height: 64px; padding: 0 16px; gap: 8px; }
  .navbar .logo img { height: 28px !important; }
  .navbar .nav-right { flex-basis: auto; gap: 6px; margin-left: auto; }
  .navbar .nav-right .btn:not(.btn-primary) { display: none; }
  .navbar .nav-right .btn, .agi-nav-toggle { min-height: 40px; padding: 0 12px; font-size: .78rem; }
  .agi-nav-toggle { order: 3; margin-left: 0; }
  .navbar.agi-nav-open .nav-links { max-height: calc(100dvh - 64px); }
  .navbar.agi-nav-open .nav-links > a, .navbar.agi-nav-open .nav-item > a,
  .navbar.agi-nav-open .nav-dropdown a { display: block; min-height: 44px; padding: 12px; }

  /* Heroes: less dead space above the fold. */
  .hero, .page-hero { padding-top: 128px; padding-bottom: 64px; }
  .hero:has(.hero-content-wrap) { padding: 0; }
  .demo-hero { padding-top: 112px; }
  .simple-head { padding: 112px 0 32px; }
  .hero-content-wrap { min-height: 0; padding: 120px 20px 56px; }
  .hero h1, .page-hero h1 { font-size: clamp(2.1rem, 9.5vw, 2.75rem); overflow-wrap: break-word; hyphens: manual; text-wrap: balance; }
  .hero-actions { flex-wrap: wrap; gap: 12px; }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; min-height: 48px; }

  /* Section rhythm. */
  .section { padding: 64px 0; }
  .challenge-section, .problem-section { padding: 80px 0; }
  .next-era { padding: 104px 0; }
  .cta-band { overflow: hidden; }
  .flow-row { flex-wrap: wrap; }

  /* Readability and touch targets. */
  body { -webkit-text-size-adjust: 100%; }
  small, .eyebrow, .agi-company-label, .agi-company-topics span, .agi-check-state { font-size: max(12px, 1em); }
  footer a, .breadcrumbs a, .breadcrumb a { display: inline-block; padding: 8px 0; }
  .footer-social a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  input, select, textarea { font-size: 16px !important; } /* prevents iOS zoom on focus */
}

@media (max-width: 640px) {
  .challenge-statement { font-size: 1.4rem; line-height: 1.45; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-top > :first-child { grid-column: 1 / -1; }
}

/* Logged-in phones: keep the fixed header below the admin bar. */
@media (max-width: 782px) { .admin-bar .navbar { top: 46px; } #wpadminbar { position: fixed; } }
@media (min-width: 783px) { .admin-bar .navbar { top: 32px; } }

/* Visual frames hug their artwork on phones instead of a fixed min-height/ratio. */
@media (max-width: 640px) {
  .tech-showcase-visual, .hero-visual, .page-hero-visual, .wide-visual, .visual-box, .visual-wrap .visual-box {
    min-height: 0; aspect-ratio: auto; height: auto; padding: 0; overflow: hidden;
  }
  .tech-showcase-visual > :is(svg, img, video, div, figure, picture),
  .hero-visual > :is(svg, img, video, div, figure, picture),
  .page-hero-visual > :is(svg, img, video, div, figure, picture),
  .wide-visual > :is(svg, img, video, div, figure, picture),
  .visual-box > :is(svg, img, video, div, figure, picture) {
    width: 100%; height: auto; max-height: none; margin: 0;
  }
}

/* Inline artwork carries max-width:600px; let it fill its frame at every width. */
.tech-showcase-visual > svg { width: 100% !important; max-width: none !important; height: auto; }

/* How It Works pipeline: full-width, compact step cards on phones. */
@media (max-width: 760px) {
  .pipeline { align-items: stretch; gap: 0; }
  .pipeline-step { display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 20px; }
  .pipeline-step .step-num { flex: none; margin: 0; }
  .pipeline-connector { margin: 4px auto; height: 24px; }
}

/* Mobile menu: collapsible sections, tighter rows, caret beside the label. */
@media (max-width: 900px) {
  .navbar.agi-nav-open .nav-links { gap: 0; padding: 8px 20px 20px; }
  .navbar.agi-nav-open .nav-links > a,
  .navbar.agi-nav-open .nav-item > a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 4px; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.06); }
  .navbar.agi-nav-open .nav-item > a svg { width: 16px; height: 16px; transition: transform .2s ease; flex: none; margin-left: 12px; opacity: .8; }
  .navbar.agi-nav-open .nav-item.is-open > a svg { transform: rotate(180deg); }
  .navbar.agi-nav-open .nav-item .nav-dropdown { display: none; padding: 4px 0 10px 12px; }
  .navbar.agi-nav-open .nav-item.is-open .nav-dropdown { display: block; }
  .navbar.agi-nav-open .nav-dropdown a { min-height: 42px; padding: 10px 8px; font-size: .95rem; border: 0; }
  .navbar.agi-nav-open .nav-dropdown .nav-feature-group { margin: 0 0 4px 8px !important; }
}