/* ============================================
   GALERIES PHOTOS & VIDÉOS
   ============================================ */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  width: 100%;
}

/* Photos */
.gallery-grid--photos .gallery-grid__item {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.gallery-grid--photos .gallery-grid__item a {
  display: block;
}

.gallery-grid--photos .gallery-grid__item img {
  display: block;
  width: 100%;
  height: 7rem;
  object-fit: cover;
}

/* Vidéos */
.gallery-grid--videos .gallery-grid__item {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--gray-900);
}

.gallery-grid--videos .gallery-grid__item > div {
  position: relative;
}

.gallery-grid--videos .gallery-grid__item img {
  display: block;
  width: 100%;
  height: 6rem;
  object-fit: cover;
}

/* Play icon sur vidéos */
.gallery-grid--videos .video-embed-field-launch-modal {
  position: relative;
  display: block;
  cursor: pointer;
}

.gallery-grid--videos .video-embed-field-launch-modal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(0,0,0,0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 1.25rem;
  border-radius: 50%;
}

.gallery-grid--videos .video-embed-field-launch-modal:hover::after {
  background-color: var(--primary);
}

/* Responsive */
@media (min-width: 768px) {
  .gallery-grid--photos .gallery-grid__item img {
    height: 10rem;
  }
  
  .gallery-grid--videos .gallery-grid__item img {
    height: 8rem;
  }
}

/* Fix pleine largeur */
.gallery-grid {
  width: 100% !important;
}

/* Fix images pleine largeur dans cellule */
.gallery-grid__item {
  width: 100%;
}

.gallery-grid__item a,
.gallery-grid__item img {
  width: 100% !important;
}

/* Reset parent pour laisser gallery-grid contrôler */
.etablissement-gallery:has(.gallery-grid),
.etablissement-videos:has(.gallery-grid) {
  display: block !important;
  grid-template-columns: none !important;
}

/* Fallback sans :has() */
.etablissement-gallery,
.etablissement-videos {
  display: block !important;
}

.gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0.5rem !important;
  width: 100% !important;
}