/* Leadership Team — auto-balanced columns from the CMS-driven --team-cols var.
   Default in style.css is 4; we honour the inline custom prop so the partial
   can switch to 3 cols when N % 4 == 1 (e.g. 5, 9, 13 members). */
.leadership-team .team-grid {
    grid-template-columns: repeat(var(--team-cols, 4), minmax(0, 1fr));
}

/* With no bios/modal in play we can hide the photo overlay entirely. */
.leadership-team .team-card__overlay {
    display: none;
}

/* ── Hover choreography ──
   When any card in the grid is hovered:
   - All cards shrink slightly
   - The hovered card grows + lifts (higher z-index for clean overlap)
   - The photo image grows a touch more inside the card
   - On the hovered card: arrow slides in to the left of the LinkedIn icon,
     icon slides right and highlights in brand green */
.leadership-team .team-card {
    cursor: pointer;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.25, 1),
                box-shadow 0.4s cubic-bezier(0.2, 0.7, 0.25, 1),
                opacity 0.4s ease;
    transform-origin: center;
    position: relative;
    will-change: transform;
}

/* Default lift removed — we replace it with the scale-based effect below */
.leadership-team .team-card:hover {
    transform: none;
}

/* When any card in the grid is hovered, dim/shrink the rest. */
.leadership-team .team-grid:hover .team-card {
    transform: scale(0.96);
    opacity: 0.7;
}
/* …except the actually hovered one, which grows + comes to the front. */
.leadership-team .team-grid:hover .team-card:hover {
    transform: scale(1.05);
    opacity: 1;
    box-shadow: var(--shadow-xl);
    z-index: 2;
}

/* Image-only scale — applied on top of the card scale for extra depth. */
.leadership-team .team-card__photo img {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.leadership-team .team-card:hover .team-card__photo img {
    transform: scale(1.05);
}

/* Social row layout — flex with a fixed gap so the arrow's expanding width
   pushes the icon to the right by a predictable amount. */
.leadership-team .team-card__social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    min-height: 32px;
}

/* Arrow: collapsed (zero width, faded) at rest; expands and fades in on
   card hover so it appears to the left of the icon. */
.leadership-team .team-card__social-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    width: 0;
    opacity: 0;
    color: var(--primary);
    transform: translateX(-6px);
    transition: width 0.35s cubic-bezier(0.2, 0.7, 0.25, 1),
                opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.leadership-team .team-card:hover .team-card__social-arrow {
    width: 20px;
    opacity: 1;
    transform: translateX(0);
}

/* LinkedIn icon: replaces the old <a> styling. Highlights to brand green
   on card hover. The translateX is a tiny accent on top of the natural
   shift produced by the arrow expanding. */
.leadership-team .team-card__social-icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg-warm);
    color: var(--text-light);
    flex: 0 0 auto;
    transition: background var(--transition),
                color var(--transition),
                transform 0.35s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.leadership-team .team-card:hover .team-card__social-icon {
    background: var(--primary);
    color: #fff;
    transform: translateX(2px);
}

/* Mobile override — force 2 columns regardless of the CMS-driven
   --team-cols variable. The default rule above wins specificity
   against the unscoped .team-grid mobile rules in style.css (two
   classes vs one), so we need this scoped override to drop to 2-up
   on mobile. Without this, mobile would keep rendering 4-up (or
   whatever --team-cols says) and shove faces into thumbnail size. */
@media (max-width: 768px) {
    .leadership-team .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}