/* ==========================================================================
   Meet Us section (loads on /meet-us/ and all of its sub-pages)
   The dark interior hero (`page-hero`) is global (see main.css). This file has
   the Meet Us listing (doctor split rows + team grid) and the single-doctor bio
   layout used by each /meet-us/meet-dr-* sub-page.
   ========================================================================== */

/* ---- Doctors — alternating split rows (photo left, text right) ----------- */
.meet-doctors__intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(40px, 5vw, 64px);
    text-align: center;
}

.meet-doctors__title {
    margin: 0;
    color: var(--color-navy);
}

.meet-doctors__list {
    display: grid;
    gap: clamp(30px, 5vw, 40px);
}

/* Halve the photo: give the media a narrow fixed column instead of the
   50/50 svc-split default. Desktop only — the global rule still stacks on
   mobile (max-width: 900px). */
@media (min-width: 901px) {
    .meet-doctor {
        grid-template-columns: minmax(0, 300px) 1fr;
        align-items: start;
    }
}

.meet-doctor__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.meet-doctor__name {
    margin: 0 0 0.5em;
    color: var(--color-navy);
}

.meet-doctor__bio {
    margin: 0 0 1.5em;
    color: var(--color-text);
}

/* ---- Team grid — photo, name, role -------------------------------------- */
.team {
    background-color: var(--color-cream);
}

.team__intro {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(32px, 4vw, 56px);
    text-align: center;
}

.team__title {
    margin: 0;
    color: var(--color-navy);
}

.team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: clamp(24px, 3vw, 40px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.team-card {
    text-align: center;
}

.team-card__image {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.team-card__name {
    margin: 0.5em 0 0.25em;
    font-size: 24px;
    color: var(--color-navy);
}

.team-card__role {
    margin: 0;
    font-size: 20px;
    color: var(--color-gold-dark);
}

/* ---- Single doctor bio (meet-dr-* sub-pages, reuses the svc-split grid) --- *
   Photo in a narrow fixed column, bio prose to the right; stacks on mobile via
   the global svc-split rule (media on top).                                  */
.doctor__body {
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}

@media (min-width: 901px) {
    .doctor__body {
        grid-template-columns: minmax(0, 320px) 1fr;
    }
}

.doctor__image {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.doctor__content > p {
    margin: 0 0 1em;
    color: var(--color-text);
}

.doctor__content > p:last-child {
    margin-bottom: 0;
}

.doctor__subhead {
    margin: 1.5em 0 0.6em;
    font-size: 22px;
    color: var(--color-navy);
}

.doctor__affiliations {
    columns: 15em;
    column-gap: 2.5em;
    padding: 0;
    margin: 0;
    color: var(--color-text);
    list-style: none;
}

.doctor__affiliations li {
    position: relative;
    padding-left: 1.7em;
    margin-bottom: 0.6em;
    /* Keep each item whole when the column breaks. */
    break-inside: avoid;
}

/* Gold check marker — reads as membership / accreditation. */
.doctor__affiliations li::before {
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--color-gold-dark);
    content: "\2713"; /* check mark */
}

.doctor__back {
    display: flex;
    gap: 0.5em;
    align-items: center;
    max-width: 300px;
    margin-top: clamp(32px, 4vw, 48px);
    font-weight: 700;
    color: var(--color-navy);
}

.doctor__back svg {
    width: 50px;
}