/*
 * bb-podcast-archive.css  (Lot 5 · reworked Lot 16 · reskinned dark Lot 22 ·
 * Seasons carousel + page header + episode-card carousels Lot 25)
 * [bb_podcast_archive] + the shared episode LIST component's `.bbp-ep-group`
 * heading (also used by [bb_podcast_season] and [bb_podcast_guest] — the
 * row styles themselves, `.bbp-ep__*`, are for THEIR vertical list; the
 * archive no longer renders that list — see below).
 *
 * v3 (Lot 22, see design/mockups-v3.html) : sombre, inspiré Radio France,
 * identité BreachBuilders (accent or, DM Sans). `.bbp-ep` is a self-contained
 * dark card AT EVERY BREAKPOINT (not just mobile) — deliberately, so it stays
 * readable when embedded on the season / guest pages, whose own green/cream
 * chrome hasn't been reskinned yet (Lots 23-24). Only widens the cover and
 * reveals the description as the viewport grows.
 *
 * Lot 25 (retour utilisateur, captures radiofrance.fr à l'appui) :
 * - la bande "Seasons" est reconstruite contre radiofrance-capture/
 *   (notes-page1-listing.md, design-tokens.md) — un vrai carrousel horizontal
 *   avec flèches rondes à côté du titre de section, et des cartes portrait
 *   "CardFull" (image/dégradé de fond + scrim bas + titre en overlay
 *   uniquement au survol/focus), à la place d'une grille fixe à 2 colonnes.
 *   Une seule saison existe aujourd'hui, mais un carrousel est ce qui tient
 *   vraiment la charge une fois qu'il y en a plusieurs — une grille plafonne
 *   visuellement au-delà de 3-4 éléments.
 * - la liste verticale détaillée `.bbp-eplist`/`.bbp-ep` (Lot 16/22) ne
 *   convenait pas à cette page de découverte légère : elle est remplacée par
 *   un carrousel de cartes `.bbp-card` (voir bb-podcast-tokens.css) par
 *   groupe de saison, façon "Les derniers épisodes de {émission}" de
 *   radiofrance.fr. `.bbp-ep`/`.bbp-eplist` restent le bon composant sur les
 *   pages saison/invité (liste complète, cherchable/triable — leur "page
 *   série" chez RF), donc conservés ici tels quels pour ces deux contextes.
 *
 * Depends on bb-podcast-tokens.css. Mobile-first · breakpoints Elementor : 768 / 992 / 1280 / 1731.
 */

/* Lot 26, retour utilisateur : les sections ne doivent imposer NI fond NI
 * marge — c'est tout le sens du découpage par shortcode, laisser Elementor
 * piloter le fond/l'espacement de chaque section plutôt que le figer ici.
 * `.bbp-archive` ne garde donc que la couleur de texte (les sections restent
 * pensées pour un fond sombre — à définir côté section/colonne Elementor) ;
 * aucune règle de marge n'existait déjà sur ce sélecteur (`.bbp{margin:0}`
 * dans tokens.css) : l'encadrement visible en aperçu vient du
 * container/padding de la section Elementor qui héberge le widget, pas de
 * ce fichier — mettre cette section en Content Width "Full Width", padding
 * 0 (même traitement que l'attribut `container="elementor"` côté shortcode). */
.bbp-archive { color: var(--bb-d-ink); }

/* =========================================================================
   PAGE HEADER — H1 + series line (radiofrance-capture/ page1-listing always
   opens on a headline-medium H1 + breadcrumb; the archive previously relied
   on the theme's own title, which a full-width Elementor TB template doesn't
   render at all).
   ========================================================================= */
/* Lot 26, retour utilisateur (2e passage) : aucun padding vertical non plus —
 * "je gère tout ça sur Elementor". La section ne pose plus que ses règles de
 * mise en forme du texte ; l'espacement au-dessus/en dessous devient le
 * padding du widget/de la colonne Elementor qui l'héberge. */
