/**
 * destino.css
 * -----------------------------------------------------------------------
 * Estilos específicos de la página de destino (hero, secciones verticales
 * pensadas para scroll mobile). Se carga en includes/destino-template.php,
 * es decir en las 4 páginas de destino.
 * -----------------------------------------------------------------------
 */

.destino-hero {
    position: relative;
}

.destino-hero__media img,
.destino-hero__media video {
    width: 100%;
    /* 4:3 = la relación real de los videos que está subiendo el cliente.
       Mobile es la prioridad (99% del tráfico esperado), así que el corte
       de mobile debe calzar exacto con el video fuente, sin recortarlo. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (min-width: 700px) {
    .destino-hero__media img,
    .destino-hero__media video {
        /* Desktop no es prioridad: 16:9 da un hero más ancho tipo banner,
           aunque recorte arriba/abajo del video 4:3 original. */
        aspect-ratio: 16 / 9;
    }
}

/* Páginas de promoción (includes/promocion-template.php): la imagen es el
   gráfico cuadrado (1:1) que ya usa el cliente para difundir la promo —
   forzarla a 4:3/16:9 como el resto de los heroes le recortaba el texto
   con el precio/condiciones. Se mantiene 1:1 en mobile Y desktop (por eso
   esta regla va después del media query de arriba, para pisarlo). */
.destino-hero--promo .destino-hero__media img {
    aspect-ratio: 1 / 1;
}

.destino-hero__overlay {
    /* Ojo: usar "padding-top"/"padding-bottom" por separado (nunca la
       forma corta "padding: X 0") acá a propósito — esa forma corta pisaba
       el padding lateral que ya pone .container, dejando título/botón/
       bajada pegados al borde de la pantalla.
       Sin padding-bottom a propósito (pedido del cliente, mail sobre el
       sitio subido a dastel.net.ar: veía un espacio excesivo entre la
       bajada del hero y el primer párrafo de contenido) — el bloque
       siguiente (.destino-bloque) ya aporta su propio padding-top, así
       que sumar padding-bottom acá duplicaba el espacio. */
    padding-top: var(--space-4);

    /* Fade-in + deslizamiento leve al cargar la página. Es CSS puro (no
       IntersectionObserver, no JS) porque este contenido ya está visible
       apenas carga la página — no hay "scroll" que lo revele, así que no
       tiene sentido usar reveal.js acá. Mismo criterio de rendimiento:
       solo opacity/transform, cero costo de layout. */
    opacity: 0;
    animation: destino-hero-enter 0.7s ease-out 0.1s forwards;
}

@keyframes destino-hero-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .destino-hero__overlay {
        animation: none;
        opacity: 1;
    }
}

.destino-hero__title {
    margin-bottom: var(--space-2);
}

.destino-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.destino-hero__bajada {
    font-weight: 500;
    color: var(--color-text);
}

/* Separación entre bloques consecutivos del scroll (mapa, foto+texto, unidad, etc.) */
.destino-bloque {
    padding-block: var(--space-4);
}

/* El primer bloque después del hero no necesita su propio padding-top: el
   hero ya termina con el padding-top de .destino-hero__overlay + el
   margin-bottom de la bajada, así que sumarle encima el padding-top de
   este bloque duplicaba el espacio (pedido del cliente: seguía viendo
   mucho espacio entre la bajada y el primer párrafo, aun después de sacar
   el padding-bottom del overlay). Se aplica al primer bloque que sea,
   cualquiera sea su tipo (texto, galería, mapa...), no solo en Bariloche. */
.destino-hero + .destino-bloque {
    padding-top: 0;
}

.destino-cta-final {
    text-align: center;
    padding-block: var(--space-6);
    background: var(--color-bg-alt);
}

/*
 * Desktop (900px+, mismo corte que el resto del sitio): en mobile el video
 * y el contenido van a todo el ancho a propósito (así se armó la página),
 * pero en desktop eso genera dos problemas — el video (fuente de 640px)
 * se termina estirando a pantallas de 1920px y se ve pixelado, y el texto
 * a ese ancho es incómodo de leer. Se soluciona con una sola columna
 * centrada de 800px para todo (video + contenido), mismo criterio visual
 * que la grilla de la home: bordes redondeados y separación en el video.
 *
 * No se toca la clase .container global (la usan también el header y el
 * footer a todo lo ancho) — esto solo afecta a .container DENTRO de las
 * páginas de destino.
 */
