/* ============================================================
   davylheureux.fr — Page Podcast (/podcast)
   Hérite de site.css (shell) + accueil.css (.media-card, .media-thumb,
   .pill...). Spécifique : hero photo plein écran avec titre superposé,
   grille 3x3 d'épisodes (réutilise le composant .media-card).
   ============================================================ */

/* ---- Hero : photo plein largeur, sous le header translucide ----
   main a un padding-top:80px (header fixe) ; on l'annule par un
   margin-top négatif pour que la photo monte jusqu'en haut, le header
   translucide se superposant au sommet de l'image. Ratio 16:9 préservé
   (width:100% / height:auto), jamais rognée. */
.podcast-hero {
  position: relative;
  width: 100%;
  margin-top: -80px;
  line-height: 0; /* supprime l'espace sous l'img inline */
}
.podcast-hero img {
  display: block;
  width: 100%;
  height: auto;
}
/* Bloc titre superposé, centré, dans le tiers bas de la photo */
.podcast-hero-title {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}
/* « RAF » : reprend le style du titre hero (Inter 800), agrandi */
.podcast-hero-raf {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(72px, 16vw, 240px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #FAFAFA;
  margin: 0;
}
/* « LE PODCAST » : label cyan sous le titre */
.podcast-hero-label {
  margin-top: clamp(6px, 1vw, 14px);
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(13px, 1.9vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #00E5FF;
}

/* Mobile (≤980px, breakpoint header mobile) : sur cette largeur, le header
   est opaque et reste affiché. Sans override, le margin-top:-80px (qui sert
   à passer la photo sous le header translucide en desktop) ferait que le
   header mobile mangerait toute la moitié haute de la photo. On remonte
   beaucoup moins fort (-16px) pour que la photo se cale juste sous le header
   sans laisser un trou visible. Le titre R.A.F / LE PODCAST est en
   position:absolute relatif à .podcast-hero, donc il descend AVEC la photo. */
@media (max-width: 980px) {
  .podcast-hero { margin-top: -16px; }
}

/* ---- Présentation + pilule YouTube, centrées sous la photo - */
.podcast-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 8px;
  text-align: center;
}
.podcast-intro p {
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
}

/* ---- Section épisodes ------------------------------------- */
/* .section-dark est un flex centré (row par défaut) : on passe en
   column pour empiler le titre puis la grille. */
.podcast-episodes { flex-direction: column; padding-top: 40px; }
.podcast-episodes .block-h { margin-bottom: 36px; text-align: center; }

/* Grille 3x3 : réutilise .media-card (accueil.css). 3 -> 2 -> 1 col. */
.podcast-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .podcast-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .podcast-grid { grid-template-columns: 1fr; }
}

/* Message de repli (grille remplie dynamiquement par podcast.js ;
   ce message s'affiche si l'API est indisponible, ex. hors référent). */
.podcast-grid-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-muted);
  font-size: clamp(14px, 1.2vw, 16px);
  padding: 20px 0;
}