/* assets/css/grid-mobile.css - MOBILE LAYOUT & RESPONSIVE FIXES */

/* Standard Mobile & Tablet Adjustments */
@media (max-width: 1024px) {
    /* 0. Container Normalization - FIXES LOPSIDED ALIGNMENT */
    .home-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important; /* Balanced side padding */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 1. Global Box Re-ordering */
    .grid-hero { order: 1 !important; }
    .grid-anniversary-strip { order: 2 !important; }
    .grid-sidebar-right { order: 3 !important; }
    .grid-celebration { order: 4 !important; }
    .grid-about-book { order: 5 !important; }
    .grid-videos { order: 6 !important; }
    .grid-sidebar-left { 
        order: 7 !important; 
        margin-top: 30px !important;
        padding: 0 !important; /* Reset specific padding to match other boxes */
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .grid-info-material { order: 8 !important; }
    .grid-publication { order: 9 !important; }

    /* 2. Alignment & Icon Fixes */
    .widget-title, .messages-header h2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .title-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        stroke: #003366 !important;
        fill: none !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
    }

    /* 3. Full Width Constraint */
    .af-box, [class*="grid-"] {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important; /* Ensures padding doesn't push box to the right */
    }
}

/* Header & Social Specific Mobile Fixes */
@media (max-width: 992px) {
    /* 1. HIDE the wrap by default */
    .main-navigation-mobile-wrap { 
        display: none !important; 
    }

    /* 2. ONLY SHOW when the toggle is checked */
    .af-toggle-input:checked ~ .main-navigation-mobile-wrap { 
        display: block !important; 
    }

    /* 3. Branding & Social Flex Logic (Only when open) */
    .af-toggle-input:checked ~ .main-navigation-mobile-wrap .branding-flex,
    .af-toggle-input:checked ~ .main-navigation-mobile-wrap .header-social-wrap {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .branding-full-width {
        flex-direction: column !important;
        text-align: center !important;
        padding: 15px 20px !important;
    }

    .logo-title-group {
        flex-direction: column !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }

    .header-social-wrap {
        margin-left: 0 !important;
        justify-content: center !important;
        gap: 12px;
    }

    /* 4. Layout Grid Fix */
    .home-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 15px !important; /* Overriding with balanced padding */
        gap: 20px !important;
        box-sizing: border-box !important;
    }
}