/* ─────────────────────────────────────────────────────────────────────────────
   Podcast episode tables

   These sit under the artwork in the right-hand column of the podcast section.

   ⚠ THE SECTION IS .section--indigo, so text already inherits white
   (CLAUDE.md). Everything below therefore works with the dark ground rather
   than against it: hairlines and fills are white at low alpha, never a light
   panel with dark text, which would fight the section and look pasted on.

   Colour lives here and not in inline styles, for the same reason the rest of
   the project keeps it out of the markup.
   ──────────────────────────────────────────────────────────────────────────── */

.podcast-tables {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Following a .divider, the gap is already there — its bottom margin is
   var(--space-6). Keeping both stacks two gaps and pushes "COMING UP" away from
   the rule that is meant to introduce it. Written as an adjacent-sibling rule
   rather than against the id, so it holds wherever a divider is used this way. */
.divider + .podcast-tables {
  margin-top: 0;
}

/* More room above the rule than .divider's own var(--space-6) gives it. The
   platform links are pill BUTTONS with a light fill, a shadow and a hover lift,
   so they read as objects rather than as a line of text — and objects need more
   air beneath them than a paragraph does before the next thing starts. */
.podcast-links + .divider {
  margin-top: var(--space-10);
}

.podcast-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  /* Long episode titles must wrap rather than force the column wider than the
     media column, which would break the two-column split on narrow screens. */
  table-layout: auto;
}

/* ⚠ THE CAPTIONS CARRY .podcast-listen — the SAME class as "LISTEN IN…" —
   applied in js/podcast-render.js. "LISTEN IN…", "PUBLISHED EPISODES" and
   "COMING UP" are the three small gold labels in this section and are the same
   kind of thing: a label over a list. They must not merely resemble each other.

   An earlier version copied the type values into this rule instead. That is two
   places to change and no way to notice when only one of them was, which is
   exactly how three labels end up as three near-misses.

   ⚠ SO DO NOT SET font, size, weight, tracking or case BELOW. Anything here
   would override the shared rule and reintroduce the drift. Only box behaviour
   a <caption> needs and a <p> does not — and the colour, for the reason below. */
.podcast-table caption {
  text-align: left;
  /* .podcast-listen carries a top margin for its place in the prose column.
     Above a table the space is already there, so it is taken back — this is
     spacing, not type, and is the one thing the two contexts really differ on. */
  margin: 0 0 var(--space-2);
}

/* ⚠ WHITE, NOT GOLD — AND .podcast-listen IS WHY, NOT AN EXCEPTION TO IT.
   "LISTEN IN…" declares gold in components.css, but it is a <p> inside
   .section--indigo, and `.section--indigo p` (styles.css:288) is MORE SPECIFIC
   than `.podcast-listen` — 0,1,1 against 0,1,0 — so the gold never applies and
   the label renders white.

   A <caption> is not a <p>, so it never received that override and came out
   gold: two elements with the same class, rendering different colours. This
   rule extends the section's white to the caption, which is the same mechanism
   rather than a special case for the podcast tables.

   ⚠ Reading .podcast-listen alone tells you gold and is wrong. The cascade
   decides this one, and it was mis-read once already. */
.section--indigo .podcast-table caption {
  color: var(--color-white);
}

.podcast-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 0.75rem 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}

.podcast-table td {
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  vertical-align: top;
  color: rgba(255, 255, 255, 0.92);
}

.podcast-table tr:last-child td { border-bottom: none; }

/* Length and date: secondary information, and narrow so the title keeps the
   room it needs. */
.podcast-table__meta {
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  width: 1%;
}

/* ⚠ NO UNDERLINE AT REST, and the rule below the row is NOT one — that is the
   cell border on .podcast-table td, which stays. What used to sit here was a
   border-bottom on the link itself, which read as an underline under every
   title and fought the row dividers a few pixels beneath it.

   The titles are still obviously links: they are the only white text in the
   table, they sit under a column headed "Episode", and hovering turns them
   gold. That is colour-plus-context rather than colour alone, which is what
   the guidance is actually about — a link inside a paragraph of prose would
   need the underline, a column of them does not. */
/* Both tables set the title in semibold and the credit beneath it in regular,
   so the pair reads as one thing with a subtitle rather than as two lines of
   equal weight. .podcast-table__title is the upcoming table, which has no link
   because the episode does not exist yet. */
.podcast-table__link,
.podcast-table__title {
  font-weight: 600;
}

.podcast-table__link {
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}

.podcast-table__link:hover {
  color: var(--color-gold-light);
}

/* Keyboard focus needs a mark of its own: the hover colour alone is easy to
   lose against a dark ground when you are tabbing rather than pointing. */
.podcast-table__link:focus-visible {
  color: var(--color-gold-light);
  outline: 2px solid var(--color-gold-light);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The guest credit, on its own line under the episode title. Set back a little
   so the title still reads as the title and the credit as a subtitle — the line
   break alone would give both lines equal weight and the row would read as two
   separate things rather than one. */
.podcast-table__with {
  /* ⚠ Stated, not inherited. The title above is semibold and this sits inside
     it, so without an explicit weight the credit comes out bold too and the
     whole distinction disappears. */
  font-weight: 400;
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.7);
}

.podcast-table__link:hover .podcast-table__with,
.podcast-table__link:focus-visible .podcast-table__with {
  color: inherit;
}

/* Upcoming is a promise, not a record — set back slightly so it reads as the
   softer of the two without needing a second heading style. */
.podcast-table--upcoming td { color: rgba(255, 255, 255, 0.78); }

/* The topic itself is full white, matching the published titles beside it, so
   the two tables scan alike. Only the cell text is lifted — the credit keeps
   its own colour, set on .podcast-table__with above.

   ⚠ TWO CLASSES, NOT ONE. `.podcast-table__title` alone loses to
   `.podcast-table--upcoming td` on specificity and the rule silently does
   nothing — the same trap that made the podcast captions render gold when
   they should have been white. */
.podcast-table--upcoming .podcast-table__title { color: #fff; }

@media (max-width: 640px) {
  .podcast-table { font-size: 0.85rem; }
  .podcast-table th,
  .podcast-table td { padding-right: 0.5rem; }
}