/* ============================================
   BON Storytelling Agency – Mobile Optimisations
   Applied globally across all pages
   ============================================ */

/* Prevent ALL horizontal overflow site-wide */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Ensure all sections don't overflow */
section, footer, header, main, div {
    max-width: 100%;
}

/* ─────────────────── NAV ─────────────────── */
@media (max-width: 768px) {
    /* Ensure header logo doesn't get too large */
    header img {
        max-height: 36px;
        height: auto;
    }

    /* Reduce nav padding on mobile */
    header .container,
    header [class*="px-"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ─────────────────── HERO / SECTIONS ─────────────────── */
@media (max-width: 640px) {
    /* Clamp large section vertical padding */
    [class*="py-40"], [class*="py-48"], [class*="py-60"] {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    [class*="py-32"], [class*="py-36"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    [class*="py-24"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Reduce horizontal padding to prevent overlap */
    [class*="px-16"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    [class*="px-12"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Service section: reduce heading sizes */
    .text-6xl { font-size: 2rem !important; }
    .text-7xl { font-size: 2.5rem !important; }
    .text-8xl { font-size: 3rem !important; }
    .text-9xl { font-size: 3.5rem !important; }

    /* Large fixed-px typography */
    [class*="text-[84px]"], [class*="text-[96px]"] {
        font-size: 2rem !important;
        line-height: 1 !important;
    }
    [class*="text-[72px]"] {
        font-size: 1.75rem !important;
        line-height: 1 !important;
    }

    /* Reduce large mb/mt that causes spacing issues */
    [class*="mb-16"] { margin-bottom: 1.5rem !important; }
    [class*="mb-24"] { margin-bottom: 2rem !important; }
    [class*="mt-16"] { margin-top: 1.5rem !important; }

    /* Gap reduction */
    [class*="gap-20"] { gap: 2rem !important; }
    [class*="gap-24"] { gap: 2rem !important; }
}

/* ─────────────────── GRIDS ─────────────────── */
@media (max-width: 640px) {
    /* Force service image aspect ratio to not be too tall */
    [class*="aspect-[4/5]"] {
        aspect-ratio: 4/3 !important;
    }

    /* Ensure lg:col-span grids stack cleanly */
    .lg\:col-span-2,
    .lg\:col-span-3 {
        grid-column: span 1 !important;
    }

    /* Footer columns stack properly */
    .lg\:col-span-2 {
        margin-bottom: 1rem;
    }
}

/* ─────────────────── PORTFOLIO POPUP ─────────────────── */
@media (max-width: 640px) {
    /* Popup modal should be full screen */
    [class*="fixed"][class*="inset-0"] > div[class*="max-w"] {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        overflow-y: auto;
    }
}

/* ─────────────────── FOOTER ─────────────────── */
@media (max-width: 768px) {
    /* Keep footer columns readable */
    footer [class*="grid-cols-5"],
    footer [class*="lg:grid-cols-5"] {
        grid-template-columns: 1fr 1fr !important;
    }

    footer [class*="lg:col-span-2"] {
        grid-column: span 2 !important;
    }

    /* Reduce footer padding */
    footer [class*="py-16"] {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    footer [class*="gap-20"] {
        gap: 2rem !important;
    }
}

/* ─────────────────── HEROTEXT CLAMP ─────────────────── */
@media (max-width: 480px) {
    /* Clamp any remaining oversized hero/display text */
    [class*="tracking-tighter"] {
        word-break: break-word;
    }

    /* Blog card text */
    [class*="text-2xl"] { font-size: 1.125rem !important; }
    [class*="text-3xl"] { font-size: 1.25rem !important; }

    /* Reduce button padding on mobile */
    [class*="px-16"][class*="py-8"] {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ─────────────────── CONTACT FORM ─────────────────── */
@media (max-width: 768px) {
    /* Contact info + form should stack */
    [class*="grid-cols-2"][class*="md:grid-cols-2"] {
        grid-template-columns: 1fr !important;
    }
}