/* Carduri de episod: folosite în index.html și podcasturi.html.
   Folosesc variabilele de culoare definite în fiecare pagină. */
.ep-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.ep { display: flex; flex-direction: column; }
.ep-img {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--petrol); border-radius: 6px;
}
.ep-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.ep-img img.is-logo { object-fit: contain; padding: 14%; background: var(--white); }
.ep-img:hover img { transform: scale(1.03); }
.ep h3 {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.12;
  letter-spacing: -0.015em; margin: 1.1rem 0 .35rem;
}
.ep h3 a { text-decoration: none; }
.ep h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ep-sub {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  color: var(--teal-dark); margin: 0 0 .75rem;
}
.ep-desc { font-size: 1.0625rem; line-height: 1.55; color: var(--muted); margin: 0 0 1.1rem; }
.ep-more {
  margin-top: auto; align-self: flex-start;
  font-family: var(--display); font-weight: 600; font-size: 1rem;
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--teal);
  padding-bottom: .1rem;
}
.ep-more:hover { color: var(--teal-dark); }

.ep-empty {
  grid-column: 1 / -1; padding: 3rem 0; color: var(--muted);
  font-family: var(--display); font-size: 1.125rem;
}

@media (max-width: 1000px) { .ep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ep-grid { grid-template-columns: 1fr; gap: 2.25rem; } }
@media (prefers-reduced-motion: reduce) { .ep-img img { transition: none; } }