/*
 * Virgo CMS - Team Card Layout Styles
 *
 * Per-type layout for the team_card grid. The base box model, photo shapes and
 * social icons live in team-base.css; this file owns the hover-effect variants
 * driven by the data-hover-effect attribute (none / overlay / lift).
 *
 * Hover follows the Shadow-Is-State rule: a flat hairline border at rest earns a
 * shadow only when the user engages the card.
 */

/* ============================================
   SQUARE PHOTO CORNER RADIUS (team_card only)
   ============================================ */
/* team_card dropped the "rounded" photo shape; square now owns its own corner
   radius knob (photo_border_radius → --team-photo-radius). This overrides the
   base ".team--shape-square .team__photo { border-radius: 0 }" rule via higher
   specificity + later source order (team-card.css loads after team-base.css).
   Scoped to .team--card so team_carousel / team_profile are untouched. */
.team--card.team--shape-square .team__photo {
    border-radius: var(--team-photo-radius, 0px);
}

/* ============================================
   HOVER: none (informational cards stay put)
   ============================================ */
.team--card[data-hover-effect="none"] .team__card {
    transition: none;
}

/* ============================================
   HOVER: lift (the signature featured-card motion)
   ============================================ */
.team--card[data-hover-effect="lift"] .team__card {
    cursor: default;
}

.team--card[data-hover-effect="lift"] .team__card:hover {
    transform: translateY(-4px);
    border-color: var(--team-border-strong, #c4ccc8);
    /* Lift shadow: green-grey tinted, low-opacity (Elevation vocabulary).
       Blur kept compact so the tail clears the carousel/module edge. */
    box-shadow: 0 2px 4px rgba(26, 36, 33, 0.06),
                0 8px 16px rgba(26, 36, 33, 0.12);
}

.team--card[data-hover-effect="lift"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

.team--card[data-hover-effect="lift"] .team__card:hover .team__photo {
    border-color: var(--team-primary-tint, #e7efec);
}

/* ============================================
   HOVER: overlay (a tonal wash slides over the card body)
   ============================================ */
.team--card[data-hover-effect="overlay"] .team__card {
    position: relative;
    overflow: hidden;
}

/* The overlay is a ::after wash that fades in on hover; it sits behind the body
   so the text stays legible (a Mineral-tinted veil, not a dark scrim). */
.team--card[data-hover-effect="overlay"] .team__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--team-primary-tint, #e7efec);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.team--card[data-hover-effect="overlay"] .team__card > * {
    position: relative;
    z-index: 1;
}

.team--card[data-hover-effect="overlay"] .team__card:hover::after {
    opacity: 1;
}

.team--card[data-hover-effect="overlay"] .team__card:hover {
    border-color: var(--team-primary, #1d6b5e);
}

.team--card[data-hover-effect="overlay"] .team__card:hover .team__name {
    color: var(--team-primary-deep, #155046);
}

/* ============================================
   HOVER: zoom (photo crops in, card stays put)
   The card body is anchored; only the photo scales up gently inside its
   overflow-hidden box. The lightest possible motion — premium and quiet. The
   image owns its own transition so it never animates on first paint.
   ============================================ */
.team--card[data-hover-effect="zoom"] .team__img {
    transition: transform 0.4s ease;
}

.team--card[data-hover-effect="zoom"] .team__card:hover .team__img {
    transform: scale(1.08);
}

.team--card[data-hover-effect="zoom"] .team__card:hover {
    border-color: var(--team-border-strong, #c4ccc8);
}

.team--card[data-hover-effect="zoom"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

/* ============================================
   HOVER: glow (Kelp Teal halo earns the shadow)
   The ::after layer paints ONLY an inset 2px primary ring stacked ABOVE the
   card content (z-index: 2) so the photo/name do not cover the halo. It does
   NOT tint the card interior — the ring stays on the edge. The outer glow
   stays compact.
   ============================================ */
.team--card[data-hover-effect="glow"] .team__card {
    position: relative;
    overflow: hidden;
}

.team--card[data-hover-effect="glow"] .team__card::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 2px var(--team-primary, #1d6b5e);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.team--card[data-hover-effect="glow"] .team__card:hover::after {
    opacity: 1;
}

.team--card[data-hover-effect="glow"] .team__card:hover {
    border-color: var(--team-primary, #1d6b5e);
    box-shadow: 0 4px 12px rgba(29, 107, 94, 0.28);
}

.team--card[data-hover-effect="glow"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

.team--card[data-hover-effect="glow"] .team__card:hover .team__position {
    color: var(--team-primary-deep, #155046);
}

/* ============================================
   HOVER: tilt (photo wakes up in full colour)
   The member photo rests in full monochrome — a quiet "archive" plate — and
   snaps to full colour on hover, so the engaged card reads as "coming alive".
   The grayscale(1) → grayscale(0) swing is deliberately strong; a mild contrast
   dip at rest keeps portraits from looking harsh while still reading as B&W.
   ============================================ */
.team--card[data-hover-effect="tilt"] .team__img {
    filter: grayscale(1) contrast(0.95) brightness(1.02);
    transition: filter 0.45s ease, transform 0.45s ease;
}

.team--card[data-hover-effect="tilt"] .team__card:hover .team__img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.06);
}

.team--card[data-hover-effect="tilt"] .team__card:hover {
    border-color: var(--team-primary-tint, #e7efec);
}

.team--card[data-hover-effect="tilt"] .team__card:hover .team__name {
    color: var(--team-primary, #1d6b5e);
}

/* ============================================
   FOCUS VISIBILITY (keyboard)
   ============================================ */
.team--card .team__card:focus-visible {
    outline: 2px solid var(--team-primary, #1d6b5e);
    outline-offset: 2px;
}

/* ============================================
   LINKED CARD (per-language link makes the card clickable)
   ============================================ */
/* The stretched-link overlay + cursor rules are shared by every display mode
   (team_card grid + team_carousel slide) and live in team-base.css. This file
   only adds the focus outline for team_card, borrowing its card corner radius. */
.team--card .team__card-link:focus-visible {
    outline: 2px solid var(--team-primary, #1d6b5e);
    outline-offset: 2px;
    border-radius: var(--team-radius, 12px);
}