/*=========================================================
RESPONSIVE.CSS
RILION GRACIE SAN RAFAEL

CÓMO LEER ESTE ARCHIVO
=========================================================

1) Es MOBILE-FIRST.

   El diseño base de celular vive en style.css, sin ningún
   media query. Acá abajo sólo están los CAMBIOS que hacen
   falta cuando la pantalla se agranda.

2) Todos los breakpoints son min-width y van de menor a
   mayor. Se leen en cascada: lo de 768px sigue valiendo
   a 1200px salvo que se pise expresamente.

3) Los tamaños de texto y los espaciados NO están acá.
   Se escalan solos con las variables clamp() de
   variables.css. Si un texto quedó grande o chico,
   se toca ahí, no acá.

4) Cada breakpoint tiene un solo bloque. Si necesitás
   agregar una regla, buscá el breakpoint que le
   corresponde y sumala adentro. No crees bloques nuevos
   para el mismo ancho.

LOS 5 BREAKPOINTS
=========================================================

    base       →  celular            (320px a 479px)
    480px      →  celular grande
    768px      →  tablet
    992px      →  laptop  ← acá aparece el menú de escritorio
    1200px     →  desktop
    1600px     →  pantallas grandes

=========================================================*/


/*=========================================================
480px — CELULAR GRANDE

Ya entran dos botones uno al lado del
otro sin que el texto se corte.
=========================================================*/

@media (min-width:480px){

    .hero-buttons,
    .cta-buttons{

        flex-direction:row;

        flex-wrap:wrap;

        gap:20px;

    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary,
    .cta-buttons .btn-primary,
    .cta-buttons .btn-secondary{

        width:auto;

    }

}


/*=========================================================
768px — TABLET

Las grillas de una columna pasan a dos.
=========================================================*/

@media (min-width:768px){

    .training-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .schedule-grid{

        grid-template-columns:repeat(2,1fr);

    }

    /* Footer: la marca ocupa la fila completa
       y abajo quedan navegación y redes */

    .footer-container{

        grid-template-columns:repeat(2,1fr);

    }

    .footer-brand{

        grid-column:1 / -1;

    }

    /* El botón deja de ocupar todo el ancho */

    .about-content .btn-primary{

        width:auto;

    }

}


/*=========================================================
992px — LAPTOP

Acá se cambia el menú hamburguesa por
el menú de escritorio.
=========================================================*/

@media (min-width:992px){

    /*=========================
    NAVEGACIÓN
    =========================*/

    .desktop-menu{

        display:block;

    }

    .btn-header{

        display:inline-flex;

    }

    /* El hamburguesa y su overlay dejan de existir.
       El display:none también cierra el menú si el
       usuario agranda la ventana con el menú abierto. */

    #menu-toggle,
    .mobile-menu{

        display:none;

    }

    /*=========================
    SECCIONES
    =========================*/

    .about-container{

        grid-template-columns:1fr 1fr;

    }

    /* Datos de contacto a la izquierda con ancho
       acotado, mapa ocupando el resto */

    .contact-grid{

        grid-template-columns:minmax(340px, 420px) 1fr;

    }

    .schedule-grid{

        grid-template-columns:repeat(3,1fr);

    }

    .footer-container{

        grid-template-columns:2fr 1fr 1fr;

    }

    .footer-brand{

        grid-column:auto;

    }

}


/*=========================================================
1200px — DESKTOP

Las 4 tarjetas de entrenamiento
entran en una sola fila.
=========================================================*/

@media (min-width:1200px){

    .training-grid{

        grid-template-columns:repeat(4,1fr);

    }

}


/*=========================================================
1600px — PANTALLAS GRANDES

Se le da más ancho al contenido para que
no quede una franja angosta en el medio.
=========================================================*/

@media (min-width:1600px){

    :root{

        --container:1440px;

    }

}


/*=========================================================
CELULAR ACOSTADO

Pantalla muy baja: el hero a pantalla
completa no entra, así que se deja
crecer con el contenido y se esconde
la flecha de scroll.
=========================================================*/

@media (orientation:landscape) and (max-height:520px){

    #home{

        min-height:auto;

        padding-top:100px;

        padding-bottom:60px;

    }

    .scroll-down{

        display:none;

    }

    /* El menú se compacta para entrar en una pantalla
       tan baja sin necesidad de scrollear: los links
       se acomodan en dos filas. */

    .mobile-menu{

        justify-content:flex-start;

        padding-top:calc(var(--header-height) + 12px);

        gap:14px;

    }

    .mobile-menu ul{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

        gap:4px 18px;

    }

    .mobile-menu a{

        min-height:40px;

        font-size:1.5rem;

    }

    .mobile-menu .btn-primary{

        min-height:42px;

    }

    .mobile-menu-social a{

        width:42px;

        height:42px;

        min-height:42px;

    }

}


/*=========================================================
NOTCH DE iOS

Suma el recorte de la pantalla al aire
lateral, así el contenido no queda
debajo de la muesca ni de los bordes
redondeados.

Se aplica al contenedor (y no al body)
para que el header fijo quede alineado
con el resto de las secciones.
=========================================================*/

@supports (padding:env(safe-area-inset-left)){

    .container,
    .hero-content{

        padding-left:calc(var(--container-padding) + env(safe-area-inset-left));

        padding-right:calc(var(--container-padding) + env(safe-area-inset-right));

    }

    .footer-bottom{

        padding-bottom:calc(25px + env(safe-area-inset-bottom));

    }

}


/*=========================================================
MOVIMIENTO REDUCIDO

Respeta la configuración del sistema
de quien no quiere animaciones.
=========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*=========================================================
IMPRESIÓN
=========================================================*/

@media print{

    #header,
    #footer,
    #loader,
    .mobile-menu,
    .scroll-down{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

}