/* =============================================================
   Campaign Media Carousel — carousel-styles.css v1.2.0
   ============================================================= */

/* ── Contenedor principal ─────────────────────────────────── */
.campaign-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    min-height: 200px;

    /* touch-action: el navegador gestiona el eje perpendicular,
       el JS gestiona el swipe en el eje del carrusel sin conflictos */
    touch-action: pan-y;   /* carrusel horizontal: JS gestiona X, browser gestiona Y */
}

.campaign-carousel[data-transition="vertical"] {
    touch-action: pan-x;
}

.campaign-carousel[data-transition="fade"] {
    touch-action: none;
}

/* ── Modo pantalla completa ─────────────────────────────── */
.campaign-carousel.full-size {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;   /* JS sobreescribe con window.innerHeight real */
    z-index: 999999;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

@supports (padding: env(safe-area-inset-top)) {
    .campaign-carousel.full-size {
        padding-top:    env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ── Wrapper interno ─────────────────────────────────────── */
.campaign-carousel__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ── Items ──────────────────────────────────────────────────
   FILOSOFÍA CLAVE:
   - opacity:0 es la forma blindada de ocultar en iOS.
     visibility:hidden sola puede fallar con capas de composición GPU.
   - Sin will-change: causaba que las capas escaparan del overflow:hidden.
   - Sin transition aquí: el JS inyecta transiciones inline y las limpia.
   - Tras cada transición, el JS borra sus inline styles y el CSS retoma
     el control: active → opacity:1 visible, resto → opacity:0 hidden.
   ─────────────────────────────────────────────────────────── */
.campaign-carousel__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Doble ocultamiento: opacity para GPU layers, visibility para accesibilidad */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;

    overflow: hidden;
    /* SIN will-change: transform — causa escape del overflow:hidden en móvil */
    /* SIN transition — el JS lo gestiona inline */
}

.campaign-carousel__item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Items con enlace */
.campaign-carousel__item[data-link] {
    cursor: pointer;
}

/* ── Media ──────────────────────────────────────────────────
   object-position lo gestiona el JS en _applyObjectFit()
   para aplicar el valor correcto según el breakpoint activo
   ─────────────────────────────────────────────────────────── */
.campaign-carousel__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* ── Overlay de texto ─────────────────────────────────────── */
.campaign-carousel__overlay {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 20px;
    text-align: center;
    z-index: 5;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ── Dots ─────────────────────────────────────────────────── */
.carousel-dots {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 6px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 100px;
    z-index: 10;
    pointer-events: auto;
}

.campaign-carousel.full-size .carousel-dots {
    position: fixed;
    z-index: 1000001;
}

@supports (right: env(safe-area-inset-right)) {
    .carousel-dots {
        right: max(20px, env(safe-area-inset-right, 20px));
    }
}

.carousel-dot {
    display: block;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}

.carousel-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

.carousel-dot.active {
    background: #fff;
    transform: scale(1.3);
}

/* ── Flechas ─────────────────────────────────────────────── */
.carousel-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
    z-index: 10;
}

.campaign-carousel.full-size .carousel-arrows {
    position: fixed;
    z-index: 1000001;
}

.carousel-arrow {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    pointer-events: auto;
}

.carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.08);
}

.carousel-arrow .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    line-height: 20px;
}

/* ── Altura modo no-fullscreen ────────────────────────────── */

/* Desktop: CSS variable generada por PHP */
.campaign-carousel:not(.full-size) {
    height: var(--carousel-height, auto);
}

/* ── Móvil ──────────────────────────────────────────────────
   El !important sobreescribe el height inline del desktop.
   El JS (_fixMobileHeight) sobreescribe esto con dvh o px real.
   Este var() es el fallback si el JS aún no ha cargado.
   ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Todos los carruseles en móvil usan el Alto en Móvil del admin.
       Se aplica a full-size también: en Elementor y muchos temas
       position:fixed no funciona, y este valor es el único control real.
       El JS (_fixMobileHeight) siempre sobreescribe esto con dvh o px reales. */
    .campaign-carousel {
        height: var(--mobile-height, 60vh) !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .campaign-carousel:not(.full-size) {
        position: relative;
    }

    .campaign-carousel.full-size {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        /* height sobreescrita por el !important de arriba y el JS */
    }

    /* Elementor */
    .elementor .campaign-carousel {
        height: var(--mobile-height, 100%) !important;
    }

    .elementor-section-height-full .campaign-carousel {
        height: 100dvh !important;
    }

    .carousel-dot {
        width: 5px;
        height: 5px;
    }
}

/* ── Elementor desktop ─────────────────────────────────── */
.elementor-widget-wrap .campaign-carousel { height: 100%; }
.elementor-section-height-full .campaign-carousel { height: 100vh; }

/* ── Retina ─────────────────────────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .campaign-carousel__media { image-rendering: auto; }
}