/*
 * Mansonnery Gallery for Elementor — Frontend Styles
 * Version: 1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CONTENEUR GLOBAL
   ═══════════════════════════════════════════════════════════════════════════ */

.mg-gallery-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden; /* clip les marges négatives de la grid + arrondis */
}

/* ───────────────────────────────────────────────────────────────────────────
   Grid Masonry
   Technique "negative margin" :
   - Chaque item a padding-left et padding-right = gap/2
   - La grid compense avec margin-left et margin-right = -gap/2
   Résultat : pas d'espace supplémentaire sur les bords, gap correct entre items.

   Les CSS custom properties --mg-cols, --mg-gap-h, --mg-gap-v sont injectées
   automatiquement par Elementor via les selectors des contrôles responsifs.
   ─────────────────────────────────────────────────────────────────────────── */

.mg-gallery-grid {
  position: relative;
  width: 100%;
  /* Valeurs par défaut (écrasées par Elementor) */
  --mg-cols:  3;
  --mg-gap-h: 10px;
  --mg-gap-v: 10px;
  /* Compensation du demi-padding des items sur les bords */
  margin-left:  calc(var(--mg-gap-h) / -2);
  margin-right: calc(var(--mg-gap-h) / -2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SIZER & ITEM
   La largeur est calc(100% / N) — Masonry lit le sizer pour connaître
   la largeur d'une colonne. Les padding créent les gaps visuels.
   margin-bottom crée l'espace vertical (Masonry l'inclut dans la hauteur).
   ═══════════════════════════════════════════════════════════════════════════ */

.mg-gallery-sizer {
  width: calc(100% / var(--mg-cols));
}

.mg-gallery-item {
  width:         calc(100% / var(--mg-cols));
  padding-left:  calc(var(--mg-gap-h) / 2);
  padding-right: calc(var(--mg-gap-h) / 2);
  margin-bottom: var(--mg-gap-v);
  box-sizing:    border-box;
  position:      relative;
  float:         left; /* Masonry.js positionne ensuite en position:absolute */
}

.mg-item-inner {
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. IMAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.mg-item-image-wrap {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  line-height: 0; /* supprime le gap inline sous l'image */
}

.mg-item-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  transition: transform 400ms ease, opacity 400ms ease, filter 400ms ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* Lien lightbox */
a.mg-lightbox-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: zoom-in;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. EFFETS DE SURVOL (TRANSFORM)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Zoom avant */
.mg-hover-zoom-in .mg-gallery-item:hover .mg-item-image-wrap img {
  transform: scale(var(--mg-hover-scale, 1.08));
}

/* Zoom arrière */
.mg-hover-zoom-out .mg-gallery-item:hover .mg-item-image-wrap img {
  transform: scale(var(--mg-hover-scale-out, 0.94));
}

/* Inclinaison gauche */
.mg-hover-tilt-left .mg-gallery-item:hover .mg-item-image-wrap img {
  transform: rotate(-3deg) scale(1.06);
}

/* Inclinaison droite */
.mg-hover-tilt-right .mg-gallery-item:hover .mg-item-image-wrap img {
  transform: rotate(3deg) scale(1.06);
}

/* Glissement haut */
.mg-hover-slide-up .mg-gallery-item:hover .mg-item-image-wrap img {
  transform: translateY(-8px) scale(1.04);
}

/* Glissement bas */
.mg-hover-slide-down .mg-gallery-item:hover .mg-item-image-wrap img {
  transform: translateY(8px) scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */

.mg-item-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 400ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* permet le clic sur le lien dessous */
  z-index: 2;
}

.mg-gallery-item:hover .mg-item-overlay {
  opacity: 1;
}

/* Contenu de l'overlay (icône) */
.mg-overlay-content {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 400ms ease, opacity 400ms ease;
}

.mg-overlay-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 36px;
  line-height: 1;
}

.mg-overlay-icon svg {
  width: 36px;
  height: 36px;
  fill: currentColor;
}

/* ── Animations de l'icône ─────────────────────────────────────────────── */

/* fade-in (défaut) */
.mg-icon-anim-fade-in .mg-overlay-content {
  opacity: 0;
}
.mg-icon-anim-fade-in .mg-gallery-item:hover .mg-overlay-content {
  opacity: 1;
}

/* zoom-in */
.mg-icon-anim-zoom-in .mg-overlay-content {
  opacity: 0;
  transform: scale(0.5);
}
.mg-icon-anim-zoom-in .mg-gallery-item:hover .mg-overlay-content {
  opacity: 1;
  transform: scale(1);
}

/* slide-up */
.mg-icon-anim-slide-up .mg-overlay-content {
  opacity: 0;
  transform: translateY(20px);
}
.mg-icon-anim-slide-up .mg-gallery-item:hover .mg-overlay-content {
  opacity: 1;
  transform: translateY(0);
}

/* rotate */
.mg-icon-anim-rotate .mg-overlay-content {
  opacity: 0;
  transform: rotate(-90deg) scale(0.8);
}
.mg-icon-anim-rotate .mg-gallery-item:hover .mg-overlay-content {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. LÉGENDE
   ═══════════════════════════════════════════════════════════════════════════ */

.mg-item-caption {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 0.875em;
  line-height: 1.4;
  word-break: break-word;
}

/* En dessous */
.mg-caption-below {
  position: relative;
  z-index: 1;
}

/* Overlay bas */
.mg-caption-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  transform: translateY(0);
}

/* Overlay haut */
.mg-caption-overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

/* Overlay centre */
.mg-caption-overlay-center {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 3;
  transform: translateY(-50%);
  text-align: center;
}

/* Overlay au survol seulement */
.mg-caption-overlay-hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 400ms ease, transform 400ms ease;
}