.bbp-archive-head { padding-block: 0; }
/* .bbp-archive-head .bbp-h1 (0,2,0) — a bare theme `h1{color:…}` rule (0,0,1)
   silently beats the zero-specificity `:where(.bbp h1…){color:inherit}` reset
   in tokens.css (same bug family documented there, Lots 22-23 — just never
   surfaced before because every other heading in the plugin is a concretely
   classed `<h1 class="bbp-ep-title">`, not a bare `.bbp-h1`). */
.bbp-archive-head .bbp-h1 { color: var(--bb-d-ink); }
.bbp-archive-head__lead { margin-top: 8px; font-size: 15px; color: var(--bb-d-ink-2); }

/* =========================================================================
   SEASONS CAROUSEL  (cards → dedicated season pages)
   ========================================================================= */
.bbp-seasons-strip .bbp-carousel { padding-block: 0; }
.bbp-seasons-strip__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; margin-left: 20px; margin-right: 20px; }
@media (min-width: 768px)  { .bbp-seasons-strip__head { margin-left: 25px; margin-right: 25px; } }
@media (min-width: 992px)  { .bbp-seasons-strip__head { margin-left: 40px; margin-right: 40px; } }
@media (min-width: 1280px) { .bbp-seasons-strip__head { margin-left: 60px; margin-right: 60px; } }
@media (min-width: 1731px) { .bbp-seasons-strip__head { margin-left: 80px; margin-right: 80px; } }
.bbp-seasons-strip__head .bbp-h2 { color: #044229; margin: 0;}

/* .bbp-carousel-arrows / .bbp-carousel-arrow moved to bb-podcast-tokens.css in
   Lot 25 — now also used by the "More from this…" rails on the episode page. */

/* Même correctif que `.bbp-rail__row` (bb-podcast-tokens.css) : la marge
 * négative + `var(--bb-gutter)` s'annulaient exactement l'une l'autre
 * depuis que `container="elementor"` (gutter à 0) est le défaut — plus
 * aucun inset visible. Padding fixe posé directement sur la piste
 * défilante à la place : visible au repos avant la 1re carte, disparaît
 * une fois scrollé, réapparaît à droite en fin de course. */
.bbp-season-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
  padding-inline: 20px; scroll-padding-inline: 20px;
}
.bbp-season-track::-webkit-scrollbar { display: none; }
/* Inset progressif par palier — mêmes breakpoints Elementor que le reste du
 * plugin (768/992/1280/1731, soit 767/991/1279/1730 jusqu'à). Même sélecteur
 * qu'au-dessus (spécificité égale) : l'ordre dans le fichier suffit à
 * prioriser la bonne valeur, pas besoin de qualifier `.bbp .bbp-season-track`.
 * Palier @768 à 40px (pas 25 comme les autres sections) : demande explicite —
 * cette piste saute le palier 25px, contrairement à `.bbp-rail__row` /
 * `.bbp-ep-group` / `.bbp-seasons-strip__head`. */
@media (min-width: 768px)  { .bbp-season-track { padding-inline: 40px; scroll-padding-inline: 40px; } }
@media (min-width: 992px)  { .bbp-season-track { padding-inline: 40px; scroll-padding-inline: 40px; } }
@media (min-width: 1280px) { .bbp-season-track { padding-inline: 60px; scroll-padding-inline: 60px; } }
@media (min-width: 1731px) { .bbp-season-track { padding-inline: 80px; scroll-padding-inline: 80px; } }

/* .bbp .bbp-x (0,2,0) — beats a theme/Elementor "a" colour rule at (0,1,1)
   regardless of stylesheet order (see tokens.css header, Lot 23 finding). */
