/*
 * SlipstreamTV Landing — Responsive + Interactive Overrides
 *
 * The design is a 1440px-native prototype built with React components whose
 * styles are inline. We fluidize it for tablets/phones via a mix of:
 *   1. Attribute-substring selectors matching serialized inline styles
 *      (React renders `style={{ gridTemplateColumns: "1fr 1.6fr" }}` as
 *      `style="grid-template-columns: 1fr 1.6fr"` — no quotes around the value).
 *   2. Explicit className hooks for layouts that attribute-selectors can't
 *      reliably target (e.g. `.hero-grid`, `.chip-nav`, `.feature-card`).
 *   3. Fluid clamp() font-size on large display type.
 *   4. A hamburger menu + scroll-aware main nav (js in index.html).
 *
 * Breakpoints: ≤1200px, ≤900px, ≤640px.
 */

/* ============================================================
 * Scroll-aware main nav  (applies at all widths)
 * ============================================================ */

.site-nav {
  transition: transform 220ms var(--ease-standard), background 180ms ease;
  will-change: transform;
}
body.nav-hidden .site-nav {
  transform: translateY(-100%);
}

/* ============================================================
 * Mobile: un-stick section-internal sidebars (≤900px).
 * These are desktop patterns — a long right column scrolling past a
 * pinned left column (FeatureDepth tab list, AudienceDeepDives intros,
 * FAQ heading). When the two columns stack on mobile, leaving them
 * sticky means the "intro" block camps at the top of the viewport
 * forever while the user is trying to read the section below it.
 *
 * The chip-nav (UnifiedPromise) lives outside any <section>, so it
 * stays sticky as intended.
 * ============================================================ */
@media (max-width: 900px) {
  section [style*="position: sticky"],
  section [style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }
}

/* ============================================================
 * Feature chip nav (sticky tab row below main nav)
 * ============================================================ */

.chip-nav {
  position: sticky;
  top: 56px;               /* below the main nav (its content is ~56px tall) */
  z-index: 38;             /* below site nav (40) but above page content */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 180ms ease, border-color 180ms ease, top 220ms var(--ease-standard);
}
.chip-nav.is-sticky {
  background: oklch(0.11 0.01 260 / 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: rgb(255 255 255 / 0.08);
}
/* Chip-nav stays put when the main nav hides — decoupling the two avoids
 * the "half-disappear" artefact where mid-transition the translating main
 * nav (z:40) overlaps the chip-nav (z:38) rising to top:0. Main nav slides
 * up cleanly above; chip-nav keeps its own position. */

.chip-nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 60px;
}
.chip-nav-track {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE / Edge legacy */
  scroll-snap-type: x proximity;
}
.chip-nav-track::-webkit-scrollbar { display: none; }

.chip {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.03);
  border: 1px solid rgb(255 255 255 / 0.08);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--fg-1);
  text-decoration: none;
  scroll-snap-align: center;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.chip:hover {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.15);
}
.chip.is-active {
  background: rgb(217 36 42 / 0.12);
  border-color: rgb(217 36 42 / 0.35);
  color: var(--color-primary);
}

/* Offset anchored sections so their heading clears both nav bars */
article[id], section[id] { scroll-margin-top: 120px; }

/* ============================================================
 * Hero grid stacking (always use className, never attr-selector)
 * ============================================================ */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    padding: 40px 20px 64px !important;
    gap: 40px !important;
  }
  /* .hero has min-height: 760-820px + overflow: hidden baked in for the
   * 1440px desktop design. On mobile the stacked copy + visual easily
   * exceeds that, so un-clip and let the section grow to content. */
  .hero {
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ============================================================
 * Feature-visual grids with explicit mobile layouts.
 * Must be specificity-heavier than the generic
 * [style*="grid-template-columns: ..."] rules further down.
 * ============================================================ */

@media (max-width: 900px) {
  /* Clips (04): 9:16 + 1:1 on top, 16:9 spanning bottom row. */
  div.clips-formats {
    grid-template-columns: 1fr 1fr !important;
  }
  div.clips-formats > :nth-child(3) {
    grid-column: 1 / -1;
  }

  /* Merch (05): stay 2x2 on mobile (don't stack to 1-col). */
  div.merch-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* BuiltForScale (2 → 200K): scale bar horizontally scrolls on mobile.
   * The marks are absolutely positioned and extend ~100px below the 70px
   * track box, so the track needs extra height to contain them — otherwise
   * the y-axis coercion that accompanies `overflow-x: auto` would produce
   * an unwanted vertical scrollbar. */
  .scale-bar { padding: 24px 0 !important; }
  .scale-scroll {
    overflow-x: auto;
    overflow-y: clip;                /* prevent y-scroll from x-auto coercion */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0 12px;
    scroll-padding-inline: 24px;
  }
  .scale-scroll::-webkit-scrollbar { height: 4px; }
  .scale-scroll::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.15);
    border-radius: 2px;
  }
  .scale-track {
    min-width: 640px;
    height: auto !important;         /* override the 70px inline height */
    min-height: 140px;               /* fit the labels + descriptions inside */
  }
  /* Keep the footer row tidy when the card's outer padding shrinks */
  .scale-bar > div:last-child {
    padding-left: 20px; padding-right: 20px;
  }
}

/* Desktop: no-op wrappers — behave like plain divs */
.scale-scroll { width: 100%; }

/* ============================================================
 * Feature spotlight cards — stack copy + visual on mobile.
 * cardShell is applied to <article id="stream|ticketing|...">.
 * ============================================================ */

