/**
 * Team / Therapist profiles section
 */

.team {
    padding-block: clamp(3rem, 2.5rem + 2.5vw, 5.5rem);
    background-color: var(--color-bg);
}

.team__inner {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---- Section heading ---- */

.team__title {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: var(--size-display);
    font-weight: 400;
    line-height: var(--leading-display);
    color: #3d2e1e;
    letter-spacing: -0.015em;
    text-align: center;
}

.team__title em {
    font-style: italic;
    color: var(--color-primary-500);
}

/* ---- Profiles grid ---- */

.team__grid {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    list-style: none;
}

.team__grid--single {
    justify-items: center;
}

/* ---- Individual card ---- */

.team__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 28rem;
    margin-inline: auto;
}

/* ---- Photo ---- */

.team__photo {
    width: clamp(9rem, 8rem + 5vw, 12rem);
    height: clamp(9rem, 8rem + 5vw, 12rem);
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-primary-200);
    box-shadow: 0 2px 16px oklch(0.3 0.02 80 / 0.1);
}

.team__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Name ---- */

.team__name {
    margin-top: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: var(--size-step-1);
    font-weight: 400;
    line-height: var(--leading-snug);
    color: #3d2e1e;
    letter-spacing: -0.01em;
}

/* ---- Bio ---- */

.team__bio {
    margin-top: 0.875rem;
    font-size: var(--size-step--1);
    line-height: var(--leading-relaxed);
    color: #5a5a5a;
    max-width: 34rem;
}

/* ---- CTA button ---- */

.team__cta {
    margin-top: clamp(1.25rem, 1rem + 1.25vw, 1.75rem);
    padding: 0.625em 1.75em;
    font-size: var(--size-step--1);
    border-radius: 0.5rem;
}

/* ---- Tablet+: side-by-side for 2 therapists ---- */

@media (min-width: 42em) {
    .team__grid:not(.team__grid--single) {
        grid-template-columns: repeat(2, 1fr);
    }

    .team__card {
        max-width: none;
    }
}