/* assets/css/mobile-viewport.css */

/* ========================================
   AJUSTES DE VIEWPORT PARA MÓVILES

   Esta capa es solo de layout. Los tamaños de texto los resuelve la escala
   fluida con clamp() de styles.css, así que acá no se repiten: antes había
   docenas de "font-size: ... !important" que se contradecían entre
   breakpoints, y algunos revertían los colores de contraste.
   ======================================== */

/* 1. RED DE SEGURIDAD CONTRA SCROLL HORIZONTAL */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
}

/* 2. CONTENEDORES Y GUTTERS */
@media (max-width: 991.98px) {
    .container, .container-fluid {
        max-width: 100%;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    /* El aire lateral lo da el .container; la sección no vuelve a sumarlo */
    section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .col, [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    img {
        max-width: 100%;
    }
}

/* 3. HEADER Y BANNER */
@media (max-width: 991.98px) {
    header {
        padding: 12px var(--gutter);
    }

    #site-logo {
        max-width: 100%;
        height: auto;
    }

    .navbar-nav,
    .navbar-nav .nav-link {
        max-width: 100%;
    }

    /* El banner ya está fuera de un .container, así que no necesita el
       truco de 100vw con márgenes negativos (100vw incluye la barra de
       scroll y desbordaba ~15px). */
    #inicio {
        padding: 0 !important;
        margin: 0 !important;
    }

    .banner {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
}

/* 4. CARRUSEL DE PRODUCTOS */
@media (max-width: 991.98px) {
    .carousel,
    .carousel-inner,
    .carousel-item {
        width: 100%;
        max-width: 100%;
    }

    /* Los controles y los indicadores quedan visibles: estaban en
       display:none y en un teléfono no había ninguna señal de que hubiera
       tres variedades de césped ni cómo pasarlas. */
    .carousel-control-prev,
    .carousel-control-next {
        display: flex;
    }

    .carousel-indicators {
        display: flex;
    }

    /* Sin alturas fijas: la tarjeta la define su contenido */
    .product-card {
        width: 100%;
        max-width: 100%;
    }
}

/* 5. ENVÍOS */
@media (max-width: 991.98px) {
    .shipping-image img {
        height: 240px;
    }

    .detail-item {
        max-width: 100%;
    }
}

/* 6. UTILIDADES DE BOOTSTRAP QUE PUEDEN DESBORDAR */
@media (max-width: 991.98px) {
    .w-100, .mw-100 {
        max-width: 100% !important;
    }

    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    pre, code {
        max-width: 100%;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

/* 7. ORIENTACIÓN HORIZONTAL: banner más bajo para no comerse la pantalla */
@media (max-width: 991.98px) and (orientation: landscape) {
    .banner,
    .banner img {
        height: 150px;
        max-height: 150px;
    }
}