/**
 * COMPONENTS / HERO SLIDER
 * -----------------------------------------------------------------------------
 * Slider de la portada. La imagen es SOLO el fondo; el titular, la bajada y el
 * botón son texto real superpuesto (ver template-parts/sections/hero.php).
 *
 * Estructura:
 *
 *   .hero-slider                 reserva el alto del header fijo
 *   └── .hero-slider__track      define la altura del slide
 *       └── .hero-slider__slide
 *           ├── .hero-slider__image   fondo, object-fit: cover
 *           ├── .hero-slider__veil    velo para el contraste del texto
 *           └── .hero-slider__content texto, alineado al container del sitio
 *
 * MEDIDAS DE IMAGEN
 * El track usa la proporción de los fondos actuales (1920x400). Si cambias el
 * formato, ajusta `aspect-ratio` en .hero-slider__track y nada más:
 * `cover` se encarga del resto. Para móvil hay una altura propia, porque un
 * fondo panorámico deja el slide en una franja demasiado baja.
 */

.hero-slider {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    background: var(--navy);
    line-height: 0;
    /*
     * El header del sitio es fijo: sin esta reserva se superpone al slide.
     */
    padding-top: var(--header-height);
}

.hero-slider__track {
    position: relative;
    width: 100%;
    /*
     * Proporción de los fondos actuales (1920x400). Es muy panorámica: a menos
     * de 1920px de ancho daría menos de 400px de alto y el texto no cabría,
     * así que `min-height` marca el suelo y `cover` recorta lo que sobra.
     * Si cambian las medidas de las fotos, ajusta solo este aspect-ratio.
     */
    aspect-ratio: 1920 / 400;
    min-height: 380px;
    max-height: 70vh;
}

.hero-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    /*
     * `visibility` en lugar del atributo `hidden`: éste aplica `display:none`,
     * que corta el fundido. Además saca los botones del orden de tabulación,
     * que es justo lo que se quiere en los slides ocultos.
     */
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.hero-slider__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    transition: opacity 0.6s ease, visibility 0s;
}

/* =============================================================
   FONDO
============================================================= */

.hero-slider__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Encuadre por slide; ver el campo `focus` en fremicar_hero_slides(). */
    object-position: var(--focus, center center);
}

/*
 * Velo de contraste. Se oscurece el lado donde va el texto y se deja
 * respirar el resto de la foto, de modo que el titular se lee sobre
 * cualquier imagen sin depender de cómo esté iluminada.
 */
.hero-slider__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(8, 19, 33, 0.9) 0%,
        rgba(8, 19, 33, 0.75) 34%,
        rgba(8, 19, 33, 0.35) 62%,
        rgba(8, 19, 33, 0.12) 100%
    );
}

/*
 * El velo se invierte según dónde caiga el texto. Si el navegador no soporta
 * :has(), se queda el degradado por defecto (desde la izquierda), que sigue
 * dando contraste suficiente.
 */
.hero-slider__slide:has(.hero-slider__content--right) .hero-slider__veil {
    background: linear-gradient(
        270deg,
        rgba(8, 19, 33, 0.9) 0%,
        rgba(8, 19, 33, 0.75) 34%,
        rgba(8, 19, 33, 0.35) 62%,
        rgba(8, 19, 33, 0.12) 100%
    );
}

.hero-slider__slide:has(.hero-slider__content--center) .hero-slider__veil {
    background: rgba(8, 19, 33, 0.62);
}

/* =============================================================
   CONTENIDO
============================================================= */

.hero-slider__content {
    position: relative;
    z-index: var(--z-content);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-sm);
    line-height: var(--lh-body);
    /* El texto se alinea con el resto del sitio, no con el borde de la foto. */
    max-width: calc(var(--container) + var(--container-pad) * 2);
}

.hero-slider__content--center {
    align-items: center;
    text-align: center;
}

.hero-slider__content--right {
    align-items: flex-end;
    text-align: right;
}

.hero-slider__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    /* Ajustado a un hero panorámico: tiene que caber en ~380px de alto. */
    font-size: clamp(28px, 3vw, 42px);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--white);
    text-wrap: balance;
    max-width: 17ch;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-slider__text {
    font-size: var(--fs-lg);
    color: var(--on-dark-muted);
    max-width: 46ch;
    margin: 0;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.3);
}

.hero-slider__content .btn {
    margin-top: var(--space-xs);
}

/* =============================================================
   FLECHAS
============================================================= */

