/* ==================== MOBILE LEADERSHIP SECTION - GRID LAYOUT FIX ==================== */
/* Display leadership in grid format to reduce white space on mobile */

@media (max-width: 768px) {

    /* Leadership Row Container */
    .leadership-row {
        padding: 1rem 0.5rem !important;
        background: #F5EFE7 !important;
        border-bottom: 1px solid #D4C5B0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Leadership Inline - Grid Layout */
    .leadership-inline {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: visible !important;
    }

    /* Individual Leader Cards - Compact Grid Items */
    .leadership-inline .leader-item,
    .leader-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0.4rem !important;
        padding: 0.6rem 0.3rem !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
        width: 100% !important;
        min-height: auto !important;
        margin: 0 !important;
        border: 1px solid #E8E8E5 !important;
        text-align: center !important;
    }

    /* Leader Images */
    .leadership-inline .leader-img,
    .leader-img {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        border: 2px solid #D4B896 !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
        background: white !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Leader Info Container */
    .leadership-inline .leader-info,
    .leader-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.15rem !important;
        width: 100% !important;
    }

    /* Designation Text */
    .leadership-inline .leader-info span,
    .leader-info span {
        font-size: 0.5rem !important;
        font-weight: 600 !important;
        color: #606058 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Name Text */
    .leadership-inline .leader-info p,
    .leader-info p {
        font-size: 0.6rem !important;
        font-weight: 700 !important;
        color: #202018 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Hover Effect */
    .leadership-inline .leader-item:hover,
    .leader-item:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
        transform: translateY(-1px) !important;
        transition: all 0.2s ease !important;
    }
}

/* Extra Small Mobile Devices (< 480px) - 2 columns for very small screens */
@media (max-width: 480px) {
    .leadership-row {
        padding: 0.75rem 0.25rem !important;
    }

    .leadership-inline {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .leadership-inline .leader-item,
    .leader-item {
        padding: 0.5rem 0.25rem !important;
        gap: 0.3rem !important;
    }

    .leadership-inline .leader-img,
    .leader-img {
        width: 45px !important;
        height: 45px !important;
    }

    .leadership-inline .leader-info span,
    .leader-info span {
        font-size: 0.45rem !important;
    }

    .leadership-inline .leader-info p,
    .leader-info p {
        font-size: 0.55rem !important;
    }
}

/* Medium Mobile Devices (481px - 600px) - 3 columns */
@media (min-width: 481px) and (max-width: 600px) {
    .leadership-inline {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Larger Mobile/Small Tablet (601px - 768px) - 5 columns */
@media (min-width: 601px) and (max-width: 768px) {
    .leadership-inline {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.6rem !important;
    }

    .leadership-inline .leader-img,
    .leader-img {
        width: 45px !important;
        height: 45px !important;
    }

    .leadership-inline .leader-info span,
    .leader-info span {
        font-size: 0.45rem !important;
    }

    .leadership-inline .leader-info p,
    .leader-info p {
        font-size: 0.55rem !important;
    }
}

/* Ensure desktop view is not affected */
@media (min-width: 769px) {
    .leadership-row {
        padding: 1rem 0 !important;
    }

    .leadership-inline {
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
    }

    .leader-item {
        flex-direction: column !important;
        text-align: center !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .leader-info {
        align-items: center !important;
        text-align: center !important;
    }
}