/* =====================================================
   warpas.pl — sandbox podcast pages
   Episode detail page, built on the "Workshop" design
   system. Fonts, reset, layout and footer come from
   sandbox_homepage.css; this file adds the page-specific
   components and owns the sidebar's colour.

   Loaded AFTER sandbox_homepage.css — several rules here
   deliberately restate that file's selectors at equal
   specificity and win on source order.

   NOTE: stylesheet_link_tag :app serves EVERY file in
   app/assets/stylesheets on EVERY page, so this file is
   downloaded by production pages too. Its scope is the
   only thing keeping it off them.
   ===================================================== */

/* =====================================================
   SIDEBAR COLOUR  (D12)
   The sidebar has no colours of its own upstream — it
   reads --paper / --ink / --rule directly, so recolouring
   it there would repaint the whole page. These tokens sit
   in between, and only this page defines them.

   Everything in this file is scoped to the exact value
   [data-layout="sandbox-podcast"], never the family prefix
   [data-layout^="sandbox-"]. The prefix was leaking these
   rules onto every other sandbox page — /sandbox renders
   .ep-title as an episode link, and this file styles it as
   a 38px serif <h1>. A page-specific sheet gets a
   page-specific scope.
   ===================================================== */

/* #5c3699 is the WBA logo violet sampled straight from the artwork
   (rgb 92, 54, 153) — the rail matches the show's own colour. Both modes are
   written out: omitting the dark rule would let dark mode revert the rail. */
[data-layout="sandbox-podcast"] {
  --rail-bg:     #5c3699;
  --rail-ink:    #efe8df;
  --rail-ink-2:  rgba(239, 232, 223, 0.78);
  --rail-ink-3:  rgba(239, 232, 223, 0.45);
  --rail-rule:   rgba(239, 232, 223, 0.14);
  --rail-hover:  rgba(239, 232, 223, 0.08);
}
[data-theme="dark"] [data-layout="sandbox-podcast"] {
  --rail-bg:     #1e1452;
  --rail-ink:    #efe8df;
  --rail-ink-2:  rgba(239, 232, 223, 0.72);
  --rail-ink-3:  rgba(239, 232, 223, 0.40);
  --rail-rule:   rgba(239, 232, 223, 0.10);
  --rail-hover:  rgba(239, 232, 223, 0.06);
}

/* --- Sidebar, repointed at the tokens ------------------------------- */
[data-layout="sandbox-podcast"] .side-nav {
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-rule);
}
[data-layout="sandbox-podcast"] .brand { color: var(--rail-ink); }
[data-layout="sandbox-podcast"] .brand:hover,
[data-layout="sandbox-podcast"] .brand:focus-visible { background: var(--rail-hover); }

[data-layout="sandbox-podcast"] .side-nav__controls { border-bottom-color: var(--rail-rule); }

[data-layout="sandbox-podcast"] .side-nav__list a { color: var(--rail-ink-2); }
[data-layout="sandbox-podcast"] .side-nav__list a:hover,
[data-layout="sandbox-podcast"] .side-nav__list a:focus-visible {
  color: var(--rail-ink);
  background: var(--rail-hover);
}
[data-layout="sandbox-podcast"] .side-nav__list a.is-active,
[data-layout="sandbox-podcast"] .side-nav__list a.is-active .num { color: var(--rail-ink); }
[data-layout="sandbox-podcast"] .side-nav__list .num { color: var(--rail-ink-3); }

[data-layout="sandbox-podcast"] .side-nav__status {
  border-top-color: var(--rail-rule);
  color: var(--rail-ink-3);
}

/* Locale switch + theme toggle live inside the sidebar */
[data-layout="sandbox-podcast"] .side-nav .locale-switch__item,
[data-layout="sandbox-podcast"] .side-nav .locale-switch__sep { color: var(--rail-ink-3); }
[data-layout="sandbox-podcast"] .side-nav .locale-switch__item:hover,
[data-layout="sandbox-podcast"] .side-nav .locale-switch__item:focus-visible {
  color: var(--rail-ink);
  background: var(--rail-hover);
}
[data-layout="sandbox-podcast"] .side-nav .locale-switch__item.is-active { color: var(--rail-ink); }

