/* 
   BOMIS Ballari - Premium Responsive Overrides
   Targets Mobile (<=768px) and Tablet (<=1024px)
   WITHOUT affecting desktop design (>=1025px)
*/

/* 1. Global Reset & Safety */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* 2. Tablet Fixes (<=1024px) */
@media (max-width: 1024px) {
    /* Header adjustments */
    header {
        top: 0 !important; /* Move header to top for more space */
        padding-top: 12px !important;
    }
    
    nav {
        max-width: 95% !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Section Spacing */
    section {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Grid Adjustments */
    .grid-cols-4, .lg\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .lg\:grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 40px !important;
    }

    /* Hero adjustments */
    .pt-\[120px\] {
        padding-top: 140px !important;
    }
}

/* 3. Mobile Fixes (<=768px) */
@media (max-width: 768px) {
    /* Typography */
    h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    /* Header - Unified Full Width */
    header {
        padding: 0 !important;
        top: 0 !important;
    }
    
    nav {
        border-radius: 0 !important;
        padding: 12px 20px !important;
        max-width: 100% !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    }
    
    nav img {
        height: 36px !important;
    }

    /* Hide desktop nav links */
    .hidden.md\:flex {
        display: none !important;
    }

    /* Main Content */
    main {
        padding-top: 100px !important;
    }

    /* Hero & Container Image Fixes - Removed aggressive overrides that break gallery aspect ratios */

    /* Removed aggressive flex overrides that were breaking layouts */

    .items-center {
        text-align: center !important;
    }

    /* Grid conversion to 1 Column */
    .grid-cols-2, .sm\:grid-cols-2, .md\:grid-cols-2, .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Global Spacing */
    .gap-16, .gap-20, .gap-24 {
        gap: 24px !important;
    }

    .px-4, .px-6, .px-8, .px-12 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Images - only constrain width, don't override height */
    img {
        max-width: 100% !important;
    }

    /* Buttons Full Width */
    .btn-primary, .btn-secondary, .bg-\[\#111\] {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        margin-bottom: 12px !important;
    }

    /* Footer Specific Fixes */
    footer {
        padding-top: 60px !important;
        padding-bottom: 40px !important;
        text-align: center !important;
    }
/* 5. Portal Login Pages (Parents & Staff) Fixes */
@media (max-width: 768px) {
    /* Remove body lock to allow scrolling through the form */
    body.overflow-hidden {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Force the side-by-side to stack */
    .flex.flex-col.md\:flex-row.min-h-screen {
        flex-direction: column !important;
        min-height: auto !important;
    }

    /* Show the illustration section (previously hidden on mobile) */
    .hidden.md\:flex.md\:w-3\/5 {
        display: flex !important;
        width: 100% !important;
        padding: 40px 20px !important;
        min-height: auto !important;
        background: linear-gradient(135deg, #fffcf8 0%, #ffe8d1 100%) !important;
        text-align: center !important;
        align-items: center !important;
    }

    /* Adjust illustration side padding and alignment */
    .hidden.md\:flex.md\:w-3\/5 .relative.z-10 {
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .hidden.md\:flex.md\:w-3\/5 h1 {
        font-size: 28px !important;
    }

    .hidden.md\:flex.md\:w-3\/5 p {
        font-size: 16px !important;
    }

    .hidden.md\:flex.md\:w-3\/5 .max-w-lg {
        max-width: 240px !important;
        margin-top: 20px !important;
    }

    /* Form Section Adjustments */
    .w-full.md\:w-2\/5.bg-white {
        width: 100% !important;
        padding: 40px 20px !important;
        position: static !important;
        min-height: auto !important;
    }

    /* Remove absolute logo if needed or center it */
    .md\:hidden.absolute.top-8.left-6 {
        display: none !important; /* Hide redundant mobile logo since top section now shows it */
    }

    /* Login card centering */
    .w-full.max-w-md.mx-auto.py-12 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Fix background blobs overlapping inputs */
    .blob-shape {
        display: none !important;
    }

    /* Form elements full width */
    input, button {
        width: 100% !important;
    }
}

/* 6. Tablet Fixes for Login */
@media (max-width: 1024px) and (min-width: 769px) {
    .md\:w-3\/5 {
        width: 50% !important;
    }
    .md\:w-2\/5 {
        width: 50% !important;
        padding: 40px !important;
    }
}

    footer .grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 40px !important;
    }

    footer .flex {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    footer p, footer a, footer h3 {
        text-align: center !important;
    }

    footer .items-start {
        align-items: center !important;
    }

    footer .max-w-\[320px\] {
        max-width: 100% !important;
    }

    /* Bottom Bar */
    footer .flex-col.md\:flex-row {
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Social Icons list */
    footer .flex.items-center.gap-4 {
        justify-content: center !important;
    }
}

/* 4. Small Mobile Fixes (<=480px) */
@media (max-width: 480px) {
    h1 {
        font-size: 28px !important;
    }

    .pt-\[120px\] {
        padding-top: 120px !important;
    }
    
    /* Ensure no horizontal scroll on very small screens - scoped to avoid breaking mobile menu */
    body > section, body > main, body > div:not(#mobile-menu-overlay):not([id="header-placeholder"]) {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}