/* templates/core/club_esqui.html */

/* Hero: la foto entera arriba (16:9 desde 768 px, 4:5 en móvil; en pantallas altas se recorta
   solo cielo y nieve inferior) y el texto debajo, en el mismo hero. Así el texto nunca tapa
   caras (brief del Club 2026/27, bloque 01). */
.hero-section.hero-section-spacing {
    /* Offset bajo navbar fijo (--navbar-h lo fija JS en base.html) */
    margin-top: var(--navbar-h, 76px);
    padding: 0 0 clamp(1.5rem, 3vw, 2.5rem);
    overflow: hidden;
    background: var(--brand-dark, #0f172a);
}

.hero-bg-picture {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Recorte entregado ya centrado: 50% 50%, sin desplazar caras */
    object-position: 50% 50%;
}

/* Sin capa de color sobre la foto: el texto va debajo */
.hero-section .hero-overlay {
    display: none;
}

.club-hero-content {
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 60rem;
}

.club-hero-summary {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

/* El ancla del calendario queda visible bajo el navbar fijo */
#calendario {
    scroll-margin-top: calc(var(--navbar-h, 76px) + 1rem);
}

/* Galería superior: marcos por proporción (sin recortar más de lo entregado) */
.club-gal {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    background: var(--brand-dark, #0f172a);
}

.club-gal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.club-gal--grupo {
    aspect-ratio: 16 / 9;
}

.club-gal--4x3 {
    aspect-ratio: 4 / 3;
}

.club-gal--equipo {
    aspect-ratio: 3 / 1;
}

/* Club en acción: foto 4:3 completa y texto debajo */
.club-photo-4x3 {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 50%;
}

@media (max-width: 767.98px) {
    .hero-section.hero-section-spacing {
        margin-top: var(--navbar-h, 102px);
        padding-bottom: 2rem;
    }

    .hero-bg-picture {
        aspect-ratio: 4 / 5;
        max-height: none;
    }

    .club-gal--grupo,
    .club-gal--equipo {
        aspect-ratio: 4 / 3;
    }
}