[data-layout="sandbox-podcast"] .side-nav .theme-toggle {
  border-color: var(--rail-rule);
  color: var(--rail-ink-2);
}
[data-layout="sandbox-podcast"] .side-nav .theme-toggle:hover {
  border-color: var(--rail-ink-3);
  color: var(--rail-ink);
}
[data-theme="light"] [data-layout="sandbox-podcast"] .side-nav .theme-toggle__icon--sun,
[data-theme="dark"]  [data-layout="sandbox-podcast"] .side-nav .theme-toggle__icon--moon { color: var(--rail-ink); }
[data-theme="light"] [data-layout="sandbox-podcast"] .side-nav .theme-toggle__icon--moon,
[data-theme="dark"]  [data-layout="sandbox-podcast"] .side-nav .theme-toggle__icon--sun { color: var(--rail-ink-3); }

/* --- Mobile header + menu replace the sidebar under 1024px ----------
   Without this the colour would simply vanish on phones. */
@media (max-width: 1024px) {
  [data-layout="sandbox-podcast"] .mobile-header,
  [data-layout="sandbox-podcast"] .mobile-menu {
    background: var(--rail-bg);
    border-bottom-color: var(--rail-rule);
  }
  [data-layout="sandbox-podcast"] .brand--mobile { color: var(--rail-ink); }
  [data-layout="sandbox-podcast"] .menu-toggle span { background: var(--rail-ink); }
  [data-layout="sandbox-podcast"] .mobile-menu a {
    color: var(--rail-ink-2);
    border-bottom-color: var(--rail-rule);
  }
  [data-layout="sandbox-podcast"] .mobile-menu a[aria-current="page"] { color: var(--rail-ink); }
  [data-layout="sandbox-podcast"] .mobile-header .locale-switch__item,
  [data-layout="sandbox-podcast"] .mobile-header .locale-switch__sep { color: var(--rail-ink-3); }
  [data-layout="sandbox-podcast"] .mobile-header .locale-switch__item.is-active { color: var(--rail-ink); }
  [data-layout="sandbox-podcast"] .mobile-header .theme-toggle {
    border-color: var(--rail-rule);
    color: var(--rail-ink-2);
  }
}

/* =====================================================
   PAGE COMPONENTS
   ===================================================== */

[data-layout="sandbox-podcast"] {
  --wba-dim:    rgba(91, 62, 184, 0.10);
  --icon-hover: #2a1d7e;
  --icon-glow:  rgba(42, 29, 126, 0.45);
}
[data-theme="dark"] [data-layout="sandbox-podcast"] {
  --wba-dim:    rgba(139, 112, 232, 0.16);
  --wba-on-dark: #a88ef0;
  --icon-hover: #a084e8;
  --icon-glow:  rgba(160, 132, 232, 0.55);
}

/* WBA violet is too dark to read on the dark paper — lighten it there. */
[data-layout="sandbox-podcast"] .episode-page { --wba-accent: var(--wba); }
[data-theme="dark"] [data-layout="sandbox-podcast"] .episode-page { --wba-accent: var(--wba-on-dark); }

[data-layout="sandbox-podcast"] .episode-page {
  padding: 40px 0 0;
  display: flex;
  flex-direction: column;
}

/* ---------- BREADCRUMB ---------- */
[data-layout="sandbox-podcast"] .breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
[data-layout="sandbox-podcast"] .breadcrumb-section { color: var(--ink-2); }
[data-layout="sandbox-podcast"] a.breadcrumb-section { margin-left: 5px; transition: color .15s var(--ease); }
[data-layout="sandbox-podcast"] a.breadcrumb-section:hover { color: var(--wba-accent); }
[data-layout="sandbox-podcast"] .breadcrumb-sep { margin: 0 7px; opacity: 0.35; font-size: 12px; letter-spacing: 0; }
[data-layout="sandbox-podcast"] .breadcrumb-current { color: var(--wba-accent); }

/* ---------- MINI EPISODE NAV (top) ---------- */
[data-layout="sandbox-podcast"] .ep-nav-mini {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 9px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 26px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em; color: var(--ink-3);
}
[data-layout="sandbox-podcast"] .mini-link {
  color: var(--ink-3); white-space: nowrap;
  transition: color .15s var(--ease);
}
[data-layout="sandbox-podcast"] a.mini-link:hover { color: var(--wba-accent); }
[data-layout="sandbox-podcast"] .mini-prev,
[data-layout="sandbox-podcast"] .mini-next {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-layout="sandbox-podcast"] .mini-next { text-align: right; }
[data-layout="sandbox-podcast"] .mini-off { opacity: 0.4; cursor: default; }
[data-layout="sandbox-podcast"] .mini-all {
  color: var(--wba-accent); white-space: nowrap;
  letter-spacing: 0.10em; text-transform: uppercase;
  font-size: 9px; padding: 0 2px;
}
[data-layout="sandbox-podcast"] .mini-sep { opacity: 0.3; }

