/* ============================================================
   CIMA · GALLERY (carrusel coverflow + lightbox)
   Estilos del bloque de galería del single-tour.
   Va en: tu-tema-hijo/assets/css/cima-gallery.css
   Se encola desde el shortcode [cima_gallery] (functions.php).

   USA TUS VARIABLES GLOBALES de Elementor (:root --idx-*). Para que
   todo pinte bien, tu :root DEBE tener además de las de marca estas 5
   (añádelas en Elementor si no están):
       --idx-primary-ink: #b85605;
       --idx-surface:     #faf7f4;
       --idx-line:        #efe9e5;
   (--idx-radius-pill y --idx-ease NO se suben a Elementor: no son
    colores → Global Variables no los acepta → van hardcodeados aquí:
    999px y cubic-bezier(0.22,1,0.36,1).)
   El fondo del lightbox va hardcodeado (#081021), no es variable.
   ============================================================ */

.cima-gallery svg.lucide {
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

/* ============================================================
   CARRUSEL — coverflow de "foco central".
   El shortcode genera SOLO esto (.cover__stage con sus slides).
   La cabecera (kicker + título) la pones con widgets de Elementor.
   ============================================================ */

/* escenario: ancla las flechas. El ancho lo da el contenedor de
   Elementor donde pongas el shortcode (alinéalo a tu layout 1240). */
.cover__stage {
    position: relative;
    width: 100%;
}

/* el Swiper RECORTA a su ancho → las vecinas se ven DENTRO del layout,
   no sangran a la ventana. El padding vertical deja sitio a la sombra. */
.mainSwiper {
    width: 100%;
    overflow: hidden;
    padding: 1rem 0 1.5rem;
}

/* cada slide: apaisado 3:2, ~52% de ancho → la central manda y deja
   ver parte de las vecinas; la separación la da spaceBetween (JS).
   El velo lo modula JS por progreso; aquí solo reposo y sombra. */
.mainSwiper .swiper-slide {
    width: 52%;
    aspect-ratio: 3 / 2;
    border-radius: var(--idx-radius-card);
    overflow: hidden;
    background: #faf7f4;
    box-shadow: 0 24px 50px -26px rgba(8, 16, 33, .45);
    cursor: pointer;
    position: relative;
}

.mainSwiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* velo blanco → opacidad modulada por JS (--veil), de 0 en la central
   a ~.6 en laterales, CONTINUO al arrastrar. Sin transición CSS aquí. */
.mainSwiper .swiper-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, var(--veil, .6));
    pointer-events: none;
}

.mainSwiper .swiper-slide-active {
    cursor: zoom-in;
}

.mainSwiper .swiper-slide-active:hover {
    box-shadow: 0 38px 70px -28px rgba(8, 16, 33, .55);
}

/* overlay oscuro sobre la foto central al hover → resalta la lupa y
   comunica "clic para ampliar". Usa ::before (el ::after es el velo
   blanco de las vecinas). Solo en la activa, solo al hover. */
.mainSwiper .swiper-slide-active::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(8, 16, 33, .28);
    opacity: 0;
    transition: opacity .3s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.mainSwiper .swiper-slide-active:hover::before {
    opacity: 1;
}

/* lupa CENTRADA en la foto, al hover. Color oscuro neutro (NO naranja,
   para no confundir con las flechas). Icono = lupa de verdad (search). */
.slide__zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    z-index: 2;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    background: rgba(8, 16, 33, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .3s cubic-bezier(0.22, 1, 0.36, 1), transform .3s cubic-bezier(0.22, 1, 0.36, 1), background .25s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.slide__zoom svg {
    width: 22px;
    height: 22px;
    display: block;
    /* anula el vertical-align:middle global de svg.lucide */
}

.mainSwiper .swiper-slide-active:hover .slide__zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: rgba(8, 16, 33, .72);
}

/* ===== flechas circulares de marca ===== */
.cover__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 999px;
    border: none;
    background: var(--idx-primary);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 12px 28px -10px rgba(230, 110, 7, .6);
    transition: background .25s cubic-bezier(0.22, 1, 0.36, 1), transform .2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .25s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s cubic-bezier(0.22, 1, 0.36, 1);
}

