/* res_barangayoverview.css - Responsive styles for images */
/* MOBILE FIRST APPROACH - Adapts image grid for all screen sizes */

/* Mobile Styles (up to 768px) */
@media (max-width: 768px) {
    /* Overview Section */
    .overview-section {
        flex-direction: column;
        padding: 1rem;
        gap: 2rem;
        margin-top: 60px;
    }

    .overview-section .content {
        flex: 1 1 100%;
        max-width: 100%;
        padding-right: 0;
    }

    /* FIX: Image container - 2 column grid for mobile */
    .overview-section .image-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        max-width: 100%;
    }

    /* FIX: Disable large image spans on mobile */
    .overview-image:nth-child(1),
    .overview-image:nth-child(7),
    .overview-image:nth-child(13) {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* FIX: Remove offset effects on mobile for cleaner layout */
    .overview-image:nth-child(odd) {
        margin-top: 0;
    }

    /* Mission Vision Section */
    .mission-vision {
        flex-direction: column;
        padding: 1rem;
        gap: 1.5rem;
    }

    .mission, .vision {
        flex: 1 1 100%;
        width: 100% !important;
        min-height: auto;
    }

    /* Officials Section */
    .officials-section {
        padding: 1rem;
    }

    .brgytitle {
        font-size: 2rem;
        text-align: center;
    }

    .section-description {
        width: 90% !important;
        text-align: center;
        font-size: 1rem;
    }

    /* Officials Layout */
    .officials-container {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .punong-barangay {
        flex: 1 1 100%;
        max-width: 300px;
    }

    .officials-right {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100%;
    }

    .official-card {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* Prevent horizontal scrolling */
    body {
        overflow-x: hidden;
    }
}

/* Tablet Styles (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .overview-section {
        gap: 3rem;
        padding: 1.5rem;
    }

    .overview-section .content {
        flex: 1 1 45%;
    }

    /* FIX: Image container - 3 column grid for tablet */
    .overview-section .image-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        flex: 1 1 45%;
        max-width: 100%;
    }

    /* FIX: Disable some large spans on tablet to prevent gaps */
    .overview-image:nth-child(1) {
        grid-column: span 1;
        grid-row: span 1;
    }

    .overview-image:nth-child(7),
    .overview-image:nth-child(13) {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Mission Vision Section */
    .mission-vision {
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .mission, .vision {
        flex: 1 1 45%;
        width: 100% !important;
    }

    /* Officials Section */
    .officials-right {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .official-card {
        width: 100%;
        max-width: 280px;
    }

    .section-description {
        width: 70% !important;
    }
}

/* Small Desktop (1025px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
    .overview-section .image-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.3rem;
    }

    /* Keep some large spans for visual interest */
    .overview-image:nth-child(1),
    .overview-image:nth-child(7),
    .overview-image:nth-child(13) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .officials-right {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* Large Desktop (1201px and above) */
@media (min-width: 1201px) {
    .overview-section .image-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.3rem;
    }

    /* Original large image spans apply */
    .overview-image:nth-child(1),
    .overview-image:nth-child(7),
    .overview-image:nth-child(13) {
        grid-column: span 2;
        grid-row: span 2;
    }
}

/* General responsive fixes - applies to all screens */
.overview-section,
.mission-vision,
.officials-section {
    box-sizing: border-box;
}

.mission, .vision {
    box-sizing: border-box;
}

.officials-container {
    box-sizing: border-box;
}

/* Ensure images are always responsive */
.overview-image {
    width: 100%;
    height: 100%;
}

/* Smooth hover effect for all devices */
@media (hover: hover) {
    .overview-image:hover {
        transform: scale(1.05);
    }

    .official-card:hover {
        transform: scale(1.05);
    }
}