/* ---------- EPISODE HEADER ----------
   Logo left, code+date and title stacked to its right — but as GRID COLUMNS,
   not floats. That distinction is the whole fix: a float only shortens the
   line boxes beside it, so a long title spilled its last line back underneath
   the logo. A grid column is a hard edge the text cannot cross, so every line
   of every title keeps the same left edge no matter how long it runs.

   Below that, the actions sit at the page's own left edge with each label
   directly above the row it names. */
[data-layout="sandbox-podcast"] .ep-header {
  --splash-size: 116px;
  margin-bottom: 12px;
}

[data-layout="sandbox-podcast"] .ep-identity {
  display: grid;
  grid-template-columns: var(--splash-size) 1fr;
  column-gap: 24px;
  align-items: start;
}
[data-layout="sandbox-podcast"] .ep-splash {
  width: var(--splash-size); height: var(--splash-size);
  border-radius: 12px;
  object-fit: cover;
}
/* No logo (fallback missing) — the text takes the whole row rather than
   sitting in an empty indent. */
[data-layout="sandbox-podcast"] .ep-identity:not(:has(.ep-splash)) { grid-template-columns: 1fr; }
[data-layout="sandbox-podcast"] .ep-identity-text { min-width: 0; }

/* Code + date sit tight above the title — they read as one unit. */
[data-layout="sandbox-podcast"] .ep-top-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  margin-bottom: 6px;
}
[data-layout="sandbox-podcast"] .ep-number {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--wba-accent); letter-spacing: 0.04em;
}
[data-layout="sandbox-podcast"] .ep-date {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-3); letter-spacing: 0.02em;
}
/* No play count — D4: listens are hand-imported and go stale, so they order
   the list page but are never displayed. */

/* `margin: 0` is load-bearing: the sandbox reset zeroes `ul` but never the
   headings, so the browser's own `h1 { margin-block-start: 0.67em }` was
   adding ~25px above the title — which is why tuning .ep-top-row's 6px
   bottom margin appeared to do nothing. The 6px below is now the whole gap. */
[data-layout="sandbox-podcast"] .ep-title {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: pretty;
}

/* Actions — labels stack above their own row, all flush left with the page. */
[data-layout="sandbox-podcast"] .ep-actions { margin-top: 32px; }
[data-layout="sandbox-podcast"] .ep-action-label {
  display: block;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}
[data-layout="sandbox-podcast"] .ep-action-row {
  display: flex; align-items: center; gap: 10px;
}
/* Listening is what the page is for — double-size buttons. */
[data-layout="sandbox-podcast"] .ep-action-row--listen { gap: 14px; }
[data-layout="sandbox-podcast"] .ep-action-row--listen .icon-btn { --icon-btn-size: 68px; }
[data-layout="sandbox-podcast"] .ep-action-row--listen .icon-btn svg { width: 32px; height: 32px; }
/* Breathing room between the two groups, plus the positioning context the
   "copied!" feedback needs. */
[data-layout="sandbox-podcast"] .ep-action-row--listen + .ep-action-label { margin-top: 26px; }
[data-layout="sandbox-podcast"] .ep-action-row--share { position: relative; }

/* No .play-btn — the mockup's ▶ button is dropped (D8): there is no audio to
   play, only platform links. */

