/* ==================== LEADERSHIP SECTION - PROPER MOBILE FIX ==================== */
/* Desktop: Keep single row layout (UNCHANGED) */
/* Mobile: 2-3 items per row, no huge gaps, properly visible */

/* Desktop View - KEEP EXACTLY AS IS (min-width: 769px) */
@media (min-width: 769px) {
    .leadership-row {
        width: 100%;
        background: #F5EFE7;
        padding: 1rem 0;
        display: flex;
        justify-content: center;
        border-bottom: 1px solid #D4C5B0;
    }

    .leadership-inline {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.5rem;
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .leadership-inline::-webkit-scrollbar {
        display: none;
    }

    .leadership-inline .leader-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        background: transparent;
        padding: 0.25rem;
        border-radius: 0;
        box-shadow: none;
        border: none;
        flex-shrink: 0;
        flex-grow: 0;
        width: 9%;
        min-width: 85px;
        max-width: 110px;
    }

    .leadership-inline .leader-img {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        border: 3px solid #ffffff;
        object-fit: cover;
        margin-bottom: 0.3rem;
        background: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    }

    .leadership-inline .leader-info {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
        width: 100%;
    }

    .leadership-inline .leader-info span {
        font-size: 0.55rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #5A5A5A;
        letter-spacing: 0.1px;
        line-height: 1.1;
    }

    .leadership-inline .leader-info p {
        font-family: 'Poppins', sans-serif;
        font-size: 0.65rem;
        font-weight: 600;
        color: #8B7355;
        line-height: 1.15;
        margin: 0;
    }
}

/* Mobile View - FIX VISIBILITY (max-width: 768px) */
@media (max-width: 768px) {
    .leadership-row {
        width: 100% !important;
        background: #F5EFE7 !important;
        padding: 1rem 0.5rem !important;
        /* Reduced padding to minimize gaps */
        border-bottom: 1px solid #D4C5B0 !important;
        overflow: visible !important;
    }

    .leadership-inline {
        display: grid !important;
        /* Use grid for 2-3 per row */
        grid-template-columns: repeat(2, 1fr) !important;
        /* 2 items per row on mobile */
        gap: 1rem 0.75rem !important;
        /* Vertical and horizontal gaps */
        width: 100% !important;
        padding: 0 0.5rem !important;
        overflow: visible !important;
        justify-items: center !important;
    }

    .leadership-inline .leader-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: white !important;
        padding: 0.75rem 0.5rem !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        width: 100% !important;
        max-width: 160px !important;
        /* Limit width for better layout */
        min-height: auto !important;
        /* Remove fixed heights */
        margin: 0 !important;
        border: 1px solid #E8E8E5 !important;
    }

    .leadership-inline .leader-img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        border: 2px solid #D4B896 !important;
        object-fit: cover !important;
        margin-bottom: 0.5rem !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
        flex-shrink: 0 !important;
    }

    .leadership-inline .leader-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.25rem !important;
        width: 100% !important;
    }

    .leadership-inline .leader-info span {
        font-size: 0.5rem !important;
        font-weight: 600 !important;
        color: #606058 !important;
        /* Darker for visibility */
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .leadership-inline .leader-info p {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: #202018 !important;
        /* Black for visibility */
        line-height: 1.3 !important;
        margin: 0 !important;
        text-align: center !important;
    }
}

/* Tablet View - 3 items per row (min-width: 481px and max-width: 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .leadership-inline {
        grid-template-columns: repeat(3, 1fr) !important;
        /* 3 items per row on tablet */
        gap: 1rem !important;
    }

    .leadership-inline .leader-item {
        max-width: 140px !important;
    }
}

/* Extra Small Mobile - 2 items per row (max-width: 480px) */
@media (max-width: 480px) {
    .leadership-row {
        padding: 0.75rem 0.25rem !important;
    }

    .leadership-inline {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Keep 2 per row */
        gap: 0.75rem 0.5rem !important;
        padding: 0 0.25rem !important;
    }

    .leadership-inline .leader-item {
        padding: 0.6rem 0.4rem !important;
        max-width: 150px !important;
    }

    .leadership-inline .leader-img {
        width: 55px !important;
        height: 55px !important;
    }

    .leadership-inline .leader-info span {
        font-size: 0.48rem !important;
    }

    .leadership-inline .leader-info p {
        font-size: 0.6rem !important;
    }
}