.bbp .bbp-season-card {
  position: relative; flex: 0 0 auto; width: 156px; aspect-ratio: 195 / 340;
  border-radius: var(--bb-radius-lg); overflow: hidden; isolation: isolate;
  scroll-snap-align: start; text-decoration: none; color: inherit;
  background: linear-gradient(160deg, var(--bbp-season-accent, var(--bb-d-surface-3)), var(--bb-d-bg-soft));
}
@media (min-width: 768px)  { .bbp .bbp-season-card { width: 186px; } }
@media (min-width: 1280px) { .bbp .bbp-season-card { width: 210px; } }

.bbp-season-card__cov { position: absolute; inset: 0; }
.bbp-season-card__cov img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbp-season-card__cov-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 32px var(--bb-font-body); letter-spacing: .04em; color: rgba(244, 241, 234, .45);
}
/* Bottom gradient scrim + text — radiofrance-capture/'s OverlayContainer is
 * `backgroundOnHover`: at rest the card shows nothing but the cover image;
 * the scrim and the eyebrow/title/meta only fade in on hover/focus (mouse
 * AND keyboard — a11y). */
.bbp-season-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 22, 15, 0) 38%, rgba(18, 22, 15, .58) 70%, rgba(18, 22, 15, .94) 100%);
  opacity: 0; transition: opacity .22s var(--bb-ease);
}
.bbp .bbp-season-card:hover::after,
.bbp .bbp-season-card:focus-visible::after,
.bbp .bbp-season-card:focus-within::after { opacity: 1; }

.bbp-season-card__body {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 14px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .22s var(--bb-ease), transform .22s var(--bb-ease);
}
.bbp .bbp-season-card:hover .bbp-season-card__body,
.bbp .bbp-season-card:focus-visible .bbp-season-card__body,
.bbp .bbp-season-card:focus-within .bbp-season-card__body { opacity: 1; transform: translateY(0); }
.bbp-season-card__eyebrow {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bb-gold-soft); margin-bottom: 4px;
}
.bbp-season-card__title { display: block; font-weight: 800; font-size: 17px; line-height: 1.2; color: #fff; }
.bbp-season-card__meta { display: block; margin-top: 6px; font-size: 12px; color: rgba(244, 241, 234, .78); }

@media (prefers-reduced-motion: reduce) {
  .bbp-season-card::after, .bbp-season-card__body { transition: none; }
}

/* =========================================================================
   .bbp-tab — Lot 25 : the archive's own season-filter NAV (`.bbp-seasons`,
   `.bbp-seasons__row`, `.bbp-tab__count`) was removed (retour utilisateur :
   no season filter/details on this page). `.bbp-tab` itself stays — the
   season page's "Episodes / By theme" toggle (shortcode-season.php) reuses
   it, that usage carries no count badge.
   ========================================================================= */
/* .bbp .bbp-tab (0,2,0), not .bbp-tab alone (0,1,0) — a plain single class on
   an <a> can lose its colour to a same-or-higher-specificity theme/Elementor
   rule like ".elementor-kit-10 a" (0,1,1) ; found on the season page tabs
   while checking Lot 23 ter (see tokens.css header for the first case). */
.bbp .bbp-tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 18px;
  border-radius: var(--bb-radius-pill); border: 1px solid var(--bb-d-line-strong);
  background: transparent;
  font: 600 14px/1 var(--bb-font-body); color: var(--bb-d-ink-3);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .18s var(--bb-ease), background .18s, border-color .18s;
}
.bbp-tab:hover { border-color: var(--bb-gold); color: var(--bb-d-ink); }
.bbp-tab.is-active { background: var(--bb-gold); border-color: var(--bb-gold); color: #231a0a; }

/* =========================================================================
   EPISODE LIST — self-contained dark cards at every breakpoint
   Lean by design : title · series · description (desktop) · date · duration.
   Guests and the "Big Idea" live on the episode page, not here.
   ========================================================================= */
.bbp-list { padding-block: 0; }

.bbp-ep-group { margin: 30px 20px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (min-width: 768px)  { .bbp-ep-group { margin: 30px 25px 20px; } }
@media (min-width: 992px)  { .bbp-ep-group { margin: 30px 40px 20px; } }
@media (min-width: 1280px) { .bbp-ep-group { margin: 30px 60px 20px; } }
@media (min-width: 1731px) { .bbp-ep-group { margin: 30px 80px 20px; } }
.bbp-ep-group:first-of-type { margin-top: 4px; }
.bbp-ep-group h2 { color: #044229; margin: 0;}
.bbp-ep-group__eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-gold-deep); }
.bbp-ep-group__count { font-size: 13px; color: var(--bb-d-ink-3); }
/* Wraps the "Season page →" link + the carousel arrows (Lot 25) so either
   (or both) can be present and still sit flush right — radiofrance-capture/'s
   sections always end on "Voir tout" + round nav buttons, in that order. */
.bbp-ep-group__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bbp .bbp-ep-group__link { font-size: 13px; font-weight: 600; color: var(--bb-gold-soft); text-decoration: none; white-space: nowrap; }
.bbp-ep-group__link:hover { text-decoration: underline; }

.bbp-eplist { display: flex; flex-direction: column; gap: 12px; }

.bbp-ep {
  display: grid; grid-template-columns: 84px 1fr; column-gap: 14px;
  padding: 14px; background: var(--bb-d-surface); border: 1px solid var(--bb-d-line);
  border-radius: var(--bb-radius-lg); color: var(--bb-d-ink);
  transition: border-color .14s;
}
.bbp-ep:hover { border-color: var(--bb-d-line-strong); }

.bbp-ep__cover {
  grid-column: 1; grid-row: 1; width: 84px; aspect-ratio: 1 / 1; border-radius: var(--bb-radius-sm);
  overflow: hidden; background: var(--bb-d-surface-2); position: relative;
}
.bbp-ep__cover img { width: 100%; height: 100%; object-fit: cover; }
.bbp-ep__cover .bbp-card__ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 16px; color: var(--bb-gold-soft);
}

