/* ═══════════════════════════════════════════════════════════════════════════
   Galerie dynamique — Ari Lashes site public
   Reusa las variables de :root del index.html (--purple, --rose, --grad,
   --text, --muted, --border, --bg2, --shadow). Self-contained otherwise.
   Layout: hero (is_hero=true, portrait 4:5) + filters opcionales + grid 1:1
   Lightbox vanilla con teclado + swipe touch. Mobile-first.
   ═════════════════════════════════════════════════════════════════════════ */

.gallery-section {
  padding: 80px 0 100px;
  background: var(--bg);
  position: relative;
}

.gallery-section .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

/* ─── Heading ────────────────────────────────────────────────────────── */
.gallery-head {
  text-align: center;
  margin-bottom: 36px;
}
.gallery-head .eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--purple-d, #7b6cac);
  margin-bottom: 12px;
  opacity: 0.78;
}
.gallery-head .section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.05;
  color: var(--text, #1c1830);
  letter-spacing: -0.01em;
}
.gallery-head .section-title em {
  font-style: italic;
  background: var(--grad, linear-gradient(135deg, #c4b5e8, #e8adc8));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ─── Hero bloc (is_hero=true) ───────────────────────────────────────── */
.gallery-hero {
  display: grid;
  gap: 18px;
  margin: 0 auto 40px;
  /* Centrado y tamaño se ajusta dinámicamente por cantidad
     (.is-1, .is-2, .is-3, .is-many) — JS añade la class al wrapper */
  max-width: 920px;
}
.gallery-hero.is-1 {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
}
.gallery-hero.is-2 {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.gallery-hero.is-3,
.gallery-hero.is-many {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.gallery-hero:empty { display: none; }

/* ─── Filter chips (entre hero y grid) ───────────────────────────────── */
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.gallery-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text, #1c1830);
  background: var(--card, #fff);
  border: 1px solid var(--border, rgba(155,141,212,.22));
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s, border-color .18s;
}
.gallery-filter-chip:hover {
  background: var(--bg2, #f9f6ff);
  border-color: var(--purple-l, #c4bae8);
}
.gallery-filter-chip.is-active {
  background: var(--grad, linear-gradient(135deg, #c4b5e8, #e8adc8));
  color: #fff;
  border-color: transparent;
}
.gallery-filter-chip-count {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.7;
  background: rgba(28, 24, 48, 0.08);
  padding: 1px 7px;
  border-radius: 999px;
}
.gallery-filter-chip.is-active .gallery-filter-chip-count {
  background: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.gallery-filters:empty { display: none; }

/* ─── Grid (is_hero=false) ───────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.gallery-grid:empty { display: none; }

/* ─── Card común (hero + grid) ───────────────────────────────────────── */
.gallery-item {
  position: relative;
  display: block;
  background: var(--card2, #f6f2fe);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(155, 141, 212, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  border: 0;
  width: 100%;
  padding: 0;
  font-family: inherit;
  text-align: left;
}
.gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(155, 141, 212, 0.22);
}
.gallery-item:focus-visible {
  outline: 2px solid var(--purple, #9b8dd4);
  outline-offset: 3px;
}

.gallery-item-media {
  position: relative;
  width: 100%;
  background: var(--bg2, #f9f6ff);
  overflow: hidden;
}
/* Hero portrait 9/16 = "stories" look del sitio viejo: alto e impactante */
.gallery-item.is-hero .gallery-item-media   { aspect-ratio: 9 / 16; }
.gallery-item.is-square .gallery-item-media { aspect-ratio: 1 / 1; }

/* Aspect ratio override por item (futuro: viene de BD) */
.gallery-item.ar-portrait  .gallery-item-media { aspect-ratio: 9 / 16; }
.gallery-item.ar-landscape .gallery-item-media { aspect-ratio: 16 / 9; }
.gallery-item.ar-square    .gallery-item-media { aspect-ratio: 1 / 1; }
.gallery-item.ar-auto      .gallery-item-media { aspect-ratio: auto; }

.gallery-item-media img,
.gallery-item-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-item-media.pos-top    img,
.gallery-item-media.pos-top    video { object-position: top; }
.gallery-item-media.pos-center img,
.gallery-item-media.pos-center video { object-position: center; }
.gallery-item-media.pos-bottom img,
.gallery-item-media.pos-bottom video { object-position: bottom; }

/* Badge de carrusel "🎠 N" en esquina superior derecha */
.gallery-item-carousel-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 16, 36, 0.66);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
}

/* Play badge sobre videos */
.gallery-item-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.18) 100%);
}
.gallery-item-play svg {
  width: 56px;
  height: 56px;
  fill: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
  transition: transform .25s;
}
.gallery-item:hover .gallery-item-play svg { transform: scale(1.08); }

/* Caption inside (overlay sobre la foto) */
.gallery-item-caption-inside {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text, #1c1830);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  text-align: left;
  line-height: 1.35;
}

/* Caption below (debajo de la card) */
.gallery-item-caption-below {
  padding: 10px 14px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text, #1c1830);
  line-height: 1.4;
}
/* Servicio resuelto (nombre i18n desde available_filters) — sutil debajo del
   caption. Si la card no tiene service_slug, el div no se renderiza.
   Padding-top 8px funciona bien con o sin caption arriba: con caption queda
   un gap natural de 8+4=12px, sin caption queda 8px del media. */
.gallery-item-service {
  padding: 8px 14px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--purple-d, #7b6cac);
  text-transform: lowercase;
  line-height: 1.3;
}
/* Si hay caption arriba, el servicio absorbe ese padding inferior */
.gallery-item-caption-below + .gallery-item-service {
  padding-top: 2px;
}

/* ─── Skeleton shimmer (loading) ─────────────────────────────────────── */
.gallery-skel {
  background: var(--card2, #f6f2fe);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  position: relative;
}
.gallery-skel.is-hero { aspect-ratio: 4 / 5; }
.gallery-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: gallery-shimmer 1.4s linear infinite;
}
@keyframes gallery-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}

/* ─── Empty state ────────────────────────────────────────────────────── */
.gallery-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--muted, #8a85a8);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-style: italic;
}
.gallery-empty .gallery-empty-emoji {
  display: block;
  font-size: 36px;
  margin-bottom: 12px;
  font-style: normal;
  opacity: 0.6;
}

/* ─── Lightbox ───────────────────────────────────────────────────────── */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(20, 16, 36, 0.94);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.gallery-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.gallery-lightbox-stage {
  position: relative;
  max-width: min(92vw, 1080px);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* Wrapper del media: contenedor flex que se ajusta al tamaño del media.
   NO impone aspect-ratio ni object-fit:cover — eso es solo para el grid.
   El media interno (img/video) se muestra COMPLETO (contain) clampeado
   a 90vw/90vh. */
.gallery-lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
  background: transparent;
}
.gallery-lightbox-media img,
.gallery-lightbox-media video {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;   /* foto completa, sin recorte */
  display: block;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  background: #000;       /* fondo negro solo bajo el media (carga de video) */
}
.gallery-lightbox-caption {
  position: absolute;
  bottom: -52px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  padding: 0 20px;
}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  transition: background .18s, transform .18s;
  font-family: inherit;
  z-index: 2;
}
.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.06);
}
.gallery-lightbox-close {
  top: 22px;
  right: 22px;
}
.gallery-lightbox-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: 22px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.gallery-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.gallery-lightbox-prev svg,
.gallery-lightbox-next svg,
.gallery-lightbox-close svg { width: 18px; height: 18px; fill: #fff; }

body.gallery-lightbox-open { overflow: hidden; }

/* Carrusel en lightbox: contador "1 / N" arriba + dots abajo */
.gallery-lightbox-counter {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 5px 14px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.gallery-lightbox-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 90vw;
  flex-wrap: wrap;
  justify-content: center;
}
.gallery-lightbox-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 0;
  transition: background .18s, transform .18s;
}
.gallery-lightbox-dot:hover { background: rgba(255, 255, 255, 0.7); }
.gallery-lightbox-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 768px) {
  .gallery-lightbox-counter { top: 18px; font-size: 12px; }
  .gallery-lightbox-dots { bottom: 16px; gap: 6px; }
  .gallery-lightbox-dot { width: 8px; height: 8px; }
}

/* ─── Mobile (<768px): 2 cols + hero compacto + lightbox sin flechas
       laterales (swipe-only) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .gallery-section {
    padding: 60px 0 80px;
  }
  .gallery-section .container { padding: 0 16px; }
  .gallery-head { margin-bottom: 28px; }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .gallery-hero {
    margin-bottom: 28px;
  }
  .gallery-hero.is-1 {
    grid-template-columns: minmax(220px, 320px);
  }
  .gallery-hero.is-2,
  .gallery-hero.is-3,
  .gallery-hero.is-many {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-item-caption-inside {
    font-size: 11px;
    padding: 6px 10px;
    left: 8px;
    right: 8px;
    bottom: 8px;
  }
  .gallery-item-caption-below {
    font-size: 12px;
    padding: 8px 10px 12px;
  }
  /* Lightbox: flechas se ocultan, scroll horizontal del item al hacer swipe */
  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    display: none;
  }
  .gallery-lightbox-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .gallery-lightbox-caption {
    font-size: 12px;
    bottom: -42px;
  }
}

/* ─── Reveal animation hook (compatible con el IntersectionObserver global) ── */
.gallery-section.reveal,
.gallery-section .reveal { /* nothing to override; index.html ya define .reveal */ }