/* ============================================================
   custom.css — Device-specific overrides
   Included globally via website-layout.blade.php
   ============================================================ */

/* ----------------------------------------------------------
   Small Laptop: 1180px – 1260px
   (falls between lg=1024px and xl=1280px in Tailwind)
   ---------------------------------------------------------- */
@media (min-width: 1180px) and (max-width: 1281px) {

    /* Banner sections: no top padding */
    section.mt-\[93px\], section.mt-\[85px\] { padding-top: 0 !important; }

    /* Counter section: force 4 columns */
    #counter-section .lg\:w-1\/3 { width: 25% !important; }

    /* All sections: reduce vertical padding to 2rem */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Override Tailwind py-* utility classes */
    .py-4  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-6  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-8  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-10 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-16 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-20 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-24 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

    .pt-8  { padding-top: 2rem !important; }
    .pt-10 { padding-top: 2rem !important; }
    .pt-12 { padding-top: 2rem !important; }
    .pt-16 { padding-top: 2rem !important; }
    .pt-20 { padding-top: 2rem !important; }
    .pt-24 { padding-top: 2rem !important; }

    .pb-8  { padding-bottom: 2rem !important; }
    .pb-10 { padding-bottom: 2rem !important; }
    .pb-12 { padding-bottom: 2rem !important; }
    .pb-16 { padding-bottom: 2rem !important; }
    .pb-20 { padding-bottom: 2rem !important; }
    .pb-24 { padding-bottom: 2rem !important; }

    /* Home page swiper: keep at 500px */
    .swiper.mySwiper { height: 500px !important; }

    /* Events slider */
    .swiper.events-slider { padding-top: 100px !important; }

    /* Initiatives page: 3 cards per row */
    #initiatives .flex-wrap > div { width: calc(33.333% - 0.75rem) !important; }

    /* Events section grid: pb-0 */
    #events { padding-bottom: 0 !important; }
    .lg\:mb-8  { margin-bottom: 1rem !important; }

    /* Event image top offset */
    .event-img-wrap { top: -230px !important; }

}

/* Gallery page title: 10px bottom margin on all devices */
.gallery-page-title { margin-bottom: 10px !important; }

/* Impact stories card title */
@media (min-width: 768px)  { .story-card-title { font-size: 18px !important; } }
@media (min-width: 1024px) { .story-card-title { font-size: 18px !important; } }

.main-gallery-slider-wrapper .swiper {
    padding-top: 3rem !important;
    padding-bottom: 2.5rem !important;
}

/* Contact page map height */
.contact-map-wrap { height: 400px; }
@media (min-width: 768px)  { .contact-map-wrap { height: 300px; } }
@media (min-width: 1281px) { .contact-map-wrap { height: 400px; } }

/* Project page banner: 450px at 1180–1281px */
@media (min-width: 1180px) and (max-width: 1281px) {
    .project-banner-wrap { height: 450px !important; }
}