/**
 * home.css
 * -----------------------------------------------------------------------
 * Estilos específicos de la home. Según el croquis del cliente, la home
 * es solo: logo + menú (ya resuelto por site-header, en components.css) y
 * los 4 videos de destino, uno abajo del otro, cada uno clickeable.
 * -----------------------------------------------------------------------
 */

/*
 * .home-shell ocupa exactamente el alto de pantalla (100dvh = "dynamic
 * viewport height", que en mobile descuenta la barra del navegador cuando
 * aparece/desaparece — más preciso que 100vh para este caso). Dentro,
 * el header mide lo que necesite y .home-videos se lleva TODO el resto
 * (flex: 1), repartido en 4 partes iguales entre los videos. Resultado:
 * los 4 destinos quedan visibles de un vistazo, sin scroll.
 */
.home-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden; /* evita cualquier rebote de scroll en iOS */
}

.home-videos {
    flex: 1 1 auto;
    min-height: 0; /* necesario para que los hijos flex puedan achicarse en Safari/iOS */
    display: flex;
    flex-direction: column;
}

.home-destino-video {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.home-destino-video video,
.home-destino-video img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* recorta el video 4:3 para llenar la franja angosta */
}

/* Velo oscuro suave entre el video y el nombre del destino, para que el
   texto blanco contraste bien aunque la foto de fondo sea clara. Dos capas:
   un oscurecido parejo muy leve (14%) y una mancha un poco más oscura en el
   centro, que es donde va el nombre — así los bordes de la foto casi no
   cambian. Va en ::before (y no ::after) para quedar ENCIMA del video pero
   DEBAJO del nombre (el <h2> es posterior en el HTML y también está
   posicionado). pointer-events:none para que no estorbe el toque/click. */
.home-destino-video::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 75% 65% at 50% 50%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 100%),
        rgba(0, 0, 0, 0.14);
    pointer-events: none;
}

/* ---- Feedback al tocar (mobile) ----
   :active funciona con touch (a diferencia de :hover) y da la sensación
   de "botón que se hunde" al tocar, como una app nativa. Sin transición
   de "salida" larga a propósito, para que se sienta instantáneo. */
.home-destino-video:active {
    transform: scale(0.97);
}

/* ---- Hover (solo para mouse real) ----
   (hover: hover) evita que esto se dispare (y quede "pegado") en touch.
   En touch, este bloque directamente no existe para el navegador. */
@media (hover: hover) and (pointer: fine) {
    .home-destino-video:hover {
        transform: scale(1.02);
    }

    .home-destino-video:hover .home-destino-video__label {
        color: #fff;
    }
}

.home-destino-video__label {
    /* Es un <h2> real (ver render_home_destino_video en functions.php) —
       reseteamos el margin por defecto del navegador para que no rompa
       el centrado con position:absolute + flex. */
    margin: 0;

    /* Centrado horizontal y vertical sobre todo el video/imagen */
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    text-align: center;

    font-family: var(--font-display);
    text-transform: uppercase;
    /* Mismo interletrado que el resto de los títulos del sitio
       (var(--heading-letter-spacing) en variables.css), para que se vea
       consistente entre la home y el resto de las páginas. */
    letter-spacing: var(--heading-letter-spacing);
    font-size: var(--fs-xxl);
    line-height: 1;

    /* Contraste (corrección del cliente, oct 2026): al principio el cliente
       pidió un 50% de transparencia, pero sobre las fotos claras (fachada
       de Cariló, el cielo y el lago de Bariloche) los nombres casi no se
       leían. Ahora el texto es casi opaco y se apoya en dos ayudas
       sutiles: la sombra de acá (una más pegada a las letras que las
       recorta del fondo, y otra más difusa) y el velo oscuro suave del
       ::before de .home-destino-video (más abajo). Se usa rgba() y no
       "opacity" para no transparentar también la sombra. */
    color: rgba(255, 255, 255, 0.94);
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.55),
        0 2px 18px rgba(0, 0, 0, 0.6);
    transition: color 0.2s ease;

    /* ---- Animación de entrada en secuencia ----
       Arranca invisible y un poco más abajo, y aparece con un pequeño
       desvanecido + deslizamiento. El delay de cada uno se define abajo
       con :nth-child, así entran uno después del otro. */
    opacity: 0;
    animation: home-label-enter 0.7s ease-out forwards;
}

@keyframes home-label-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Delay creciente por cada destino, para que entren en secuencia y no
   todos juntos. Editar acá si el día de mañana se agrega/saca un destino
   (hoy son 4, con ~150ms de diferencia entre cada uno). */
.home-destino-video:nth-child(1) .home-destino-video__label { animation-delay: 0.15s; }
.home-destino-video:nth-child(2) .home-destino-video__label { animation-delay: 0.30s; }
.home-destino-video:nth-child(3) .home-destino-video__label { animation-delay: 0.45s; }
.home-destino-video:nth-child(4) .home-destino-video__label { animation-delay: 0.60s; }

/* Accesibilidad: si el usuario pidió menos movimiento en su sistema
   operativo, mostramos los títulos directos, sin animar. */
@media (prefers-reduced-motion: reduce) {
    .home-destino-video__label {
        animation: none;
        opacity: 1;
    }

    .home-destino-video,
    .home-destino-video:active,
    .home-destino-video:hover {
        transition: none;
        transform: none;
    }
}

@media (min-width: 700px) {
    .home-destino-video__label {
        font-size: 4rem;
    }
}

/*
 * Desktop (900px+, mismo corte donde el resto del sitio pasa a modo
 * "escritorio", ver .main-nav en components.css): en vez de las 4 franjas
 * apiladas de mobile, se arman en grilla 2x2. Elegido en vez de "4
 * columnas lado a lado" porque los videos son 4:3 horizontal — 4 columnas
 * angostas y altas recortarían casi 2/3 del ancho de cada video a los
 * costados; la grilla 2x2 da celdas con una proporción parecida a la que
 * ya se usa hoy (razonable), sin perder tanto contenido.
 *
 * Además, .home-videos queda con un ancho máximo centrado: en un monitor
 * normal (hasta ~1400px) no se nota ningún cambio, pero en monitores muy
 * anchos evita que la grilla quede estirada de punta a punta.
 */
@media (min-width: 900px) {
    .home-videos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        /* gap entre videos + padding arriba/abajo/costados — el "1fr" de
           arriba ya descuenta este espacio solo, así que sigue sin haber
           scroll (las celdas se achican lo justo para que todo entre). */
        gap: var(--space-4);
        padding: var(--space-4);
        width: 100%; /* sin esto, el margin-inline:auto de abajo lo achica en vez de estirarlo (es un ítem flex dentro de .home-shell) */
        max-width: 1400px;
        margin-inline: auto;
    }

    /* Bordes redondeados, en línea con el resto de las imágenes del sitio
       (misma var(--radius)). Solo en desktop: en mobile los videos siguen
       a sangre (borde a borde), ese look no se toca. .home-destino-video
       ya tiene overflow:hidden, así que el video/label quedan recortados
       prolijamente dentro del borde redondeado. */
    .home-destino-video {
        border-radius: var(--radius);
    }

    .home-destino-video__label {
        font-size: 3rem;
    }
}

@media (min-width: 1300px) {
    .home-destino-video__label {
        font-size: 4rem;
    }
}