/* ============================================================
   Team section variants for /about-us/team-options.php (internal
   comparison page, not linked). Whichever variant is chosen moves
   into about.css. Colours: styles3.css tokens only.
   Portraits: /Common/Assets/team/<name>.webp|jpg, 480x480, B/W,
   same framing for everyone (eyes at ~41 % of the height).
   ============================================================ */

/* --- shared portrait circle --------------------------------- */
.team-face {
    --size: 160px;
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 0 auto var(--space-md);
    background: var(--color-bg-light);
    box-shadow: 0 0 0 3px var(--color-bg-white), 0 0 0 5px var(--color-border-light);
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.team-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-member:hover .team-face { transform: translateY(-4px); }

.lp-section--dark .team-face {
    background: var(--color-navy-deep);
    box-shadow: 0 0 0 3px var(--color-bg-dark), 0 0 0 5px var(--color-accent-on-dark);
}

/* empty slot for a role with no photo yet */
.team-face--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-body);
    background: transparent;
    box-shadow: none;
    border: 2px dashed var(--color-border-light);
}

.lp-section--dark .team-face--empty {
    background: transparent;
    box-shadow: none;
    border-color: var(--color-border-dark);
    color: rgba(255, 255, 255, 0.5);
}

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

.team-member__name {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-dark);
    margin: 0 0 2px;
}

.team-member__role {
    font-size: var(--text-sm);
    color: var(--color-text-body);
    margin: 0;
}

.lp-section--dark .team-member__name { color: var(--color-text-white); }
.lp-section--dark .team-member__role { color: var(--color-accent-on-dark); }

/* "placeholder" marker on unconfirmed roles */
.team-ph {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    border: 1px dashed currentColor;
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-accent-on-light);
}

.lp-section--dark .team-ph { color: var(--color-accent-on-dark); }

/* --- option label above each variant ------------------------ */
.team-option-label {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-light);
}

.team-option-label .container {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
}

.team-option-label strong {
    font-size: var(--text-lg);
    color: var(--color-text-dark);
}

.team-option-label span {
    font-size: var(--text-sm);
    color: var(--color-text-body);
}

.team-intro {
    max-width: 760px;
    margin: 0 0 var(--space-md);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--color-text-body);
}

.team-intro li { margin-bottom: var(--space-xs); }

/* --- A: founders large + heads medium, one row --------------- */
.team-a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-2xl) var(--space-xl);
}

.team-a .team-member { width: 170px; }
.team-a .team-member--lead { width: 240px; }
.team-a .team-member--lead .team-face { --size: 220px; }
.team-a .team-member--lead .team-member__name { font-size: var(--text-lg); }
.team-a .team-face { --size: 160px; }

/* --- B: leadership row + strip with everyone else ------------
   flex, not a 4-column grid: founders + leads are 5 people, and a short
   row centres instead of leaving a lone circle hanging left. */
.team-b {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xl) var(--space-lg);
    max-width: 1000px;
    margin: 0 auto;
}

.team-b .team-member { width: 180px; }

.team-b .team-face { --size: 180px; }

.team-strip {
    max-width: 1000px;
    margin: var(--space-3xl) auto 0;
    padding-top: var(--space-2xl);
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg) var(--space-2xl);
}

.team-strip__title {
    flex: 0 0 100%;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-accent-on-light);
    margin: 0;
}

.team-strip .team-face { --size: 96px; margin-bottom: var(--space-sm); }
.team-strip .team-member__name { font-size: var(--text-sm); }

/* --- C: compact single row of equal circles ------------------ */
.team-c {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl) var(--space-lg);
}

.team-c { gap: var(--space-xl) var(--space-md); }
.team-c .team-member { width: 120px; }
.team-c .team-face { --size: 104px; margin-bottom: var(--space-sm); }
.team-c .team-member__name { font-size: var(--text-base); }
.team-c .team-member__role { font-size: var(--text-xs); line-height: 1.35; }
.team-c .team-ph { font-size: 9px; letter-spacing: 0.4px; padding: 2px 6px; white-space: nowrap; }

@media (max-width: 900px) {
    .team-b .team-member { width: 150px; }
    .team-b .team-face { --size: 140px; }
}

@media (max-width: 600px) {
    .team-a { gap: var(--space-xl) var(--space-md); }
    .team-a .team-member,
    .team-a .team-member--lead { width: calc(50% - var(--space-md)); }
    .team-a .team-member--lead .team-face { --size: 148px; }
    .team-a .team-face { --size: 120px; }
    .team-b .team-member { width: calc(50% - var(--space-lg) / 2); }
    .team-b .team-face { --size: 124px; }
    .team-strip { gap: var(--space-md) var(--space-lg); }
    .team-strip .team-face { --size: 80px; }
    .team-c .team-member { width: calc(33.333% - var(--space-md)); }
    .team-c .team-face { --size: 92px; }
}


