/* ============================================================
   AI CREW GROUP PICTURE  (homepage #team band + /about-us/, 2026-10-11)
   Markup: adp_ai_crew_group() in includes/team.php. The picture is a
   transparent WebP (contact shadows baked in), so it sits on the light
   grey band without a frame. Badge = .ai-badge (about-us/team.css),
   link = .tp-link (same file) - copied here because the homepage does
   not load team.css.
   ============================================================ */
/* Not full width: about two thirds of the container (Markus, 2026-10-12) */
.ai-crew {
    max-width: 760px;
    margin: 0 auto var(--space-2xl);
}

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

.ai-crew__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-md);
    font-family: var(--font-primary);
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-normal);
    color: var(--color-text-dark);
    text-align: center;
}

.ai-crew__badge {
    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;
}

.ai-crew__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    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);
}

.ai-crew__link:hover { gap: 11px; }

/* /about-us/: the picture follows the people card instead of leading */
.about-team .ai-crew { margin: var(--space-3xl) auto 0; }

@media (max-width: 600px) {
    .ai-crew { margin-bottom: var(--space-xl); }
    .about-team .ai-crew { margin-top: var(--space-2xl); }
    .ai-crew__caption { font-size: var(--text-base); }
}

@media (prefers-reduced-motion: reduce) {
    .ai-crew__link { transition: none; }
}


/* ============================================================
   AI CREW CARD  (homepage #team, below the people card, 2026-10-12)
   Markup: adp_ai_crew_card() in includes/team.php - a copy of the people
   card (.process__enterprise--team + .team-card__people panel, styles3.css
   section 38) with the group picture in the panel instead of the bubbles.
   The picture is absolutely placed, so it never sets the card height:
   both cards stay the same size and the crew is really tuned down.
   The panel is as wide as the people panel (8 bubbles + its padding), so
   the text columns of both cards line up.
   ============================================================ */
.process__enterprise--crew { margin-top: var(--space-lg); }

.team-card__crew {
    position: relative;
    width: calc(8 * 52px - 7 * 12px + 2 * var(--space-xl) - 12px);
    min-height: 120px;
}

.team-card__crew-link {
    position: absolute;
    inset: var(--space-sm) var(--space-md);
    display: block;
    border-radius: var(--radius-lg);
}

.team-card__crew-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    transition: transform var(--transition-fast);
}

.team-card__crew-link:hover .team-card__crew-img { transform: translateY(-3px); }

.team-card__crew-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

@media (max-width: 1200px) {
    .team-card__crew { width: calc(8 * 46px - 7 * 11px + 2 * var(--space-xl) - 12px); }
}

/* <= 1024px the card stacks (styles3.css) and the panel spans the card width */
@media (max-width: 1024px) {
    .team-card__crew { width: auto; height: 200px; }
}

@media (max-width: 480px) {
    .team-card__crew { height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .team-card__crew-img { transition: none; }
}