/* ===================================================================
   Aurora — mobile layout fixes (real-phone pass)
   Loads LAST (after blueprint-sections.css) so equal-specificity rules
   here win by source order. Three root causes fixed:

   1. JA `word-break: keep-all` headings gave the hero grid column a
      min-content wider than the phone viewport (487px on a 402px
      screen), pushing every hero child past the right edge. Grid
      tracks size to item min-content unless items get min-width: 0.
   2. The use-cases subgrid (`grid-row: 1 / -1` per card) assumes the
      3-column desktop grid; once columns collapse to one, equal row
      spans force the three cards into implicit side-by-side columns
      that run off-screen.
   3. The fixed navbar is ~97px tall on mobile while the hero's
      padding-top bottomed out at 96px — zero clearance, so the badge
      and headline sat under the nav.
   =================================================================== */

/* Anchor jumps (URL #fragments, :target) clear the fixed nav even
   without main.js's offset math. */
html {
  scroll-padding-top: 108px;
}

/* Grid items default to min-width:auto and refuse to shrink below
   their min-content, inflating tracks past the viewport. Opt the
   column-content out of that everywhere it bit. */
.hero .hero-content > *,
.crisis-grid > .crisis-card,
.use-cases-grid > .use-case-card {
  min-width: 0;
}

/* Use cases: drop the desktop subgrid once the grid stacks (style.css
   collapses .use-cases-grid to one column at ≤1024px). */
@media (max-width: 1024px) {
  .use-cases-grid {
    grid-template-rows: none;
  }
  .use-cases-grid > .use-case-card {
    grid-row: auto;
    grid-template-rows: none;
  }
}

@media (max-width: 768px) {
  /* Slimmer fixed nav on phones: 52px row + 10px padding ≈ 73px. */
  .navbar {
    padding: 0.625rem 0;
  }
  .navbar .nav-wrapper {
    height: 52px;
  }

  /* Hero clears the nav with real breathing room. */
  .hero {
    padding-top: 118px;
  }

  /* Blueprint grid backdrop: keep the top band as a hint, fade it out
     before the subheadline/body so no lines run through text. */
  .hero::before {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 42%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 42%);
    opacity: 0.55;
  }

  /* Crisis cards: single column may not inflate past the container
     (track min is the largest card's min-content otherwise). */
  .crisis-grid {
    grid-template-columns: minmax(0, 1fr);
  }

}

/* Crisis visuals: the 3-item flex rows (Gmail | ⃠ | Copilot and
   Sensitive Data → Public AI) need ~380px; below that squeezed boxes
   wrapped JA labels one character per line. Stack vertically wherever
   the card is narrow: single-column phones AND the 2-column tablet
   range, where each crisis column is only ~345px wide. */
@media (max-width: 1024px) {
  .walled-garden,
  .shadow-ai-flow {
    flex-direction: column;
  }
  .arrow-danger i {
    display: inline-block;
    transform: rotate(90deg);
  }
}