/* ==========================================================================
   Talia — Galerie multi-média
   --------------------------------------------------------------------------
   SEUL fichier de style du composant. Markup : parts/galerie/galerie.php et
   parts/galerie/galerie-item.php — enregistrement : inc/blocks/galerie.php
   Comportement vidéo : assets/js/hover-video.js (partagé, branché par `data-hover-video`)

   GRILLE BENTO, PAS MASONRY. Une carte ne choisit pas une largeur mais un
   FORMAT, qui vaut une forme de tuile. Les images sont recadrées en `cover`,
   et c'est le point : une grille bento est régulière PARCE QUE les formes sont
   contraintes. Des ratios libres posés côte à côte n'ont aucune raison de
   finir à la même hauteur — c'est le désordre qu'on remplace.

   Le recadrage n'est pas subi : l'auteur range chaque visuel dans la forme qui
   lui va — une vidéo 9:16 en portrait, un panoramique en vedette.

   Spec : docs/superpowers/specs/2026-09-10-bloc-galerie-multimedia-design.md
   ========================================================================== */

.talia-galerie {
  /*
    Conteneur de requête : c'est lui qui donne son unité de mesure à la hauteur
    de ligne ci-dessous. Sans lui, `cqw` n'aurait aucune référence.
  */
  container-type: inline-size;
  padding: var(--spacing-2xl) 0;
}

/*
  Aligné à gauche sur la grille, pas centré. Un `margin: 0 auto` le posait dans
  une boîte de 760px centrée pendant que la grille en occupait 1216 : l'en-tête
  démarrait 228px plus à droite que la première carte, ce qui se lit comme un
  décalage accidentel.
*/
.talia-galerie__header {
  margin: 0 0 var(--spacing-xl);
  max-width: 760px;
}

.talia-galerie__title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-3xl);
}

.talia-galerie__description {
  margin: 0;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   La grille

   UNE SEULE VARIABLE POUR LE NOMBRE DE COLONNES, dont dépendent à la fois les
   colonnes et la hauteur de ligne. Les régler séparément casserait la forme
   des tuiles : à 2 colonnes, une hauteur de ligne restée calée sur 6 rendrait
   tous les « carrés » plats.

   La hauteur de ligne vaut la largeur d'une colonne. C'est ce qui rend
   « 2 colonnes × 2 lignes » réellement carré, à n'importe quelle taille
   d'écran, et sans une ligne de JavaScript.
   -------------------------------------------------------------------------- */

.talia-galerie__grid {
  --galerie-cols: 6;
  --galerie-gap: 14px;

  display: grid;
  grid-template-columns: repeat(var(--galerie-cols), minmax(0, 1fr));
  grid-auto-rows: calc(
    (100cqw - (var(--galerie-cols) - 1) * var(--galerie-gap)) / var(--galerie-cols)
  );
  /*
    `dense` remonte une carte plus petite pour boucher un trou laissé par une
    ligne qui ne tombe pas juste. C'est ce qui rend la grille agnostique au
    contenu : on ajoute, on retire, on réordonne, il n'y a jamais de vide.
    Contrepartie assumée : l'ordre affiché peut différer de l'ordre de la liste.
  */
  grid-auto-flow: dense;
  gap: var(--galerie-gap);
}

/* --------------------------------------------------------------------------
   Les formats

   Ces quatre clés existent aussi en PHP (toolbox_galerie_formats) et dans
   l'éditeur. En ajouter une demande de toucher aux trois.
   -------------------------------------------------------------------------- */

/*
  TOUS LES SPANS SONT PAIRS, et ce n'est pas un détail de style.

  La version précédente avait un « large » en 3 colonnes et un « portrait » en
  3 lignes. Sur une grille de 6, un 3 posé à côté d'un 4 laisse une bande morte
  d'UNE colonne, et un span de 3 lignes à côté d'un span de 2 laisse une ligne
  morte. `dense` ne peut reboucher qu'avec une carte qui rentre : aucune ne fait
  une colonne. Les trous étaient donc structurels, pas un réglage à ajuster.

  Avec des spans tous pairs, la grille se pave sur un module de 2 × 2 : tout
  reste à combler mesure au moins 2 × 2, et un « carré » le remplit. C'est ce
  qui rend la grille réellement agnostique au contenu.
*/
.talia-galerie__item--vedette  { grid-column: span 4; grid-row: span 4; }
.talia-galerie__item--large    { grid-column: span 4; grid-row: span 2; }
.talia-galerie__item--portrait { grid-column: span 2; grid-row: span 4; }
.talia-galerie__item--carre    { grid-column: span 2; grid-row: span 2; }

@media (max-width: 1023.98px) {
  .talia-galerie__grid {
    --galerie-cols: 4;
  }

  /* La vedette occupe la largeur entière ; le reste garde ses proportions,
     et la parité — donc le pavage — est préservée. */
  .talia-galerie__item--vedette {
    grid-row: span 2;
  }
}

/*
  Sur téléphone, UNE SEULE COLONNE et les tuiles s'empilent.

  À deux colonnes, une tuile de demi-écran ne peut pas porter étiquette, titre
  et description sans que tout s'écrase — et amputer une carte de sa
  description sur le support le plus consulté revient à publier une page
  incomplète. Pleine largeur, chaque carte porte tout son contenu.

  Les spans n'ont plus de sens à une colonne : la forme de chaque format est
  reprise plus bas en `aspect-ratio`, après la règle qui la neutralise dans la
  grille.
*/
@media (max-width: 599px) {
  .talia-galerie__grid {
    --galerie-cols: 1;
    --galerie-gap: 10px;
    grid-auto-rows: auto;
  }

  .talia-galerie__item--vedette,
  .talia-galerie__item--large,
  .talia-galerie__item--portrait,
  .talia-galerie__item--carre {
    grid-column: auto;
    grid-row: auto;
  }
}

/* --------------------------------------------------------------------------
   La carte
   -------------------------------------------------------------------------- */

.talia-galerie__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius-xl);
  background: var(--bg-secondary);
  color: #ffffff;
  text-decoration: none;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/*
  Posée hors de la grille — la carte est utilisable seule — elle n'a plus de
  tuile pour lui donner sa hauteur : elle prend une forme par défaut plutôt
  que de s'écraser à zéro. Dans la grille, c'est la tuile qui commande.

  Écrit dans ce sens, et non en `:not(.talia-galerie__grid > *)` : un `:not()`
  contenant un combinateur n'est pas compris partout.
*/
.talia-galerie__item {
  aspect-ratio: 4 / 3;
}

