/* Alkafeel+ — program (series) page. Same hero / rows / cards as home (components.css).
   Tokens only. Motion: transform / opacity only. */

/* season selector: shared, in components.css */

/* episodes: cards in a grid (wider screens), thumbnail + text rows on phones */
.eps {
  display: grid; gap: var(--sp-6) var(--gap); padding-inline: var(--pad);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.ep { display: grid; gap: var(--sp-3); color: inherit; transition: transform var(--dur-2) var(--ease); }
.ep-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--c-surface); transform: translateZ(0); }
.ep-thumb picture, .ep-thumb img { width: 100%; height: 100%; }
.ep-thumb img { object-fit: cover; transition: transform var(--dur-3) var(--ease); }
.ep-body { display: grid; gap: var(--sp-1); min-width: 0; align-content: start; }
.ep-title { font-size: var(--fs-16); font-weight: var(--fw-semi); color: var(--c-text); line-height: var(--lh-title); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.ep-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-12); color: var(--c-text-body); }
.ep-meta .dur, .ep-done { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ep-meta svg { width: 12px; height: 12px; color: var(--c-primary); flex: none; }
.ep-resume, .ep-done { color: var(--c-text-2); font-weight: var(--fw-semi); }
.ep-soon { font-weight: var(--fw-bold); color: var(--c-text-2); }
.ep.is-soon .ep-thumb img { opacity: .6; }
.ep:focus-visible { outline: none; }
.ep:focus-visible .ep-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.ep:focus-visible .card-play { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .ep:hover { transform: translateY(-4px); }
  .ep:hover .ep-thumb img { transform: scale(1.05); }
  .ep:hover .card-play { opacity: 1; transform: none; }
}
@media (max-width: 599px) {
  .eps { gap: var(--sp-4); }
  .ep { grid-template-columns: 42% minmax(0, 1fr); align-items: start; }
  .ep-title { font-size: var(--fs-15); }
}