.mg-gallery-item:hover .mg-caption-overlay-hover {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. ANIMATIONS DE CHARGEMENT
   L'état initial (opacity:0, transform) est appliqué exclusivement par JS,
   jamais par CSS. Cela évite tout conflit de spécificité CSS/inline-style
   et garantit que les items sont visibles en mode aperçu Elementor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Classe cible pour JS — pas de style initial ici */
.mg-anim-item {
  /* intentionnellement vide : état géré par JS */
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. ÉTAT CHARGÉ
   ═══════════════════════════════════════════════════════════════════════════ */

/* Masonry initialisé : on s'assure que la grille est visible */
.mg-gallery-grid.mg-initialized {
  opacity: 1;
}

/* Indicateur de chargement (spinner) avant initialisation */
.mg-gallery-grid:not(.mg-initialized)::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin: 40px auto;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #555;
  border-radius: 50%;
  animation: mg-spin 0.8s linear infinite;
}

@keyframes mg-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. LIGHTBOX — SURCHARGES ELEMENTOR
   La lightbox est celle d'Elementor : son style se configure dans
   Elementor → Réglages → Lightbox (couleur fond, texte, icônes, etc.)
   On peut néanmoins cibler .elementor-lightbox pour des ajustements locaux.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Exemple : légère ombre sur le titre en lightbox */
.elementor-lightbox .elementor-swiper-slide-title {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PLACEHOLDER ÉDITEUR
   ═══════════════════════════════════════════════════════════════════════════ */

.mg-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  border: 2px dashed #ccc;
  border-radius: 8px;
  background: #fafafa;
  color: #888;
  font-size: 1em;
  text-align: center;
  padding: 24px;
}

.mg-placeholder p {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. UTILITAIRES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Clearfix après la grille */
.mg-gallery-grid::after {
  content: '';
  display: block;
  clear: both;
}

/* Reset transition sur les items initialisés (masonry les gère) */
.mg-gallery-grid.mg-initialized .mg-gallery-item {
  /* masonry positionne en absolu; on évite les conflits de float */
}