/* =====================================================
   Renew Planet / Refined Green Energy
   MOBILE FIX  -  kills horizontal overflow + non-collapsing grids
   -----------------------------------------------------
   WHY: several layout grids and cards are set with INLINE
   style="grid-template-columns:..." / right:-30px. Inline styles
   outrank normal stylesheet rules, so the responsive overrides
   were being ignored on mobile. Everything here uses !important
   (which DOES beat inline styles) so the mobile layout actually wins.

   HOW TO USE: load this LAST, after responsive.css, e.g. in
   includes/header.php right under the responsive.css line:
       <link rel="stylesheet" href="assets/css/mobile-fix.css">
   ===================================================== */

/* ---- 0. Global overflow guard (stops the right-side white gutter) ---- */
html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
*,
*::before,
*::after {
    /* keep transforms/shadows from forcing the page wider */
    min-width: 0;
}

/* =====================================================
   TABLET & DOWN  (<= 992px)
   ===================================================== */
@media (max-width: 992px) {

    /* ---- 1. Force the inline two-column layout grids to single column ---- */
    /* Targets the exact inline values used on Home (about / founder) and
       the same pattern anywhere else on the site. */
    [style*="grid-template-columns:1fr 1.1fr"],
    [style*="grid-template-columns:1fr 1.2fr"],
    [style*="grid-template-columns: 1fr 1.1fr"],
    [style*="grid-template-columns: 1fr 1.2fr"],
    .about-grid,
    #founder > .container > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* On tablet the image should sit above the text, not beside it */
    .about-image,
    #founder > .container > div[style*="grid-template-columns"] > div:first-child {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    /* ---- 2. Pull the floating stat cards back inside the screen ---- */
    /* These are positioned with inline right:-30px and stick out. */
    .floating-card,
    [style*="right:-30px"] {
        right: 12px !important;
        left: auto !important;
    }
}

/* =====================================================
   PHONE  (<= 768px)
   ===================================================== */
@media (max-width: 768px) {

    /* ---- 3. Collapse the smaller inline grids too ---- */
    .about-features,
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2"],
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(4"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* ---- 4. Re-center floating cards under the image instead of overlapping ---- */
    .about-image .floating-card,
    .about-image [style*="right:-30px"],
    #founder [style*="right:-30px"] {
        position: static !important;
        display: inline-block;
        margin: -28px auto 0 !important;
        right: auto !important;
        bottom: auto !important;
    }
    .about-image {
        text-align: center;
    }

    /* ---- 5. Any inline flex row with a big gap should stack on phones ---- */
    [style*="display:flex"][style*="gap:40px"],
    [style*="display: flex"][style*="gap: 40px"] {
        flex-direction: column !important;
        gap: 24px !important;
        text-align: center;
        align-items: center !important;
    }

    /* The founder modal inner padding is huge on phones */
    .founder-modal-inner [style*="padding:50px"] {
        padding: 28px 20px !important;
    }

    /* ---- 6. Stop tall fixed-height images from looking cramped ---- */
    .about-image img,
    #founder img[style*="height:500px"] {
        height: 320px !important;
    }
}

/* =====================================================
   SMALL PHONE  (<= 480px)
   ===================================================== */
@media (max-width: 480px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* belt-and-braces: nothing inside a section may exceed the viewport */
    section,
    section > .container,
    section > .container > * {
        max-width: 100% !important;
    }

    .floating-card .number,
    [style*="right:-30px"] [style*="font-size:2.8rem"],
    [style*="right:-30px"] [style*="font-size:2.5rem"] {
        font-size: 2rem !important;
    }
}