/* ============================================================
   TEAM PAGE  /about-us/team/  +  team grid on /about-us/  (2026-10-09)
   Markus, 2nd round: no tiers - ONE flowing grid of equal circles, teams
   mixed, the role says who leads. Then the AI colleagues row.
   Markup: includes/team.php (adp_team_grid / adp_ai_grid).
   Colours: scheme tokens only - checked in yellow and data-scheme="default".
   ============================================================ */

/* initials circle for people without a photo yet */
.team-face--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-navy-diag);
    color: var(--color-accent-on-dark);
    font-size: calc(var(--size) * 0.3);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 1px;
    line-height: 1;
    user-select: none;
}

/* small text link with arrow (same look as .lp-office__link) */
.tp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-lg);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent-on-light);
    text-decoration: none;
    white-space: nowrap;
    transition: gap var(--transition-fast);
}

.tp-link:hover { gap: 11px; }

/* --- the grid: equal circles, last row centred --------------------
   --cols = people per row, --face = circle size. Each cell takes an exact
   1/cols share, so rows line up; flex (not grid) so a short last row
   centres instead of hanging left. */
.team-grid {
    --cols: 6;
    --face: 136px;
    --gap-x: var(--space-lg);
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xl) var(--gap-x);
}

.team-grid > .team-member {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    min-width: 0;
}

.team-grid .team-face { --size: var(--face); margin-bottom: var(--space-md); }
.team-grid .team-member__name { font-size: var(--text-md); }
.team-grid .team-member__role { font-size: var(--text-sm); line-height: 1.4; }
/* founders: "Founder" and the area on two lines, so both read alike */
.team-grid .team-member__sep { display: none; }
.team-grid .team-member__area { display: block; }

/* compact version on /about-us/ */
.team-grid--compact {
    --cols: 5;
    --face: 112px;
    gap: var(--space-xl) var(--gap-x);
}

.team-grid--compact .team-face { margin-bottom: var(--space-sm); }

/* --- AI crew: full-body cards (2026-10-11) ------------------------
   One card size for everybody and one scale: the animals stand small at
   the bottom of the same card instead of being zoomed up (Markus). Same
   flex logic as .team-grid so a short last row centres. */
.ai-cards {
    --cols: 7;
    --gap-x: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl) var(--gap-x);
}

.ai-card {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    min-width: 0;
    text-align: center;
}

.ai-card__img {
    position: relative;
    display: block;
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-xl);
    background: var(--color-bg-white);
    overflow: hidden;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.ai-card__img img {
    display: block;
    width: 100%;
    height: auto;
}

.ai-card:hover .ai-card__img {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 36, 89, 0.1);
}

.ai-card .team-member__role { font-size: var(--text-sm); line-height: 1.4; }

/* the rest of the crew behind "Show all" (adp_ai_cards(), 2026-10-12) */
.ai-cards--more { margin-top: var(--space-xl); }

.ai-cards__toggle {
    display: flex;
    justify-content: center;
    margin-top: var(--space-2xl);
}

/* the badge sits on the rim, bottom right, so nobody mistakes an agent for a person */
.ai-badge {
    position: absolute;
    right: 0;
    bottom: 4px;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    line-height: 1.5;
    box-shadow: 0 0 0 3px var(--color-bg-white);
    pointer-events: none;
}

.lp-section--light .ai-badge { box-shadow: 0 0 0 3px var(--color-bg-light); }
.ai-card .ai-badge { top: 10px; right: 10px; bottom: auto; box-shadow: none; }
.lp-section--dark .ai-badge { box-shadow: 0 0 0 3px var(--color-bg-dark); }

.lp-section--dark .lp-section__intro { color: rgba(255, 255, 255, 0.75); }

/* on grey bands the white gap ring would show - use the band colour */
.lp-section--light .team-face { box-shadow: 0 0 0 3px var(--color-bg-light), 0 0 0 5px var(--color-border-light); }

@media (max-width: 1100px) {
    .team-grid { --cols: 4; }
    .ai-cards { --cols: 5; }
}

@media (max-width: 600px) {
    .team-grid,
    .team-grid--compact { --cols: 3; --face: 88px; --gap-x: var(--space-md); gap: var(--space-xl) var(--gap-x); }
    .ai-cards { --cols: 3; --gap-x: var(--space-sm); gap: var(--space-lg) var(--gap-x); }
    .ai-card .team-member__role { font-size: var(--text-xs); }
    .ai-card .ai-badge { top: 6px; right: 6px; }
    .team-grid .team-member__name { font-size: var(--text-base); }
    .team-grid .team-member__role { font-size: var(--text-xs); }
    .ai-badge { font-size: 10px; padding: 1px 7px; bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-card__img { transition: none; }
    .ai-card:hover .ai-card__img { transform: none; }
}