.cover__arrow svg {
    width: 22px;
    height: 22px;
}

.cover__arrow:hover {
    background: var(--idx-primary-hover);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 16px 34px -10px rgba(230, 110, 7, .75);
}

.cover__arrow:active {
    transform: translateY(-50%) scale(.97);
}

.cover__arrow.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.cover__arrow--prev {
    left: clamp(.5rem, 2vw, 1.25rem);
}

.cover__arrow--next {
    right: clamp(.5rem, 2vw, 1.25rem);
}

/* ===== caso 1 sola foto: sin carrusel, imagen sola y grande ===== */
.cima-gallery--single .cover__solo {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--idx-radius-card);
    overflow: hidden;
    box-shadow: 0 24px 50px -26px rgba(8, 16, 33, .45);
    cursor: zoom-in;
}

.cima-gallery--single .cover__solo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* móvil: central al 66% → las vecinas se asoman claro a ambos lados.
   Flechas más chicas y pegadas al borde. El spaceBetween corto (12px en
   móvil) lo pone el JS vía breakpoints. */
@media (max-width: 767px) {
    .mainSwiper .swiper-slide {
        width: 66%;
		aspect-ratio: 4 / 5;
    }

    .cover__arrow {
        width: 2.4rem;
        height: 2.4rem;
    }

    .cover__arrow--prev {
        left: .15rem;
    }

    .cover__arrow--next {
        right: .15rem;
    }

    .cover__arrow svg {
        width: 17px;
        height: 17px;
    }
}

/* tinte de marca para el lightbox de BiggerPicture */
.bp-wrap {
    --bp-background-color: rgba(8, 16, 33, .94);
}

/* ============================================================
   LIGHTBOX FULLSCREEN PROPIO + tira de miniaturas custom.
   wrapper fijo a pantalla completa = BiggerPicture arriba
   (.cover__lb) + tira de thumbnails abajo (.cover__thumbs).
   ============================================================ */
.cover__lbwrap {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    flex-direction: column;
    contain: strict;
}

.cover__lbwrap.open {
    display: flex;
}

.cover__lbwrap.closing {
    display: flex;
}

.cover__lbwrap.closing .cover__thumbs {
    opacity: 0;
    transition: opacity .25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* zona donde BiggerPicture monta la foto grande */
.cover__lb {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
}

.cover__lb .bp-wrap {
    position: absolute !important;
    contain: layout size;
}

/* ── tira de miniaturas (abajo del lightbox) ── */
.cover__thumbs {
    height: 100px;
    flex-shrink: 0;
    background: rgba(8, 16, 33, .95);
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 0 12px;
    z-index: 1;
    opacity: 0;
    transition: opacity .35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* centra la tira cuando hay pocas miniaturas */
.cover__thumbs::before,
.cover__thumbs::after {
    content: '';
    margin: auto;
}

.cover__lbwrap.open .cover__thumbs {
    opacity: 1;
}

.cover__thumbs::-webkit-scrollbar {
    display: none;
}

.cover__thumbs button {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: var(--idx-radius-soft);
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-color: transparent;
    opacity: .5;
    transition: opacity .2s cubic-bezier(0.22, 1, 0.36, 1), transform .2s cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
}

.cover__thumbs button:hover,
.cover__thumbs button:focus-visible {
    opacity: .8;
}

.cover__thumbs button.active {
    opacity: 1;
    transform: scale(1.08);
    box-shadow: 0 0 0 2px #fff;
}

/* bloqueo de scroll del body mientras el lightbox está abierto */
.bp-lock {
    overflow-y: clip !important;
}

.bp-lock body {
    overflow: clip !important;
}

@media (max-width: 768px) {
    .cover__thumbs {
        height: 75px;
        gap: 4px;
    }

    .cover__thumbs button {
        width: 90px;
        height: 60px;
    }
}

@media (max-height: 500px) {
    .cover__thumbs {
        display: none;
    }
}