/**
 * Team: people cards. A portrait, name, role and optional contact line, three
 * or four per row; or a compact row with round photos.
 *
 * globalClass: team   (the row) and team-member (each person)
 *
 * Row variants:
 *   team--4          four per row from 990px (default 3)
 *   team--compact    small round photos, centered name and role
 *   team-loop        container around a GB Query Loop (post type team_member)
 *                    whose post template container is a .team-member; the
 *                    grid's columns and gaps apply (see includes/team/)
 *   team-loop--carousel   the loop's grid scrolls horizontally; uses the
 *                    carousel engine of the cards block (cards.css, cards.js)
 *
 * Structure:
 *   .team.gb-container [.team--4|.team--compact]
 *     .team-member.gb-container
 *       figure > img                    portrait (3:4 box, image absolute)
 *       h3.team-member-name
 *       p.team-member-role
 *       p.team-member-contact           optional: email / phone links
 *       a.gb-button.btn-no-bg.team-member-link   optional; whole card clickable
 *
 * Tuning: --team-gap (24px), --team-photo-ratio (3 / 4), --team-radius (12px)
 *
 * Chain animations: the row is the chain, members animate in order
 * (fadeInFromDown). In a query loop the .team-loop container animates once.
 *
 * Editor: the row's flex layout is repeated on GB's editor layout element.
 */

:root {
    --team-gap: 24px;
    --team-photo-ratio: 3 / 4;
    --team-radius: 12px;
}

/* Row */
.team,
.team > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--team-gap);
    align-items: stretch;
}

.team > .block-editor-inner-blocks {
    width: 100%;
}

/* Member */
.team-member {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 100%;
    min-width: 0;
}

.team-member > * {
    margin: 0;
}

/* Portrait: the figure owns the box, the image fills it */
.team-member figure.gb-block-image,
.team-member [data-type="generateblocks/image"] {
    width: 100%;
    margin: 0 0 12px;
}

.team-member figure.gb-block-image {
    position: relative;
    aspect-ratio: var(--team-photo-ratio);
    border-radius: var(--team-radius);
    overflow: hidden;
}

.team-member figure.gb-block-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member-name {
    font-size: var(--h4-size);
}

.team-member-role {
    opacity: 0.8;
}

.team-member-contact {
    margin-top: 8px;
    font-size: 0.9rem;
}

.team-member-contact a {
    display: block;
    text-decoration: none;
}

/* Link: whole card clickable */
.team-member-link {
    align-self: flex-start;
    margin-top: auto;
    padding-top: 12px;
}

.team-member a.team-member-link::before,
.team-member .team-member-link a::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

@media (hover: hover) {
    .team-member:has(.team-member-link) figure.gb-block-image img {
        transition: transform var(--transition-speed) var(--transition-timing-function);
    }

    .team-member:has(.team-member-link):hover figure.gb-block-image img {
        transform: scale(1.04);
    }
}

/* Compact: round photo, centered text */
.team--compact .team-member {
    align-items: center;
    text-align: center;
}

.team--compact .team-member figure.gb-block-image,
.team--compact .team-member [data-type="generateblocks/image"] {
    width: 120px;
    aspect-ratio: 1;
    border-radius: 50%;
}

.team--compact .team-member-link {
    align-self: center;
}

/* Carousel card width for the loop (the cards engine reads it) */
.team-loop--carousel {
    --cards-card-width: min(70vw, 280px);
}

/* Query loop: GB renders .gb-grid-wrapper > .gb-grid-column > .team-member.
   The loop container is not the flex row itself (the GB grid is), so it
   stays a block and the grid keeps its full width. */
.team.team-loop {
    display: block;
}

.team-loop .gb-grid-wrapper {
    width: auto;
}

.team-loop .gb-grid-column {
    display: flex;
}

.team-loop .gb-grid-column > .team-member {
    flex: 1 1 auto;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .team-member {
        flex-basis: calc((100% - var(--team-gap)) / 2);
    }
}

@media only screen and (min-width: 990px) {
    .team-member {
        flex-basis: calc((100% - 2 * var(--team-gap)) / 3);
    }

    .team--4 > .team-member,
    .team--4 > .block-editor-inner-blocks > .block-editor-block-list__layout > .team-member {
        flex-basis: calc((100% - 3 * var(--team-gap)) / 4);
    }

    .team--compact > .team-member,
    .team--compact > .block-editor-inner-blocks > .block-editor-block-list__layout > .team-member {
        flex-basis: calc((100% - 3 * var(--team-gap)) / 4);
    }
}