/**
 * 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 2.0.0
 */

/* ── Contenedor principal ── */
.unade-cs {
    isolation: isolate;        /* Nuevo contexto de apilamiento */
    position: relative;
    width: 100%;
    /* overflow: hidden va en el track para no recortar las flechas absolutas */
}

/* ── Track: hero ── */
.unade-cs__track {
    position: relative;
    height: 90vh;
    height: 90svh;
    background: #011859;
    overflow: hidden;          /* Recorta las imágenes/slides sin afectar a las flechas */
}

/* ── Slide individual ── */
.unade-cs__slide {
    position: absolute;
    inset: 0;
    background: #011859;
    background-size: cover;
    background-position: center;
    will-change: opacity;
}

/* ── Flechas de navegación ── */
.unade-cs__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 25;               /* Por encima del copy overlay (z-index:15) y dots (z-index:20) */
    display: flex !important;  /* Garantiza visibilidad independiente de Tailwind/Alpine */
    pointer-events: auto;
}

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

.unade-cs__arrow:focus-visible {
    outline: 2px solid #ffb312;
    outline-offset: 2px;
}

/* ── Copy overlay: texto de la slide activa + dots ── */
.unade-cs__copy-overlay {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 15;
    text-align: center;
    pointer-events: none;      /* El overlay no captura clicks */
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.unade-cs__copy-inner {
    max-width: 820px;
    margin: 0 auto;
}

.unade-cs__copy-overlay--left {
    text-align: left;
    /* Deja espacio para las flechas ← → (left/right:1rem + w-10 ≈ 3.5rem) */
    padding-left: 4.5rem;
    padding-right: 4.5rem;
}

.unade-cs__copy-inner--left {
    margin: 0;
}

.unade-cs__copy-tags--left {
    justify-content: flex-start;
}

.unade-cs__copy-desc--left {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Animación de entrada al cambiar slide */
@keyframes unade-cs-copy-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.unade-cs--copy-anim {
    animation: unade-cs-copy-in 0.45s ease-out both;
}

/* Tags */
.unade-cs__copy-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.unade-cs__copy-tag {
    display: inline-block;
    background: rgba(255, 179, 18, 0.18);
    border: 1px solid #ffb312;
    color: #ffb312;
    padding: 4px 14px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Título */
.unade-cs__copy-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 3.2vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.30);
    letter-spacing: -0.015em;
}

/* Descripción */
.unade-cs__copy-desc {
    margin: 0 0 1rem;
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* ── Indicadores (centrados, horizontales) ── */
.unade-cs__dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

/* Dots horizontales: altura fija */
.unade-cs__dots > button {
    height: 0.625rem !important;
    transition: width 0.3s, background-color 0.3s !important;
}

/* Dot activo: pill ancho */
.unade-cs__dots > button[aria-selected="true"] {
    width: 1.5rem !important;
    height: 0.625rem !important;
    background: #ffb312 !important;
}

/* Dot inactivo */
.unade-cs__dots > button[aria-selected="false"] {
    width: 0.625rem !important;
    height: 0.625rem !important;
    background: rgba(255,255,255,0.50) !important;
}

/* ── Responsive ── */

/* Tablet (768 – 1023 px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* copy-overlay: top:50% ya está en el selector base */
}

/* Móvil (< 768px) */
@media (max-width: 767px) {
    .unade-cs__copy-overlay {
        padding: 0 1rem;
    }

    /* Espacio lateral para flechas en alineación izquierda (móvil) */
    .unade-cs__copy-overlay--left {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }

    .unade-cs__copy-title {
        font-size: clamp(1.3rem, 5.5vw, 1.8rem);
    }

    .unade-cs__copy-desc {
        display: block;
        font-size: 0.82rem;
        line-height: 1.4;
        max-width: 20rem;
        margin-left: auto;
        margin-right: auto;
        -webkit-line-clamp: 5;
    }

    /* Las flechas permanecen visibles en móvil */
    .unade-cs__arrow {
        top: 35%;
        display: flex !important;
    }
}