/* ==========================================================================
   Harvey Community Radio — Listen again (/recordings) restyle
   Load AFTER /listen-again-accordion.css (and after /sponsors.css if present).
   Uses the live DOM as it is on 27 Sep 2026:
     main > div > p.uppercase ("Catch up") + h1 + p (intro) + ul.hcr-la-list
     ul.hcr-la-list > li.hcr-la-head > h2 + button.hcr-la-toggle      (group header)
     ul.hcr-la-list > li.hcr-la-item > [data-slot=card] > [button>img] + [data-slot=card-content]
       card-content > div.flex-wrap (chip + date) | div > h2 + p + p… | div > button[data-slot=button] | a | audio
   Everything is scoped with ul.hcr-la-list. That class is only added by
   listen-again-accordion.js on /recordings, so no other page is affected.
   Rollback: remove the <link>.
   ========================================================================== */

:root {
  --lar-ink: #2B2F36;          /* charcoal */
  --lar-muted: #5B6470;
  --lar-hair: #EEF1F5;
  --lar-link: #2F4A63;         /* site link slate (only for real text links) */
  --lar-radius: 14px;
  --lar-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.05);
  --lar-font: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Page header: no eyebrow, H1 at the site's section-heading size (What's on
      "Closing soon" = text-3xl 600), intro clamped to one quiet 16px line.
   -------------------------------------------------------------------------- */
main:has(ul.hcr-la-list) { max-width: 808px !important; }            /* 760px content + 24px gutters */
main:has(ul.hcr-la-list) > div > p.uppercase:has(+ h1) { display: none !important; }
main:has(ul.hcr-la-list) > div > h1 {
  margin: 4px 0 0 !important;
  font-family: var(--lar-font) !important;
  font-size: 1.625rem !important;     /* = text-3xl, 29.25px on this site */
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
  color: #16181D;
}
main:has(ul.hcr-la-list) > div > h1 + p {
  margin: 4px 0 0 !important;
  max-width: none !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--lar-muted) !important;
  white-space: nowrap;                 /* one line; ellipsis on narrow phones */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* any further intro paragraphs before the list */
main:has(ul.hcr-la-list) > div > h1 + p ~ p { display: none !important; }

/* --------------------------------------------------------------------------
   2. List + group header cards
   -------------------------------------------------------------------------- */
main ul.hcr-la-list.hcr-la-list.hcr-la-list {            /* (0,3,2) + loaded later: beats spacing-tight.css "main ul.flex.flex-col.gap-4 { gap: 8px !important }" */
  gap: 0 !important;
  margin-top: 20px !important;
  /* The card shadow is drawn ONCE on the list as a drop-shadow, so an open group
     (header + episode rows, touching) casts one continuous shadow with no seams,
     and each closed header casts its own. Same values as the site's box-shadow.
     (cool-studio-override.css kills box-shadow site-wide, but not filter.)
     Safe: the photo lightbox is portaled to <body>, not inside this list. */
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.06)) drop-shadow(0 4px 6px rgba(0,0,0,.05));
  font-family: var(--lar-font);
}
ul.hcr-la-list > li.hcr-la-head {
  position: relative;
  display: block !important;
  min-height: 56px !important;
  margin: 10px 0 0 !important;          /* 10px between cards (overrides mt-6) */
  padding: 14px 52px 14px 16px !important;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 0 !important;
  border-radius: var(--lar-radius);
}
ul.hcr-la-list > li.hcr-la-head:first-child { margin-top: 0 !important; }
/* room for the "8 episodes" line (added by listen-again-restyle.js) */
ul.hcr-la-list > li.hcr-la-head:has(.hcr-lar-count) { padding-bottom: 34px !important; }

ul.hcr-la-list > li.hcr-la-head > h2 {
  margin: 0 !important;
  font-family: var(--lar-font) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--lar-ink) !important;
}
/* The accordion button already covers the whole card (inset: 0) = tap target >= 56px */
ul.hcr-la-list > li.hcr-la-head > button.hcr-la-toggle {
  min-height: 56px !important;
  padding: 0 14px 0 0 !important;
  border-radius: var(--lar-radius) !important;
  color: var(--lar-ink) !important;
  -webkit-tap-highlight-color: rgba(43,47,54,.06);
}
ul.hcr-la-list > li.hcr-la-head > button.hcr-la-toggle:hover { background: rgba(43,47,54,.025) !important; }
ul.hcr-la-list > li.hcr-la-head > button.hcr-la-toggle:focus-visible { outline: 2px solid var(--lar-ink) !important; outline-offset: 2px !important; }
ul.hcr-la-list > li.hcr-la-head .hcr-la-chev { width: 22px; height: 22px; color: var(--lar-ink); }
.hcr-lar-count {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--lar-muted);
  pointer-events: none;
}

