/* Mobile layout overrides. Injected into every page by unpack.js after the design-system styles.
   The exported pages use inline styles (re-serialised by the browser at runtime, e.g.
   "background: rgb(38, 11, 1)"), so rules here use structure + !important rather than raw style text. */

/* ── Header: one compact row on phones ───────────────────────────────── */
@media (max-width: 640px) {
  .nav {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    padding-block: 8px !important;
    padding-inline: 16px !important;
  }
  .nav .nav-brand { margin-right: 0 !important; }
  .nav .nav-brand img { width: 44px !important; height: 44px !important; }
  .nav a { font-size: 14px !important; }
  .nav .btn {
    margin-left: auto !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  /* The handle is repeated in the Instagram section and footer; the CTA matters more here. */
  .nav > a[href*="instagram.com"] { display: none !important; }
}

/* ── Vertical rhythm: tighter sections and stat grids on phones ─────── */
@media (max-width: 640px) {
  section { padding-top: 48px !important; padding-bottom: 48px !important; }
  nav + section { padding-top: 28px !important; }

  /* Two-column content grids collapse to one column: shrink the row gap. */
  section[style*="grid-template-columns"],
  section > div[style*="grid-template-columns"] { row-gap: 36px !important; }

  /* Dark stat sections (About "Background", Home "The week"). Match both raw and serialised colour. */
  section[style*="#260b01"] span[style*="margin-bottom"],
  section[style*="rgb(38, 11, 1)"] span[style*="margin-bottom"] { margin-bottom: 20px !important; }

  /* Stat cells: the bordered cells inside the grid. */
  section[style*="#260b01"] div[style*="grid-template-columns"] > div[style*="border-bottom"],
  section[style*="rgb(38, 11, 1)"] div[style*="grid-template-columns"] > div[style*="border-bottom"] {
    padding-top: 18px !important;
    padding-bottom: 20px !important;
  }
  section[style*="#260b01"] p[style*="min-height"],
  section[style*="rgb(38, 11, 1)"] p[style*="min-height"] { min-height: 0 !important; }

  /* Home schedule: the two time columns. */
  #week div[style*="1fr 1fr"] > div { padding-top: 22px !important; }

  footer > div, footer[style] { padding-top: 24px !important; padding-bottom: 32px !important; }
}

/* ── Sticky header (all screen sizes) ────────────────────────────────── */
/* The runtime wraps the page in #dc-root > .sc-host, which are sized to the viewport height.
   A sticky element cannot stick past the bottom of its parent, so the header scrolled away
   after one screen. Let the wrappers grow with the content. */
body, #dc-root, .sc-host {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}