/* .page-header / .page-title base styling now lives in the shared
   css/components/page-header.css — the Our Shows page uses its own
   .shows-hero below instead (approved mockup), so it doesn't apply
   here. */

/* ==== Our Shows page: hero (eyebrow/title/stats + latest-episode
   spotlight + "This Week" release line-up) ==== */
.shows-hero {
  background: var(--color-off-black);
  color: var(--color-white);
  padding: var(--space-12) 0 var(--space-8);
}

.shows-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.shows-hero__top {
  text-align: left;
  margin-bottom: var(--space-8);
}

.shows-hero__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-retro-1);
  margin: 0 0 var(--space-2);
}

.shows-hero__title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 var(--space-4);
}

.shows-hero__stats {
  display: flex;
  justify-content: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.shows-hero__stats b {
  color: var(--color-white);
  font-weight: 700;
}

/* ---- Latest-episode spotlight ---- */
.shows-spotlight {
  margin: 0 0 var(--space-8);
}

.shows-spotlight__eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-retro-1);
  margin: 0 0 var(--space-3);
}

.shows-spotlight__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-retro-1);
  box-shadow: 0 0 0 4px rgba(120, 190, 163, 0.25);
  flex: none;
}

.shows-spotlight__card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.shows-spotlight__art {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
  background: var(--color-bg-alt);
}

.shows-spotlight__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shows-spotlight__show {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 4px;
}

.shows-spotlight__episode {
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 800;
  margin: 0 0 var(--space-3);
  line-height: 1.25;
}

.shows-spotlight__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 2px;
}

@media (max-width: 620px) {
  .shows-spotlight__card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .shows-spotlight__art {
    max-width: 150px;
    margin: 0 auto;
  }
}

/* ---- "This Week" release line-up ---- */
.shows-week {
  margin: 0;
}

.shows-week__head {
  margin-bottom: var(--space-4);
}

.shows-week__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
}

.shows-week__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-2);
}

.shows-day {
  display: flex;
  flex-direction: column;
  min-height: 96px;
  padding: var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.shows-day:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.shows-day__badge {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}

.shows-day__d {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.shows-day__date {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-white);
}

.shows-day__show {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 3px;
  line-height: 1.25;
}

.shows-day__note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

.shows-day--featured {
  background: rgba(222, 75, 45, 0.1);
  border-color: rgba(222, 75, 45, 0.4);
}

.shows-day--featured:hover {
  border-color: var(--color-accent);
}

.shows-day--featured .shows-day__d,
.shows-day--featured .shows-day__date {
  color: var(--color-accent);
}

.shows-day--featured .shows-day__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 6px;
  background: var(--color-off-black);
}

.shows-day--featured .shows-day__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.shows-day--featured .shows-day__note {
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 760px) {
  .shows-week__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 460px) {
  .shows-week__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Big-tile show grid, inspired by exactlyrightmedia.com's show wall:
   large square cover art, title revealed on hover/focus. */

.show-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-16);
}

@media (min-width: 576px) {
  .show-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .show-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.show-tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: var(--color-white);
}

.show-tile__art {
  position: absolute;
  inset: 0;
}

.show-tile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.show-tile:hover .show-tile__art img,
.show-tile:focus-visible .show-tile__art img {
  transform: scale(1.05);
}

.show-tile__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent 60%);
  font-size: var(--font-size-lg);
  font-weight: bold;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.show-tile:hover .show-tile__title,
.show-tile:focus-visible .show-tile__title {
  opacity: 1;
}

/* On a touch device there's no hover state to reveal this on — a tap
   just navigates straight to the show, so the name would never be
   visible at all. Show it by default wherever hover isn't available. */
@media (hover: none) {
  .show-tile__title {
    opacity: 1;
  }
}

/* ==== Single show page: hero ==== */
.show-hero {
  background: var(--color-off-black);
  color: var(--color-white);
  /* Asymmetric on purpose: the bottom edge sits right up against the
     player, and .show-body's own top padding below adds a second,
     smaller gap after that — together a much tighter total gap to the
     episode list than a single large padding value on both sides
     would give. */
  padding: var(--space-8) 0 var(--space-4);
}

.show-hero__inner {
  /* Matches .show-body .container-fluid below (max-width + padding) so
     the cover art's left edge lines up with the episode list's left
     edge instead of sitting at a different x position. */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  align-items: end;
}

.show-hero__art {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.show-hero__art img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.show-hero__eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-retro-1);
  margin-bottom: var(--space-2);
}

.show-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
}

.show-hero__deck {
  margin-top: var(--space-4);
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}

.show-hero__meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

.show-hero__meta b {
  color: var(--color-white);
  font-weight: 600;
}

.show-hero__meta a {
  color: inherit;
  text-decoration: none;
}

.show-hero__meta a:hover b {
  color: var(--color-accent);
}

