/* SFTS EXPERIENCE COMPONENT #002 — "Gallery Experience"
   Extrait de MT Univers (thème mt-univers, single-realisation.php +
   style.css, mécanisme "bento" ".realisation-gallery") le 2026-09-23 pour
   devenir un composant SFTS générique du générateur, réutilisable sur
   n'importe quel site client.

   Source de données, pas dépendance architecturale : sur MT Univers, les
   images viennent d'un bloc Galerie Gutenberg (parse_blocks() en PHP) —
   mais ce composant ne sait rien de Gutenberg. Il reçoit une liste plate
   d'images (url/dimensions/alt) depuis component.php, quelle que soit leur
   origine réelle côté appelant. Voir README.md, section "Source des
   données".

   Héritage engineering capitalisé (pas juste "on préfère le bento") : deux
   stratégies concurrentes ont été essayées puis abandonnées sur MT Univers
   AVANT ce motif, chacune pour un échec réel constaté, pas une préférence :
   1. `column-count` (masonry sans recadrage) — abandonné : images jamais
      chargées dans les tests réels (0 requête réseau, naturalWidth à 0).
   2. Motif répété tous les 5 éléments (`:nth-child(5n+N)`) — abandonné :
      dès que le nombre réel de photos n'était pas un multiple de 5 (ex. 4
      photos), la grille laissait une case vide visible.
   Solution retenue : grille CSS à zones explicites (`grid-column`/
   `grid-row` en positions numérotées), un motif COMPLET par nombre total
   de photos (1 à 6, au-delà l'auto-placement CSS prend le relais sans
   case vide) — le mécanisme déjà éprouvé ailleurs sur ce thème
   (`display:grid`), jamais une technique à risque non testée. */

.sfts-gallery {
  --sfts-gallery-gap: 16px;
  --sfts-gallery-radius: 10px;
}

.sfts-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(120px, 16vw);
  gap: var(--sfts-gallery-gap);
}
.sfts-gallery-item {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: var(--sfts-gallery-radius);
  overflow: hidden;
  cursor: zoom-in;
}
.sfts-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Motifs par nombre total de photos — chaque motif remplit exactement sa
   grille 4 colonnes, jamais de case vide. Au-delà de 6 (voir component.php,
   `min(count, 6)` pour la classe posée), l'auto-placement CSS standard
   prend le relais : sans case vide non plus, juste sans mise en scène
   dédiée au-delà de la 6ᵉ position — un choix délibéré, pas une limite
   technique (voir README.md). */
.sfts-gallery-grid.sfts-gallery-n1 .sfts-gallery-item:nth-child(1) { grid-column: span 4; grid-row: span 2; }

.sfts-gallery-grid.sfts-gallery-n2 .sfts-gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n2 .sfts-gallery-item:nth-child(2) { grid-column: 4; grid-row: span 2; }

.sfts-gallery-grid.sfts-gallery-n3 .sfts-gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n3 .sfts-gallery-item:nth-child(2) { grid-column: 4; grid-row: 1; }
.sfts-gallery-grid.sfts-gallery-n3 .sfts-gallery-item:nth-child(3) { grid-column: 4; grid-row: 2; }

.sfts-gallery-grid.sfts-gallery-n4 .sfts-gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n4 .sfts-gallery-item:nth-child(2) { grid-column: 4; grid-row: 1; }
.sfts-gallery-grid.sfts-gallery-n4 .sfts-gallery-item:nth-child(3) { grid-column: 4; grid-row: 2; }
.sfts-gallery-grid.sfts-gallery-n4 .sfts-gallery-item:nth-child(4) { grid-column: span 4; grid-row: span 1; }

