/* =========================================================
   TECHWEEK — Mobile / Responsive overrides
   Loaded after styles.css. Uses attribute selectors to override
   inline grid styles + targeted class hooks added in JSX.
   ========================================================= */

/* ---- Tablet (≤900px) ---- */
@media (max-width: 900px) {
  .container, .container-narrow {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* All 2-column hero/asymmetric layouts collapse */
  [style*="grid-template-columns: 1.25fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1.5fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* 3-column grids → 1 */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 2-column event card / event grid */
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Event Detail meta strip (4 cells → 2×2) */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  [style*="grid-template-columns: repeat(4, 1fr)"] > * {
    border-right: 1px solid var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
  }

  /* Featured hero — image first, then text */
  .tw-hero-grid {
    grid-template-columns: 1fr !important;
  }

  /* NextEvent magenta block */
  .tw-next-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: left !important;
  }
  .tw-next-grid > div:last-child {
    text-align: left !important;
  }
  /* Smaller numerals */
  .tw-next-date {
    font-size: clamp(72px, 22vw, 120px) !important;
    line-height: 0.86 !important;
  }
  /* Speaker strip on mobile — horizontal scroll, 2.4 visible */
  .tw-speakers-row,
  .tw-speakers-names {
    display: grid !important;
    grid-template-columns: repeat(var(--tw-spk-count, 5), minmax(140px, 42vw)) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .tw-speakers-row > *,
  .tw-speakers-names > * {
    scroll-snap-align: start !important;
  }
  .tw-speakers-row::-webkit-scrollbar,
  .tw-speakers-names::-webkit-scrollbar { display: none; }

  /* Article reader narrow column */
  .container-narrow { max-width: 100% !important; }

  /* Hide tweaks panel on small screens */
  .tweaks-panel, [data-tweaks-panel], #__tweaks-panel { display: none !important; }

  /* Coast map column stack: side-by-side panels become stacked */
  .tw-coast-layout {
    grid-template-columns: 1fr !important;
  }
  /* Make pixel USA map a bit smaller */
  .tw-coast-layout svg { max-width: 100% !important; }

  /* Filter bar — search + chips, drop the result count cell */
  .tw-filter-bar {
    grid-template-columns: 1fr !important;
  }
  .tw-filter-bar > *:nth-child(2) { display: none !important; }

  /* Footer columns stack */
  .tw-footer-cols {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
  /* TW. wordmark scales naturally via clamp() */

  /* Section heading row: title + right meta — wrap */
  .tw-section-head {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }

  /* Padding compression on big sections */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  [data-anchor="subscribe"] { padding-top: 40px !important; padding-bottom: 0 !important; }

  /* Subscribe envelope inputs/button stack */
  .tw-subscribe-form {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .tw-subscribe-form button {
    width: 100% !important;
    padding: 14px 20px !important;
  }
  /* Hide decorative subscribe stickers on mobile to declutter */
  .tw-subscribe-stickers { display: none !important; }

  /* Top nav: collapse to hamburger */
  .tw-nav-tabs { display: none !important; }
  .tw-nav-cta { display: none !important; }
  .tw-nav-burger { display: inline-flex !important; }
  /* Full "techweek." wordmark scales down to fit the compact bar */
  .tw-wordmark { font-size: 24px !important; }
  /* Y2K subscribe — hide floating desktop icons on small screens. */
  .tw-hide-sm { display: none !important; }
  /* Badge tiers + panel head stack on small screens. */
  .tw-badge-grid { grid-template-columns: 1fr 1fr !important; }
  .tw-badge-panel-head { grid-template-columns: 1fr !important; gap: 16px !important; }
  /* Compact nav row */
  header > .container {
    height: 56px !important;
  }

  /* Event detail title + ticket button stack */
  .tw-event-title-row {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .tw-event-title-row button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Sticky CTA — slim single line on mobile (title + button) */
  .tw-sticky-cta {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    padding: 8px 14px !important;
  }
  body { padding-bottom: 56px !important; }
  .tw-sticky-cta .tw-sticky-meta { display: none !important; }
  .tw-sticky-cta .tw-sticky-title { font-size: 14px !important; }
  .tw-sticky-cta .tw-sticky-btn { padding: 10px 15px !important; font-size: 12px !important; letter-spacing: 0.1em !important; }

  /* Speaker photo grid (6-up) → 3-up on tablet */
  .tw-speaker-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
  }

  /* Careers rows: role info + Apply button stack */
  .tw-career-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }
  .tw-career-row a { justify-self: start !important; }

  /* Event card header (image w/ date + selling-out chip) — okay as is */

  /* CTA cards on About page stack */
  /* Already handled by 1fr 1fr override above */

  /* Reduce body font sizes on huge text using clamp() — many already responsive */

  /* Footer 4-col → 2-col already; intro paragraph spans both */
  .tw-footer-cols > div:first-child { grid-column: 1 / -1 !important; }
}

/* ---- Phone (≤520px) ---- */
@media (max-width: 520px) {
  .container, .container-narrow {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* All speaker headshot rows: keep grid scrolling but fewer visible */
  .tw-speakers-row { grid-template-columns: repeat(var(--tw-spk-count, 5), 56vw) !important; }
  .tw-speakers-names { grid-template-columns: repeat(var(--tw-spk-count, 5), 56vw) !important; }

  /* Footer cols collapse fully */
  .tw-footer-cols {
    grid-template-columns: 1fr !important;
  }

  /* Speaker photo grid → 2-up on phone */
  .tw-speaker-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Archive marquee — smaller cards on phone (slot was taller than desktop). */
  .tw-arch-card { width: 240px !important; }
  .tw-arch-slot { height: 210px !important; }
  .tw-arch-track { gap: 18px !important; }

  /* Reduce huge wordmark slightly */
  .tw-footer-wordmark {
    font-size: clamp(56px, 17vw, 150px) !important;
  }

  /* Big section headings shrink */
  section h1, section h2 { text-wrap: balance; }

  /* Hide tiny meta labels */
  .tw-hide-mobile { display: none !important; }
}

/* =========================================================
   Responsive audit fixes — prevent horizontal overflow,
   cover grids the attribute selectors missed, tame giant headings.
   ========================================================= */

/* Safety net: page content never forces horizontal scroll. <main> is a sibling
   of the sticky <header>, so this does not affect header stickiness. */
main { overflow-x: hidden; }

@media (max-width: 900px) {
  /* Interest-tiles grid is inline repeat(N,1fr) (N up to 6) — collapse to 2. */
  .tw-interest-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Event-detail 1fr/2fr sections stack. */
  [style*="grid-template-columns: 1fr 2fr"] { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Coming-soon topic bullets → single column. */
  .tw-next-bullets { grid-template-columns: 1fr !important; }

  /* Cap oversized display headings so long words don't overflow the viewport. */
  [style*="clamp(96px, 16vw, 240px)"] { font-size: clamp(44px, 13vw, 92px) !important; }  /* events hero */
  [style*="clamp(72px, 13vw, 200px)"] { font-size: clamp(42px, 12vw, 92px) !important; }  /* blog / archive hero */
  [style*="clamp(48px, 6.4vw, 96px)"] { font-size: clamp(32px, 8vw, 60px) !important; }   /* event-detail title */

  /* Archive marquee heading is white-space:nowrap by default — let it wrap + shrink. */
  .tw-arch-title { white-space: normal !important; font-size: clamp(40px, 12vw, 96px) !important; }
}

@media (max-width: 520px) {
  [style*="clamp(96px, 16vw, 240px)"] { font-size: clamp(38px, 13vw, 60px) !important; }
  [style*="clamp(72px, 13vw, 200px)"] { font-size: clamp(36px, 12vw, 56px) !important; }
  .tw-arch-title { font-size: clamp(38px, 13vw, 72px) !important; }
}

/* Legal pages — collapse the numbered marker column so the "01/02" pointer
   sits above its heading instead of squeezing the text on phones. */
@media (max-width: 640px) {
  .tw-legal-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .tw-legal-num { padding-top: 0 !important; }
}

/* =========================================================
   Section rhythm on phones — the generic `section { padding: 48px }`
   rule above stacks on top of per-section margins (e.g. the FAQ's
   100px), producing big dead gaps between sections on mobile.
   Tighten the shared rhythm and the worst offenders.
   ========================================================= */
@media (max-width: 640px) {
  /* Whole-page section rhythm: 48/48 → 30/30 (was doubling up between
     every pair of sections to ~96px of empty space). */
  section { padding-top: 30px !important; padding-bottom: 30px !important; }

  /* FAQ block spaces itself with margins; kill the stacked section
     padding and shrink the 100px margins so it sits close to the
     preceding section (events + contact). */
  .tw-faq {
    margin-top: 8px !important;
    margin-bottom: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Archive marquee → "browse by interest": trim both sides of the seam. */
  .tw-arch { padding-bottom: 4px !important; }
  [style*="margin-top:64px"] { margin-top: 28px !important; } /* browse-by-interest */
}