@media (min-width: 900px) {
    .destino-hero .container,
    .destino-bloque .container,
    .destino-cta-final .container {
        max-width: 800px;
    }

    .destino-hero__media {
        max-width: 800px;
        margin: var(--space-4) auto 0;
        border-radius: var(--radius);
        overflow: hidden;
    }
}

/* Página de promoción, desktop: foto a la izquierda + info a la derecha
   (mismo criterio que el sitio actual del cliente), en vez de la foto
   gigante arriba de todo el ancho — acá pisamos el layout apilado genérico
   de arriba, que es el que sigue usando el resto de los destinos. */
@media (min-width: 900px) {
    .destino-hero--promo {
        display: flex;
        align-items: center;
        gap: var(--space-5);
        max-width: 800px;
        margin-inline: auto;
        padding-inline: var(--space-4);
        /* A diferencia del hero de destino (foto a todo el ancho, pegada
           al header a propósito, efecto banner), acá la foto es una caja
           chica de 320px — sin este padding-top quedaba pegada al header,
           se veía apretada. */
        padding-top: var(--space-5);
    }

    .destino-hero--promo .destino-hero__media {
        flex: 0 0 320px;
        max-width: none;
        margin: 0;
    }

    .destino-hero--promo .destino-hero__overlay {
        flex: 1;
        max-width: none;
        margin: 0;
        padding-inline: 0;
        padding-top: 0;
    }
}


/* =========================================================================
 * "FRENO VIRTUAL" AL SCROLLEAR (pedido del cliente)
 * -----------------------------------------------------------------------
 * Un enganche sutil (scroll-snap) para que, al soltar el dedo, el scroll
 * tienda a frenar con una foto/bloque visual completo a la vista en vez de
 * quedar cortado a la mitad de una imagen. CSS puro: no depende de JS, no
 * oculta nada, no cambia el contenido ni el diseño.
 *
 * Decisiones (no cambiar sin leer esto):
 *  - Solo en táctil (pointer: coarse), o sea celulares/tablets. En desktop
 *    el scroll lo maneja Lenis (smooth-scroll.js) con la rueda del mouse,
 *    y Lenis y scroll-snap se pelean entre sí (tirones). Con mouse no hay
 *    snap, queda el scroll con inercia de siempre.
 *  - "proximity", no "mandatory": solo engancha si el scroll termina cerca
 *    de un punto; si el usuario quiere quedarse en el medio de algo, puede.
 *    Un bloque más alto que la pantalla se recorre normalmente.
 *  - Se apaga con prefers-reduced-motion (accesibilidad).
 *  - Los puntos de enganche son SOLO bloques visuales: unidades, foto+texto
 *    y tarjetas de promo. NO el mapa, listas, textos largos ni galerías de
 *    miniaturas, donde un enganche molestaría. Tampoco el hero: engancharía
 *    cerca del tope de la página y no dejaría volver a ver la parte de
 *    arriba (barra de reservas de Cloudbeds) al subir.
 *  - scroll-padding-top = alto del header sticky (57px) + un poco de aire:
 *    así el bloque engancha justo debajo del header y no tapado por él. De
 *    paso corrige dónde aterrizan los anchors (#reservas del menú, etc.).
 *  - reveal.js desplaza cada bloque 24px antes de mostrarlo (translateY).
 *    El navegador calcula el punto de enganche con esa posición desplazada,
 *    y al terminar la animación el bloque quedaba 24px más arriba, con el
 *    borde de la foto tapado por el header. En táctil se deja solo el
 *    fundido (opacity) y se saca el desplazamiento: el contenido y su
 *    aparición siguen igual, solo sin el "deslizamiento" de 24px.
 * ========================================================================= */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
    html {
        scroll-snap-type: y proximity;
        /* + --cb-bar-h (ver main.js): en tablets anchas la barra de
           Cloudbeds es fija y el header baja debajo de ella. */
        scroll-padding-top: calc(var(--cb-bar-h, 0px) + 64px);
    }

    .bloque-unidad,
    .bloque-imagen-texto,
    .promo-card {
        scroll-snap-align: start;
    }

    .reveal-on-scroll {
        transform: none;
    }
}