/* ==========================================================
   Ulia.Radio — Page émission (/emissions/{slug})

   Réutilise les carrousels/cartes de la page d'accueil (hp-carousel,
   video-card, music-card — assets/css/homepage-styles.css) : seuls le
   hero, le compte à rebours et la carte de repli "podcast uniquement"
   (mode Vidéo First sans replay) sont propres à cette page.

   --emi-accent est posé une seule fois sur .emi-page (couleur de thème
   de l'émission), tout le reste hérite via var(--emi-accent, ...).
   ========================================================== */

.emi-page { --emi-accent: var(--u-blue); }

/* ---------- Hero ----------
   Fond plein cadre (comme le hero d'accueil, assets/css/hero.css) ;
   seul le CONTENU (.emi-hero__inner) est borné à var(--u-max), comme le
   reste de la page. */

.emi-hero {
  position: relative;
  min-height: clamp(380px, 40vw, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--emi-accent) 25%, #e9eaee);
  background-size: cover;
  background-position: center;
  padding: clamp(50px, 7vw, 90px) var(--u-gutter) clamp(50px, 6vw, 80px);
}

/* Dégradés identiques à .hero-overlay (assets/css/hero.css, hero d'accueil) :
   même recette à deux voiles superposés, jusqu'aux valeurs rgba — la
   teinte de l'émission vit ailleurs (logo, boutons, badges), pas ici. */
.emi-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(241, 241, 241, 1.00) 0%,
      rgba(241, 241, 241, 0.92) 30%,
      rgba(241, 241, 241, 0.47) 64%,
      rgba(241, 241, 241, 0.70) 100%
    ),
    linear-gradient(
      to top right,
      rgba(241, 241, 241, 0.40) 0%,
      rgba(218, 218, 218, 0.74) 30%,
      rgba(205, 205, 205, 0.29) 64%,
      rgba(196, 196, 196, 0.40) 100%
    );
}

.emi-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--u-max);
  width: 100%;
  margin: 0 auto;
}

.emi-hero__logo {
  display: block;
  max-width: 320px;
  max-height: 92px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left;
  margin-bottom: 14px;
}

.emi-hero__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  color: var(--emi-accent);
  margin: 0 0 14px;
}

.emi-hero__desc {
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--u-ink);
  opacity: 0.72;
  margin: 0 0 22px;
}

.emi-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.emi-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--u-ink);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16, 39, 107, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.emi-btn i { font-size: 13px; color: var(--emi-accent); }
.emi-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 39, 107, 0.16); }

.emi-follow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--u-ink);
  cursor: pointer;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.emi-follow i { font-size: 13px; color: var(--emi-accent); }
.emi-follow:hover { opacity: 1; }
.emi-follow.is-following i { color: var(--emi-accent); }

/* ---------- Sections ---------- */

.emi-sections { padding-top: 6px; }

.emi-empty {
  max-width: var(--u-max);
  margin: 0 auto;
  padding: 40px var(--u-gutter) 100px;
  font-family: var(--font-body);
  color: var(--u-ink);
  opacity: 0.5;
}

/* ---------- Carte "prochaine émission" (compte à rebours) ----------
   Toujours à la largeur d'un format 16/9 (celle de .video-card), quel
   que soit le carrousel dans lequel elle s'insère (--video ou --music). */

.next-air-card {
  flex: 0 0 clamp(210px, 19vw, 260px);
  min-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  border-radius: 12px;
  padding: 20px 14px;
  box-shadow: 0 1px 2px rgba(16, 39, 107, 0.06);
}

.next-air-logo {
  display: block;
  width: auto;
  max-width: 72%;
  height: 34px;
  object-fit: contain;
  margin-bottom: 10px;
}

.next-air-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--emi-accent);
  margin: 0 0 10px;
}

.next-air-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--u-ink);
  opacity: 0.55;
  margin: 0 0 6px;
}

.next-air-count {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  color: var(--emi-accent);
  letter-spacing: 0.01em;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.next-air-units {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}

.next-air-units span {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--u-ink);
  opacity: 0.4;
}

/* ---------- Carte de repli "podcast uniquement" (mode Vidéo First) ----------
   Même gabarit que .video-cover/.music-cover, fond teinté + logo couleur
   forcé en blanc (brightness(0) invert(1) — même technique que .show-logo
   dans assets/css/hero.css, suppose un PNG détouré). */

.ep-fallback-cover {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    var(--emi-accent) 0%,
    color-mix(in srgb, var(--emi-accent) 65%, #000) 100%);
}

.ep-fallback-logo {
  width: auto;
  max-width: 52%;
  max-height: 52%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}

.ep-fallback-cover i {
  font-size: 26px;
  color: rgba(255, 255, 255, 0.94);
}

@media (max-width: 600px) {
  .emi-hero__logo { max-width: 220px; max-height: 66px; }
  .next-air-logo { height: 26px; }
  .next-air-count { font-size: 18px; }
}