/* Sin esto, el "scroll anchoring" del navegador ajusta scrollY solo cada
   vez que algo arriba del viewport cambia de tamaño (ej. la transición de
   .grupos-slides margin-top al activar/desactivar una slide), moviendo el
   scroll sin que el usuario haga nada. */
html {
    overflow-anchor: none;
}

main.grupos-archive {
    margin-left: var(--min-side-margin);
    margin-right: var(--min-side-margin);
}

.grupos-title-text {
    position: fixed;
    top: calc(var(--top-margin)*4 + var(--logo-h));
    z-index: 0;
    left: 0;
    right: 0;
    font-size: var(--fz-120);
    font-family: var(--arthum-ff-palast);
    font-variation-settings: 'opsz' 10;
    font-weight: var(--arthum-fw-thin);
    font-style: italic;
    color: var(--arthum-black);
    line-height: 1em;
    font-size: 13vw;
    text-align: center;
    /* Sin transition en "top": con una slide activa, gruposartisticos-
       archive.js pone el "top" en cada frame para que el título siga el
       centro REAL de esa slide (crezca, se achique o se mueva por el
       scroll) — con una transición quedaría siempre un paso atrás,
       persiguiendo un objetivo que ya cambió. */
    transition: z-index 0.5s ease-in;
    margin-left: auto;
    margin-right: auto;
}

/* grupos-slide-active (no mid-scroll ni un umbral de scrollY): la misma
   clase que ya pone setActiveSlide() en gruposartisticos-archive.js exacto
   cuando la slide 0 se engancha/desengancha — así el margen se achica justo
   al llegar a la primera slide (no antes, no después) y solo vuelve a
   agrandarse al salir de verdad hacia la fase inicial (índice -1), sin
   depender de la posición de scroll en sí. */
body.grupos-slide-active .grupos-slides {
    margin-top: calc(var(--top-margin)*4 + var(--logo-h));
}

.grupos-slides {
    margin-top: calc(var(--top-margin)*4 + var(--logo-h) + 14vw + 120px);
    /* Misma duración/curva que .grupo-slide-media (aspect-ratio, más abajo):
       ambas cambian el centro que persigue el título (una la posición del
       bloque, la otra el alto de la slide) — si terminan a destiempo, el
       objetivo cambia de velocidad de golpe y el seguimiento del título se
       siente con un tirón/rebote. */
    transition: margin-top 0.5s ease-in;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* El centrado de la slide activa lo hace JS (scrollIntoView al detenerse
   el scroll) en vez de scroll-snap-type nativo: el soporte/comportamiento
   de scroll-snap resultó inconsistente entre navegadores y anchos. */

.grupo-slide-inner {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0;
}

.grupo-slide-inner,
.grupo-slide-name,
.grupo-slide-opento,
.grupo-slide-media {
    width: 100%;
    height: 100%;
}


.grupo-slide-name,
.grupo-slide-opento {
    font-family: var(--arthum-ff-area);
    font-weight: var(--arthum-fw-semibold);
    font-size: var(--fz-27pt);
    line-height: 1.2;
    max-width: 80%;
}


.grupo-slide.is-active-slide .grupo-slide-name,
.grupo-slide.is-active-slide .grupo-slide-opento {
    color: var(--arthum-fuchsia);
}

.grupo-slide-opento {
    grid-column: 3;
    text-align: right;
    justify-self: end;
    color: var(--color-primary);
}

.grupo-slide-media {
    position: relative;
    z-index: 1;
    align-items: center;
    grid-column: 2;
    /* Alto real (sin achicar) por defecto — ver abajo para quién y cuándo
       se achica. Mismo ancho, aspect-ratio 3/1 da exactamente la mitad de
       alto que 3/2 — como object-fit:cover ya está en la imagen/video, se
       recorta en vez de deformarse. Como este alto empuja el de
       .grupo-slide-inner y .grupo-slide de abajo hacia arriba, termina
       afectando la caja completa, no solo el contenido interno. */
    aspect-ratio: 3/2;
    /* Misma duración/curva que .grupos-slides (margin-top, más arriba) —
       ver ese comentario. */
    transition: aspect-ratio 0.5s ease-in;
    overflow: hidden;
}

/* Slides inactivas miden 50% menos de alto — excepto la primera (ver
   regla siguiente): esta se queda a su tamaño real hasta que otra slide
   distinta se activa, para que no "salte" al volver al título (ahí no hay
   ninguna slide activa todavía, así que no debe achicarse). */
.grupo-slide:not(:first-child):not(.is-active-slide) .grupo-slide-media {
    aspect-ratio: 3/1;
}

/* La primera slide sí se achica, pero solo cuando OTRA slide está activa
   (body.grupos-slide-active existe y esta no es la que tiene el foco). */
body.grupos-slide-active
    .grupo-slide:first-child:not(.is-active-slide)
    .grupo-slide-media {
    aspect-ratio: 3/1;
}

.grupo-slide-media img,
.grupo-slide-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grupo-slide-controls {
    position: absolute;
    bottom: var(--top-margin);
    right: var(--top-margin);
    z-index: 2;
    display: flex;
    gap: var(--top-margin);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.grupo-slide-media:hover .grupo-slide-controls {
    opacity: 1;
    pointer-events: auto;
}

.grupo-slide-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    color: var(--arthum-white);
    cursor: pointer;
}

/* play_arrow/pause y volume_up/volume_off con relleno (variante "Fill" de
   Material Symbols vía font-variation-settings, no un ícono/fuente aparte). */
.grupo-slide-controls .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Mobile angosto: el título queda estático arriba (gruposartisticos-
   archive.js no lo mueve por debajo de este ancho, ver GROUPS_TITLE_
   STATIC_BREAKPOINT_PX), sin .grupo-slide-opento, y cada slide apila su
   contenido en columna en vez del grid de 3 columnas. El efecto de
   crecer/achicarse al activarse se mantiene igual. */
@media (max-width: 768px) {
    .grupo-slide-name,
    .grupo-slide-opento {
        font-size: var(--fz-22pt);
    }
}

@media (max-width: 500px) {
    .grupo-slide-opento {
        display: none;
    }

    .grupo-slide-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Estático (ver JS), así que una vez se entra a las slides no debe
       seguir visible superpuesto — en vez de ocultarlo de golpe (opacity)
       o pelear con el z-index contra las imágenes, sube fuera de pantalla;
       al volver arriba (fase inicial) baja de nuevo, lento. */
    .grupos-title-text {
        transition: transform 0.8s ease-in, z-index 0.5s ease-in;
    }

    body.grupos-slide-active .grupos-title-text {
        transform: translateY(-350%);
    }

    .grupo-slide-name{
        margin-bottom: 1em;
    }

    /* 1vw en vez de 14vw: el título aquí es chico/estático, no necesita el
       espacio que le da la fórmula normal a un título grande y móvil. */
    .grupos-slides {
        margin-top: calc(var(--top-margin)*4 + var(--logo-h) + 1vw + 120px);
    }
}