/* ===================================================================
   AdaptX — Mobile Responsiveness Fixes
   ---------------------------------------------------------------
   This file ONLY contains mobile/tablet media-query overrides.
   It does not redefine any desktop styling, so the desktop design
   is completely unchanged. Loaded after every page's main
   stylesheet so it can patch the specific layout bugs that broke
   on small screens (fixed pixel widths, no-wrap flex rows, an
   oversized footer gap, missing font scaling on two pages, etc).
   =================================================================== */

/* ---------------------------------------------------------------
   0. Global safety net (all pages)
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden;
    }
    img {
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------
   1. Footer — the fixed 350px gap between columns (used on every
   page) only collapses to a column layout under 600px, so on
   phones and small tablets between ~360-991px it forces the two
   columns to overlap/overflow horizontally. Shrink the gap so the
   columns can sit comfortably side by side until they stack.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .footer-content {
        gap: 30px;
    }
}

/* ---------------------------------------------------------------
   2. Typography scaling — index.html / home.html / who-we-are.html
   / download.html / connect.html / quiz.html already scale down
   headings and buttons on mobile. what-we-do.html and
   contact-us.html were missing the same scaling, so headings stay
   at full desktop size on a phone. Bring them in line.
   --------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
    body, html {
        font-size: 14px;
    }
    .p-large {
        font-size: 1rem;
    }
    .p-heading {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.25rem;
    }
    button,
    .btn-solid-reg,
    .btn-solid-lg,
    .btn-outline-reg,
    .btn-outline-lg,
    .btn-outline-sm {
        font-size: 0.95rem;
    }
}

@media only screen and (max-width: 480px) {
    .p-heading {
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
    }
    h1 {
        font-size: 1.75rem;
    }
    h2 {
        font-size: 1.25rem;
    }
}

/* ---------------------------------------------------------------
   3. Home / Index page (styles.css) — counter strip
   The 3 stat cells (#counter) never wrap, so on a phone the big
   numbers get squeezed and can overlap. Let them wrap onto two
   lines and shrink the numbers a little on very small phones.
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    .counter #counter {
        flex-wrap: wrap;
        row-gap: 1.5rem;
    }
    .counter #counter .cell {
        margin: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .counter #counter .counter-value {
        font-size: 2.75rem;
        line-height: 1.2;
    }
    .counter #counter .counter-info {
        font-size: 1.05rem;
    }
    .counter .separator {
        display: none;
    }
}

/* ---------------------------------------------------------------
   4. Who We Are / Download / Connect / Quiz pages (styles-1.css)
   "Meet Our Team" row used flex-wrap: nowrap with fixed 300px-wide
   cards, forcing every member into one unreadable squeezed row.
   Let the cards wrap and become full width on small screens.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .team-members {
        flex-wrap: wrap;
        justify-content: center;
    }
    .member {
        width: 100%;
        max-width: 320px;
        min-height: auto;
    }
    .team-head {
        width: 100%;
        max-width: 320px;
    }
}

/* "Our Concept" boxes inside About Us — keep them from becoming
   unreadably narrow slivers on small phones */
@media (max-width: 575px) {
    .about-us .concept {
        flex-wrap: wrap;
    }
    .about-us .concept div {
        flex-basis: 100%;
        margin-bottom: 15px;
    }
}

/* ---------------------------------------------------------------
   5. What We Do page (styles-2.css)
   Every section (Climate Impact Assessment, Hazard Modeling,
   Resilience-Building, AI Solutions, Capacity Building) is a flex
   row with no wrap, and several of the images use a fixed
   600px x 400px size. On any phone or small tablet this pushes
   the layout wider than the screen, causing horizontal scrolling.
   Stack each section and let its image scale down to fit.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .water-management-container,
    .environment-container,
    .engineering-container,
    .modelling-container,
    .international-container,
    .monitoring-container,
    .capacity-container {
        flex-direction: column;
        padding: 24px 16px;
    }

    .water-management-text-section,
    .international-text-section,
    .capacity-text-section {
        padding-right: 0;
        padding-bottom: 20px;
    }

    .environment-text-section,
    .engineering-text-section,
    .modelling-text-section,
    .monitoring-text-section {
        padding-left: 0;
        padding-top: 20px;
    }

    .water-management-image-section img,
    .international-image-section img,
    .capacity-image-section img {
        width: 100%;
        height: auto;
    }

    .monitoring-image-section img {
        height: auto;
    }
}

/* ---------------------------------------------------------------
   6. Contact Us page (styles-3.css)
   The contact form and the Google map are each forced to 50%
   width side by side with no wrap, and the 3-item address strip
   also never wraps — both overflow/squash on phones and tablets.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
    .contact-form-map {
        flex-direction: column;
    }
    .contact-form,
    .map-container {
        width: 100%;
    }
    .map-container iframe {
        height: 300px;
    }

    .address {
        flex-direction: column;
        gap: 20px;
    }
    .address div {
        width: 100%;
    }
}

/* ---------------------------------------------------------------
   7. "Get in touch" popup (index.html / home.html) — cap the
   height on short phone screens so the form is always scrollable
   instead of being cut off / pushed off-screen.
   --------------------------------------------------------------- */
@media (max-width: 575px) {
    .popup-content {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------------
   9. Home / Index page — "International Development" and
   "Ready to discuss your next project?" banners
   (.basic-2 / .basic-3 .image-text-container + .image-container).
   On mobile these already switch to a stacked column layout, but
   the image panels had no explicit width, so with
   align-items: center the flexbox shrank each panel down to a
   tiny centered strip instead of filling the screen — which is
   why the image/text collapsed into a narrow gray bar with
   overlapping, cut-off text instead of a full-width banner.
   --------------------------------------------------------------- */
@media (max-width: 768px) {
    .image-text-container {
        align-items: stretch;
    }
    .image-container {
        width: 100%;
    }
}

/* ---------------------------------------------------------------
   8. Connect / Download hero sections — large fixed 48px headings
   on small phones, shrink to keep a single hero line readable.
   --------------------------------------------------------------- */
@media (max-width: 480px) {
    .hero h1 {
        font-size: 1.9rem;
    }
}