/**
 * El carrusel del núcleo.
 *
 * Una lista horizontal con `scroll-snap` que **ya funciona sin
 * JavaScript**: se pasa con el dedo, con la rueda y con el teclado. Lo
 * que añade `carrusel.js` son las flechas, los puntos y el paso
 * automático — comodidades, nunca la única forma de ver el contenido.
 *
 * Vive en el núcleo y no en un módulo (2026-09-09) porque hacen falta
 * las mismas cuatro cosas en sitios que no se conocen entre sí: la
 * galería de una entrada de blog, la de un item del catálogo, un bloque
 * de diseño de `html` y una plantilla propia de un sitio. Se engancha
 * al MARCADO —atributos `data-`— y no lo genera: el HTML lo sigue
 * escribiendo cada plantilla, que es lo que permite sobrescribirlo.
 *
 * ## Cuántos se ven
 *
 *   data-carrusel            → automático: caben los que quepan, con
 *                              `--carrusel-min` de ancho mínimo.
 *   data-carrusel="2"        → dos, siempre.
 *   data-carrusel-md="3"     → tres a partir de 48rem.
 *   data-carrusel-lg="4"     → cuatro a partir de 72rem.
 *   data-carrusel-fijo       → los pases NO crecen cuando hay menos
 *                              que columnas (tarjetas de producto: una
 *                              sola mide un cuarto, no la fila entera).
 *
 * Se resuelve con selectores de atributo y NO con una propiedad
 * personalizada puesta en un `style=`: la CSP declara `style-src 'self'`
 * sin `unsafe-inline`, y un estilo en línea quedaría bloqueado sin dar
 * ningún error — ya pasó con el `style="--depth"` del árbol de páginas.
 * De paso, así los breakpoints funcionan también sin JavaScript.
 */
