/* ===================================================================
   TeamCast — mobile refinement + polish layer
   Loaded after style.css. Nothing here changes the desktop design.

   The base stylesheet's smallest breakpoint is 520px, so phones at
   375–430px (the bulk of real traffic) fall through to tablet rules.
   This file adds the missing phone tier and a few cross-device fixes.
   =================================================================== */

/* --- Cross-device polish ------------------------------------------ */

/* Anchor targets clear the fixed nav instead of hiding behind it. */
:where([id]) {
  scroll-margin-top: 96px;
}

/* Never let an image blow out its column. */
img {
  max-width: 100%;
}

/* Softer, brand-tinted tap flash instead of the default grey box. */
a,
button,
[role="button"] {
  -webkit-tap-highlight-color: rgba(13, 36, 64, 0.1);
}

/* Ragged-right paragraphs read better than orphan-heavy ones. */
p,
li,
figcaption,
dd {
  text-wrap: pretty;
}

/* Drawer shouldn't scroll the page behind it. */
.mobile-drawer .panel {
  overscroll-behavior: contain;
}

/* --- Tablet and below --------------------------------------------- */

@media (max-width: 700px) {
  /* Real viewport unit — stops the hero resizing as the mobile URL bar
     shows and hides, which is the classic full-height jump. */
  .hero {
    min-height: 100svh;
  }
}

/* --- Phones (the tier the base stylesheet is missing) ------------- */

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Collides with .hero-meta once the hero stacks. */
  .hero-credit {
    display: none;
  }

  /* Minimum comfortable tap target. */
  .show .play {
    width: 44px;
    height: 44px;
  }

  .footer-bottom .legal a {
    display: inline-block;
    padding: 6px 0;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 22px;
    /* The base floors (46/38/34/24) are sized for tablets and overrun a
       375px screen. These keep the same proportions, one tier down. */
    --fs-hero: clamp(34px, 9.6vw, 44px);
    --fs-h1: clamp(30px, 8.2vw, 38px);
    --fs-h2: clamp(28px, 7.6vw, 36px);
    --fs-h3: clamp(20px, 5.4vw, 26px);
  }

  /* Nav: brand + actions are both flex-shrink:0, so at 375px the row
     needs ~374px inside ~335px of space and the menu button gets
     clipped by body{overflow-x:hidden}. Tighten it up. */
  .nav {
    padding-top: 12px;
  }

  .nav-inner {
    gap: 10px;
    padding: 8px 8px 8px 12px;
  }

  .nav-brand {
    gap: 8px;
  }

  .nav-brand img {
    height: 34px;
  }

  .nav-brand .wordmark {
    font-size: 17px;
  }

  .nav-actions {
    gap: 8px;
    margin-left: auto;
  }

  .nav-menu-btn {
    width: 40px;
    height: 40px;
  }

  /* The hero has its own prominent CTA and so does the drawer, so the
     nav button is redundant here and it is what breaks the row. */
  .nav-actions .btn {
    display: none;
  }

  /* Hero: 150px of top padding is a quarter of a phone screen. */
  .hero {
    padding: 116px var(--gutter) 72px;
  }

  .hero-title {
    max-width: 100%;
    margin: 18px 0 18px;
  }

  .hero-sub {
    margin-bottom: 26px;
  }

  .hero-meta {
    gap: 12px;
    margin-top: 28px;
    font-size: 11px;
  }

  /* Full-width, equal-width buttons stack cleanly. */
  .hero-ctas {
    gap: 10px;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Sub-page heroes and closing bands carry tablet floors too. */
  .subhero h1 {
    font-size: clamp(30px, 8.4vw, 40px);
    max-width: 100%;
  }

  .cta-band h2 {
    font-size: clamp(28px, 7.6vw, 36px);
  }

  .pull {
    font-size: clamp(24px, 6.4vw, 32px);
  }

  .receipt-big {
    font-size: clamp(40px, 11vw, 52px);
  }

  .section-head h2 {
    font-size: clamp(26px, 7.2vw, 34px);
  }

  /* Decorative watermark eats contrast on a small screen. */
  .subhero-glyph {
    opacity: 0.04;
  }
}

/* --- Upload page: live DriveUploader embed -------------------------- */

/* The stock embed is a fixed 400x320. Give it the full card width and
   enough height that the drop zone and progress bar both fit. */