.talia-galerie__grid .talia-galerie__item {
  aspect-ratio: auto;
}

.talia-galerie__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.talia-galerie__media,
.talia-galerie__media img,
.talia-galerie__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.talia-galerie__item:hover .talia-galerie__image,
.talia-galerie__item:hover .talia-galerie__video {
  transform: scale(1.05);
}

/*
  Le voile de lisibilité. C'est lui qui règle le cas d'un visuel clair — un
  logo sur fond blanc — sans rien demander à l'auteur.
*/
.talia-galerie__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85));
}

.talia-galerie__meta {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
}

/* --------------------------------------------------------------------------
   Le texte

   PETIT, VOLONTAIREMENT. Ces tailles viennent de la maquette, où elles tiennent
   sur un tiers de largeur. Les blocs précédents sortaient un titre à 36px et
   une étiquette en grandes capitales espacées : c'est cette taille, pas la
   superposition, qui rendait les cartes illisibles.
   -------------------------------------------------------------------------- */

.talia-galerie__pill {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
}

/*
  Variante en surbrillance — la « Nouveau » de la maquette.

  Elle prend l'accent DU THÈME (`--accent-color`) et non le vert citron de la
  maquette : un composant consomme le système de couleurs, il n'en invente pas
  un. Pour changer cette teinte partout, c'est le jeton qu'on modifie.
*/
.talia-galerie__pill--highlight {
  background: var(--accent-color);
  color: #0f172a;
}

.talia-galerie__item-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.talia-galerie__item-text {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 599px) {
  .talia-galerie__meta {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .talia-galerie__item-title {
    font-size: 0.98rem;
  }

  /*
    Les formes des formats, rendues en `aspect-ratio` puisqu'il n'y a plus de
    tuile pour les porter. Posées ICI, après
    `.talia-galerie__grid .talia-galerie__item { aspect-ratio: auto }` : à
    spécificité égale, c'est la dernière écrite qui gagne.
  */
  .talia-galerie__grid .talia-galerie__item--vedette  { aspect-ratio: 1 / 1; }
  .talia-galerie__grid .talia-galerie__item--large    { aspect-ratio: 16 / 9; }
  .talia-galerie__grid .talia-galerie__item--portrait { aspect-ratio: 4 / 5; }
  .talia-galerie__grid .talia-galerie__item--carre    { aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   Vidéo

   L'état est posé par hover-video.js. Sur mobile, la première touche lance la
   lecture et la seconde suit le lien : la carte doit dire laquelle des deux
   on est en train de faire.
   -------------------------------------------------------------------------- */

.talia-galerie__item--has-video .talia-galerie__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 14px no-repeat;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity var(--transition-normal);
}

/* `is-playing` est posé par le comportement partagé (assets/js/hover-video.js),
   d'où le point au lieu du double tiret : la classe n'appartient plus à ce
   composant, seul son style lui appartient. */
.talia-galerie__item.is-playing .talia-galerie__media::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .talia-galerie__item,
  .talia-galerie__media img,
  .talia-galerie__media video {
    transition: none;
  }

  .talia-galerie__item:hover {
    transform: none;
  }

  .talia-galerie__item:hover .talia-galerie__image,
  .talia-galerie__item:hover .talia-galerie__video {
    transform: none;
  }
}