.bbp-ep__main { grid-column: 2; grid-row: 1; min-width: 0; align-self: start; }
/* Real (non-:where) color:inherit — the zero-specificity `:where(.bbp
   h1,h2,h3,h4){color:inherit}` reset (tokens.css) loses to the theme's own
   bare `h3{color:…}` rule regardless of stylesheet order (same specificity
   family documented across this plugin ; every other plugin heading is a
   concretely-classed `<h1 class="bbp-ep-title">` for exactly this reason —
   `.bbp-ep__title` on an `<h3>` was the one left relying on `:where()`
   alone). Found live once the card background turned a lighter green
   (#044229) and the title rendered near-black on it, unreadable. */
.bbp-ep__title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0; color: inherit; }
.bbp .bbp-ep__title a { text-decoration: none; color: inherit; }
.bbp .bbp-ep__title a:hover { color: var(--bb-gold-soft); }
/* --bb-d-ink-3 (#6E7A6E) reads under 3.5:1 against the new #044229 card
   background (it was ~4.2:1 against the old, much darker #12160F) — bumped
   to --bb-d-ink-2 here specifically rather than changing the shared token
   everywhere it's used. */
.bbp-ep__series { margin-top: 3px; font-size: 13px; color: var(--bb-d-ink-2); }
.bbp-ep__desc {
  display: none; margin-top: 8px; font-size: 14px; color: var(--bb-d-ink-2); line-height: 1.55;
}

.bbp-ep__date { grid-column: 1 / -1; grid-row: 2; margin-top: 12px; font-size: 13px; color: var(--bb-d-ink-2); }
.bbp-ep__date .sep { opacity: .5; margin-inline: 6px; }