.sfts-gallery-grid.sfts-gallery-n5 .sfts-gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n5 .sfts-gallery-item:nth-child(2) { grid-column: 4; grid-row: span 1; }
.sfts-gallery-grid.sfts-gallery-n5 .sfts-gallery-item:nth-child(3) { grid-column: 4; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n5 .sfts-gallery-item:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.sfts-gallery-grid.sfts-gallery-n5 .sfts-gallery-item:nth-child(5) { grid-column: span 1; grid-row: span 1; }

.sfts-gallery-grid.sfts-gallery-n6 .sfts-gallery-item:nth-child(1) { grid-column: span 3; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n6 .sfts-gallery-item:nth-child(2) { grid-column: 4; grid-row: span 1; }
.sfts-gallery-grid.sfts-gallery-n6 .sfts-gallery-item:nth-child(3) { grid-column: 4; grid-row: span 2; }
.sfts-gallery-grid.sfts-gallery-n6 .sfts-gallery-item:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.sfts-gallery-grid.sfts-gallery-n6 .sfts-gallery-item:nth-child(5) { grid-column: span 1; grid-row: span 1; }
.sfts-gallery-grid.sfts-gallery-n6 .sfts-gallery-item:nth-child(6) { grid-column: span 4; grid-row: span 1; }

@media (max-width: 900px) {
  /* Sélecteur [class*="sfts-gallery-n"] plutôt que .sfts-gallery-grid nu :
     ce bloc doit rester plus spécifique que les règles .sfts-gallery-nN
     ci-dessus (motifs à 1 seule classe chacun), sinon une media query de
     spécificité inférieure perd contre elles même en dessous de 900px —
     bug réel déjà rencontré et corrigé sur MT Univers avant l'extraction. */
  .sfts-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(140px, 34vw); }
  .sfts-gallery-grid[class*="sfts-gallery-n"] .sfts-gallery-item:nth-child(5n+1) { grid-column: span 2; grid-row: span 2; }
  .sfts-gallery-grid[class*="sfts-gallery-n"] .sfts-gallery-item:nth-child(5n+2) { grid-column: span 1; grid-row: span 1; }
  .sfts-gallery-grid[class*="sfts-gallery-n"] .sfts-gallery-item:nth-child(5n+3) { grid-column: span 1; grid-row: span 1; }
  .sfts-gallery-grid[class*="sfts-gallery-n"] .sfts-gallery-item:nth-child(5n+4) { grid-column: span 1; grid-row: span 1; }
  .sfts-gallery-grid[class*="sfts-gallery-n"] .sfts-gallery-item:nth-child(5n+5) { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 600px) {
  .sfts-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: minmax(220px, 70vw); }
  .sfts-gallery-grid .sfts-gallery-item { grid-column: 1; grid-row: span 1; }
}

/* Lightbox — vanille, sans librairie, déjà color-agnostic dans sa version
   MT Univers d'origine (fond noir translucide, chrome blanc) : aucun token
   de marque à extraire ici, porté quasi tel quel. */
.sfts-gallery-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 20, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.sfts-gallery-lightbox.is-open { opacity: 1; pointer-events: auto; }
.sfts-gallery-lightbox-inner { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.sfts-gallery-lightbox img { max-width: min(92vw, 1100px); max-height: 78vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6); display: block; }
.sfts-gallery-lightbox figcaption { color: #fff; text-align: center; margin-top: 16px; font-size: 0.92rem; max-width: 700px; opacity: 0.9; }
.sfts-gallery-lightbox-close,
.sfts-gallery-lightbox-prev,
.sfts-gallery-lightbox-next {
  position: fixed; background: rgba(255, 255, 255, 0.12); border: none; color: #fff; cursor: pointer;
  border-radius: 50%; width: 44px; height: 44px; font-size: 1.3rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s ease;
}
.sfts-gallery-lightbox-close:hover,
.sfts-gallery-lightbox-prev:hover,
.sfts-gallery-lightbox-next:hover { background: rgba(255, 255, 255, 0.24); }
.sfts-gallery-lightbox-close { top: 20px; right: 20px; }
.sfts-gallery-lightbox-prev { top: 50%; left: 20px; transform: translateY(-50%); }
.sfts-gallery-lightbox-next { top: 50%; right: 20px; transform: translateY(-50%); }
@media (max-width: 700px) {
  .sfts-gallery-lightbox-prev,
  .sfts-gallery-lightbox-next { display: none; }
}