/* =====================================================
   warpas.pl — PnP episode list page

   Dark, single-column, top-nav — the PnP episode page's
   skin applied to the WBA list's structure. Built in the
   sandbox first (/sandbox/podcasts/pnp); named for its
   live home so promotion is a copy, not a rename.

   EVERY selector is scoped to the exact value
   [data-layout="podcast-show-pnp"] — never a ^= prefix.
   stylesheet_link_tag :app serves every file in
   app/assets/stylesheets on EVERY page, so this scope is
   the only thing keeping these rules off the rest of the
   site. "podcast-show-pnp" merely *starts with*
   "podcast-show"; attribute selectors match exactly, so
   podcast_show.css (WBA) cannot reach this page and this
   file cannot reach WBA's. See
   drafts/…/05_sandbox_violation.md.

   Base layer, tokens, nav, footer, .icon-btn and the
   accent modifiers are copied from podcast_episode_pnp.css;
   the wordmark and host bios from about_pnp.css. Copied,
   not shared — the pages move independently.
   ===================================================== */

/* ---------- FONTS ----------
   Relative url() on purpose: Propshaft rewrites it to the
   digested path. An absolute /assets/… path 404s. */
@font-face {
  font-family: "DM Sans";
  src: url("/assets/DMSans-Variable-d3bdb131.woff2") format("woff2-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/DMMono-Regular-22bb62ad.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("/assets/DMMono-Medium-d65a726a.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */
[data-layout="podcast-show-pnp"] {
  --pnp-bg:     #0a1430;
  --pnp-pink:   #f600ac;
  --pnp-blue:   #01acf4;
  --pnp-link:   #4a9eff;
  --pnp-link-h: #7bb8ff;
  --pnp-text:   #f0f3ff;
  --pnp-body:   #cdd5ec;
  --pnp-muted:  #8898c0;
  --pnp-dim:    rgba(255, 255, 255, 0.07);
  --pnp-dim2:   rgba(255, 255, 255, 0.14);

  --pnp-sans:   "DM Sans", system-ui, sans-serif;
  --pnp-mono:   "DM Mono", ui-monospace, "Courier New", monospace;

  --pnp-measure: 1600px;
  --pnp-gutter:  clamp(20px, 4vw, 40px);
  --pnp-ease:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- RESET / BASE ----------
   base_site.css styles a bare `body`/`section` on every page; each property
   it sets that matters here is answered explicitly, as on the episode page
   (see the long comment in podcast_episode_pnp.css). */
[data-layout="podcast-show-pnp"] *,
[data-layout="podcast-show-pnp"] *::before,
[data-layout="podcast-show-pnp"] *::after { box-sizing: border-box; }
[data-layout="podcast-show-pnp"] {
  margin: 0;
  padding: 0;
  text-align: left;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--pnp-bg);
  color: var(--pnp-text);
  font-family: var(--pnp-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
[data-layout="podcast-show-pnp"] section { max-width: none; margin-bottom: 0; }

/* fade.js animates header/section/footer in from opacity:0 — neutralised, as
   on both episode pages, so in-page anchors don't flash. */
[data-layout="podcast-show-pnp"] header,
[data-layout="podcast-show-pnp"] section,
[data-layout="podcast-show-pnp"] footer {
  opacity: 1 !important;
  transform: none !important;
}
[data-layout="podcast-show-pnp"] img,
[data-layout="podcast-show-pnp"] svg { display: block; max-width: 100%; }
[data-layout="podcast-show-pnp"] a { color: var(--pnp-link); text-decoration: none; text-underline-offset: 3px; }
[data-layout="podcast-show-pnp"] a:hover { color: var(--pnp-link-h); }
[data-layout="podcast-show-pnp"] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[data-layout="podcast-show-pnp"] ul { margin: 0; padding: 0; list-style: none; }
[data-layout="podcast-show-pnp"] p { margin: 0; }
[data-layout="podcast-show-pnp"] h1,
[data-layout="podcast-show-pnp"] h2 { margin: 0; font-weight: 400; }

[data-layout="podcast-show-pnp"] .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[data-layout="podcast-show-pnp"] .skip-link {
  position: absolute; top: -60px; left: 8px; z-index: 20;
  background: var(--pnp-text); color: var(--pnp-bg);
  padding: 8px 14px; border-radius: 4px;
  font-family: var(--pnp-mono); font-size: 12px;
}
[data-layout="podcast-show-pnp"] .skip-link:focus { top: 8px; }

[data-layout="podcast-show-pnp"] :focus-visible {
  outline: 2px solid var(--pnp-blue);
  outline-offset: 2px;
}

/* ---------- TOP NAV ---------- */
[data-layout="podcast-show-pnp"] .pnp-nav {
  width: 100%; max-width: var(--pnp-measure); margin: 0 auto;
  padding: 18px var(--pnp-gutter) 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
}
[data-layout="podcast-show-pnp"] .pnp-nav__left {
  display: flex; align-items: center; gap: 18px; min-width: 0;
}
[data-layout="podcast-show-pnp"] .pnp-nav__logo { display: flex; align-items: center; }
/* The yin-yang mark exactly as on the "o nas" pages (about_pnp.css): 45px,
   8px radius, thin border — the SVG's square is close to --pnp-bg and needs
   the border to read as a tile. */
[data-layout="podcast-show-pnp"] .pnp-nav__logo img {
  width: 45px; height: 45px; border-radius: 8px;
  border: 1px solid var(--pnp-dim2);
}
[data-layout="podcast-show-pnp"] .pnp-nav__links {
  display: flex; gap: 20px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
}
[data-layout="podcast-show-pnp"] .pnp-nav__links a { color: var(--pnp-muted); transition: color .15s var(--pnp-ease); }
[data-layout="podcast-show-pnp"] .pnp-nav__links a:hover,
[data-layout="podcast-show-pnp"] .pnp-nav__links a[aria-current="page"] { color: var(--pnp-text); }

/* ---------- PAGE SHELL ---------- */
[data-layout="podcast-show-pnp"] .pnp-show {
  width: 100%; max-width: var(--pnp-measure); margin: 0 auto;
  flex: 1;
}

/* ---------- ACCENT ----------
   Per row: the cover's yin-yang splash tints the episode number and the
   row's icon hover. Same custom properties as the episode page, so .icon-btn
   below is a straight copy. Pink is the default, also for "unknown". */
[data-layout="podcast-show-pnp"] .pnp-show {
  --pnp-accent:        var(--pnp-pink);
  --pnp-accent-glow:   rgba(246, 0, 172, 0.45);
  --pnp-accent-tint:   rgba(246, 0, 172, 0.08);
  --pnp-accent-2:      var(--pnp-pink);
  --pnp-accent-2-glow: rgba(246, 0, 172, 0.45);
  --pnp-accent-2-tint: rgba(246, 0, 172, 0.08);
}
[data-layout="podcast-show-pnp"] .pnp-accent--blue {
  --pnp-accent:        var(--pnp-blue);
  --pnp-accent-glow:   rgba(1, 172, 244, 0.45);
  --pnp-accent-tint:   rgba(1, 172, 244, 0.08);
  --pnp-accent-2:      var(--pnp-blue);
  --pnp-accent-2-glow: rgba(1, 172, 244, 0.45);
  --pnp-accent-2-tint: rgba(1, 172, 244, 0.08);
}
[data-layout="podcast-show-pnp"] .pnp-accent--mixed {
  --pnp-accent:        var(--pnp-blue);
  --pnp-accent-glow:   rgba(1, 172, 244, 0.45);
  --pnp-accent-tint:   rgba(1, 172, 244, 0.08);
  --pnp-accent-2:      var(--pnp-pink);
  --pnp-accent-2-glow: rgba(246, 0, 172, 0.45);
  --pnp-accent-2-tint: rgba(246, 0, 172, 0.08);
}

[data-layout="podcast-show-pnp"] .pnp-ep-number--pink    { color: var(--pnp-pink); }
[data-layout="podcast-show-pnp"] .pnp-ep-number--unknown { color: var(--pnp-pink); }
[data-layout="podcast-show-pnp"] .pnp-ep-number--blue    { color: var(--pnp-blue); }
[data-layout="podcast-show-pnp"] .pnp-ep-number--mixed {
  background: linear-gradient(100deg, var(--pnp-blue) 15%, var(--pnp-pink) 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---------- ICON BUTTONS ----------
   One rule, sized by --icon-btn-size — the wireframe's four ad-hoc size
   classes collapse into a hero size and a row size. Glyphs come from the
   shared sprite only. */
[data-layout="podcast-show-pnp"] .icon-btn {
  --icon-btn-size: 48px;
  --icon-btn-glyph: 21px;
  width: var(--icon-btn-size); height: var(--icon-btn-size);
  border-radius: 50%;
  border: 1px solid var(--pnp-dim2);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color .15s var(--pnp-ease), background-color .15s var(--pnp-ease);
}
[data-layout="podcast-show-pnp"] .icon-btn svg {
  width: var(--icon-btn-glyph); height: var(--icon-btn-glyph);
  fill: var(--pnp-muted);
  transition: fill .3s, filter .3s;
}
[data-layout="podcast-show-pnp"] .icon-btn:hover,
[data-layout="podcast-show-pnp"] .icon-btn:focus-visible {
  border-color: var(--pnp-accent);
  background: var(--pnp-accent-tint);
}
[data-layout="podcast-show-pnp"] .icon-btn:hover svg,
[data-layout="podcast-show-pnp"] .icon-btn:focus-visible svg {
  fill: var(--pnp-accent);
  filter: drop-shadow(0 0 6px var(--pnp-accent-glow));
}
[data-layout="podcast-show-pnp"] .icon-btn:nth-child(even):hover,
[data-layout="podcast-show-pnp"] .icon-btn:nth-child(even):focus-visible {
  border-color: var(--pnp-accent-2);
  background: var(--pnp-accent-2-tint);
}
[data-layout="podcast-show-pnp"] .icon-btn:nth-child(even):hover svg,
[data-layout="podcast-show-pnp"] .icon-btn:nth-child(even):focus-visible svg {
  fill: var(--pnp-accent-2);
  filter: drop-shadow(0 0 6px var(--pnp-accent-2-glow));
}

/* ---------- HERO ---------- */
[data-layout="podcast-show-pnp"] .pnp-show-hero {
  padding: 8px var(--pnp-gutter) 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

/* D1 — the wireframe's placeholder, unchanged apart from scale. */
[data-layout="podcast-show-pnp"] .pnp-show-hero__placeholder {
  height: clamp(240px, 28vw, 380px);
  background: radial-gradient(ellipse at 35% 50%, #1a2d5a 0%, var(--pnp-bg) 75%);
  border: 1px dashed rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--pnp-muted); text-align: center;
}
[data-layout="podcast-show-pnp"] .pnp-show-hero__placeholder-mic { font-size: 32px; letter-spacing: 0; }

[data-layout="podcast-show-pnp"] .pnp-show-hero__info { min-width: 0; }
[data-layout="podcast-show-pnp"] .pnp-show-hero__count {
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--pnp-muted); margin-bottom: 14px;
}

/* Wordmark — from about_pnp.css .poster-title, sized for a half-width column. */
[data-layout="podcast-show-pnp"] .pnp-wordmark {
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 72px); line-height: 0.98;
  letter-spacing: -0.035em;
}
[data-layout="podcast-show-pnp"] .pnp-wordmark .pink { color: var(--pnp-pink); }
[data-layout="podcast-show-pnp"] .pnp-wordmark .blue { color: var(--pnp-blue); }
[data-layout="podcast-show-pnp"] .pnp-wordmark .na { font-style: italic; font-weight: 400; font-size: 0.72em; color: var(--pnp-text); margin-right: 0.12em; }

[data-layout="podcast-show-pnp"] .pnp-show-hero__tagline {
  margin-top: 18px; max-width: 44ch;
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6;
  color: var(--pnp-body); text-wrap: pretty;
}

[data-layout="podcast-show-pnp"] .pnp-show-platforms {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
[data-layout="podcast-show-pnp"] .pnp-show-platforms__pipe {
  width: 1px; height: 24px; margin: 0 4px;
  background: var(--pnp-dim2);
}
[data-layout="podcast-show-pnp"] .pnp-show-platforms__rss {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pnp-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pnp-muted);
  transition: color .15s var(--pnp-ease);
}
[data-layout="podcast-show-pnp"] .pnp-show-platforms__rss svg {
  width: 15px; height: 15px; fill: currentColor;
}
[data-layout="podcast-show-pnp"] .pnp-show-platforms__rss:hover { color: var(--pnp-text); }

/* ---------- RULES ---------- */
[data-layout="podcast-show-pnp"] .pnp-rule-gradient {
  height: 1px; margin: 0 var(--pnp-gutter);
  background: linear-gradient(90deg,
    rgba(1, 172, 244, 0) 0%, rgba(1, 172, 244, 0.45) 25%,
    rgba(246, 0, 172, 0.45) 75%, rgba(246, 0, 172, 0) 100%);
}
[data-layout="podcast-show-pnp"] .pnp-rule-subtle {
  height: 1px; margin: 18px var(--pnp-gutter) 0;
  background: var(--pnp-dim);
}

/* ---------- HOST BIOS ----------
   From about_pnp.css .hosts / .host-name / .host-bio. Names are links to
   each host's page (D2). */
[data-layout="podcast-show-pnp"] .pnp-hosts {
  padding: 28px var(--pnp-gutter) 0;
  display: grid; grid-template-columns: 1fr 1px 1fr;
  gap: clamp(20px, 3vw, 40px);
}
[data-layout="podcast-show-pnp"] .pnp-hosts__rule { background: var(--pnp-dim2); }
[data-layout="podcast-show-pnp"] .pnp-host-name {
  font-family: var(--pnp-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
}
[data-layout="podcast-show-pnp"] .pnp-host-name a {
  color: inherit;
  text-decoration: underline; text-decoration-thickness: 1px;
}
[data-layout="podcast-show-pnp"] .pnp-host-name a:hover { color: var(--pnp-text); }
[data-layout="podcast-show-pnp"] .pnp-host-name.pink { color: var(--pnp-pink); }
[data-layout="podcast-show-pnp"] .pnp-host-name.blue { color: var(--pnp-blue); }
[data-layout="podcast-show-pnp"] .pnp-host-bio {
  margin-top: 10px; max-width: 60ch;
  font-size: 15px; line-height: 1.7; color: var(--pnp-body);
}

/* ---------- SCROLL HINT ---------- */
[data-layout="podcast-show-pnp"] .pnp-scroll-hint {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: max-content; margin: 0 auto; padding: 22px 0 0;
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  transition: color .15s var(--pnp-ease);
}
[data-layout="podcast-show-pnp"] .pnp-scroll-hint:hover { color: var(--pnp-text); }
[data-layout="podcast-show-pnp"] .pnp-scroll-hint__arrow { font-size: 16px; line-height: 1; }

/* ---------- EPISODES ---------- */
[data-layout="podcast-show-pnp"] .pnp-episodes {
  padding: 22px var(--pnp-gutter) 8px;
  scroll-margin-top: 12px;
}

/* Sort bar — the wireframe's look, the WBA list's markup (aria-pressed). */
[data-layout="podcast-show-pnp"] .sort-bar {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
[data-layout="podcast-show-pnp"] .sort-bar__label {
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pnp-muted); margin-right: 4px;
}
[data-layout="podcast-show-pnp"] .sort-btn {
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 4px;
  border: 1px solid var(--pnp-dim2); background: transparent; color: var(--pnp-muted);
  transition: border-color .15s var(--pnp-ease), background-color .15s var(--pnp-ease), color .15s var(--pnp-ease);
}
[data-layout="podcast-show-pnp"] .sort-btn:hover,
[data-layout="podcast-show-pnp"] .sort-btn[aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  color: var(--pnp-text);
}

/* Rows: number + title on top; date · notes, then platform icons, below. No
   thumbnails (D7), no play counts (D9), no share (D3). */
[data-layout="podcast-show-pnp"] .pnp-row {
  padding: 16px 0;
  border-bottom: 1px solid var(--pnp-dim);
}
[data-layout="podcast-show-pnp"] .pnp-row__top {
  display: flex; align-items: baseline; gap: 12px;
}
[data-layout="podcast-show-pnp"] .pnp-row__number {
  font-family: var(--pnp-mono); font-size: 14px; font-weight: 500;
  min-width: 3.4ch; flex-shrink: 0;
}
[data-layout="podcast-show-pnp"] .pnp-row__title {
  font-size: 17px; line-height: 1.4; color: var(--pnp-text);
  text-wrap: pretty;
  transition: color .15s var(--pnp-ease);
}
[data-layout="podcast-show-pnp"] .pnp-row__title:hover { color: #c8d8ff; }

/* Indented by the number column so the meta line starts under the title. */
[data-layout="podcast-show-pnp"] .pnp-row__bottom {
  margin-top: 8px;
  padding-left: calc(3.4ch + 12px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0;
  font-family: var(--pnp-mono); font-size: 12px;
}
[data-layout="podcast-show-pnp"] .pnp-row__date { color: rgba(255, 255, 255, 0.45); }
/* notatki pill — the WBA list's, in the row's accent (D3). Only rendered when
   the show-notes file exists. */
[data-layout="podcast-show-pnp"] .pnp-row__notes {
  font-family: var(--pnp-mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 6px 12px; margin-left: 4px;
  border: 1px solid var(--pnp-accent); border-radius: 999px;
  white-space: nowrap;
  transition: background-color .15s var(--pnp-ease);
}
[data-layout="podcast-show-pnp"] .pnp-row__notes:hover { background: var(--pnp-accent-tint); }
/* Mixed: the border carries the number's blue→pink gradient too. A gradient
   can't be a border-color, so it is painted as a border-box background under a
   solid padding-box one; hover swaps the solid layer for a tinted one. */
[data-layout="podcast-show-pnp"] .pnp-accent--mixed .pnp-row__notes {
  border-color: transparent;
  background:
    linear-gradient(var(--pnp-bg), var(--pnp-bg)) padding-box,
    linear-gradient(100deg, var(--pnp-blue) 15%, var(--pnp-pink) 85%) border-box;
}
[data-layout="podcast-show-pnp"] .pnp-accent--mixed .pnp-row__notes:hover {
  background:
    linear-gradient(100deg, rgba(1, 172, 244, 0.08), rgba(246, 0, 172, 0.08)) padding-box,
    linear-gradient(var(--pnp-bg), var(--pnp-bg)) padding-box,
    linear-gradient(100deg, var(--pnp-blue) 15%, var(--pnp-pink) 85%) border-box;
}
[data-layout="podcast-show-pnp"] .pnp-row__actions {
  margin-left: auto;
  display: flex; gap: 6px; align-items: center;
}
[data-layout="podcast-show-pnp"] .pnp-row__actions .icon-btn {
  --icon-btn-size: 34px;
  --icon-btn-glyph: 15px;
}

/* ---------- FOOTER ---------- */
[data-layout="podcast-show-pnp"] .pnp-footer {
  width: 100%; max-width: var(--pnp-measure); margin: 32px auto 0;
  border-top: 1px solid var(--pnp-dim);
  text-align: center; padding: 26px var(--pnp-gutter);
  font-family: var(--pnp-mono); font-size: 11px;
  letter-spacing: 0.06em; color: var(--pnp-muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px) {
  [data-layout="podcast-show-pnp"] .pnp-show-hero { grid-template-columns: 1fr; gap: 22px; }
  [data-layout="podcast-show-pnp"] .pnp-show-hero__placeholder { height: 220px; }
}
@media (max-width: 720px) {
  [data-layout="podcast-show-pnp"] .pnp-hosts { grid-template-columns: 1fr; gap: 24px; }
  [data-layout="podcast-show-pnp"] .pnp-hosts__rule { height: 1px; width: 100%; }
}
@media (max-width: 560px) {
  [data-layout="podcast-show-pnp"] .pnp-nav { flex-wrap: wrap; gap: 12px; }
  [data-layout="podcast-show-pnp"] .pnp-nav__links { gap: 14px; font-size: 10px; }
  /* Icons drop to their own line under the meta rather than squeezing it. */
  [data-layout="podcast-show-pnp"] .pnp-row__bottom { padding-left: 0; }
  [data-layout="podcast-show-pnp"] .pnp-row__actions { margin-left: 0; flex-basis: 100%; }
}