/* ===================================================
   Mobile Fixes — Minerales de la Tierra
   =================================================== */

/* --------------------------------------------------
   1. MASTHEAD (hero section)
   --------------------------------------------------
   The original code sets a fixed `height: 80vh` (and
   100vh on tiny screens). With flex centering this
   works fine on desktop, but on mobile the content
   can overflow/clip. Replace with min-height so the
   section grows to fit its content instead of cutting
   it off.
-------------------------------------------------- */
@media (max-width: 991px) {
    .masthead {
        height: auto !important;
        min-height: 70vh;
    }
}

@media (max-width: 767px) {
    .masthead {
        height: auto !important;
        min-height: 60vh;
        padding-top: 110px;
        padding-bottom: 3rem;
    }

    /* Remove the mid-sentence line-break in the hero h2
       — on narrow screens the natural wrap is better */
    .masthead h2 br {
        display: none;
    }
}

@media (max-width: 480px) {
    .masthead {
        min-height: 80vh;
    }
}

/* Short landscape screens (e.g. phone rotated) */
@media (max-height: 500px) and (max-width: 991px) {
    .masthead {
        min-height: auto;
        height: auto !important;
        padding-top: 80px;
        padding-bottom: 2rem;
    }
}

/* --------------------------------------------------
   2. LOGO
   Center and size the logo properly on all mobile
   sizes. The base CSS only sets width at ≥992px.
-------------------------------------------------- */
.logo2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 991px) {
    .logo2 {
        width: 65% !important;
        max-width: 320px;
    }
}

@media (max-width: 575px) {
    .logo2 {
        width: 80% !important;
    }
}

/* --------------------------------------------------
   3. PAGE SECTION — reduce horizontal padding
   The base style is `padding: 7vh 3rem`, which eats
   ~96px of horizontal space on a 375px phone. Bring
   it down to comfortable breathing room on mobile.
-------------------------------------------------- */
@media (max-width: 767px) {
    .page-section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        min-height: auto !important;
    }

    /* .cont2 adds its own 3rem padding on mobile —
       cancel it out since it's inside a container
       that already has gutters. */
    .cont2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --------------------------------------------------
   4. LA COLECCIÓN section
   On mobile: show the product image ABOVE the text
   so the visitor sees the product first, then reads.
   Also hide the spacer <br> tags used for desktop
   alignment.
-------------------------------------------------- */
@media (max-width: 767px) {
    #lacoleccion .row {
        flex-direction: column;
    }

    /* Image column → display first */
    #lacoleccion .col-md-8 {
        order: -1;
        margin-bottom: 1.25rem;
    }

    /* Hide the desktop-only spacer <br> tags */
    #lacoleccion .col-md-4 > br {
        display: none;
    }
}

/* --------------------------------------------------
   5. ENTREGAS — single column on very small screens
   Bootstrap's col-sm-6 starts 2-column layout at
   576px+. Below that, force 1 column.
-------------------------------------------------- */
@media (max-width: 575px) {
    #entregas .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------
   6. PRECIOS (pricing section)
   Main bugs:
   a) `margin-left: -55px` on the h4 headings pushes
      text off-screen on mobile → reset it.
   b) At lg the 4 columns sit side by side (col-lg-3).
      Below lg they are already 100% wide (Bootstrap 4
      base), but we explicitly force 2-column grid on
      tablets so it feels intentional.
   c) The absolute-positioned price badges (.preu /
      .preug) need to adapt to smaller column widths.
-------------------------------------------------- */

/* Reset the negative heading margin on all screens
   below the large desktop breakpoint */
@media (max-width: 991px) {
    #ofertasuscripcion h4 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center;
    }

    /* 2-column grid on tablet */
    #ofertasuscripcion .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 2rem;
    }

    /* Nudge the price badges inward so they don't sit
       right at the column's padding edge */
    .preu {
        left: 10px;
    }

    .preug {
        right: 10px;
        top: 80px;
    }
}

/* 1-column on small phones */
@media (max-width: 575px) {
    #ofertasuscripcion .col-lg-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* --------------------------------------------------
   7. NAVBAR — mobile expanded state
   When the hamburger menu is open the nav items have
   no background, so they float over the hero image
   without contrast. Give the expanded menu a solid
   yellow background matching the nav bar colour.
-------------------------------------------------- */
@media (max-width: 991px) {
    #mainNav .navbar-collapse.show,
    #mainNav .navbar-collapse.collapsing {
        background-color: rgba(235, 194, 33, 0.97);
        padding: 6px 12px 12px;
        border-radius: 0 0 8px 8px;
        margin-top: 4px;
    }

    #mainNav .navbar-nav {
        margin-top: 0;
    }
}

/* --------------------------------------------------
   8. FAQ — prevent long URLs from overflowing
-------------------------------------------------- */
@media (max-width: 767px) {
    #faq small {
        word-break: break-word;
        display: inline-block;
    }
}