.uploader-frame {
  position: relative;
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  overflow: hidden;
  transition: border-color 220ms var(--ease-out);
}

.uploader-frame:hover,
.uploader-frame:focus-within {
  border-color: var(--teal);
}

.uploader-frame iframe {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
}

@media (max-width: 560px) {
  .uploader-frame iframe {
    height: 520px;
  }
}

.upload-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.upload-checklist li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
}

.upload-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}

/* --- Legal documents ------------------------------------------------ */

.legal-doc {
  max-width: 72ch;
}

.legal-doc h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin: 52px 0 14px;
  letter-spacing: -0.02em;
}

.legal-doc h2:first-of-type {
  margin-top: 0;
}

.legal-doc p,
.legal-doc li {
  font-size: 17px;
  line-height: 1.65;
  opacity: 0.86;
}

.legal-doc p + p {
  margin-top: 16px;
}

.legal-doc ul {
  margin: 16px 0 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.legal-doc ul li {
  position: relative;
  padding-left: 26px;
}

.legal-doc ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

.legal-note {
  border-left: 3px solid var(--gold);
  background: rgba(246, 182, 12, 0.09);
  padding: 18px 22px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: 44px;
  font-size: 15.5px;
}

@media (max-width: 480px) {
  .legal-doc h2 {
    margin-top: 40px;
  }
  .legal-doc p,
  .legal-doc li {
    font-size: 16px;
  }
}

/* --- Enquiry form: selected role chip ------------------------------- */
.chip.is-on {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}

/* --- Show rows (The Network) ---------------------------------------
   BUG FIX: .st and .ss are <span>s, so they render inline and the title
   ran straight into the description — "Victorian Principals
   AssociationVPA — Connected. United." The margin-top on .ss was also
   being ignored, since margin-top does nothing on an inline element.
   -------------------------------------------------------------------- */

.show .st,
.show .ss {
  display: block;
}

.show .st {
  margin-bottom: 4px;
}

.show .ss {
  margin-top: 0;
  line-height: 1.45;
  max-width: 68ch;
}

/* The middle cell needs to be allowed to shrink, or long descriptions
   push the category and play button out of the row. */
.show > span:not([class]) {
  min-width: 0;
}

.show {
  padding: 16px 20px;
  align-items: center;
}

.show .cat {
  white-space: nowrap;
}

@media (max-width: 560px) {
  .show {
    grid-template-columns: 44px 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    align-items: start;
  }

  .show .thumb {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .show .st {
    font-size: 17px;
  }

  .show .ss {
    font-size: 13.5px;
  }

  /* keep the play control aligned with the title, not floating mid-row */
  .show .play {
    margin-top: 2px;
  }
}

/* --- Show rows: live vs private ------------------------------------- */

/* Only rows that actually go somewhere get the interactive affordances. */
.show.is-private {
  cursor: default;
}

.show.is-private:hover {
  transform: none;
  border-color: var(--line);
}

.private-tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.42;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.show.is-live .play {
  transition: transform 180ms var(--ease-out), background 180ms;
}

.show.is-live:hover .play {
  transform: scale(1.08);
  background: var(--red);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .private-tag {
    font-size: 10px;
    padding: 5px 8px;
  }
}

/* --- Nav wordmark: full brand sequence ------------------------------
   Matches the footer signature — red, gold, green, blue, teal, red,
   gold, green — instead of the two-tone TEAM/CAST split. --------------- */
.wordmark .t6 {
  color: var(--teal);
}

/* --- Hero episode player -------------------------------------------- */

.studio-card .sc-bar {
  cursor: pointer;
  padding: 6px 0;          /* bigger hit area without changing the visual */
  background-clip: content-box;
}

.studio-card .sc-play {
  cursor: pointer;
  transition: transform 180ms var(--ease-out), filter 180ms;
}

.studio-card .sc-play:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.studio-card.is-playing .sc-play {
  box-shadow: 0 0 0 6px rgba(246, 182, 12, 0.18);
}

/* the waveform only animates while audio is actually playing */
.sc-wave.is-live i {
  animation-play-state: running;
}

.sc-full {
  display: inline-block;
  margin-top: 18px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  opacity: 0.6;
  transition: opacity 180ms;
}

.sc-full:hover {
  opacity: 1;
}