/* ============================================================
   Podcast rows — artwork, episode line and the two app links.

   The base .pod-rec / .pr-show / .pr-what / .pr-span rules live in
   css/style.css and still do most of the work. This file only adds
   what v2 introduced:

     .pr-art     the show's square artwork, sized to match the book
                 covers in the block below so the two read as one
                 pair of lists rather than two designs
     .pr-ep      the matched episode title, when there is one
     .pr-app     the small Spotify / Apple links on the meta line

   .pod-rec used to be an <a>. It is now a <div> holding two real
   links, because a row can point at two different places and an
   anchor cannot contain another anchor. The hover highlight is
   therefore driven from the row rather than from the link.
   ============================================================ */

.pod-rec{
  display:flex;
  gap:11px;
  align-items:flex-start;
}
.pr-art{
  flex:0 0 46px;width:46px;height:46px;
  object-fit:cover;border-radius:3px;
  background:rgba(255,255,255,.03);
  box-shadow:0 1px 4px rgba(0,0,0,.45);
}
/* a show with no catalogue entry, or artwork that has since 404'd */
.pr-art-blank{box-shadow:none}

.pr-text{flex:1 1 auto;min-width:0}

/* the show name is a link now, so it needs the link styling removed */
a.pr-show{text-decoration:none;color:var(--ink)}
.pod-rec:hover a.pr-show{color:var(--gold)}

/* The matched episode. Gold, so the eye can tell at a glance which
   rows point at one specific episode and which point at a whole show. */
.pr-ep{
  display:block;margin-top:3px;
  font-size:12px;line-height:1.4;color:var(--gold);opacity:.92;
}
.pr-ep::before{content:"▸ ";opacity:.6}

/* Spotify first, Apple second, both on the year line. */
.pr-span .pr-app{
  margin-left:10px;text-decoration:none;
  color:var(--ink-dim);border-bottom:1px solid transparent;
}
.pr-span .pr-app:hover{color:var(--gold);border-bottom-color:currentColor}

@media (max-width:640px){
  .pr-art{flex-basis:38px;width:38px;height:38px}
}