/* ══════════════════════════════════════════════════════════════════════════
   Galaxy Med — responsive layer
   Loaded by every page after the design-system stylesheet.

   The prototypes lay everything out with inline styles, so the overrides here
   have to carry !important. Layouts are matched on the *property* name
   (`[style*="grid-template-columns"]`) wherever possible: support.js parses
   each inline style string into a React style object, so a value authored as
   `repeat(3,1fr)` reaches the DOM re-serialised by the CSSOM as
   `repeat(3, 1fr)`. Where a value has to be matched, both spellings are
   listed together in an :is().

   Breakpoints
     1100px — small laptop: five- and four-up card rows thin out
      900px — tablet / phone: desktop nav swaps for the drawer, layouts stack
      640px — phone: one column throughout, type steps down
   ══════════════════════════════════════════════════════════════════════════ */

html { -webkit-text-size-adjust: 100%; }

/* Touch devices keep the lift-on-hover state stuck after a tap. */
@media (hover: none) {
  .btn:hover { transform: none !important; box-shadow: none !important; }
}

/* ── 1100px ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :is([style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  :is([style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Documentation — drop the "On this page" rail, keep guides + article. */
  [style*="190px"] { grid-template-columns: 250px minmax(0, 1fr) !important; }
  article[data-screen-label="Docs article"] + aside { display: none !important; }
}

/* ── 900px ──────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { overflow-x: hidden !important; }

  /* Header: the inline links and the hover mega-panels are desktop-only —
     everything they linked to lives in the drawer (mobile-nav.js). */
  header > .nav > nav { display: none !important; }
  header > div:not(.nav) { display: none !important; }
  header .nav { padding-right: 56px !important; }
  .gm-mnav-toggle { display: flex !important; }

  /* Every multi-column layout collapses … */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* … except card rows, which stay two-up … */
  :is([style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
      [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
      [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
      [style*="1fr 1fr"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* … and the hero stat strip, which only reads as a row. */
  :is([style*="repeat(3,auto)"], [style*="repeat(3, auto)"]) {
    grid-template-columns: repeat(3, auto) !important;
  }

  /* Split panels: the divider between two halves belongs under the top one
     once they are stacked. */
  [style*="border-right"] {
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-divider) !important;
  }
  section[data-screen-label="Partners"] [style*="border-right"] {
    border-bottom: 0 !important;
    padding-right: 0 !important;
  }

  /* Section headers — heading plus uppercase kicker on one baseline. */
  :is([style*="align-items:baseline"], [style*="align-items: baseline"]) {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }

  /* Documentation — article first, the guide index reads as a footer nav. */
  aside[data-screen-label="Docs sidebar"] {
    position: static !important;
    order: 2 !important;
    border-top: 1px solid var(--color-divider) !important;
    padding-top: var(--space-6) !important;
  }
  article[data-screen-label="Docs article"] { order: 1 !important; }

  footer > div:last-child {
    flex-wrap: wrap !important;
    gap: var(--space-2) !important;
  }

  /* AI — the timeline's 24px reveal offset pushes past a narrow viewport
     until the observer adds .tl-on. Both states need !important: the page's
     own <style> is injected by the runtime after this file. */
  .tl-item { transform: translateX(12px) !important; }
  .tl-item.tl-on { transform: translateX(0) !important; }
}

/* ── 640px ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  h1 { font-size: 34px !important; line-height: 1.06 !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 21px !important; }

  /* One column, everywhere. */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  :is([style*="repeat(3,auto)"], [style*="repeat(3, auto)"]) {
    grid-template-columns: repeat(2, auto) !important;
    gap: var(--space-4) var(--space-6) !important;
  }
  :is([style*="repeat(3,auto)"], [style*="repeat(3, auto)"]) > div > div:first-child {
    font-size: 21px !important;
  }

  /* Documentation — prev / next guide pair. */
  article[data-screen-label="Docs article"] > div:last-child {
    flex-direction: column !important;
  }
  article[data-screen-label="Docs article"] .btn { align-items: flex-start !important; text-align: left !important; }

  /* AI — pull the pipeline timeline in from its desktop gutter. */
  .tl-item { padding-left: 52px !important; }
  .tl-rail, .tl-fill { left: 15px !important; }
  .tl-node { left: 4px !important; }
  .tl-card { padding: var(--space-4) !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile navigation — markup built by mobile-nav.js and appended to <body>,
   outside the React root, so a re-render can never clobber it.
   ══════════════════════════════════════════════════════════════════════════ */

.gm-mnav-toggle {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 190;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
}
.gm-mnav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.gm-mnav-toggle[aria-expanded="true"] { color: var(--color-bg); }
.gm-mnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gm-mnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gm-mnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.gm-mnav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 180;
  background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s;
}

.gm-mnav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 185;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: 60px var(--space-6) var(--space-8);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-neutral-900);
  color: var(--color-bg);
  border-left: 1px solid color-mix(in srgb, #f2f2f3 18%, transparent);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .28s cubic-bezier(.2, .6, .2, 1), visibility .28s;
}
.gm-mnav-open .gm-mnav-panel { transform: translateX(0); visibility: visible; }
.gm-mnav-open .gm-mnav-backdrop { opacity: 1; visibility: visible; }

.gm-mnav-group { display: flex; flex-direction: column; }
.gm-mnav-group h6 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-300);
}
.gm-mnav-group a {
  display: block;
  padding: 11px 0;
  font-size: 16px;
  text-decoration: none;
  color: var(--color-bg);
  border-bottom: 1px solid color-mix(in srgb, #f2f2f3 12%, transparent);
}
.gm-mnav-group a[aria-current="page"] { color: var(--color-accent-300); }
.gm-mnav-panel .gm-mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  text-decoration: none;
  color: var(--color-accent-900);
  background: var(--color-bg);
  border: 1px solid var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  .gm-mnav-panel, .gm-mnav-backdrop, .gm-mnav-toggle span { transition: none; }
}