/* ── WP Banners — Frontend Styles ───────────────────────────────────────────
   Requiere Bootstrap 5 ya cargado en el tema.
   La variable --banner-height se inyecta inline desde PHP.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Sección contenedora ─────────────────────────────────────────────────── */
.wp-banners-section {
    width: 100%;
    overflow: hidden;
}

/* ── Carousel wrapper ────────────────────────────────────────────────────── */
.wp-banners-carousel {
    width: 100%;
    background: #e8eaec; /* fallback mientras carga */
}

/* ── Slide ───────────────────────────────────────────────────────────────── */
.banner-slide {
    height: var(--banner-height, 170px);
    max-height: 170px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #dde0e3;
    position: relative;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

/* Fade suave al cargar la imagen de fondo */
.banner-slide.bg-loading {
    opacity: 0;
}

.banner-slide.bg-ready {
    animation: banner-fade-in 0.4s ease forwards;
}

@keyframes banner-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Link overlay (cubre todo el slide) ──────────────────────────────────── */
.banner-slide__link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    /* Accesibilidad: foco visible */
    outline: none;
}

.banner-slide__link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -3px;
    box-shadow: 0 0 0 5px rgba(0, 112, 240, 0.5);
}

/* ── Skeleton loader ─────────────────────────────────────────────────────── */
.banner-skeleton {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(
        90deg,
        #dde0e3 0%,
        #dde0e3 25%,
        #eaecee 50%,
        #dde0e3 75%,
        #dde0e3 100%
    );
    background-size: 300% 100%;
    animation: wp-banners-shimmer 1.6s ease-in-out infinite;
    border-radius: 0;
}

/* Una vez cargada la imagen, la sección recibe .banners-loaded y el skeleton desaparece */
.wp-banners-carousel.banners-loaded .banner-skeleton {
    animation: skeleton-exit 0.4s ease forwards;
    pointer-events: none;
}

@keyframes wp-banners-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

@keyframes skeleton-exit {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
}

/* ── Indicadores Bootstrap — override para visibilidad ──────────────────── */
.wp-banners-carousel .carousel-indicators {
    margin-bottom: 8px;
    z-index: 10;
}

.wp-banners-carousel .carousel-indicators [data-bs-slide-to] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border-top: 0;
    border-bottom: 0;
    opacity: 0.5;
    transition: opacity 0.2s, transform 0.2s;
}

.wp-banners-carousel .carousel-indicators .active {
    opacity: 1;
    transform: scale(1.3);
}

/* ── Controles Bootstrap — override ─────────────────────────────────────── */
.wp-banners-carousel .carousel-control-prev,
.wp-banners-carousel .carousel-control-next {
    width: 40px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s;
    z-index: 10;
}

.wp-banners-carousel:hover .carousel-control-prev,
.wp-banners-carousel:hover .carousel-control-next {
    opacity: 0.85;
}

.wp-banners-carousel .carousel-control-prev { left: 12px; }
.wp-banners-carousel .carousel-control-next { right: 12px; }

.wp-banners-carousel .carousel-control-prev:hover,
.wp-banners-carousel .carousel-control-next:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.55);
}

.wp-banners-carousel .carousel-control-prev-icon,
.wp-banners-carousel .carousel-control-next-icon {
    width: 16px;
    height: 16px;
}

/* ── Motion safety: respetar preferencia del usuario ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .banner-skeleton {
        animation: none;
        background: #dde0e3;
    }

    .banner-slide,
    .banner-slide.bg-ready,
    .wp-banners-carousel .carousel-control-prev,
    .wp-banners-carousel .carousel-control-next {
        transition: none;
        animation: none;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .wp-banners-carousel .carousel-control-prev,
    .wp-banners-carousel .carousel-control-next {
        width: 32px;
        height: 32px;
        opacity: 0.7;
    }

    .wp-banners-carousel .carousel-control-prev { left: 6px; }
    .wp-banners-carousel .carousel-control-next { right: 6px; }
}