/* ============================================================
   NARRATIVE GALLERY & MEDIA - CASTAGNE
   ============================================================ */

.narrative-gallery {
  width: 100%;
  max-width: 100%;
  transition: max-width 0.3s ease-in-out;
}

/* Rayons réduits pour l'ensemble des visuels du composant */
.narrative-gallery .rounded-lg { 
  border-radius: 8px !important; 
}

.gallery-block {
  margin-bottom: var(--gallery-gap);
  transition: all 0.3s ease-in-out;
}

/* Espacement uniforme pour les grilles de la galerie */
.narrative-gallery .grid {
  gap: var(--gallery-gap) !important;
}

/* Colonnes verticales (grilles asymétriques) */
.narrative-gallery .flex.flex-col {
  gap: var(--gallery-gap);
}

.gallery-block img {
  transition: transform 0.3s ease, height 0.3s ease-in-out;
}

/* Respect strict des ratios natifs des médias */
.narrative-gallery img,
.narrative-gallery video {
  width: 100%;
  height: auto !important;
  display: block;
  background: transparent !important;
}

/* Neutraliser toute hauteur forcée héritée */
.narrative-gallery .hero-block img,
.narrative-gallery .full-width-block img,
.narrative-gallery .equal-grid-block img,
.narrative-gallery .flexible-grid-block img,
.narrative-gallery .asymmetric-grid-block img,
.narrative-gallery .video-block video {
  min-height: unset !important;
  max-height: none !important;
}

.gallery-block img:hover {
  transform: scale(1.02);
}

/* Désactiver les transitions pendant le redimensionnement pour éviter les surcharges */
.resizing * {
  transition: none !important;
}

/* Ajustements pour les grilles asymétriques */
.asymmetric-grid-block .grid {
  transition: grid-template-columns 0.3s ease-in-out;
}

.equal-grid-block .grid {
  transition: grid-template-columns 0.3s ease-in-out;
}

/* Responsive fluide - Adaptation progressive */

/* Desktop large (1400px+) */
@media (min-width: 1400px) {
  .narrative-gallery {
    max-width: 877px;
    width: 100%;
  }
}

/* Desktop moyen (1200px-1399px) */
@media (max-width: 1399px) and (min-width: 1200px) {
  .narrative-gallery {
    max-width: 100%;
    width: 100%;
  }
}

/* Desktop petit (1024px-1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
  .narrative-gallery {
    max-width: 100%;
    width: 100%;
  }
}

/* Tablette large (900px-1023px) */
@media (max-width: 1023px) and (min-width: 900px) {
  .narrative-gallery {
    max-width: 100%;
    width: 100%;
  }
}

/* Tablette (768px-899px) */
@media (max-width: 899px) and (min-width: 768px) {
  .narrative-gallery {
    max-width: 100%;
    width: 100%;
  }
  
  /* Ajuster les grilles pour tablette */
  .asymmetric-grid-block .grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .equal-grid-block .grid,
  .flexible-grid-block .grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile (767px-) */
@media (max-width: 767px) {
  .narrative-gallery {
    max-width: 100%;
    width: 100%;
  }
  
  .gallery-block img,
  .gallery-block video {
    min-height: auto !important;
    max-height: none !important;
  }
  
  /* Grilles en colonne unique sur mobile */
  .asymmetric-grid-block .grid {
    grid-template-columns: 1fr;
  }
  
  .equal-grid-block .grid,
  .flexible-grid-block .grid {
    grid-template-columns: 1fr;
  }
}

/* Gallery Fullscreen styles - background/blur appliqués dynamiquement par JS */

#gallery-fullscreen-clone img,
#gallery-fullscreen-clone video {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  cursor: default !important;
}

#gallery-fullscreen-clone .gallery-block {
  margin-bottom: 16px;
}

/* Désactiver les effets de zoom et hover en fullscreen */
#gallery-fullscreen-clone .gallery-block img,
#gallery-fullscreen-clone .gallery-block video {
  transform: none !important;
  transition: none !important;
}

#gallery-fullscreen-clone .group:hover img,
#gallery-fullscreen-clone .group:hover video {
  transform: none !important;
}

#gallery-fullscreen-clone .group-hover\:scale-105 {
  transform: none !important;
}

/* Désactiver les overlays de description en fullscreen */
#gallery-fullscreen-clone .absolute.bottom-0 {
  display: none !important;
}

/* Curseur pointer sur toutes les images/vidéos */
#gallery-container img,
#gallery-container video {
  cursor: pointer;
}

/* Responsive pour le fullscreen */
@media (max-width: 1024px) {
  #lightbox-content {
    width: 95vw !important;
    max-width: none !important;
  }
}