/* =========================================
   LEADERSHIP PAGE STYLES
========================================= */

.leadership-page {
    margin-top: var(--space-6);
}

/* Responsive grid for leadership cards */
.leadership-page .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

/* Leadership card */
.leader-card {
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
    max-width: 340px;   /* prevents overly wide cards */
    margin: 0 auto;     /* centers each card */
    text-align: center;
}

/* Photo */
.leader-photo img {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Info */
.leader-info h2 {
    margin-top: var(--space-3);
}

.leader-title {
    font-weight: 600;
    color: var(--color-navy);
    margin-bottom: var(--space-3);
}

.leader-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.leader-info li {
    margin-bottom: var(--space-2);
}

/* Give all leader photos a consistent display area */
.leader-photo {
    height: 260px;              /* adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;           /* hides overflow from taller images */
}

/* Ensure images scale nicely inside the fixed-height box */
.leader-photo img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;          /* keeps proportions while filling space */
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* Mobile */
@media (max-width: 768px) {
    .leader-card {
        text-align: center;
    }

    .leader-photo img {
        margin: 0 auto;
    }
}