.bbp-ep__yt { display: inline-flex; align-items: center; gap: 5px; color: var(--bb-d-ink-2); font-weight: 600; }
.bbp-ep__yt svg { width: 13px; height: 13px; color: #FF3D3D; }

/* icons row (+, ⋮) — bare glyphs, no permanent chrome */
.bbp-ep__icons {
  grid-column: 1; grid-row: 3; margin-top: 8px; margin-left: -8px;
  align-self: center; justify-self: start; display: flex; align-items: center; gap: 0;
}
.bbp-ep__icon {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: none;
  background: transparent; color: var(--bb-d-ink-2); cursor: pointer; transition: background .14s, color .14s;
  position: relative;
}
/* --bb-d-surface-2 is now the same colour as the card itself (palette
   unification) — that hover background used to be a lighter charcoal
   distinct from --bb-d-surface (the card bg), now it's invisible. A
   translucent ink overlay works regardless of what the card background is. */
.bbp-ep__icon:hover, .bbp-ep__icon[aria-expanded="true"] { background: rgba(244, 241, 234, .12); color: var(--bb-d-ink); }
.bbp-ep__icon svg { width: 17px; height: 17px; }

/* "⋮" share/embed popover (Lot 27, retour utilisateur : « reproduire à
   l'identique comme sur les captures de Radio France ») — Facebook / X /
   Email / copy-link / embed. Base state (no JS) : a plain, always-visible
   list under the button — Facebook/X/Email are real links and work with
   zero JS ; only "Copy link"/"Embed" need JS to do anything (inert
   buttons otherwise, same trade-off as the season page's own copy-link
   button). `.is-js` (added by bb-podcast-archive.js once it actually runs)
   is what turns this into a floating popover instead. */
.bbp-ep__share { position: relative; display: inline-flex; }
.bbp-ep__menu { display: grid; gap: 2px; margin-top: 4px; }
.bbp-ep__share.is-js .bbp-ep__menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 190px; margin-top: 0;
  padding: 6px; background: var(--bb-d-surface); border: 1px solid var(--bb-d-line-strong);
  border-radius: var(--bb-radius); box-shadow: var(--bb-shadow-lg);
}
.bbp-ep__menu[hidden] { display: none; }
/* .bbp .bbp-ep__menu-item (0,2,0) — two of these five items are real <a>
   tags (Facebook/X/Email) and need the same double-qualification as every
   other plugin link, or the theme/Elementor kit's own "a" rule wins
   regardless of stylesheet order (see tokens.css header, Lot 23 finding —
   same bug hit .bbp-ep__title and .bbp-sort__item earlier in this lot). */
.bbp .bbp-ep__menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; background: transparent; border-radius: var(--bb-radius-sm);
  color: var(--bb-d-ink); text-decoration: none; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left; font-family: var(--bb-font-body);
}
.bbp .bbp-ep__menu-item:hover { background: rgba(244, 241, 234, .08); }
.bbp-ep__menu-item svg { width: 16px; height: 16px; flex: none; color: var(--bb-d-ink-2); }
.bbp-ep__menu-done { display: block; padding: 2px 10px 4px; font-size: 12px; color: var(--bb-gold-soft); }

/* duration + play, right-aligned */
.bbp-ep__right { grid-column: 2; grid-row: 3; margin-top: 8px; align-self: center; justify-self: end; display: flex; align-items: center; gap: 12px; }
.bbp-ep__dur { font-size: 13px; color: var(--bb-d-ink-2); white-space: nowrap; }
.bbp-ep__resume { text-align: right; }
.bbp-ep__resume b { display: block; font-size: 13px; color: var(--bb-gold-soft); font-weight: 600; white-space: nowrap; }
.bbp-ep__resume-bar { margin-top: 5px; width: 64px; height: 3px; border-radius: 2px; background: var(--bb-d-surface-3); position: relative; overflow: hidden; }
.bbp-ep__resume-bar > i { position: absolute; inset: 0; width: 0; background: var(--bb-gold); border-radius: inherit; }

