/* Podcast directory rebuild - 2026-07-31
   Additive only. Nothing here overrides an existing rule; every selector is new
   or scoped under .podcast-card, so the rest of the site is untouched.

   The one hard requirement: every logo renders at the SAME displayed size in the
   SAME position, regardless of source pixel dimensions. A fixed box plus
   object-fit: contain does that without cropping anyone's artwork. */

.podcast-card {
  position: relative;
  justify-content: flex-start;
  padding-top: 26px;
}

/* Fixed logo box. 88x88 is large enough to read a wordmark, small enough that
   three cards still fit a row comfortably. */
.podcast-logo-frame {
  display: flex;
  width: 88px;
  height: 88px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.podcast-logo {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Placeholder so a missing image still occupies the identical footprint and the
   grid never goes ragged. */
.podcast-logo-frame.is-empty::after {
  content: attr(data-initials);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--line);
}

.podcast-card h3 {
  margin: 0 0 6px;
  font-size: 1.02rem;
  line-height: 1.25;
}

.podcast-card .host-line {
  margin: 0 0 8px;
  font-size: 0.86rem;
}

.podcast-card .podcast-description {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* The freshness block. This is the part the 5AM job updates, and the only part.
   It sits at the bottom of every card in the same place so a reader can scan
   down a column of dates. */
.podcast-latest {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 0.86rem;
}

.podcast-latest-title {
  display: block;
  margin-bottom: 4px;
  line-height: 1.35;
}

.podcast-date {
  display: block;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Honest failure state: never show a stale date as though it were current. */
.podcast-latest.is-unverified .podcast-date {
  font-weight: 700;
  opacity: 0.75;
}

.podcast-latest.is-unverified .podcast-unverified-note {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.8;
}

/* Static cards (WORLD Radio) state a cadence instead of a date. Same shell,
   same position, same weight - it just is not a freshness claim. */
.podcast-latest.is-static .podcast-date {
  font-weight: 800;
}

/* WORLD Radio's art is the reason many readers open this page, so its frame is
   allowed to run larger than the rest. It is the single deliberate exception to
   the uniform-size rule. */
.podcast-logo-frame.is-large {
  width: 116px;
  height: 116px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}

.podcast-logo-frame.is-large .podcast-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .podcast-directory-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .podcast-directory-grid,
  .front-podcast-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* R2 front page: the first row of the podcast directory - three squares. */
.front-podcast-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 820px) {
  .front-podcast-grid--three { grid-template-columns: minmax(0, 1fr); }
}