/* ==========================================================
   Ulia.Radio — Section « Émissions »

   Rangée de posters au format 9/16 sur 1400 px.

   Le nombre de colonnes vient de --shows-count, posé par PHP :
   figer repeat(7, ...) laisserait un vide en bout de rangée dès
   qu'il y a moins de sept émissions.
   ========================================================== */

.shows {
  position: relative;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 8vw, 120px);
  background: var(--u-page);
}

.shows__inner {
  max-width: var(--u-max);
  margin: 0 auto;
  padding: 0 var(--u-gutter);
}

/* ---------- En-tête ---------- */

.shows__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 40px);
}

.shows__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.04;
  color: var(--u-blue);
}

.shows__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--u-blue);
  text-decoration: none;
}

.shows__all i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.shows__all:hover i { transform: translateX(4px); }

.shows__all:focus-visible {
  outline: 3px solid var(--u-blue-deep);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ---------- Grille ---------- */

.shows__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(var(--shows-count, 7), minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}

.shows__item { min-width: 0; }

/* ==========================================================
   Poster
   ========================================================== */

.poster {
  position: relative;
  display: block;
  /* aspect-ratio plutôt qu'un padding-top : la hauteur suit la
     largeur de colonne sans calcul, quel que soit le nombre
     d'émissions. */
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--accent, var(--u-blue));
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.3, 1),
              box-shadow 0.28s ease;
}

.poster:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(16, 39, 107, 0.18);
}

.poster:focus-visible {
  outline: 3px solid var(--u-blue-deep);
  outline-offset: 4px;
}

.poster__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.poster:hover .poster__img { transform: scale(1.05); }

/* Repli : le thumbnail est un format large, son recadrage en 9/16
   serait brutal. On le floute pour en faire une texture et le nom
   passe au premier plan. */
.poster__img--blur {
  filter: blur(18px) saturate(1.2);
  transform: scale(1.25);
  opacity: 0.55;
}

.poster--fallback:hover .poster__img--blur { transform: scale(1.3); }

/* Voile de lecture. Sur un poster, il ne couvre que le bas ;
   sur un repli, il teinte toute la surface avec la couleur du
   thème pour donner une identité au visuel improvisé. */
.poster__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.45) 32%,
    rgba(0, 0, 0, 0) 62%
  );
}

.poster--fallback .poster__veil {
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 60%),
    linear-gradient(150deg, var(--accent, var(--u-blue)) 0%, rgba(0, 0, 0, 0.35) 100%);
}

.poster__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--u-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.poster__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px 14px;
}

.poster__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.15vw, 19px);
  line-height: 1.1;
  color: #fff;
  /* Colonne étroite : on autorise deux lignes puis on coupe.
     Une seule ligne tronquerait presque tous les titres. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.poster__meta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Liseré à la couleur de l'émission, discret mais identifiant. */
.poster::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: var(--accent, var(--u-blue));
}

/* ==========================================================
   Adaptations

   Sept colonnes deviennent illisibles bien avant le mobile :
   en dessous du seuil, la rangée passe en défilement horizontal
   avec accrochage, ce qui préserve le format 9/16 au lieu de
   l'écraser.
   ========================================================== */

@media (max-width: 1100px) {
  .shows__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* La gouttière est reprise en marge négative pour que le
       défilement parte du bord de l'écran. */
    margin: 0 calc(var(--u-gutter) * -1);
    padding: 4px var(--u-gutter) 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .shows__item {
    flex: 0 0 clamp(148px, 26vw, 200px);
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .shows__item { flex-basis: clamp(140px, 42vw, 172px); }
  .poster__name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .poster,
  .poster__img,
  .shows__all i { transition: none; }

  .poster:hover { transform: none; }
  .poster:hover .poster__img { transform: none; }
  .poster--fallback:hover .poster__img--blur { transform: scale(1.25); }
}