/**
 * Carousel Slider — Component CSS
 *
 * Cargado únicamente cuando el shortcode [load_post_types post_type="carousel_slider"]
 * se usa en la página (patrón "critical CSS por componente").
 * El grueso del estilo se delega a Tailwind; aquí solo lo que Tailwind no cubre.
 *
 * @package unade-mx
 * @version 1.0.0
 */

/* ── Contenedor principal ── */
.unade-cs {
    isolation: isolate;        /* Crea un nuevo contexto de apilamiento */
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ── Track (área de slides) ── */
.unade-cs__track {
    position: relative;
    height: clamp(320px, 55vw, 620px);
}

/* ── Slide individual ── */
.unade-cs__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: opacity;      /* Optimiza la transición de opacidad */
}

/* ── Flechas de navegación ── */
.unade-cs__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

.unade-cs__arrow--prev { left: 1rem; }
.unade-cs__arrow--next { right: 1rem; }

/* Foco accesible (no queda oculto detrás del outline de Tailwind) */
.unade-cs__arrow:focus-visible {
    outline: 2px solid #ffb312;
    outline-offset: 2px;
}

/* ── Indicadores / dots ── */
.unade-cs__dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}