/* Play — circle on the narrow card, labelled pill from 768 up */
.bbp-ep__play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 44px; height: 44px; border-radius: 50%; padding: 0; flex: none;
  background: var(--bb-gold); color: #231a0a; border: none; cursor: pointer; text-decoration: none;
  transition: background .16s, transform .16s var(--bb-ease);
}
.bbp-ep__play svg { width: 16px; height: 16px; margin-left: 2px; }
.bbp-ep__play span { display: none; }
.bbp-ep__play:hover { background: var(--bb-gold-soft); transform: scale(1.05); }
/* video-only : never gold — the YouTube-red colour makes it unmistakable
   that this opens a video, not audio playback. */
.bbp-ep__play--yt { background: #FF3D3D; color: #fff; }
.bbp-ep__play--yt:hover { background: #ff5c5c; }

@media (min-width: 768px) {
  .bbp-ep {
    grid-template-columns: 150px 1fr auto; grid-template-rows: auto auto auto; column-gap: 22px; padding: 18px;
  }
  .bbp-ep__cover { grid-row: 1 / span 3; align-self: center; width: 150px; }
  .bbp-ep__title { font-size: 19px; }
  .bbp-ep__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .bbp-ep__date { grid-column: 2; margin-top: 10px; }
  .bbp-ep__icons { grid-column: 2; margin-top: 10px; margin-left: -8px; }
  /* Retour utilisateur (« le bouton écouter, l'icône + et autres doivent
     être sur la même ligne ») : `grid-row: 1 / span 3` centrait ce bloc sur
     TOUTE la hauteur de la carte (titre+description dominent cette hauteur),
     le décalant visuellement de la ligne des icônes en bas. Aligné sur la
     même ligne (3) que .bbp-ep__icons, comme sur la référence
     radiofrance.fr : durée + Écouter partagent la ligne du bas avec [+]/[⋮]. */
  .bbp-ep__right { grid-column: 3; grid-row: 3; align-self: center; margin-top: 10px; }
  .bbp-ep__play { width: auto; height: 40px; padding: 9px 20px 9px 16px; border-radius: var(--bb-radius-pill); gap: 8px; }
  .bbp-ep__play span { display: inline; font: 700 13.6px/1 var(--bb-font-body); }
}
@media (min-width: 1280px) {
  .bbp-ep { grid-template-columns: 180px 1fr auto; }
  .bbp-ep__cover { width: 180px; }
}

/* =========================================================================
   EMPTY STATE + PAGINATION
   ========================================================================= */
.bbp-empty {
  text-align: center; color: var(--bb-d-ink-3); font-size: 15px;
  padding: 56px 20px; border: 2px dashed var(--bb-d-line); border-radius: var(--bb-radius);
}
.bbp-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 40px; }
.bbp .bbp-pagination a, .bbp-pagination span {
  min-width: 40px; min-height: 40px; display: grid; place-items: center; padding: 0 10px;
  border-radius: var(--bb-radius-sm); border: 1px solid var(--bb-d-line-strong);
  font-size: 14px; font-weight: 600; text-decoration: none; background: var(--bb-d-surface); color: var(--bb-d-ink);
}
.bbp .bbp-pagination a:hover { border-color: var(--bb-gold); }
.bbp-pagination .current { background: var(--bb-gold); border-color: var(--bb-gold); color: #231a0a; }
.bbp-pagination .dots { border-color: transparent; background: transparent; color: var(--bb-d-ink-3); }

/* Breadcrumb — same as bb-podcast-episode.css / bb-podcast-season.css,
   duplicated on purpose : this file doesn't load either of them. */
.bbp-crumb { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; color: var(--bb-d-ink-3); }
.bbp .bbp-crumb a { color: inherit; text-decoration: none; }
.bbp .bbp-crumb a:hover { color: var(--bb-d-ink-2); }
.bbp-crumb svg { width: 12px; height: 12px; opacity: .6; }
.bbp-crumb [aria-current] { color: var(--bb-d-ink-2); }