/* ==========================================================================
   Podcast — lista de episoade pe rânduri și capitolele unui episod
   (2026-09-24, decizia clientului).

   .episode-list / .episode-row: forma din aplicațiile de podcast (Spotify,
   Apple Podcasts): coperta pătrată mică, titlul, începutul descrierii, codul,
   data și durata, și butonul rotund de play lângă ele. Ascultătorii o
   recunosc fără s-o învețe; pe telefon încap patru-cinci episoade pe ecran.
   Titlul e link și acoperă tot rândul (un singur tab stop pentru pagină);
   play-ul e al doilea control, deasupra linkului.

   .chapters: capitolele episodului (din timestamps-urile descrierii). Fiecare
   pornește videoul de la momentul lui, în modal.
   ========================================================================== */

/* --- Lista de episoade -------------------------------------------------
   Rândul are două coloane: coperta și textul. Play-ul nu stă la marginea
   dreaptă a rândului (pe desktop ar fi la sute de pixeli de titlu), ci sub
   text, în rândul cu data și durata, ca în aplicațiile de podcast: acțiunea
   stă lângă lucrul pe care acționează. E un cerc neutru, nu Impuls: pe o
   listă de douăzeci de episoade, douăzeci de butoane pline ar concura între
   ele; culoarea de acțiune apare doar la hover. Separatorii sunt linii drepte
   între rânduri, fără rază. */
.episode-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.episode-row {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}
/* Linia dintre rânduri: tonul textului, foarte diluat, ca să se vadă pe orice
   bandă (hairline-ul e chiar culoarea benzii Liniște) și în tema întunecată. */
.episode-row + .episode-row { border-top: 1px solid var(--profunzime-wash); }
.episode-row:first-child { padding-top: 0; }
.episode-row:last-child { padding-bottom: 0; }

.episode-row__cover {
  position: relative;
  width: 88px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  /* Doar culoarea: gradientul placeholderului (fără copertă) rămâne. */
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform var(--t-card) var(--ease);
}
.episode-row__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-row__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  min-width: 0;
  max-width: var(--measure);
}

.episode-row__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-heading);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-row__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-btn) var(--ease);
}
.episode-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.episode-row__link:focus-visible { outline: none; }
.episode-row:hover .episode-row__link { color: var(--impuls-text); }
.episode-row:hover .episode-row__cover { transform: scale(1.03); }
.episode-row:has(.episode-row__link:focus-visible) {
  outline: 2px solid var(--impuls);
  outline-offset: 4px;
}

.episode-row__text {
  margin: 0;
  color: var(--reflectie);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.episode-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}

.episode-row__meta {
  margin: 0;
  color: var(--reflectie);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.episode-row__play {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--profunzime);
  color: var(--claritate);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-btn) var(--ease), background-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease);
}
.episode-row__play i { font-size: 16px; line-height: 0; }
/* Pe banda Profunzime (ex. blocul Episod principal, Compact, într-un hero
   închis): play-ul se inversează, altfel e un cerc închis pe fundal închis;
   procentul, hover-ul titlului și linia dintre rânduri iau tonurile benzii
   (4.5:1 pe text; linia ca .hairline pe bandă).
   Hover-ul play-ului rămâne Impuls: regulile de mai jos vin după. */
.band--profunzime .episode-row__play { background: var(--claritate); color: var(--profunzime); }
.band--profunzime .episode-row:hover .episode-row__link { color: var(--impuls-light); }
.band--profunzime .episode-progress { color: rgba(255, 255, 255, .7); }
.band--profunzime .episode-row + .episode-row { border-top-color: rgba(255, 255, 255, .14); }
.episode-row__play:hover,
.episode-row:hover .episode-row__play {
  background: var(--impuls);
  color: #FFFFFF;
}
.episode-row__play:hover { transform: scale(1.06); }
.episode-row__play:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- Progresul ascultării (2026-09-26, decizia clientului) --------------
   Cât a ascultat vizitatorul din episod, ținut doar în browserul lui
   (components.js). Elementul îl pune scriptul, la capătul rândului cu
   play-ul și meta; fără JavaScript sau fără progres nu există. Bara e
   Impuls pe spălarea lui, ca să se vadă și pe banda Liniște, și în tema
   întunecată. La final, procentul devine „Ascultat”. */
.episode-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 120px;
  max-width: 220px;
  margin-left: auto;
  color: var(--reflectie);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}
.episode-progress__bar {
  flex: 1 1 auto;
  height: 4px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--impuls-wash-strong);
}
.episode-progress__fill {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--impuls);
}
.episode-progress__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}
.episode-progress__label i { line-height: 0; }
.episode-progress--done { color: var(--impuls-text); }
/* Sub coperta din pagina episodului: aceeași bară cu procentul lângă ea,
   ca în liste, doar pe toată lățimea (2026-09-27, decizia clientului). */
