/**
 * Mosaïque accueil "Sélection 2025" — 14 photos sur 6 rangées
 *
 * Composition validée :
 *   R1 (hero)        : 2 portraits 2:3        → 2 colonnes égales
 *   R2 (mariage)     : 2 paysages 16:9        → 2 colonnes égales
 *   R3 (portraits)   : 3 portraits 2:3        → 3 colonnes égales
 *   R4 (paysages)    : 2 paysages 16:9        → 2 colonnes égales
 *   R5 (portraits)   : 3 portraits 2:3        → 3 colonnes égales
 *   R6 (drone)       : 2 paysages 16:9        → 2 colonnes égales
 *
 * Technique : on utilise les classes .row-N (1 à 6) pour styliser chaque rangée
 * indépendamment, et les classes .col-2 / .col-3 pour le nombre de colonnes.
 * Les ratios d'images sont préservés via `aspect-ratio` natif CSS.
 */

/* ============================================
   CONTAINER GÉNÉRAL
   ============================================ */
.mosaic {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ============================================
   RANGÉES DE LA MOSAÏQUE
   ============================================ */
.mosaic-row {
  display: grid;
  gap: var(--space-md);
  width: 100%;
}

/* Rangées à 2 colonnes (portraits hero + tous les paysages) */
.mosaic-row--2 {
  grid-template-columns: 1fr 1fr;
}

/* Rangées à 3 colonnes (portraits R3 + R5) */
.mosaic-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ============================================
   TUILE INDIVIDUELLE
   ============================================ */
.mosaic-tile {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border-radius: 2px;
  cursor: pointer;

  /* Animation d'apparition au scroll */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1),
              transform .8s cubic-bezier(.4, 0, .2, 1);
}

.mosaic-tile.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Délai en cascade pour les tuiles d'une même rangée */
.mosaic-tile:nth-child(1) { transition-delay: 0s; }
.mosaic-tile:nth-child(2) { transition-delay: .1s; }
.mosaic-tile:nth-child(3) { transition-delay: .2s; }

/* Aspect-ratios par défaut */
.mosaic-tile--portrait {
  aspect-ratio: 2/3;
}

.mosaic-tile--landscape {
  aspect-ratio: 16/9;
}

.mosaic-tile--square {
  aspect-ratio: 1/1;
}

/* ============================================
   IMAGE
   ============================================ */
.mosaic-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1),
              filter .6s ease;
  display: block;
}

.mosaic-tile:hover img {
  transform: scale(1.06);
}

/* ============================================
   OVERLAY au hover (nom + catégorie)
   ============================================ */
.mosaic-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-md);

  background: linear-gradient(180deg,
    transparent 0%,
    transparent 50%,
    rgba(0, 0, 0, .65) 100%
  );

  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

.mosaic-tile:hover .mosaic-tile-overlay {
  opacity: 1;
  transform: translateY(0);
}

.mosaic-tile-cat {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.mosaic-tile-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}

/* ============================================
   BORDURE FINE AMBRE au hover (touch cinéma)
   ============================================ */
.mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transition: border-color .35s ease;
  pointer-events: none;
  z-index: 2;
}

.mosaic-tile:hover::after {
  border-color: rgba(212, 165, 116, .4);
}

/* ============================================
   FOOTER DE LA MOSAÏQUE (CTA "voir tout le portfolio")
   ============================================ */
.mosaic-footer {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
}

/* ============================================
   RESPONSIVE
   ============================================
   Stratégie : on conserve la composition originale (2 photos en 2 cols, 3 photos
   en 3 cols) à toutes les tailles d'écran, pour préserver l'intention esthétique.
   Seules les tailles des tuiles et des textes s'adaptent. */

/* Tablette */
@media (max-width: 1024px) {
  .mosaic {
    gap: var(--space-md);
  }

  .mosaic-row {
    gap: var(--space-md);
  }

  .mosaic-tile-name {
    font-size: 16px;
  }

  .mosaic-tile-overlay {
    padding: var(--space-sm);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .mosaic {
    gap: 6px;
  }

  .mosaic-row {
    gap: 6px;
  }

  /* On conserve les grilles 2/3 colonnes sur mobile pour respecter la composition.
     Les photos deviennent simplement plus petites. */
  .mosaic-row--2 {
    grid-template-columns: 1fr 1fr;
  }

  .mosaic-row--3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Overlay plus compact sur mobile (petites tuiles) */
  .mosaic-tile-overlay {
    padding: 8px;
  }

  .mosaic-tile-cat {
    font-size: 8px;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
  }

  .mosaic-tile-name {
    font-size: 12px;
    letter-spacing: 1px;
  }

  /* Sur mobile : overlay MASQUÉ par défaut.
     Il s'affiche uniquement quand la tuile a la classe .is-active (toggle au tap).
     Le tap est géré dans mosaic.js. */
  .mosaic-tile .mosaic-tile-overlay {
    opacity: 0;
    transform: translateY(8px);
    background: linear-gradient(180deg,
      transparent 0%,
      transparent 50%,
      rgba(0, 0, 0, .75) 100%
    );
  }

  .mosaic-tile.is-active .mosaic-tile-overlay {
    opacity: 1;
    transform: translateY(0);
  }

  /* On retire l'effet hover sur mobile (pas pertinent en tactile) */
  .mosaic-tile:hover img {
    transform: none;
  }

  .mosaic-tile:hover::after {
    border-color: transparent;
  }

  /* Sur la tuile active : bordure ambre visible */
  .mosaic-tile.is-active::after {
    border-color: rgba(212, 165, 116, .5);
  }
}

/* Très petit mobile (< 380px) — on simplifie un peu */
@media (max-width: 380px) {
  .mosaic-tile.is-active .mosaic-tile-cat {
    display: none; /* on cache la catégorie pour ne garder que le nom */
  }

  .mosaic-tile-name {
    font-size: 11px;
  }
}