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

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* ============================================================
   DESKTOP GRANDE — > 1440px
   ============================================================ */

@media only screen and (min-width: 1441px) {

    :root {
    }

}


/* ============================================================
   DESKTOP — > 1080px
   hover states solo en dispositivos con puntero fino
   ============================================================ */

@media only screen and (min-width: 1081px) {

    .mobile      { display: none !important; }
    .desktop     { display: block !important; }

    /* ------------------------------------------------------------
       HOVERS — solo aquí: en táctil no existen
       ------------------------------------------------------------ */
    @media (hover: hover) and (pointer: fine) {

        .hover:hover { color: var(--contrast); cursor: pointer; }

        /* Links: gris → negro */
        a:hover,
        a:focus,
        a:active { color: var(--contrast); }

        /* Con la misma especificidad que el gris base, si no no se aplica */
        .home-intro .intro-toggle:hover,
        .home-intro .intro-email:hover,
        .home-intro .intro-ig:hover { color: var(--contrast); }

        /* Home: color de fondo del proyecto + «Título. Año.» */
        .project-item:hover .project-hover { opacity: 1; }

        /* Slider: el pie se esconde y aparece al pasar por su foto */
        .block-slider .slide-caption { opacity: 0; }
        .block-slider .swiper-slide:hover .slide-caption { opacity: 1; }

        .block-slider .slider-next:hover { color: var(--contrast); }

        /* Vídeo: play / pause escondido, sale al pasar por el vídeo */
        .block-video .video-toggle { opacity: 1; }

    }

}


/* ============================================================
   TABLET + MÓVIL LANDSCAPE + TABLET COARSE
   — ≤ 1080px  |  landscape coarse  |  portrait coarse ≤ 1024px
   ============================================================ */

@media only screen and (max-width: 1080px),
       only screen and (pointer: coarse) and (orientation: landscape),
       only screen and (max-width: 1024px) and (pointer: coarse) and (orientation: portrait) {

    .desktop { display: none !important; }
    .mobile  { display: block !important; }

    :root {
    }


    /* Nav — ocultar menú desktop, mostrar hamburger */
    .header-nav               { display: none !important; }
    .mobile-menu              { display: flex !important; }

    /* Sin botón: aquí se desliza con el dedo y el pie ocupa esa franja */
    .block-slider .slider-next { display: none; }

    /* Footer */
    #footer {
        grid-template-columns: 1fr;
        padding: var(--pad);
    }


}


/* ============================================================
   SIN HOVER — táctil (cualquier tamaño)
   ============================================================ */

/* No hay ratón que pasar por encima, así que el color de fondo y el
   «Título. Año.» los llevan los proyectos de la mitad izquierda de la
   pantalla: entran por la derecha enseñando la foto y se ponen en color
   justo al llegar al centro. */
@media (hover: none) {

    .project-item.is-past-center .project-hover { opacity: 1; }

}


/* ============================================================
   TELÉFONO — ≤ 768px
   ============================================================ */

@media only screen and (max-width: 768px) {

    :root {
        --real100: 100dvh;

        /* Tipografía — body 14/120%, big 18/110% */
        --fs:      14px;
        --fs-big:  18px;
        --lh:      1.2;
        --lh-big:  1.1;

        /* Espaciados */
        --padm:    100px;
        --padb:    100px;
        --padh:    100px;

        /* Thumbs más pequeños y huecos más cortos: así asoma un pico del
           proyecto anterior y del siguiente a cada lado */
        --thumb:   calc((100vw - var(--pad) * 2) * 0.6);
        --gap:     95px;
    }

    /* Excepción: la intro del proyecto respira menos por abajo */
    .single-intro { padding-bottom: 50px; }


        .block-image{
        height: auto;
    }

    .block-image.is-fulled{
        height: 100vH;
    }


    /* Menú legal apilado */
    #footer .footer-nav ul {
        flex-direction: column;
        gap: 16px;
    }

    /* Logo con 200px arriba y abajo */
    .home-logo { height: calc(var(--real100) - 400px); }

}


/* ============================================================
   TELÉFONO PEQUEÑO — ≤ 480px
   ============================================================ */

@media only screen and (max-width: 480px) {

    :root {

    }

}


/* ============================================================
   MÓVIL LANDSCAPE — pantalla apaisada y baja
   El max-height deja fuera a las tablets, que en apaisado tienen
   alto de sobra y siguen como estaban.
   Va después del bloque de teléfono a propósito: un móvil apaisado de
   menos de 768px entra en los dos y aquí manda el último.
   ============================================================ */

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {

    :root {
        /* El tope de las fotos lo marcaba solo el ancho, y en apaisado lo que
           falta es alto: se salían por arriba y por abajo. Ahora manda la
           medida que menos sitio deja.
           El alto sale de --app-height (el innerHeight real que ya calcula
           main.js), no de 100vh: en apaisado la barra del navegador se come
           parte del 100vh y las fotos volverían a salirse por arriba.
           El /1.415 es la rotación: girada, una foto ocupa de alto hasta √2
           veces su lado, y sin ese margen se seguía cortando a medio giro. */
        --thumb: min(
            calc((var(--app-height, 100dvh) - var(--pad) * 2) / 1.415),
            calc((100vw - var(--pad) * 2) * 0.6)
        );

        /* El hueco entre fotos, el mismo que en vertical: si no, un móvil de
           más de 768px se queda con el de escritorio y separa el doble. */
        --gap: 95px;

        /* Tipografía, la de móvil. Por el mismo motivo: un móvil apaisado de
           más de 768px se salía del bloque de teléfono y la intro le salía a
           16/32 en vez de a 14/18. */
        --fs:      14px;
        --fs-big:  18px;
        --lh:      1.2;
        --lh-big:  1.1;
    }

    /* El logo se pide como «el alto de pantalla menos el aire de arriba y
       abajo», pero en apaisado ese descuento (250px, y 400px por debajo de
       768) se come la pantalla entera: la altura salía negativa y el logo
       desaparecía. De ahí que se viera en unos móviles y en otros no. */
    /* Al 80%: con la intro desplegada, el logo llegaba a tocar el texto. */
    .home-logo { height: calc((var(--app-height, 100dvh) - var(--padm)) * 0.8); }

}


/* ============================================================
   HAMBURGER — base (visible solo en mobile)
   ============================================================ */

.mobile-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    width: 24px;
    gap:var(--pad);
    height: 18px;
    margin-left: auto;
}

.mobile-menu .line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--contrast);
    transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.mobile-menu.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu.is-active .line:nth-child(2) { opacity: 0; width: 0; }
.mobile-menu.is-active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }