/*
 * Audio series pages (e.g. /the-place-that-keeps-you).
 * Shared by every page in the series — same layout as the Sheeran & Macklemore
 * page, plus a scrolling tab strip that fits ~10 episodes.
 * Pages: body.wn-public-page.wn-audio-series-page + js/audio-series.js.
 */

@media (min-width: 769px) {
  body.wn-audio-series-page .mobile-overlay,
  body.wn-audio-series-page #mobile-scenario-overlay,
  body.wn-audio-series-page .mobile-auth-container,
  body.wn-audio-series-page .mobile-scenario-container,
  body.wn-audio-series-page .mobile-menu-overlay {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -9999 !important;
  }
}

/* The header audio playlist is taller than breadcrumbs.html's fixed padding
   assumes; js/audio-series.js measures it and sets this variable. */
body.wn-audio-series-page #main-content {
  padding-top: var(--as-breadcrumbs-offset, calc(75px + 16rem - 100px)) !important;
}

/* Wider column than the default public page (780px) — more tabs visible,
   roomier text cards. Phones are unaffected (they're narrower than this). */
body.wn-audio-series-page .content-container {
  max-width: 1040px;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  padding-right: clamp(1rem, 3vw, 1.5rem);
}

body.wn-audio-series-page .content-section h1 {
  font-size: 1.75rem;
  line-height: 1.3;
  color: #c7d2fe;
  margin-bottom: 0.75rem;
}

/* ── Series tab strip (scrolls sideways; fits 10+ tabs) ─────────────── */
.as-series-nav {
  position: relative;
  z-index: 5;
  margin: 0 0 1.35rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}
.as-series-nav[hidden] { display: none; }
.as-series-track {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.as-series-track::-webkit-scrollbar { display: none; }
.as-series-tab {
  flex: 0 0 auto;
  width: 9.5rem;
  scroll-snap-align: start;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.88);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
a.as-series-tab:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(167,139,250,0.45);
  color: #e0e7ff;
}
.as-series-tab--current {
  background: linear-gradient(135deg, rgba(102,126,234,0.35), rgba(118,75,162,0.22));
  border-color: rgba(167,139,250,0.55);
  color: #e0e7ff;
  cursor: default;
}
.as-series-tab--upcoming {
  opacity: 0.45;
  border-style: dashed;
  cursor: default;
}
.as-series-tab-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.as-series-tab-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.65);
}
.as-series-tab--current .as-series-tab-num {
  background: rgba(167,139,250,0.35);
  color: #e0e7ff;
}
.as-series-tab-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.25;
}
.as-series-tab--current .as-series-tab-sub { color: rgba(224,231,255,0.72); }
.as-series-arrow {
  flex: 0 0 auto;
  width: 1.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  cursor: pointer;
}
.as-series-arrow:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(167,139,250,0.45);
}
.as-series-arrow:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 768px) {
  .as-series-arrow { display: none; }
  .as-series-tab { width: 8.25rem; }
}

/* ── Hero + episode sections (same look as the Sheeran page) ────────── */
.as-hero-block {
  background: rgba(167,139,250,0.08);
  border: 1px solid rgba(167,139,250,0.32);
  border-radius: 12px;
  padding: 1.1rem 1.15rem 1.25rem;
  margin: 0 0 1.5rem;
}
.as-hero-intro {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.as-hero-figure {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  margin: 0;
}
.as-hero-lead {
  flex: 1;
  min-width: 0;
}
.as-hero-lead .wn-lede {
  margin-bottom: 0;
  font-size: 1.05rem;
}
.as-hero-figure img,
.as-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}
/* Placeholder until art exists — swap for an <img> */
.as-figure-slot {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px dashed rgba(167,139,250,0.35);
  background: rgba(167,139,250,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: rgba(167,139,250,0.45);
}
.as-section {
  margin: 0 0 1.75rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
}
.as-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.as-figure {
  flex: 0 0 36%;
  max-width: 36%;
  margin: 0;
}
.as-copy {
  flex: 1;
  min-width: 0;
}
.as-heading {
  margin: 0 0 0.55rem;
  font-size: 1.05rem;
  color: #a5b4fc;
}
.as-p {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.84);
}
.as-script summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: rgba(165,180,252,0.85);
}
.as-script-text {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
}
@media (max-width: 640px) {
  .as-row { flex-direction: column; }
  .as-figure { flex: none; max-width: 100%; width: 100%; }
  .as-hero-intro { flex-direction: column; align-items: center; }
  .as-hero-figure { flex: none; max-width: min(55%, 220px); width: 100%; }
}