[data-layout="sandbox-podcast"] .icon-btn {
  --icon-btn-size: 34px;
  width: var(--icon-btn-size); height: var(--icon-btn-size);
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
[data-layout="sandbox-podcast"] .icon-btn svg {
  width: 16px; height: 16px;
  fill: var(--ink-3);
  transition: fill .3s, filter .3s;
}
/* Hover behaviour copied from podcasts.css (fill swap + glow), retinted from
   its production blue to the mockup's purple, per mode (D10). */
[data-layout="sandbox-podcast"] .icon-btn:hover { border-color: var(--wba-accent); background: var(--wba-dim); }
[data-layout="sandbox-podcast"] .icon-btn:hover svg {
  fill: var(--icon-hover);
  filter: drop-shadow(0 0 6px var(--icon-glow));
}
/* The copy button is stroked, not filled */
[data-layout="sandbox-podcast"] .icon-btn svg[stroke],
[data-layout="sandbox-podcast"] .icon-btn use { color: var(--ink-3); }
[data-layout="sandbox-podcast"] .icon-btn:hover use { color: var(--icon-hover); }

/* Copy-link confirmation (blog.css styles this elsewhere; the sandbox
   layout does not load that file) */
[data-layout="sandbox-podcast"] .clipboard-feedback {
  position: absolute; top: calc(100% + 6px); left: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  white-space: nowrap; pointer-events: none;
  color: var(--wba-accent);
  opacity: 0; transition: opacity .2s var(--ease);
}
[data-layout="sandbox-podcast"] .clipboard-feedback--visible { opacity: 1; }

/* ---------- DIVIDER + SECTION LABEL ---------- */
[data-layout="sandbox-podcast"] .ep-divider {
  height: 1px; background: var(--rule-soft);
  margin: 26px 0 28px; border: 0;
}
[data-layout="sandbox-podcast"] .section-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}

/* ---------- ABOUT ---------- */
[data-layout="sandbox-podcast"] .ep-about { margin-bottom: 34px; }
[data-layout="sandbox-podcast"] .ep-about p {
  font-size: 16.5px; line-height: 1.75; color: var(--ink-2);
  max-width: 74ch; text-wrap: pretty;
}
[data-layout="sandbox-podcast"] .ep-about p + p { margin-top: 14px; }
[data-layout="sandbox-podcast"] .ep-about a {
  color: var(--wba-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 45%, transparent);
  transition: text-decoration-color .15s;
}
[data-layout="sandbox-podcast"] .ep-about a:hover { text-decoration-color: var(--wba-accent); }

/* ---------- CTA ----------
   The "napisz do mnie" + coaching paragraphs between the `---` rule and the
   references heading. The mockup dropped this block; we keep it (D2+D3). */
[data-layout="sandbox-podcast"] .ep-cta {
  margin-bottom: 34px;
  padding: 18px 20px;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--wba-accent);
  border-radius: 4px;
  background: var(--paper-2);
}
[data-layout="sandbox-podcast"] .ep-cta p {
  font-size: 15.5px; line-height: 1.7; color: var(--ink-2);
  max-width: 70ch; text-wrap: pretty;
}
[data-layout="sandbox-podcast"] .ep-cta p + p { margin-top: 12px; }
[data-layout="sandbox-podcast"] .ep-cta a {
  color: var(--wba-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 45%, transparent);
  transition: text-decoration-color .15s;
}
[data-layout="sandbox-podcast"] .ep-cta a:hover { text-decoration-color: var(--wba-accent); }

/* ---------- REFERENCES ----------
   Rendered from the markdown list as-is; the `↳` marker and the link-on-its-
   own-line treatment are pure CSS, so the files keep plain `-` bullets. */
[data-layout="sandbox-podcast"] .ep-notes { margin-bottom: 36px; }
[data-layout="sandbox-podcast"] .ep-notes p {
  font-size: 15.5px; line-height: 1.7; color: var(--ink-2);
  max-width: 70ch; margin-bottom: 16px; text-wrap: pretty;
}
[data-layout="sandbox-podcast"] .ep-notes strong { color: var(--ink); font-weight: 600; }
[data-layout="sandbox-podcast"] .ep-notes hr {
  border: 0; border-top: 1px solid var(--rule-soft); margin: 22px 0;
}
[data-layout="sandbox-podcast"] .ep-notes ul { list-style: none; margin: 0; padding: 0; }
[data-layout="sandbox-podcast"] .ep-notes li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
[data-layout="sandbox-podcast"] .ep-notes li::before {
  content: "↳";
  position: absolute; left: 4px; top: 9px;
  font-family: var(--mono); font-size: 11px;
  color: var(--wba-accent);
}
/* Links drop onto their own line beneath the text they belong to. ~42 of the
   50 WBA reference bullets end with their link, so this reads as the mockup's
   two-line row; the handful with a trailing note simply run to three lines. */
[data-layout="sandbox-podcast"] .ep-notes li a {
  display: block;
  margin-top: 3px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--wba-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 45%, transparent);
  overflow-wrap: anywhere;
  transition: text-decoration-color .15s;
}
[data-layout="sandbox-podcast"] .ep-notes li a:hover { text-decoration-color: var(--wba-accent); }

