/* Mobile Content Width Consistency CSS */
/* Ensures all homepage content matches mobile quick menu width */

@media (max-width: 767.98px) {
    /* Base container width matching mobile quick menu */
    .container {
        max-width: 320px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 auto !important;
    }
    
    /* Specific homepage sections */
    .quick-menu-ppid .container,
    .ppid-officials .container,
    .statistics-section .container,
    .agenda-section .container,
    .fasilitas-section .container,
    .news-section .container,
    .gallery-youtube-section .container,
    .map-section .container,
    .breaking-news-container .container-fluid {
        max-width: 320px !important;
        margin: 0 auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Quick Menu Grid Adjustments */
    .quick-menu-ppid .row.justify-content-center {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .quick-menu-ppid .col-6 {
        padding-left: 3px !important;
        padding-right: 3px !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .quick-menu-card {
        margin-bottom: 8px !important;
        padding: 15px 8px !important;
        min-height: 100px !important;
    }
    
    /* Officials Section */
    .officials-carousel-container {
        max-width: 300px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .carousel-slide {
        padding: 0 5px !important;
    }
    
    .official-card-homepage {
        margin: 0 auto !important;
        max-width: 280px !important;
    }
    
    /* Statistics Section */
    .statistics-section .row.justify-content-center {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .statistics-section .col-lg-3,
    .statistics-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .stat-card {
        margin: 0 auto 15px auto !important;
        max-width: 290px !important;
    }
    
    /* Agenda Section */
    .agenda-section .row.justify-content-center,
    .agenda-section .row {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .agenda-section .col-lg-4,
    .agenda-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .agenda-card {
        margin: 0 auto 15px auto !important;
        max-width: 290px !important;
    }
    
    /* Fasilitas Section */
    .fasilitas-section .row.justify-content-center,
    .fasilitas-section .row {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .fasilitas-section .col-lg-4,
    .fasilitas-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .fasilitas-card {
        margin: 0 auto 15px auto !important;
        max-width: 290px !important;
    }
    
    /* News Section */
    .news-section .row {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .news-section .col-lg-4,
    .news-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    .news-card {
        margin: 0 auto 15px auto !important;
        max-width: 290px !important;
    }
    
    /* Gallery & YouTube Section */
    .gallery-youtube-section .row {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .gallery-youtube-section .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 30px !important;
    }
    
    .gallery-youtube-section .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    
    /* Map Section */
    .map-section .row.justify-content-center {
        max-width: 300px !important;
        margin: 0 auto !important;
    }
    
    .map-section .col-lg-10 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Section Titles and Subtitles */
    .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
        padding: 0 10px !important;
    }
    
    .section-subtitle {
        font-size: 0.9rem !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
    }
    
    /* Buttons */
    .btn-lg {
        font-size: 0.9rem !important;
        padding: 8px 16px !important;
    }
    
    /* Breaking News */
    .breaking-news-container {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
    
    .breaking-news-ticker {
        padding: 0 10px !important;
    }
    
    /* Ensure no horizontal overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    
    /* Override any conflicting styles */
    .container-fluid {
        max-width: 320px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .container,
    .container-fluid {
        max-width: 300px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .quick-menu-ppid .row.justify-content-center,
    .officials-carousel-container,
    .statistics-section .row.justify-content-center,
    .agenda-section .row,
    .fasilitas-section .row,
    .news-section .row,
    .gallery-youtube-section .row,
    .map-section .row.justify-content-center {
        max-width: 280px !important;
    }
    
    .stat-card,
    .agenda-card,
    .fasilitas-card,
    .news-card,
    .official-card-homepage {
        max-width: 270px !important;
    }
}