/* Open group: header + its episodes read as one white card (shared drop-shadow, see ul). */
ul.hcr-la-list > li.hcr-la-head.is-open {
  border-radius: var(--lar-radius) var(--lar-radius) 0 0;
}
ul.hcr-la-list > li.hcr-la-head.is-open > button.hcr-la-toggle { border-radius: var(--lar-radius) var(--lar-radius) 0 0 !important; }

/* --------------------------------------------------------------------------
   3. Episode rows
   -------------------------------------------------------------------------- */
ul.hcr-la-list > li.hcr-la-item {
  margin: 0 !important;
  background: #FFFFFF;
  border-top: 1px solid var(--lar-hair);
}
ul.hcr-la-list > li.hcr-la-item:has(+ li.hcr-la-head),
ul.hcr-la-list > li.hcr-la-item:last-child {
  border-radius: 0 0 var(--lar-radius) var(--lar-radius);
}

/* Card shell: drop ring, blue/orange left bar, rounding; become a compact row */
ul.hcr-la-list > li.hcr-la-item > [data-slot="card"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;           /* kills ring-1 */
  overflow: visible !important;
}
/* Rows with a photo (Brekky): small 56px thumbnail; still opens the large view */
ul.hcr-la-list > li.hcr-la-item > [data-slot="card"]:has(> button > img) { grid-template-columns: 56px minmax(0, 1fr); }
ul.hcr-la-list > li.hcr-la-item > [data-slot="card"] > button:has(> img) {
  width: 56px !important;
  height: 56px !important;
  padding: 0; margin: 0;
  border-radius: 10px !important;
  overflow: hidden;
  background: var(--lar-hair);
}
ul.hcr-la-list > li.hcr-la-item > [data-slot="card"] > button > img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; border-radius: 0 !important;
}

ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  min-height: 44px;
  padding: 0 !important;
}
/* "Listen back" chip + duplicate date line: gone (the date is also in the programme line) */
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > div.flex-wrap:not(:has(h2, button, a, audio)) { display: none !important; }
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > div:empty { display: none !important; }
ul.hcr-la-list > li.hcr-la-item [data-slot="badge"] { display: none !important; }

/* Text block */
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > div:has(> h2) { grid-column: 1; grid-row: 1; min-width: 0; }
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] h2 {
  margin: 0 !important;
  font-family: var(--lar-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--lar-ink) !important;
}
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] h2 ~ p {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: var(--lar-muted) !important;
}
/* descriptions (these carry the duration): max 2 lines */
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] h2 ~ p.text-muted-foreground {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Round 44px charcoal play button on the right (text hidden visually, aria-label set by JS) */
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > div:has(> button[data-slot="button"]) {
  grid-column: 2; grid-row: 1;
  display: block !important;
  align-self: center;
}
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] button[data-slot="button"][aria-pressed="false"] {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--lar-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFFFFF' d='M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E") no-repeat 56% 50% / 18px 18px !important;
  color: transparent !important;
  font-size: 0 !important;             /* hides "Play catch-up" visually; name kept */
  overflow: hidden;
  box-shadow: none !important;
}
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] button[data-slot="button"][aria-pressed="false"]:hover { background-color: #3A3F47 !important; }
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] button[data-slot="button"]:focus-visible { outline: 2px solid var(--lar-ink) !important; outline-offset: 2px !important; }

/* Text links (e.g. "Open Shire listen-back", "Open podcast page"): kept, 44px tall */
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > a {
  grid-column: 1;
  justify-self: start;
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  margin: -6px 0 -10px;               /* keeps the row compact while the target stays 44px */
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--lar-link) !important;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. After play: "Playing below" pill stays removed (existing accordion CSS
      hides it); the player spans the full row.
   -------------------------------------------------------------------------- */
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > div:has(> button[aria-pressed="true"]):not(:has(> :not(button[aria-pressed="true"]))) { display: none !important; }
ul.hcr-la-list > li.hcr-la-item [data-slot="card-content"] > audio {
  grid-column: 1 / -1;
  display: block;
  width: 100% !important;
  height: 44px;
  margin: 8px 0 2px !important;
  border-radius: 999px;
}
/* With a thumbnail the player starts under the thumbnail too */
ul.hcr-la-list > li.hcr-la-item > [data-slot="card"]:has(> button > img):has(audio) [data-slot="card-content"] > audio { margin-left: -68px !important; width: calc(100% + 68px) !important; }

@media (prefers-reduced-motion: reduce) { ul.hcr-la-list .hcr-la-chev { transition: none !important; } }

/* Intro wraps in full on phones (Duncan 23:37): no ellipsis, no clamp. */
main:has(ul.hcr-la-list) > div > h1 + p {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  -webkit-line-clamp: unset !important;
  line-clamp: none !important;
  display: block !important;
}
/* Quiet per-episode help line (catalogue helpNote), e.g. Lifeline under SOL Ep 7 */
.hcr-help-note { margin: 0; font-size: 13px; line-height: 1.4; color: #5A6270; }
.hcr-help-note a { color: #2F4A63 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; display: inline-block; padding: 12px 0; margin: -12px 0; }