/* Mobile Responsive Fixes - Gram Panchayat Website */
/* Ensures compliance with: Mobile First, Stacked Layout, Sticky Header, Readable Fonts */

@media (max-width: 768px) {

    /* --- GLOBAL & TYPOGRAPHY --- */
    html,
    body {
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        width: 100%;
        font-size: 15px;
        /* Readable base size */
    }

    /* --- HEADER --- */
    .header {
        position: sticky;
        top: 0;
        z-index: 1000;
        /* Ensure header stays on top */
        width: 100%;
        height: auto;
    }

    /* Header Container - Stack Elements */
    .header-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.75rem;
        gap: 0.75rem;
    }

    /* 1. Title & Logo (Center Top) */
    .header-center-block {
        order: 1;
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .village-title {
        font-size: 1.3rem !important;
        white-space: normal !important;
        /* Allow wrapping */
        line-height: 1.3;
        text-align: center;
        width: 100%;
    }

    .gp-logo {
        width: 50px;
        height: 50px;
        margin-top: 5px;
    }

    /* 2. Menu Button & Language (Row below title) */
    .header-right {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
    }

    .seal-lang-container {
        flex-direction: row;
        /* Keep seal and lang side-by-side */
    }

    .lang-select {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    /* Hamburger Menu Button */
    .mobile-menu-btn {
        display: block !important;
        /* Ensure visible */
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.9);
        border: 2px solid #000000;
        border-radius: 8px;
        color: #000000 !important;
        z-index: 1002;
    }

    .mobile-menu-btn svg {
        stroke: #000000 !important;
        width: 28px;
        height: 28px;
    }

    /* 3. LGD ID & Details (Bottom of header or hidden if too cluttered - stacking at bottom) */
    .village-title-container {
        order: 3;
        width: 100%;
        justify-content: center !important;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.5rem;
    }

    .id-center {
        flex-direction: row;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .id-value {
        font-size: 1rem !important;
        padding: 0.25rem 1rem !important;
    }

    /* --- LEADERSHIP SECTION --- */
    /* 2 Column Grid for Leadership on Mobile - Card Style */
    .leadership-inline {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 items per row */
        gap: 12px !important;
        padding: 12px !important;
        justify-content: center !important;
        width: 100% !important;
        background-color: #f5f5f5 !important;
        /* Light background for contrast */
        overflow-x: hidden !important;
        /* Prevent horizontal scroll in grid mode */
        flex-wrap: wrap !important;
        /* Ensure wrapping happens in grid */
    }

    .leader-item {
        width: 100% !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 15px 10px !important;
        background: #ffffff !important;
        /* White card */
        border-radius: 12px !important;
        /* Rounded corners */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
        /* Soft shadow */
        border: none !important;
    }

    .leader-img {
        width: 75px !important;
        height: 75px !important;
        margin-bottom: 10px !important;
        border-radius: 50% !important;
        border: 3px solid #d4a373 !important;
        /* Gold border around image */
        object-fit: cover !important;
        padding: 2px !important;
        /* Space between image and border */
        background: #fff !important;
    }

    /* More specific selectors to override previous styles */
    .leadership-inline .leader-info p {
        font-size: 0.85rem !important;
        /* Name size */
        font-weight: 700 !important;
        color: #000 !important;
        margin: 0;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .leadership-inline .leader-info span {
        font-size: 0.65rem !important;
        /* Designation size */
        color: #777 !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 4px !important;
        text-align: center !important;
        display: block !important;
    }

    /* --- MAIN CONTENT --- */
    /* Stack Layout containers */
    .main-content-grid,
    .slider-population-container,
    .members-grid-area {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 1.5rem !important;
    }

    /* Schemes & GP Members - 2 Column Grid */
    .schemes-row,
    .gp-members-home-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 items per row */
        gap: 10px !important;
        width: 100% !important;
    }

    /* Ensure Scheme items fit */
    .scheme-card-box,
    .member-card {
        width: 100% !important;
        margin: 0 !important;
    }

    .main-layout-wrapper {
        padding: 0.5rem;
        /* Reduce padding */
    }

    /* Slideshow */
    .slideshow {
        height: 220px !important;
        /* Reduce height */
        width: 100% !important;
    }

    /* Sidebar Content (Population) */
    .population-sidebar,
    .sticky-panel {
        width: 100% !important;
        position: static !important;
    }

    /* --- BUTTONS & TOUCH TARGETS --- */
    button,
    a,
    input,
    select {
        min-height: 44px;
        /* Touch friendly */
    }

    /* --- FOOTER --- */
    .footer-container {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 1rem;
    }

    .footer-container>div {
        width: 100%;
    }

    /* --- SIDEBAR MENU --- */
    .sidebar {
        width: 85%;
        max-width: 320px;
    }

    .sidebar-nav a {
        padding: 1rem 1.5rem;
        /* Larger touch area */
        font-size: 1.1rem;
    }
}