/* Single de grupos artísticos — diseño en Figma "Arthum Planeación",
   nodos 5232-2025 (estado inicial) y 5228-1912 (con scroll).
   Se encola solo en is_singular('gruposartisticos') (functions.php). */

/* Sin esto, el "scroll anchoring" del navegador ajusta/suaviza scrollY
   solo cada vez que .grupo-hero cambia de alto de golpe (ver
   body.grupo-hero-compact más abajo) — el cambio deja de sentirse abrupto
   y se ve como si estuviera animado aunque no hay ninguna transition. */
html {
    overflow-anchor: none;
}

.grupo-artistico-single {
    background: var(--arthum-white);
}

/* -------------------- HERO: franja de fotos -------------------- */

.grupo-hero {
    width: 100%;
    height: 85vh;
    min-height: 320px;
    overflow: hidden;
    /* ease-in arranca lento y acelera hasta el final — se siente como un
       frenazo justo al llegar al tamaño chico. ease-out hace lo contrario
       (arranca rápido, llega desacelerando) y se percibe más suave para
       este tipo de colapso. will-change le avisa al navegador con
       antelación que este alto va a animarse, para que reserve la
       composición y no vaya de un salto por frame. */
    transition: height 0.6s ease-out;
    will-change: height;
}

body.mid-scroll .grupo-hero {
    /* Scroll normal, sin sticky/fixed: la franja solo se achica en su
       lugar dentro del flujo del documento — el resto de la página (texto,
       grid de info) se mueve como siempre, no queda nada flotando encima. */
    height: 350px;
    min-height: 0;
}

body.grupo-hero-compact .grupo-hero {
    /* Scroll normal, sin sticky/fixed: la franja solo se achica en su
       lugar dentro del flujo del documento — el resto de la página (texto,
       grid de info) se mueve como siempre, no queda nada flotando encima. */
    height: 114px;
    min-height: 0;
}

.grupo-hero-track {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
}

/* Scroll horizontal nativo (el touch ya scrollea solo; el mouse arrastra
   vía dragscroll.js, clase "dragscroll" puesta en el PHP) + auto-scroll
   infinito por JS cuando no se está manipulando (single-gruposartisticos.js,
   mueve scrollLeft y lo resetea a la mitad para el loop sin costura —
   por eso el track se duplica dos veces en el PHP). Sin scrollbar visible,
   es decorativo/de fondo, no un control de UI explícito. */
.grupo-hero-track--loop {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scrollbar-width: none;
}

.grupo-hero-track--loop::-webkit-scrollbar {
    display: none;
}

.grupo-hero-track--loop:active {
    cursor: grabbing;
}

.grupo-hero-track-inner {
    display: flex;
    align-items: stretch;
    height: 100%;
    flex-shrink: 0;
}

.grupo-hero-image {
    height: 100%;
    flex-shrink: 0;
}

.grupo-hero-image img,
.grupo-hero-image video {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: cover;
    display: block;
}

.grupo-hero-track--single {
    width: 100%;
    height: 100%;
}

.grupo-hero-track--single img,
.grupo-hero-track--single video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------- CUERPO -------------------- */

.grupo-body {
    /* Se deja un gap grande entre el bloque de texto y el grid de info
       (ver Figma) — el grid se mueve hacia arriba al hacer scroll, pero el
       gap no se achica, solo se mantiene constante. */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: var(--top-margin);
    padding: calc(var(--top-margin) * 2) var(--min-side-margin);
}

.grupo-title {
    font-family: var(--arthum-ff-palast);
    font-variation-settings: 'opsz' 10;
    font-weight: var(--arthum-fw-thin);
    font-style: italic;
    /* 54px en Figma — sin token exacto en la escala existente (64pt/71pt
       quedan igual de lejos en ambas direcciones), se deja literal. */
    font-size: var(--fz-display-md);
    line-height: 1.1em;
    color: var(--arthum-black);
    margin: 0 0 var(--top-margin);
    grid-row: 1;
    grid-column: 1 /span 4;
}

.grupo-description {
    grid-row: 2;
  grid-column: 1 /span 2;
  gap: 1em;
  display: flex;
  flex-direction: column;
}

.grupo-description p {
    font-family: var(--arthum-ff-area);
    font-weight: 600;
    /* 20px en Figma — sin token exacto (24pt=19.2px es el más cercano),
       se deja literal para no perder fidelidad. */
    font-size: var(--fz-24pt);
    line-height: 1.4;
    color: var(--arthum-black);
}

.grupo-contact {
    grid-row: 3;
    grid-column: 1 /span 2;
}

.grupo-signup-note,
.grupo-mail {
    font-family: var(--arthum-ff-palast);
    font-variation-settings: 'opsz' 10;
    font-size: var(--fz-20pt);
    line-height: 1.4;
    color: var(--arthum-black);
    margin-top: var(--top-margin);
    font-weight: var(--arthum-fw-light);
}

.grupo-mail a {
    color: var(--arthum-fuchsia);
}

.grupo-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: calc(var(--top-margin) * 1.5);
    grid-row: 3;
    grid-column: 4;
    height: min-content;
}

/* -------------------- GRID DE INFO (aside) -------------------- */

.grupo-body-aside {
    grid-column: 4;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--top-margin) * 2) var(--top-margin);
    align-content: start;
}

.grupo-info-field {
    display: flex;
    flex-direction: column;
    gap: var(--fz-10pt);
}

.grupo-info-label {
    font-family: var(--arthum-ff-area);
    font-weight: 700;
    font-size: var(--fz-20pt);
    color: var(--arthum-black);
    margin: 0;
}

.grupo-info-value {
    font-family: var(--arthum-ff-area);
    font-weight: var(--arthum-fw-regular);
    line-height: 1.2;
    font-size: var(--fz-20pt);
    color: var(--arthum-black);
    margin: 0;
}

.grupo-info-value a {
    color: inherit;
    text-decoration: underline;
}

/* Horario: una línea por franja (ej. "Martes y jueves de 5pm a 7pm"), ver
   arqdis_render_group_schedule_line() en content_parsers.php. Markup
   propio de este single (grupo-schedule-*), no el genérico
   course-schedule-item que usan cursos/educación continua. */
.grupo-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grupo-schedule-item {
    font-family: var(--arthum-ff-area);
    font-weight: 400;
    font-size: var(--fz-20pt);
    color: var(--arthum-black);
}

/* -------------------- RESPONSIVE -------------------- */

@media (max-width: 900px) {
    .grupo-body {
        display: flex;
        grid-template-columns: 1fr;
        gap: var(--top-margin);
        padding: calc(var(--top-margin) * 2) var(--min-side-margin);
        flex-direction: column;
    }

    .grupo-body-aside {
        margin-top: calc(var(--top-margin) * 2);
    }
}