@layer iris.public {
    [data-carrusel] {
        --carrusel-gap: var(--space-3, 1rem);
        --carrusel-min: 18rem;

        position: relative;
    }

    .iris-carrusel__pista {
        display: flex;
        gap: var(--carrusel-gap);
        margin: 0;
        padding: 0;
        list-style: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        /* Sin barra visible: el control son las flechas y los puntos.
           Sigue siendo desplazable con rueda, dedo y teclado. */
        scrollbar-width: none;
        /* Un poco de aire abajo para que el foco de un enlace dentro de
           un pase no se recorte contra el borde del scroller. */
        padding-block-end: 2px;
    }

    .iris-carrusel__pista::-webkit-scrollbar { display: none; }

    .iris-carrusel__pase {
        /* `flex-grow: 1` y no `0`: cuando hay MENOS pases que columnas
           —dos testimonios en un carrusel de tres— los que hay crecen y
           llenan la fila, en vez de dejar un tercio vacío a la derecha.
           No afecta al caso normal: en cuanto la pista desborda no queda
           espacio libre que repartir, así que la anchura la sigue
           mandando `flex-basis` y el desplazamiento funciona igual. */
        flex: 1 0 min(100%, var(--carrusel-min));
        scroll-snap-align: start;
        min-inline-size: 0;
    }

    /* Lo contrario, a petición de la plantilla (2026-09-18): un pase
       que es una TARJETA —un producto relacionado, con su foto
       cuadrada— no debe crecer aunque sea el único; estirado a la fila
       entera, su foto de un cuarto pasa a medir mil píxeles de alto. */
    [data-carrusel-fijo] > .iris-carrusel__pista > .iris-carrusel__pase {
        flex-grow: 0;
    }

    /* ---- Cuántos se ven, por tramos ------------------------------- */

    [data-carrusel="1"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: 100%; }
    [data-carrusel="2"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 1 * var(--carrusel-gap)) / 2); }
    [data-carrusel="3"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 2 * var(--carrusel-gap)) / 3); }
    [data-carrusel="4"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 3 * var(--carrusel-gap)) / 4); }
    [data-carrusel="5"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 4 * var(--carrusel-gap)) / 5); }
    [data-carrusel="6"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 5 * var(--carrusel-gap)) / 6); }

    @media (min-width: 48rem) {
        [data-carrusel-md="1"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: 100%; }
        [data-carrusel-md="2"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 1 * var(--carrusel-gap)) / 2); }
        [data-carrusel-md="3"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 2 * var(--carrusel-gap)) / 3); }
        [data-carrusel-md="4"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 3 * var(--carrusel-gap)) / 4); }
        [data-carrusel-md="5"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 4 * var(--carrusel-gap)) / 5); }
        [data-carrusel-md="6"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 5 * var(--carrusel-gap)) / 6); }
    }

    @media (min-width: 72rem) {
        [data-carrusel-lg="1"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: 100%; }
        [data-carrusel-lg="2"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 1 * var(--carrusel-gap)) / 2); }
        [data-carrusel-lg="3"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 2 * var(--carrusel-gap)) / 3); }
        [data-carrusel-lg="4"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 3 * var(--carrusel-gap)) / 4); }
        [data-carrusel-lg="5"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 4 * var(--carrusel-gap)) / 5); }
        [data-carrusel-lg="6"] > .iris-carrusel__pista > .iris-carrusel__pase { flex-basis: calc((100% - 5 * var(--carrusel-gap)) / 6); }
    }

    /* ---- La proporción de las miniaturas -------------------------- */

    /* Mismo catálogo cerrado que `Iris\Core\View\Ratio`, para que el
       `<select>` del panel y esto no puedan desincronizarse. `libre`
       no aparece porque es «no forzar nada», que es el estado natural. */
    [data-carrusel-proporcion] .iris-carrusel__pase :where(img) {
        inline-size: 100%;
        block-size: auto;
        object-fit: cover;
    }

    [data-carrusel-proporcion="cuadrada"]   .iris-carrusel__pase :where(img) { aspect-ratio: 1 / 1; }
    [data-carrusel-proporcion="apaisada"]   .iris-carrusel__pase :where(img) { aspect-ratio: 4 / 3; }
    [data-carrusel-proporcion="vertical"]   .iris-carrusel__pase :where(img) { aspect-ratio: 3 / 4; }
    [data-carrusel-proporcion="panoramica"] .iris-carrusel__pase :where(img) { aspect-ratio: 16 / 9; }
    [data-carrusel-proporcion="retrato"]    .iris-carrusel__pase :where(img) { aspect-ratio: 9 / 16; }

    /* ---- Los controles, que enseña el script ---------------------- */

    /* Nacen ocultos en el HTML: sin JavaScript no se ofrecen botones
       que no harían nada. `[hidden]` necesita su regla propia porque
       cualquier `display` del autor le gana (2026-09-08). */
    .iris-carrusel__controles { display: flex; }
    .iris-carrusel__controles[hidden] { display: none !important; }

    .iris-carrusel__controles {
        align-items: center;
        justify-content: center;
        gap: var(--space-2, 0.5rem);
        margin-block-start: var(--space-3, 1rem);
    }

    .iris-carrusel__flecha,
    .iris-carrusel__pausa {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* 44px de área táctil: WCAG 2.2, y es lo que ya cumple el
           resto de la interfaz pública. */
        inline-size: 2.75rem;
        block-size: 2.75rem;
        padding: 0;
        border: 1px solid var(--color-border, currentColor);
        border-radius: 50%;
        background: none;
        color: inherit;
        font-size: 1.125rem;
        line-height: 1;
        cursor: pointer;
    }

    .iris-carrusel__flecha:hover,
    .iris-carrusel__pausa:hover { background: color-mix(in srgb, currentColor 10%, transparent); }

    .iris-carrusel__puntos {
        display: flex;
        gap: var(--space-1, 0.25rem);
        margin: 0 var(--space-2, 0.5rem);
        padding: 0;
        list-style: none;
    }

    .iris-carrusel__punto {
        inline-size: 2.75rem;
        block-size: 2.75rem;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        /* El área táctil es de 44px, pero el punto que se VE es
           pequeño: se pinta con un pseudoelemento centrado. */
        position: relative;
    }

    .iris-carrusel__punto::before {
        content: '';
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.35;
    }

    .iris-carrusel__punto[aria-current]::before { opacity: 1; }

    .iris-carrusel__pausa[hidden] { display: none !important; }

    /* El icono del botón de pausa lo pinta el CSS y no un glifo escrito
       en la plantilla, para que CAMBIE al pulsarlo: dos barras mientras
       el carrusel pasa solo, un triángulo cuando está en pausa. Un botón
       que enseña «pausa» estando ya parado parece que no hace nada — y
       es justo lo que se veía en una web real (2026-09-11), donde además
       el ratón encima ya lo paraba antes del clic. El botón va vacío en
       el HTML; su nombre lo lleva `aria-label`. */
    .iris-carrusel__pausa::before {
        content: '';
        display: block;
        box-sizing: border-box;
        inline-size: 0.6em;
        block-size: 0.8em;
        border-inline: 0.2em solid currentColor;
    }

    .iris-carrusel__pausa[aria-pressed="true"]::before {
        inline-size: 0;
        block-size: 0;
        border-block: 0.45em solid transparent;
        border-inline-start: 0.7em solid currentColor;
        border-inline-end: 0;
        /* Un triángulo se ve descentrado si su caja se centra: se
           empuja un pelo hacia su punta. */
        translate: 0.1em 0;
    }
}