@media (max-width: 900px) {
  article#stream,
  article#ticketing,
  article#chat,
  article#clips,
  article#merch,
  article#brand {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  /* Standardise copy-first ordering: on mobile we always want
   * eyebrow → heading → copy → bullets → visual.
   * Cards 02, 04, 05 have visual first in DOM — swap via `order`. */
  article#ticketing > *:first-child,
  article#clips > *:first-child,
  article#merch > *:first-child { order: 2; }
  article#ticketing > *:last-child,
  article#clips > *:last-child,
  article#merch > *:last-child { order: 1; }

  /* The visual pane is absolutely-positioned inside; when stacked we need a
   * concrete height so its content renders. */
  article#stream    > *:last-child,
  article#chat      > *:last-child,
  article#brand     > *:last-child,
  article#ticketing > *:first-child,
  article#clips     > *:first-child,
  article#merch     > *:first-child {
    min-height: 360px;
    position: relative;
  }
  /* Clips + merch pack more into the visual pane — give them extra height */
  article#clips > *:first-child { min-height: 520px; }
  article#merch > *:first-child { min-height: 520px; }

  /* Tighten the copy-pane padding on mobile */
  article[id] > div[style*="padding: 56px"] {
    padding: 32px 20px !important;
  }
}

/* ============================================================
 * General tablet tightening (≤1200px)
 * ============================================================ */
@media (max-width: 1200px) {
  .site-nav .nav { padding: 14px 24px !important; }
  .nav-links { gap: 2px !important; }

  /* Reduce horizontal padding on the chip nav too */
  .chip-nav-inner { padding: 0 24px; }

  section[style*="padding: 120px 60px"],
  section[style*="padding: 140px 60px"],
  section[style*="padding: 100px 60px"],
  section[style*="padding: 120px 60px 80px"],
  section[style*="padding: 80px 60px 120px"],
  div[style*="padding: 90px 48px 60px"] {
    padding: 80px 28px !important;
  }
}

/* ============================================================
 * Small tablet / large phone (≤900px)
 * ============================================================ */
@media (max-width: 900px) {
  .nav-links,
  .nav-right { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .site-nav .nav { padding: 12px 20px !important; }

  .chip-nav-inner { padding: 0 12px; }
  .chip-nav-track {
    justify-content: flex-start;
    padding: 10px 8px;
    scroll-padding-inline: 16px;
  }

  /* Collapse 2-col splits to single column (applies to both div + article) */
  [style*="grid-template-columns: 1fr 1.6fr"],
  [style*="grid-template-columns: 1fr 1.5fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 280px 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr)"],
  [style*="grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Footer 4-col → 2-col */
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Generic 4-col grid → 2-col */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 3-col pillar / cards → stack */
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Architecture mini-grid: 80px + 3 flex cols → stack */
  [style*="grid-template-columns: 80px 1fr 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Section padding tightens further */
  section[style*="padding: 120px 60px"],
  section[style*="padding: 140px 60px"],
  section[style*="padding: 100px 60px"],
  section[style*="padding: 120px 60px 80px"],
  section[style*="padding: 80px 60px 120px"],
  div[style*="padding: 90px 48px 60px"] {
    padding: 56px 20px !important;
  }

  footer[style*="padding: 48px 60px 40px"] {
    padding: 40px 20px 24px !important;
  }

  /* Display type → fluid clamp */
  h1[style*="font-size: 84"] {
    font-size: clamp(56px, 15vw, 88px) !important;
    line-height: 0.98 !important;
  }
  h2[style*="font-size: 84"] {
    font-size: clamp(40px, 10vw, 64px) !important;
    line-height: 1 !important;
  }
  h2[style*="font-size: 64"],
  h2[style*="font-size: 68"] {
    font-size: clamp(36px, 8vw, 56px) !important;
    line-height: 1.05 !important;
  }
  h2[style*="font-size: 56"],
  h2[style*="font-size: 52"] {
    font-size: clamp(32px, 7vw, 44px) !important;
    line-height: 1.05 !important;
  }
  h3[style*="font-size: 40"] {
    font-size: clamp(28px, 6.5vw, 36px) !important;
    line-height: 1.1 !important;
  }

  /* Large gap reductions */
  [style*="gap: 80"] { gap: 40px !important; }
  [style*="gap: 60"] { gap: 32px !important; }
  [style*="gap: 48"] { gap: 28px !important; }

  /* Concept3-style side panels */
  div[style*="padding: 96px 64px 64px"] { padding: 56px 20px !important; }
  div[style*="padding: 40px 40px 40px 40px"] { padding: 24px 20px !important; }
}

/* ============================================================
 * Phone (≤640px)
 * ============================================================ */
@media (max-width: 640px) {
  .site-nav .nav { padding: 12px 16px !important; }
  .nav-logo { height: 18px !important; }

  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  footer[style*="padding:"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  div[style*="display: flex"][style*="gap: 12"] .btn-lg { flex: 1 1 auto; }
  div[style*="padding: 28px 36px"] { padding: 20px 20px !important; }
  div[style*="padding: 22px 28px"] { padding: 16px 18px !important; }
  div[style*="padding: 24px 32px"] { padding: 18px 20px !important; }
  div[style*="padding: 48px 24px"] { padding: 32px 18px !important; }
  div[style*="padding: 60px 60px 0"] { padding: 32px 16px 0 !important; }

  /* body already sets overflow-x: hidden, which is enough to prevent
   * horizontal scroll. Don't apply it to section wrappers — that creates
   * scroll containers and clips content like the hero's floating toast
   * that intentionally extends a few px past the section edge. */
  .page { max-width: 100vw; }
}

/* ============================================================
 * Safety: iOS sheet height
 * ============================================================ */
@supports (-webkit-touch-callout: none) {
  .mobile-menu { min-height: -webkit-fill-available; }
}