/* ─────────────────────────────────────────────────────────────
   ARL ELEVATE - Page-specific styles
   Per-page rules that don't belong in components.css.
   Currently minimal; will grow as pages are built.
   ───────────────────────────────────────────────────────────── */

/* HOME - TODO when content lands */

/* ABOUT - TODO when content lands */

/* HOW WE WORK - TODO when content lands */

/* RESULTS - TODO when content lands */

/* CONTACT - TODO when content lands */

/* ─── PODCASTS ──────────────────────────────────────────────── */

.podcast-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.podcast-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--aubergine);
  background: var(--cream);
}

.podcast-card--placeholder {
  border-top-color: var(--rule);
  opacity: 0.55;
}

.podcast-card__meta {
  margin-bottom: var(--space-3);
}

.podcast-card__title {
  font-family: var(--serif-display);
  font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 0;
  font-weight: 300;
  font-size: var(--type-xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.podcast-card__body {
  font-size: var(--type-base);
  color: var(--espresso);
  line-height: 1.65;
  margin-bottom: var(--space-5);
  flex: 1;
}

.podcast-card__link {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 900px) {
  .podcast-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .podcast-list {
    grid-template-columns: 1fr;
  }

  .podcast-card {
    padding: var(--space-5) var(--space-5);
  }
}