/* ---------- EPISODE NAV (bottom) ---------- */
[data-layout="sandbox-podcast"] .ep-nav {
  display: flex; align-items: stretch; gap: 10px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 22px;
}
[data-layout="sandbox-podcast"] .ep-nav-btn,
[data-layout="sandbox-podcast"] .ep-nav-jump {
  border: 1px solid var(--rule); border-radius: 6px;
  display: flex; flex-direction: column;
  transition: border-color .15s, background-color .15s;
}
[data-layout="sandbox-podcast"] .ep-nav-btn {
  flex: 1; min-width: 0;
  padding: 12px 14px; gap: 5px; text-align: left;
}
[data-layout="sandbox-podcast"] .ep-nav-jump {
  flex: 0 0 auto; width: 92px;
  padding: 12px 10px; gap: 4px; justify-content: center; text-align: left;
}
[data-layout="sandbox-podcast"] .ep-nav-btn.right,
[data-layout="sandbox-podcast"] .ep-nav-jump.right { text-align: right; }
[data-layout="sandbox-podcast"] a.ep-nav-btn:hover,
[data-layout="sandbox-podcast"] a.ep-nav-jump:hover {
  border-color: var(--wba-accent); background: var(--wba-dim);
}
[data-layout="sandbox-podcast"] .ep-nav-btn.is-disabled,
[data-layout="sandbox-podcast"] .ep-nav-jump.is-disabled { opacity: 0.32; cursor: default; }

[data-layout="sandbox-podcast"] .ep-nav-direction {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
[data-layout="sandbox-podcast"] .ep-nav-jump .ep-nav-direction {
  font-size: 8.5px; letter-spacing: 0.08em; white-space: nowrap;
}
[data-layout="sandbox-podcast"] .ep-nav-title {
  font-family: var(--serif); font-size: 15px; line-height: 1.3; color: var(--ink);
}
[data-layout="sandbox-podcast"] .ep-nav-num {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink);
}
[data-layout="sandbox-podcast"] .ep-nav-all {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wba-accent); white-space: nowrap; text-align: center;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 40%, transparent);
  transition: text-decoration-color .15s;
}
[data-layout="sandbox-podcast"] .ep-nav-all:hover { text-decoration-color: var(--wba-accent); }

/* ---------- RESPONSIVE ----------
   v2's mockup breakpoints (980 / 860 / 720) are folded into the design
   system's 1024 / 640 so the page has one set of breakpoints, not two. */
@media (max-width: 1024px) {
  [data-layout="sandbox-podcast"] .episode-page { padding-top: 28px; }
  [data-layout="sandbox-podcast"] .ep-nav-mini { gap: 10px; }
  [data-layout="sandbox-podcast"] .ep-nav-mini .mini-sep,
  [data-layout="sandbox-podcast"] .ep-nav-mini .mini-edge { display: none; }
  [data-layout="sandbox-podcast"] .ep-nav { flex-wrap: wrap; }
  [data-layout="sandbox-podcast"] .ep-nav-jump { width: auto; flex: 1 0 40%; }
  [data-layout="sandbox-podcast"] .ep-nav-all { flex: 1 0 100%; order: 9; padding: 6px 0 0; }
}
@media (max-width: 640px) {
  /* The header stacks the same way at every width — only the numbers change.
     Labels move above their rows so the button column keeps the full width. */
  [data-layout="sandbox-podcast"] .ep-header { --splash-size: 88px; }
  [data-layout="sandbox-podcast"] .ep-splash { margin-bottom: 16px; }
  /* Logo above the text instead of beside it — 88px of indent is too much
     to give away on a phone. */
  [data-layout="sandbox-podcast"] .ep-identity { grid-template-columns: 1fr; row-gap: 16px; }
  [data-layout="sandbox-podcast"] .ep-action-row { flex-wrap: wrap; }
  [data-layout="sandbox-podcast"] .ep-action-row--listen .icon-btn { --icon-btn-size: 60px; }
  [data-layout="sandbox-podcast"] .ep-title { max-width: none; }
  [data-layout="sandbox-podcast"] .ep-nav-btn { flex: 1 0 100%; }
  [data-layout="sandbox-podcast"] .ep-nav-btn.right { text-align: left; }
}