.hero-slider__arrow {
    position: absolute;
    /* Centrado sobre la imagen, descontando la reserva del header. */
    top: calc(var(--header-height) + (100% - var(--header-height)) / 2);
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(11, 19, 48, 0.55);
    color: var(--white);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.hero-slider__arrow:hover,
.hero-slider__arrow:focus-visible {
    background: rgba(11, 19, 48, 0.85);
}

.hero-slider__arrow--prev {
    left: 16px;
}

.hero-slider__arrow--next {
    right: 16px;
}

/* =============================================================
   PUNTOS DE NAVEGACIÓN
============================================================= */

.hero-slider__dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 8px;
}

.hero-slider__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.hero-slider__dot.is-active {
    background: var(--white);
    transform: scale(1.2);
}

/* =============================================================
   RESPONSIVE
============================================================= */

@media (max-width: 1000px) {

    .hero-slider {
        padding-top: var(--header-height-md);
    }

    .hero-slider__track {
        min-height: 400px;
    }

    .hero-slider__arrow {
        top: calc(var(--header-height-md) + (100% - var(--header-height-md)) / 2);
        width: 36px;
        height: 36px;
    }

    .hero-slider__title {
        max-width: 18ch;
    }
}

@media (max-width: 700px) {

    /*
     * En vertical la proporción panorámica dejaría el slide en una franja de
     * ~150px: se libera el aspect-ratio y manda la altura, para que el fondo
     * se recorte y el mensaje quede legible.
     */
    .hero-slider__track {
        /*
         * Manda la altura, no la proporción. Y se mantiene BAJA a propósito.
         *
         * El fondo es panorámico (1920x400) y `cover` lo amplia hasta llenar el
         * alto de la caja: cuanto más alta, más se agranda la foto y menos
         * ancho se ve de ella. Con los 460px de antes, en un móvil de 390px
         * solo se veía el 18 % del ancho de la imagen —de ahí la sensación de
         * foto gigante— y el hero se comía el 63 % de la pantalla.
         *
         * Con 400px se ve algo más de foto y sobre todo se recupera pantalla
         * para el contenido que va debajo. El arreglo de fondo, en cambio, es
         * cargar una versión vertical en el campo `image_movil` de
         * fremicar_hero_slides(): ahí `cover` ya no amplía nada y este límite
         * se puede volver a subir sin penalización.
         */
        aspect-ratio: auto;
        height: 56vh;
        min-height: 340px;
        max-height: 400px;
    }

    /* De lado a lado el velo pasa a vertical: el texto se apoya abajo. */
    .hero-slider__veil,
    .hero-slider__slide:has(.hero-slider__content--center) .hero-slider__veil,
    .hero-slider__slide:has(.hero-slider__content--right) .hero-slider__veil {
        background: linear-gradient(
            180deg,
            rgba(8, 19, 33, 0.45) 0%,
            rgba(8, 19, 33, 0.72) 45%,
            rgba(8, 19, 33, 0.92) 100%
        );
    }

    .hero-slider__content,
    .hero-slider__content--center,
    .hero-slider__content--right {
        justify-content: flex-end;
        align-items: flex-start;
        text-align: left;
        /* Menos hueco bajo el botón: era parte de lo que obligaba a un slide alto. */
        padding-bottom: var(--space-xl);
    }

    .hero-slider__title {
        max-width: none;
        font-size: clamp(26px, 7.4vw, 34px);
    }

    .hero-slider__text {
        font-size: var(--fs-md);
        max-width: none;
    }

    .hero-slider__content .btn {
        width: 100%;
    }

    /*
     * Con el texto apoyado abajo, unas flechas centradas caerían justo encima
     * del titular: se suben a la zona donde solo hay fotografía.
     */
    .hero-slider__arrow {
        top: calc(var(--header-height-md) + 28%);
    }

    /*
     * En vertical el recorte pasa a ser lateral, así que el punto de interés
     * es otro: ver `focus_movil` en fremicar_hero_slides().
     */
    .hero-slider__image {
        object-position: var(--focus-movil, center center);
    }

    /*
     * Sin flechas: con el texto apoyado abajo se solapaban con el titular, y
     * en táctil el gesto natural es el swipe. Los puntos siguen permitiendo
     * saltar a un slide concreto, y son accesibles con teclado y lector.
     */
    .hero-slider__arrow {
        display: none;
    }

    .hero-slider__dots {
        bottom: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-slider__slide {
        transition: none;
    }
}