/* ================================================================
   EXPY — Carousel CSS

   Dos modos:
   1. Default (sin modificador):
      Activo   < 1024px (mobile + sm + md)
      Inactivo >= 1024px — grid original sin cambios.
      Aplicable a: tutores ≤3, premios, bases-brief, laureles.

   2. Modo "always" (.expy-carousel-wrap--always + .expy-carousel-track--always):
      Activo en TODOS los viewports (incluso >=1024px).
      Activado por PHP cuando el conteo supera la 1ª fila desktop.
      Aplicable a: tutores cuando count > 3 (R30 sitemap).
      Reglas en bloque "Modo always" más abajo.

   Container padding (ref. input.css .expy-container):
     mobile  < 640px  → px-4  = 1rem
     sm+ 640px+       → px-6  = 1.5rem
     l+  1024px+      → px-8  = 2rem (en --always se cancela vía
                                      margin-inline negativo)
================================================================ */

/* ── Track: grid → flex scroll-snap ────────────────────────── */
@media (max-width: 1023px) {

    .expy-carousel-track {
        display: flex !important;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 1rem;
        /* Negative margin / padding trick: cancela el px-4 del container
           para que el primer slide quede alineado al borde del viewport
           y el último tenga espacio para llegar al snap point. */
        padding-inline-start: 1rem;
        padding-inline-end: 2rem; /* 1rem padding + 1rem holgura final */
        margin-inline: -1rem;
    }

    .expy-carousel-track::-webkit-scrollbar {
        display: none;
    }

    /* Slide defaults — 1 visible con peek del siguiente */
    .expy-carousel-track > li {
        scroll-snap-align: start;
        flex: 0 0 calc(85% - 0.5rem);
        min-width: 0;
    }
}

/* Ajuste de padding/margin para sm+ (container px-6 = 1.5rem) */
@media (min-width: 640px) and (max-width: 1023px) {

    .expy-carousel-track {
        scroll-padding-inline-start: 1.5rem;
        padding-inline-start: 1.5rem;
        padding-inline-end: 3rem;
        margin-inline: -1.5rem;
    }
}

/* ── Tutores — 2 visibles desde s: 480px ───────────────────── */
@media (min-width: 480px) and (max-width: 1023px) {

    .expy-tutores-track > li {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

/* ── Premios — override crítico del md:grid-cols-12 ────────── */
/* El grid asimétrico de 12 cols se activa a 768px (dentro del
   rango carousel). Esta regla garantiza que flex SIEMPRE gane. */
@media (max-width: 1023px) {

    .expy-premios-track {
        display: flex !important;
    }

    .expy-premios-track > li {
        flex: 0 0 calc(88% - 0.5rem);
        min-height: 280px;
    }
}

@media (min-width: 480px) and (max-width: 767px) {

    .expy-premios-track > li {
        flex: 0 0 calc(70% - 0.5rem);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    .expy-premios-track > li {
        flex: 0 0 calc(58% - 0.5rem);
    }
}

/* ── Bases brief — 2 visibles desde md: 768px ──────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

    .expy-bases-track > li {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

/* ── Laureles — 2 visibles desde s: 480px ──────────────────── */
@media (min-width: 480px) and (max-width: 1023px) {

    .expy-laureles-track > li {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

/* ── Editions — R45 (2026-04-25) override REMOVED.
   Pre-R45 los slides eran panel-pages full-width (ver R42b). En R45
   pasaron a ser teasers compactos (cover + título + subtítulo) que
   linkean a /ediciones/{year}/. El peek default del carousel
   (~85% mobile / ~33% desktop --always) ahora aplica sin override.
   ──────────────────────────────────────────────────────────── */

/* ── Controles prev / next ──────────────────────────────────── */
/* Container — visible solo en mobile o en wraps --always (override
   más abajo). El display gobierna visibilidad; los estilos del botón
   en sí se declaran SIN media-query para que apliquen también en
   desktop --always. */
@media (max-width: 1023px) {

    .expy-carousel-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.25rem;
    }
}

/* Botón — estilo unconditional. La visibilidad la gobierna el padre. */
.expy-carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--expy-color-ink);
    background: transparent;
    color: var(--expy-color-ink);
    cursor: pointer;
    border-radius: var(--expy-radius-sm);
    transition: background-color 150ms ease, color 150ms ease;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}

.expy-carousel-btn:hover,
.expy-carousel-btn:focus-visible {
    background: var(--expy-color-ink);
    color: var(--expy-color-cream);
}

.expy-carousel-btn:focus-visible {
    outline: 2px solid var(--expy-color-primary);
    outline-offset: 2px;
}

.expy-carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.expy-carousel-btn svg {
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .expy-carousel-btn {
        transition: none;
    }
}

/* Container --always en desktop usa el mismo gap que mobile. */
.expy-carousel-wrap--always .expy-carousel-controls {
    align-items: center;
    gap: 0.5rem;
}

/* Safety net: si JS inyectó controles antes de un resize a desktop,
   ocultarlos vía CSS para garantizar que no aparezcan en l:+ */
@media (min-width: 1024px) {

    .expy-carousel-controls {
        display: none !important;
    }
}

/* ================================================================
   Modo "always" — convierte el grid en carousel a TODOS los viewports
   (incluso >=1024px) cuando el conteo supera lo que entra en la 1ª
   fila desktop. Mismo comportamiento que mobile, sin sizing custom.

   Las reglas duplican las de mobile (líneas 12-60) pero sin la
   media-query gate, para que apliquen también en >=1024px.
   El --always vence al safety net `display: none` de los controles.
================================================================ */

.expy-carousel-track--always {
    display: flex !important;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-inline-start: 1rem;
    padding-inline-end: 2rem;
    margin-inline: -1rem;
}

.expy-carousel-track--always::-webkit-scrollbar {
    display: none;
}

.expy-carousel-track--always > li {
    scroll-snap-align: start;
    flex: 0 0 calc(85% - 0.5rem);
    min-width: 0;
}

@media (min-width: 480px) {
    .expy-tutores-track--always > li {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (min-width: 640px) {
    .expy-carousel-track--always {
        scroll-padding-inline-start: 1.5rem;
        padding-inline-start: 1.5rem;
        padding-inline-end: 3rem;
        margin-inline: -1.5rem;
    }
}

@media (min-width: 1024px) {
    .expy-carousel-track--always {
        scroll-padding-inline-start: 2rem;
        padding-inline-start: 2rem;
        padding-inline-end: 3rem;
        margin-inline: -2rem;
        gap: 2.5rem; /* match l:gap-10 del grid clásico */
    }

    /* 3 por línea en desktop — equivalente al l:grid-cols-3 original.
       (100% - 2 × 2.5rem) / 3 = 33.333% - 1.667rem por slide. */
    .expy-tutores-track--always > li,
    .expy-editions-track--always > li {
        flex: 0 0 calc(33.333% - 1.667rem);
    }

    /* Reactivar controles en desktop cuando el wrap está en --always. */
    .expy-carousel-wrap--always .expy-carousel-controls {
        display: flex !important;
        margin-top: 1.5rem;
    }
}