/* =========================================================================
   RESPONSIVE-FIXES.CSS
   Link this file AFTER main.css:
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/responsive-fixes.css">

   Also make sure your <head> has:
   <meta name="viewport" content="width=device-width, initial-scale=1">
   (CSS alone can't fix mobile scaling without this tag.)

   WHAT THIS FIXES
   main.css already has good breakpoints for SOME utility classes
   (e.g. .tw-mt--250-px, .tw-pt-220-px, .grid-col-4/6). But a large
   set of similar classes with huge fixed px margins/paddings were
   never given mobile fallbacks — on small screens they push
   sections/images far off the viewport and cause sideways scrolling.
   This file patches exactly those classes, plus adds a safety net.
   ========================================================================= */

/* Safety net: stop any leftover fixed-offset from creating a horizontal
   scrollbar, whatever screen size. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* grid-col-5 had no responsive breakpoints at all (unlike grid-col-4/6) */
@media (max-width: 1199px) {
    .grid-col-5 {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .grid-col-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .grid-col-5 {
        grid-template-columns: 1fr;
    }
}

/* A width class using 100vh (very wide) — cap it so it can't overflow */
.tw-w-300-vh {
    max-width: 100%;
}

/* ---- Step-down for the most extreme offsets (>=250px) before they
   hit zero, so large tablets don't jump abruptly ---- */
@media (max-width: 1199px) {
    .tw-ms-670-px,
    .tw-ms-500-px,
    .tw-ms-480-px,
    .tw-ms-400-px { margin-left: 80px !important; }

    .tw-me-400-px { margin-right: 80px !important; }

    .tw-mb-332-px { margin-bottom: 90px !important; }
    .tw-mt--332-px { margin-top: -90px !important; }
    .tw-mb-278-px { margin-bottom: 80px !important; }
    .tw-mt--278-px { margin-top: -80px !important; }
    .tw-mb-242-px { margin-bottom: 70px !important; }
    .tw-mt--242-px { margin-top: -70px !important; }
    .tw-mb-244-px { margin-bottom: 70px !important; }
    .tw-mb-186-px { margin-bottom: 90px !important; }
    .tw-mt--186-px { margin-top: -50px !important; }
    .tw-mt-260-px { margin-top: 90px !important; }
    .tw-mt-240-px { margin-top: 80px !important; }
    .tw-mt-234-px { margin-top: 80px !important; }
    .tw-mt-210-px { margin-top: 70px !important; }
    .tw-pt-396-px { padding-top: 120px !important; }
    .tw-pb-260px { padding-bottom: 90px !important; }
    .tw-pt-200px { padding-top: 80px !important; }
    .tw-pb-180-px { padding-bottom: 70px !important; }
}

/* ---- Tablet and below: neutralise every remaining unguarded
   fixed offset so layout can't break or overflow ---- */
@media (max-width: 991px) {
    /* margin-left (tw-ms-*) */
    .tw-ms--72-px,
    .tw-ms-104-px,
    .tw-ms-200-px,
    .tw-ms-110-px,
    .tw-ms-140-px,
    .tw-ms-400-px,
    .tw-ms-90-px,
    .tw-ms--50-px,
    .tw-ms-500-px,
    .tw-ms--66-px,
    .tw-ms--26-px,
    .tw-ms-270-px,
    .tw-ms-160-px,
    .tw-ms-250-px,
    .tw-ms-480-px,
    .tw-ms-670-px,
    .tw-ms--12-px {
        margin-left: 0 !important;
    }

    /* margin-right (tw-me-*, plus the mislabeled tw-ms-106-px) */
    .tw-me-144-px,
    .tw-me-82-px,
    .tw-me--22-px,
    .tw-me-174-px,
    .tw-me-130-px,
    .tw-ms-106-px,
    .tw-me--54-px,
    .tw-me-170-px,
    .tw-me-200-px,
    .tw-me-120-px,
    .tw-me--40-px,
    .tw-me-180-px,
    .tw-me-250-px,
    .tw-me-124-px,
    .tw-me-80-px,
    .tw-me-400-px,
    .tw-me-100-px {
        margin-right: 0 !important;
    }

    /* margin-top (tw-mt-*) */
    .tw-mt-234-px,
    .tw-mt-110-px,
    .tw-mt-186-px,
    .tw-mt-80-px,
    .tw-mt-114-px,
    .tw-mt-260-px,
    .tw-mt-210-px,
    .tw-mt-240-px,
    .tw-mt-155-px,
    .tw-mt-104-px,
    .tw-mt-130-px,
    .tw-mt--242-px,
    .tw-mt--65-px,
    .tw-mt--140-px,
    .tw-mt--332-px,
    .tw-mt--278-px,
    .tw-mt--186-px,
    .tw-mt--100-px,
    .tw-mt--44-px {
        margin-top: 30px !important;
    }

    /* margin-bottom (tw-mb-*) */
    .tw-mb-134-px,
    .tw-mb-244-px,
    .tw-mb-150-px,
    .tw-mb-80-px,
    .tw-mb-202-px,
    .tw-mb-110-px,
    .tw-mb-182-px,
    .tw-mb-242-px,
    .tw-mb-332-px,
    .tw-mb-278-px,
    .tw-mb-90-px,
    .tw-mb-186-px,
    .tw-mb-140-px,
    .tw-mb--38-px,
    .tw-mb--210-px,
    .tw-mb--100-px,
    .tw-mb--200-px,
    .tw-mb--40-px,
    .tw-mb--70-px,
    .tw-mb--130-px {
        margin-bottom: 30px !important;
    }

    /* padding */
    .tw-pt-396-px,
    .tw-pt-200px { padding-top: 60px !important; }

    .tw-py-99-px { padding-top: 60px !important; padding-bottom: 60px !important; }

    .tw-ps-76-px { padding-left: 20px !important; }

    .tw-pb-180-px,
    .tw-pb-260px { padding-bottom: 60px !important; }
}

/* ---- Phones: tighten further ---- */
@media (max-width: 575px) {
    .tw-mt-234-px,
    .tw-mt-110-px,
    .tw-mt-186-px,
    .tw-mt-80-px,
    .tw-mt-114-px,
    .tw-mt-260-px,
    .tw-mt-210-px,
    .tw-mt-240-px,
    .tw-mt-155-px,
    .tw-mt-104-px,
    .tw-mt-130-px,
    .tw-mt--242-px,
    .tw-mt--65-px,
    .tw-mt--140-px,
    .tw-mt--332-px,
    .tw-mt--278-px,
    .tw-mt--186-px,
    .tw-mt--100-px,
    .tw-mt--44-px {
        margin-top: 16px !important;
    }

    .tw-mb-134-px,
    .tw-mb-244-px,
    .tw-mb-150-px,
    .tw-mb-80-px,
    .tw-mb-202-px,
    .tw-mb-110-px,
    .tw-mb-182-px,
    .tw-mb-242-px,
    .tw-mb-332-px,
    .tw-mb-278-px,
    .tw-mb-90-px,
    .tw-mb-186-px,
    .tw-mb-140-px,
    .tw-mb--38-px,
    .tw-mb--210-px,
    .tw-mb--100-px,
    .tw-mb--200-px,
    .tw-mb--40-px,
    .tw-mb--70-px,
    .tw-mb--130-px {
        margin-bottom: 16px !important;
    }

    .tw-pt-396-px,
    .tw-pt-200px,
    .tw-pb-180-px,
    .tw-pb-260px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .tw-py-99-px {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
}