/**
 * Team member page: patterns/team-member-header.php and team-member-body.php,
 * the content of the GP elements "Single team member: header" (hook,
 * generate_after_header) and "Single team member: body" (content-template),
 * both with the display rule post:team_member. Wiring: team-page.php.
 *
 * Header structure:
 *   .post-header-section.team-page-header-section.color-section > inner
 *     .team-page-header               grid: portrait | text from 768px
 *       figure > img.team-page-photo  featured image, --team-photo-ratio box
 *       .team-page-intro
 *         p.post-label                role (post meta)
 *         h1.post-title               name
 *         p.post-lead                 excerpt (left out without one, article.php)
 *         ul.team-page-contact        [applari_team_contact]: email, phone, LinkedIn
 * Without a portrait the text takes the article column alone. The label,
 * title and lead are the article header's (css/blocks/post-header.css).
 *
 * Body: sections of their own palette, each left out when empty:
 *   .post-body-section.team-page-content-section   the reading column
 *                                                  (css/article.css)
 *   .post-list-section.team-page-list-section      the person's latest posts
 *   .team-section.team-page-list-section           the rest of the team (team-loop)
 *
 * Animation: the portrait fades in at once, the texts chain like the
 * article header's.
 *
 * Tuning: --team-page-photo-width (portrait width below 768px, 240px)
 */

:root {
    --team-page-photo-width: 240px;
}

/* The page frame: full width like an article (article.css does it for
   article types, a person is not one) */
.single-team_member .site-content {
    padding: 0;
}

.single-team_member .site.grid-container {
    max-width: 100%;
}

.team-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: var(--article-wide-width);
    margin: 0 auto;
}

.team-page-header:not(:has(.team-page-photo)) {
    max-width: var(--article-width);
}

/* GB puts the global class on the img of a dynamic image, so the figure is
   found through it. */
figure:has(> img.team-page-photo) {
    position: relative;
    width: min(100%, var(--team-page-photo-width));
    margin: 0;
    aspect-ratio: var(--team-photo-ratio);
    border-radius: var(--team-radius);
    overflow: hidden;
}

img.team-page-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-page-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
    list-style: none;
}

.team-page-contact li {
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .team-page-header {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: center;
        gap: 48px;
    }

    .team-page-header:not(:has(.team-page-photo)) {
        grid-template-columns: minmax(0, 1fr);
    }

    figure:has(> img.team-page-photo) {
        width: 100%;
    }

    .team-page-contact {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 32px;
    }
}

@media only screen and (min-width: 990px) {
    .team-page-header {
        gap: 80px;
    }
}