/* ==========================================================
   EARTHCON RESPONSIVE
   Loaded after style.css — rules here override desktop styles.
   Keep every mobile rule inside a media query in THIS file.
   Do not paste new fixes below this comment block — edit the
   relevant section above instead.
========================================================== */


/* ==========================================================
   GLOBAL SAFETY NET (all breakpoints)
   Belt-and-suspenders against horizontal scroll re-appearing.
========================================================== */

html, body{
    overflow-x:hidden;
    max-width:100%;
}

body{
    padding-bottom:env(safe-area-inset-bottom, 0px);
}

img, svg{
    max-width:100%;
    height:auto;
}


/* ==========================================================
   TABLETS
========================================================== */

@media (max-width:1024px){

}


/* ==========================================================
   MOBILE (up to 768px)
========================================================== */

@media (max-width:768px){

    /* ---------- GLOBAL LAYOUT ---------- */

    .container{
        width:100%;
        max-width:100%;
        padding:0 24px;
        margin:0 auto;
        box-sizing:border-box;
    }

    section{
        padding-left:0;
        padding-right:0;
    }

    .section-heading,
    .services-section,
    .approach-section,
    .future-section,
    .contact-section{
        text-align:left;
    }

    /* ---------- HERO ---------- */

    .hero{
        min-height:95vh;
        min-height:95dvh;
    }

    .topbar{
        padding:22px 24px;
        align-items:center;
    }

    .brand-logo{
        height:42px;
    }

    .brand-copy span{
        font-size:18px;
    }

    .brand-copy small{
        font-size:9px;
        letter-spacing:2px;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding:0 24px;
        margin-top:90px;
    }

    /* Bug fix: kicker badge wrapped to 2 lines because
       letter-spacing (3px x ~39 characters) alone added ~120px
       of extra width. Tightened spacing + forced one line. */
    .hero-kicker{
        display:block;
        width:fit-content;
        max-width:100%;
        white-space:nowrap;
        font-size:10px;
        letter-spacing:1px;
        padding:7px 12px;
        margin-bottom:18px;
    }

    .hero h1{
        font-size:52px;
        line-height:1.04;
        margin-bottom:20px;
    }

    .hero p{
        font-size:17px;
        line-height:1.75;
        max-width:100%;
    }

    /* Bug fix: "+" button had no flex centering at the smaller
       mobile size, so the glyph could sit off-center/clipped. */
    .floating-main{
        width:58px;
        height:58px;
        font-size:34px;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
    }

    /* ---------- ABOUT / WHY-EARTHCON CAROUSEL ----------
       Bug fix: an old "fix pack" in style.css had set the
       carousel wrapper to overflow:visible and padded the
       track with 420px of fake spacing -- that alone forced
       the whole page into horizontal scroll on mobile. That
       has been corrected at the source in style.css. These
       rules just tune the mobile card size so one card peeks
       at a time instead of feeling cramped. */

    .why-carousel{
        width:100%;
        max-width:100%;
        overflow:hidden;
        position:relative;
    }

    .why-track{
        display:flex;
        gap:16px;
        width:max-content;
        will-change:transform;
    }

    .why-card{
        flex:0 0 72vw !important;
        max-width:300px;
    }

    /* ---------- MODAL / FORM ----------
       Bug fix: the modal appeared shifted right and the
       page/form scroll fought each other -- both were symptoms
       of the page-wide horizontal scroll bug above. This just
       makes the internal scroll feel smooth once contained. */

    .modal{
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .modal-card{
        width:calc(100% - 32px);
        max-height:calc(86vh - env(safe-area-inset-bottom, 0px));
        max-height:calc(86dvh - env(safe-area-inset-bottom, 0px));
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        margin:6vh auto 0;
        padding-bottom:env(safe-area-inset-bottom, 0px);
    }

    /* Bug fix: a later unscoped rule further down style.css was
       silently overriding this exact fix with a 2-column grid,
       cramming form fields on mobile. Forcing it back here. */
    .schedule-form{
        grid-template-columns:1fr !important;
    }

    /* Bug fix: with 10 form fields the modal always needs to
       scroll on mobile. Pinning the submit button to the bottom
       of the modal's own scroll area means it's always visible
       and reachable, instead of depending on the user noticing
       they can scroll further inside a nested container. */
    .schedule-form button[type="submit"]{
        position:sticky;
        bottom:-1px;
        z-index:5;
        box-shadow:0 -12px 20px -4px rgba(3,7,38,.55);
    }

    /* Bug fix: these paragraphs carried a hardcoded desktop
       width (650-760px) with no mobile override, so on a
       ~375-430px phone the box was nearly double the screen
       width. With horizontal scroll correctly blocked, the
       overflow was simply sliced off instead of wrapping.
       Capping to 100% lets it wrap onto extra lines instead,
       exactly like the About Earthcon Marketing paragraph
       above it already does correctly. */
    .about-section .section-heading,
    .about-section .section-lead,
    .services-section .section-lead,
    .approach-section .section-lead,
    .future-section .section-lead,
    .contact-section .section-lead{
        max-width:100% !important;
    }

}


/* ==========================================================
   SMALL MOBILE (up to 480px)
========================================================== */

@media (max-width:480px){

    /* Extra safety for narrow phones (iPhone SE / 320-375px)
       so the hero kicker still fits on one line. */
    .hero-kicker{
        font-size:9px;
        letter-spacing:0.5px;
        padding:6px 10px;
    }

    .hero h1{
        font-size:42px;
    }

}

/* ==========================================================
   FOUNDER BLOCK + RERA PANEL + FOOTER BADGE (mobile/tablet)
========================================================== */

@media (max-width:768px){

    /* Bug-prevention: same reasoning as the section-lead fix above --
       these are new elements with a desktop max-width that would
       otherwise overflow a narrow phone screen. */
    .founder-block{
        max-width:100%;
    }

    .founder-copy{
        max-width:100%;
    }

    /* The RERA panel's side-by-side layout squeezed the text column
       to an unreadable ~120px on narrow phones. Stacking it (QR
       below the text, both centered) matches how the rest of the
       contact section is already centered on mobile. */
    .rera-panel{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:24px;
        padding:28px 24px;
        margin:40px 0 0;
        max-width:100%;
    }

    .rera-panel-text{
        text-align:center;
    }

    .footer-bottom{
        flex-direction:column;
        gap:20px;
        margin-bottom:70px;
    }

}