/*
 * Team grid: shared by the home page teaser (sections/home-teachers.php,
 * which also renders the title and "all teachers" link) and the full
 * roster (sections/teachers-list.php, grid only) - same dual-use pattern
 * as .courses in 05-courses-grid.css. Both render partials/teacher-card.php,
 * so the "smaller on home" request is scoped via the `.team--compact`
 * ancestor (descendant selectors below), not a modifier class on the card
 * itself - the partial stays identical in both places.
 *
 * Card is the photo itself (position: relative, full-bleed <img>) on the
 * shared .lift-card skin (00-lift-card.css), with
 * name/bio absolutely positioned over its bottom edge. Two stacked layers
 * make that readable without a separate text block below the photo:
 * `.team-card__blur` (backdrop-filter, masked so it fades in from the
 * bottom) softens the busy parts of the photo behind the text, and
 * `.team-card__scrim` (gradient, transparent at top to dark at bottom)
 * darkens the same area for contrast. Both fade out before the top of the
 * photo so the portrait itself stays sharp and unobscured up there.
 */

.team {
    padding: 3vw 0 4.5vw;
}

.team__title {
    font-size: 1.88vw;
    margin: 0 0 2.08vw;
}

.team-grid {
    --bs-gutter-x: 1.67vw;
    --bs-gutter-y: 1.67vw;
    margin: 0 0 2.08vw;
}

.team__all-link {
    display: inline-block;
    font-weight: 700;
    color: var(--color-accent);
}

.team-card {
    aspect-ratio: 3 / 4;
}

.team-card__image {
    object-fit: cover;
}

.team-card__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-heading);
    font-size: 6.25vw;
    font-weight: 700;
    letter-spacing: 0.1vw;
}

.team-card__blur {
    backdrop-filter: blur(0.63vw);
    -webkit-backdrop-filter: blur(0.63vw);
    mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 60%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 30%, transparent 60%);
}

.team-card__scrim {
    background: linear-gradient(to top, rgba(15, 34, 66, 0.92) 0%, rgba(15, 34, 66, 0.55) 32%, rgba(15, 34, 66, 0) 62%);
}

.team-card__body {
    z-index: 1;
    padding: 1.25vw;
}

.team-card__name {
    font-size: 1.15vw;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.31vw;
    /* Surnames here run to a single 15-character word and the card clips
       (overflow: hidden on the article), so a name too wide for its column
       has to wrap rather than disappear off the edge. */
    overflow-wrap: break-word;
}

.team-card__bio {
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* .team--compact: home page teaser - smaller cards running in the shared
   slider skin, four per view on desktop and one on mobile. The slider sits
   inside .container so the skin's arrows hang in the page gutter. Slide
   widths come from the skin's `--cards-4`/`--fill-*` classes (00-slider.css);
   this row only runs a narrower gap than the skin's default. */
.team__slider {
    --slider-gap: 1.04vw;
    margin: 0 0 2.08vw;
}

.team--compact .team-card__body {
    padding: 0.83vw;
}

.team--compact .team-card__name {
    font-size: 0.83vw;
    margin: 0 0 0.21vw;
}

.team--compact .team-card__bio {
    font-size: 0.73vw;
    -webkit-line-clamp: 2;
}

@media only screen and (max-width: 767.98px) {
    .team__title {
        font-size: 6.4vw;
        margin: 0 0 5.33vw;
    }

    .team {
        padding: 6vw 0 9vw;
    }

    .team-grid {
        --bs-gutter-x: 5.33vw;
        --bs-gutter-y: 5.33vw;
        margin: 0 0 5.33vw;
    }

    .team__slider {
        --slider-gap: 4vw;
        margin: 0 0 5.33vw;
    }

    .team-card__body,
    .team--compact .team-card__body {
        padding: 4vw;
    }

    .team-card__name,
    .team--compact .team-card__name {
        font-size: 4.53vw;
        margin: 0 0 1.6vw;
    }

    .team-card__bio,
    .team--compact .team-card__bio {
        font-size: 3.73vw;
        -webkit-line-clamp: 3;
    }

    /*
     * The figures above are calibrated for a full-width card - the home
     * teaser's slide (330px) and nothing else. The roster grid
     * (sections/teachers-list.php) runs two cards per row, so a card is
     * 155px wide and 207px tall: 17px names overflow the column and a
     * three-line 14px bio pushes the text block up to ~72% of the card,
     * well above the point where the shared scrim has faded to nothing.
     * Type and padding come down, the bio drops to two lines, and the
     * scrim is raised to cover the block that is actually there.
     */
    .team-grid .team-card__scrim {
        background: linear-gradient(to top, rgba(15, 34, 66, 0.94) 0%, rgba(15, 34, 66, 0.82) 40%, rgba(15, 34, 66, 0) 72%);
    }

    .team-grid .team-card__body {
        padding: 3.2vw;
    }

    .team-grid .team-card__name {
        font-size: 3.73vw;
        line-height: 1.3;
        margin: 0 0 1.07vw;
    }

    .team-grid .team-card__bio {
        font-size: 3.2vw;
        line-height: 1.4;
        -webkit-line-clamp: 2;
    }

    .team-card__initials {
        font-size: 20vw;
    }
}