/* ============================================================
   MODULO GALERIA — render dentro de la invitacion (3 vistas).
   Namespaced bajo .galeria. Colores 100% adaptativos via --g-*
   (heredan de las --color-* de la invitacion: plantilla o paleta).
   Layout a 375px base (el canvas lo escala con transform:scale).
   ============================================================ */

.galeria {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    color: var(--g-texto, #44403c);
    /* SIN background propio: transparente para dejar ver el fondo y el patron
       (mosaico) de la invitacion, y el color de la paleta activa. Igual que el
       contenido de la invitacion "fluye" sobre el fondo, sin recuadro. */
}

/* Bubble "Configurar galeria" (SOLO editor): acceso directo al modal. Mismo
   estilo slate que el bubble "Volver al texto". !important vence los estilos
   globales de <button> de la plantilla (fondo verde, uppercase, width 100%...). */
.galeria-config-bubble {
    /* EN FLUJO (no absolute): ocupa su propio espacio arriba del contenido,
       centrado, y lo empuja hacia abajo. Nunca pisa ni se solapa con las fotos. */
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100% - 24px);
    margin: 4px auto 14px !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #334155 0%, #475569 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
    text-transform: none !important;
    box-shadow: 0 6px 16px -6px rgba(51, 65, 85, 0.55);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.galeria-config-bubble i { font-size: 12px; }

/* Titulo accesible (SEO/lectores), invisible en pantalla. */
.galeria-sr-titulo {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Titulo VISIBLE (contenido del usuario): centrado, encima de las fotos.
   - Hereda la tipografia de nombre_1 via --g-titulo-fuente (fallback a la
     fuente de titulos de la plantilla). Con hub activo, .container2 * lo pisa
     igual que a nombre_1 -> coherencia automatica.
   - Robusto ante textos largos: envuelve a varias lineas (SIN nowrap); el
     modulo crece por su altura real y LayoutBloques recompacta el resto.
   - Separacion identica a la del bubble (14px arriba/abajo). En el editor el
     bubble aporta sus 14px por debajo (gap bubble<->titulo); el titulo aporta
     14px por debajo (gap titulo<->fotos). En publica el aire superior lo da el
     padding del modulo. */
.galeria-titulo {
    margin: 0 auto 14px;
    max-width: calc(100% - 24px);
    text-align: center;
    /* Color de DISENO de nombre_1 (--g-titulo-color); fallback al color de titulos. */
    color: var(--g-titulo-color, var(--g-titulo, #44403c));
    font-family: var(--g-titulo-fuente, var(--fuente-titulos)), cursive;
    font-size: clamp(22px, 6.4vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}
/* Con paleta activa el color de nombre_1 se fuerza a --color-titulos (ver
   _css_variables.blade.php): el titulo hace lo MISMO para no divergir. */
body.paleta-activa .galeria-titulo { color: var(--color-titulos) !important; }

/* --- Item comun (enlace + imagen) --- */
.galeria-item {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;          /* contiene el apilado del ::before y la imagen */
    border-radius: 10px;
    background: color-mix(in srgb, var(--g-texto, #44403c) 6%, transparent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
}
/* Placeholder "blur-up": la propia foto en miniatura (~24px) embebida como
   data-URI (--g-lqip), desenfocada. Se ve al INSTANTE (viaja en el HTML), dando
   color y composicion real mientras la foto definitiva carga y hace fade encima.
   Nunca hay hueco vacio ni "aparicion de la nada". Solo se pinta si la var existe
   (mosaico/cuadricula la reciben inline por foto; historia no la usa). */
.galeria-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--g-lqip, none);
    background-size: cover;
    background-position: center;
    filter: blur(12px);
    transform: scale(1.12);      /* oculta los bordes nitidos del desenfoque */
}
.galeria-item img {
    position: relative;
    z-index: 1;                  /* por encima del placeholder borroso */
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;                  /* fade-in al cargar (JS anade .cargada) */
    transition: opacity .6s ease, transform .45s ease;
}
.galeria-item img.cargada,
.galeria-item img.g-error { opacity: 1; }
.galeria-item:hover img.cargada,
.galeria-item:active img.cargada { transform: scale(1.04); }

/* ============================================================
   ESTILO MOSAICO — masonry con CSS columns (alturas naturales)
   ============================================================ */
.galeria--mosaico .galeria-grid {
    column-count: 2;
    column-gap: 10px;
}
.galeria--mosaico .galeria-item {
    display: inline-block;
    width: 100%;
    margin: 0 0 10px;
    break-inside: avoid;
    /* Aspect-ratio REAL de cada foto (--g-ar inline desde BD) -> el hueco se
       reserva ANTES de cargar, sin reflow de las columnas al ir apareciendo.
       Mantiene el efecto masonry (cada ladrillo con su proporcion). */
    aspect-ratio: var(--g-ar, 3 / 4);
}
/* Portada = hero a ancho completo arriba */
.galeria--mosaico .galeria-item.es-portada {
    column-span: all;
    margin-bottom: 12px;
}

/* ============================================================
   ESTILO CUADRICULA — grid uniforme cuadrado
   ============================================================ */
.galeria--cuadricula .galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: 8px;
}
.galeria--cuadricula .galeria-item {
    aspect-ratio: 4 / 5;
}
/* Portada = banda ancha destacada (ancho completo, panoramica) */
.galeria--cuadricula .galeria-item.es-portada {
    grid-column: span 2;
    aspect-ratio: 3 / 2;
}

/* ============================================================
   ESTILOS DE CARRUSEL (Swiper): comun a HISTORIA y SLIDER.
   HISTORIA = coverflow manual · SLIDER = fundido + autoplay 8s.
   Comparten el mismo markup de slide (foto contain + fondo blur).
   ============================================================ */
.galeria--historia, .galeria--slider { padding: 0; overflow: hidden; }
.galeria--historia .galeria-swiper,
.galeria--slider .galeria-swiper {
    width: 100%;
    padding: 6px 0 34px;
}
/* Tamano del slide: la unica diferencia real entre ambos estilos. */
.galeria--historia .swiper-slide {
    width: 80%;
    aspect-ratio: 2 / 3;
}
.galeria--slider .swiper-slide {
    width: 100%;
    aspect-ratio: 4 / 5;
}
.galeria--historia .galeria-item,
.galeria--slider .galeria-item {
    position: relative;
    width: 100%; height: 100%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    background: #1a1a1a;
    cursor: grab;
}
/* Fondo: la propia foto desenfocada (rellena sin recortar la principal) */
.galeria--historia .galeria-hist-bg,
.galeria--slider .galeria-hist-bg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: blur(16px) brightness(0.72);
    transform: scale(1.12);
}
/* Primer plano: la foto COMPLETA, nunca recortada */
.galeria--historia .galeria-hist-fg,
.galeria--slider .galeria-hist-fg {
    position: relative;
    z-index: 1;
    width: 100%; height: 100%;
    object-fit: contain;
}
/* Flechas: SOLO el glifo, blanco y neutro. Se neutraliza el estilo global de
   <button> de la plantilla (fondo/color verde) que las teñia y las recortaba. */
.galeria--historia .swiper-button-prev,
.galeria--historia .swiper-button-next,
.galeria--slider .swiper-button-prev,
.galeria--slider .swiper-button-next {
    color: #fff !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    width: 34px;
    height: 34px;
    --swiper-navigation-size: 30px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}
.galeria--historia .swiper-pagination-bullet,
.galeria--slider .swiper-pagination-bullet {
    background: var(--g-titulo, #44403c);
    opacity: .35;
}
.galeria--historia .swiper-pagination-bullet-active,
.galeria--slider .swiper-pagination-bullet-active {
    background: var(--g-acento, #c9a96e);
    opacity: 1;
}

/* ============================================================
   ESTADO VACIO (solo editor en vivo, sin fotos aun)
   ============================================================ */
.galeria--vacia {
    padding: 22px 16px;
}
.galeria-vacia-inner {
    border: 2px dashed color-mix(in srgb, var(--g-acento, #c9a96e) 55%, transparent);
    border-radius: 14px;
    padding: 26px 16px;
    text-align: center;
    color: color-mix(in srgb, var(--g-texto, #44403c) 70%, transparent);
    background: color-mix(in srgb, var(--g-acento, #c9a96e) 6%, transparent);
}
.galeria-vacia-icono { font-size: 30px; display: block; margin-bottom: 8px; }
.galeria-vacia-texto { margin: 0; font-size: 14px; }