.episode-progress--wide {
  max-width: none;
  margin-left: 0;
}

/* Pe telefon: coperta mai mică, descrierea pe un rând; progresul pe rândul
   lui, sub play, pe toată lățimea textului. */
@media (max-width: 767px) {
  .episode-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--sp-4);
    padding-block: var(--sp-4);
  }
  .episode-row__cover { width: 64px; }
  .episode-row__text { -webkit-line-clamp: 1; }
  .episode-progress {
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }
}

/* --- Capitole ---------------------------------------------------------- */
.chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--profunzime-wash);
}

.chapters__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-2);
  border: 0;
  border-bottom: 1px solid var(--profunzime-wash);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
}
button.chapters__item { cursor: pointer; }
button.chapters__item:hover { background: var(--impuls-wash); }
button.chapters__item:hover .chapters__time { color: var(--impuls-text); }
button.chapters__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.chapters__time {
  flex: none;
  min-width: 4.5ch;
  color: var(--reflectie);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Pagina unei serii (2026-09-26, decizia clientului) ------------------
   Așezarea paginii unui show în Spotify, în locul capului de secțiune urmat
   de norul de pastile (douăzeci de serii pe patru rânduri, deasupra
   episoadelor). .show-head: coperta pătrată lângă tip, nume, cifre,
   descriere și o singură acțiune. .show-layout: episoadele, apoi, lateral de
   la 1024px, .series-nav: sezoanele ca numere (pastile), seriile tematice ca
   rânduri scurte (.episode-list--compact). */
.show-head {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr);
  align-items: end;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.show-head__cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--liniste);
  box-shadow: var(--shadow-card);
}
.show-head__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.show-head__body { min-width: 0; }
.show-head__body .eyebrow a { color: inherit; text-decoration: none; }
.show-head__body .eyebrow a:hover { text-decoration: underline; }

.show-head__title {
  margin: 0;
  overflow-wrap: anywhere;
}

.show-head__meta {
  margin: var(--sp-3) 0 0;
  color: var(--reflectie);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.show-head__text {
  margin: var(--sp-4) 0 0;
  color: var(--reflectie);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.show-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

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

.show-layout__title {
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--profunzime-wash);
  font-size: var(--fs-h4);
}

.series-nav {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--prezenta);
  border: var(--card-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

.series-nav__title {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-body);
}

.series-nav__seasons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: var(--sp-2);
}
.series-nav__seasons .filter-chip {
  justify-content: center;
  padding-inline: 0;
  font-variant-numeric: tabular-nums;
}

.series-nav > .btn { justify-self: start; }

/* Rânduri scurte: coperta mică, numele și numărul de episoade. */
.episode-list--compact .episode-row {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.episode-list--compact .episode-row__cover { width: 56px; }
.episode-list--compact .episode-row__body { gap: var(--sp-1); }
.episode-list--compact .episode-row__title { font-size: var(--fs-sm); }

/* Rândul din coloane înguste (Episod principal, Compact; 2026-09-28): play-ul,
   detaliile și progresul rămân pe un singur rând, pe orice ecran. Detaliile
   se taie cu „…” când nu încap; bara se strânge, procentul rămâne întreg.
   Pe telefon nu trece pe rândul lui, ca în liste. */
.episode-list--narrow .episode-row__actions { flex-wrap: nowrap; }
.episode-list--narrow .episode-row__meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.episode-list--narrow .episode-progress { flex: 1 1 96px; min-width: 88px; max-width: 160px; margin-left: auto; }
.episode-row__link[aria-current="page"] { color: var(--impuls-text); }

@media (min-width: 1024px) {
  .show-head {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--sp-7);
  }
  .show-layout--aside {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--sp-9);
  }
}

@media (max-width: 767px) {
  .show-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    margin-bottom: var(--sp-7);
  }
  .show-head__cover { width: 184px; }
  .series-nav { padding: var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) {
  .episode-row__play:hover,
  .episode-row:hover .episode-row__cover { transform: none; }
}

/* --- Căutarea în podcast (2026-10-05, decizia clientului) ------------------
   Pe lista tuturor episoadelor: câmpul .search-form (navigation.css) deasupra
   listei, apoi rândul de stare, care își păstrează înălțimea și când e gol,
   ca lista să nu sară. Rezultatele sunt aceleași .episode-row; termenul
   căutat e marcat ca în .search-result. Cât se încarcă, lista se estompează. */
.podcast-search__status {
  min-height: 1.5em;
  margin: var(--sp-3) 0 var(--sp-5);
  color: var(--reflectie);
  font-size: var(--fs-sm);
}
.podcast-search__results { transition: opacity var(--t-btn) var(--ease); }
.podcast-search__results[aria-busy="true"] { opacity: .5; }
.episode-row mark {
  background: var(--implinire-wash);
  color: var(--profunzime);
  font-weight: 600;
}