.show-hero__platforms {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---- Single show page: the latest-episode player, embedded inline in
   .show-hero instead of a separately-labeled "Latest Episode" section
   (the audio-block itself now shows a "New" badge — see
   css/components/podcast-episode.css — so a section label saying the
   same thing next to it would be redundant). ---- */
.show-hero__player {
  /* .show-hero__inner is a 2-column grid (art + body) — without this,
     a 3rd grid child gets auto-placed into just the first column
     instead of spanning the full width on its own row. No max-width
     of its own: .show-hero__inner and .show-body .container-fluid
     already share the same 1200px cap, so letting this stretch the
     full grid width lines its right edge up with the episode list
     below instead of stopping short partway across. */
  grid-column: 1 / -1;
  margin: var(--space-4) 0 0;
}

@media (max-width: 900px) {
  .show-hero__inner {
    grid-template-columns: 1fr;
  }

  .show-hero__art {
    max-width: 160px;
  }
}

.show-link {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.show-link:hover {
  border-color: var(--color-accent);
  background: rgba(222, 75, 45, 0.12);
}

.show-link--spotify {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.show-link--spotify:hover {
  background: #c53f24;
}

/* ==== Single show page: body (episode list + sidebar) ==== */
.show-body {
  padding: var(--space-4) 0 var(--space-16);
}

.show-body .container-fluid {
  max-width: 1200px;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* The legacy main.css pagination styling renders cramped here (its
   own li margins get squeezed out) — use gap on the flex row instead
   of relying on individual li margins, and give each box more room. */
.show-body .pagination {
  margin: var(--space-8) 0 0;
}

.show-body .pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.show-body .pagination ul li {
  margin-right: 0;
  min-width: 38px;
}

.show-body .pagination ul li a,
.show-body .pagination ul li span {
  padding: 9px 8px;
  border-radius: var(--radius-sm);
}

.show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-16);
  align-items: start;
}

/* No sidebar on the show page (test run) — episode list runs full
   width instead of sharing the grid with a 280px column. */
.show-layout--full {
  grid-template-columns: 1fr;
}

@media (max-width: 992px) {
  .show-layout {
    grid-template-columns: 1fr;
  }
}

.episode-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-light);
}

.episode-list__head h2 {
  font-size: var(--font-size-h3);
  font-weight: 800;
  margin: 0;
}

.episode-list__season-filter select {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
}

/* "All Episodes" + one chip per pinned playlist (Shows > Edit >
   Playlists) — narrows the episode list below in place instead of a
   separate carousel section, so a playlisted episode isn't shown
   twice on the same page. Same pill shape as
   .category-feed__directory's directory bar (css/pages/category-feed.css)
   — not shared directly since that stylesheet isn't loaded on this
   template, but kept visually consistent with it on purpose. */
.episode-list__playlist-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
}

.episode-list__playlist-filter a {
  /* This page runs on the site's dark default (no light-scheme
     override) — var(--color-text-muted)/var(--color-border) are
     near-black-on-white tokens meant for light backgrounds, and were
     nearly invisible here. Same mistake as contact.css/author.css
     originally made; rgba(255,255,255,...) instead. */
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all var(--transition-fast);
}

.episode-list__playlist-filter a:hover {
  border-color: var(--color-accent);
  color: var(--color-white);
}

.episode-list__playlist-filter a.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.episode-list__playlist-count {
  opacity: 0.7;
}

/* Live episode search (js/interactions.js's initEpisodeSearch(),
   inc/episode-search.php) — filters as-you-type via a debounced AJAX
   call across the whole show's episode catalog, not just the current
   page's ~10 rows already in the DOM. */
.episode-list__search {
  position: relative;
  margin: var(--space-6) 0 var(--space-4);
}

.episode-list__search-icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  fill: var(--color-text-faint);
  pointer-events: none;
}

.episode-list__search-input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px 11px 40px;
}

.episode-list__search-input::placeholder {
  color: var(--color-text-faint);
}

.episode-list__search-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.episode-list__results:empty {
  display: none;
}

.episode-list__results-empty {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: 14px;
}

.episode-row {
  /* minmax(0, 1fr): without the 0 minimum, a grid track's automatic
     min-size is its content's min-content width — and for a nowrap,
     ellipsis-truncated excerpt that's the full unwrapped text, not the
     truncated width. That let long excerpts blow this column out past
     its intended width, dragging the date/duration/play-icon column
     along with it far enough right to land on top of the sidebar. */
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: inherit;
}

/* The first row of the default (unfiltered, page 1) list — same
   episode the hero's player above is playing. Same row styling as
   every other episode below it (no card/background treatment) — the
   .episode-row__new badge alone marks it, so it reads as part of the
   same list, not a separate promoted card. */
.episode-row__new {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-retro-1);
  border: 1px solid var(--color-retro-1);
  border-radius: 999px;
  padding: 2px 7px;
  margin-right: var(--space-2);
  vertical-align: middle;
}

.episode-row__art {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-alt);
  flex: none;
}

.episode-row__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.episode-row__num {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}

.episode-row__title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
}

.episode-row:hover .episode-row__title {
  color: var(--color-accent);
}

.episode-row__excerpt {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--color-text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.episode-row__runtime {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

.episode-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 11.5px;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.episode-row__play {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.episode-row__play svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  margin-left: 1px;
  transition: fill var(--transition-fast);
}

.episode-row:hover .episode-row__play {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.1);
}

@media (max-width: 560px) {
  .episode-row {
    grid-template-columns: 52px 1fr;
  }

  .episode-row__meta {
    display: none;
  }

  .episode-row__art {
    width: 52px;
    height: 52px;
  }
}