/*
 * Virgo CMS - Team Showcase Base Styles
 *
 * Shared card box model, photo shape modifiers, social icon buttons and hover
 * behavior for every Team Showcase type (team_card / team_carousel /
 * team_profile). Per-type layout rules live in their own team-{mode}.css file.
 *
 * Aesthetic: the "Living Archive" — surfaces step tonally (Archive White →
 * Mineral White), depth comes from a hairline border at rest and a Lift shadow
 * on hover. The Kelp Teal brand voice carries the active/hover states; coral is
 * reserved for a single accent per the One Accent Rule.
 *
 * Runtime knobs are exposed as CSS custom properties on .team by the renderer:
 *   --team-gap, --team-radius, --team-columns
 * Design-system tokens are read from the shared :root palette with fallbacks so
 * the module reads as part of Virgo's design system, not a foreign widget.
 */

/* ============================================
   ROOT + DESIGN TOKENS
   ============================================ */
/* Design-system tokens, resolved at the module root so every --team-*
   value adapts to [data-bs-theme="dark"] automatically. Each --team-* binds
   to the real :root token name (the bare names below are intentionally not
   used — they do not exist in :root). --team-card-bg is the card body
   surface; the dark override below flips it to Slate Teal. */
.team {
    --team-ink: var(--text-ink, #1a2421);
    --team-text: var(--text-color, #2a3530);
    --team-muted: var(--text-muted, #5a6b66);
    --team-border: var(--border-color, #dfe4e1);
    --team-border-strong: var(--border-strong, #c4ccc8);
    --team-surface: var(--card-bg, #f7f8f7);
    --team-sunken: var(--surface-sunken, #eff2f0);
    --team-primary: var(--primary-color, #1d6b5e);
    --team-primary-deep: var(--secondary-color, #155046);
    --team-primary-tint: var(--primary-tint, #e7efec);
    --team-accent: var(--accent-color, #c2683f);
    --team-card-bg: #fff;
    width: 100%;
}

/* ============================================
   DARK MODE TOKEN OVERRIDES
   The --team-* vars above resolve to :root tokens that already flip in
   dark mode, so most of the module adapts for free. These local overrides
   cover the two cases the design system does not express: the pure-white
   card body (held white in light, flipped to Slate Teal in dark) and the
   primary tint wash (a tonal veil over the dark card).
   ============================================ */
[data-bs-theme="dark"] .team {
    --team-card-bg: #1d2522;
    --team-primary-tint: rgba(45, 134, 118, 0.16);
}

/* ============================================
   GRID (default grid layout; carousel overrides)
   ============================================ */
.team__grid {
    display: grid;
    grid-template-columns: repeat(var(--team-columns, 4), minmax(0, 1fr));
    gap: var(--team-gap, 24px);
}

/* ============================================
   CARD
   ============================================ */
.team__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--team-card-bg);
    border: 1px solid var(--team-border);
    border-radius: var(--team-radius, 12px);
    padding: 28px 20px;
    /* Shadow-Is-State: flat hairline at rest; the hover state earns the shadow. */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    /* Reset button defaults so profile-mode trigger cards render like articles. */
    font: inherit;
    color: var(--team-text);
    width: 100%;
    cursor: default;
}

/* ============================================
   PHOTO + SHAPE MODIFIERS
   ============================================ */
/* The photo size is a percentage of the card width, exposed as
   --team-photo-size by the renderer (photo_size_percent, default 60%). The
   percentage binds directly to the card width so the knob stays meaningful on
   every grid density: a sparse 2-column grid with a high percentage yields a
   large photo, a dense 4-6 column grid with a low percentage yields a compact
   one. aspect-ratio keeps it always square so the shape modifiers
   (circle / square) never distort. The earlier clamp() ceiling (240px) made the
   knob a no-op on wide cards (a 2-column 600px card at any percentage already
   exceeded the cap, so 50% looked identical to 90%); binding the percentage
   directly restores the knob's effect everywhere. */
.team__photo {
    width: var(--team-photo-size, 60%);
    aspect-ratio: 1 / 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--team-sunken);
    border: 1px solid var(--team-border);
    flex-shrink: 0;
}

.team__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shape modifiers applied to the root by the engine. */
.team--shape-circle .team__photo {
    border-radius: 50%;
}
.team--shape-square .team__photo {
    border-radius: 0;
}

.team__photo-placeholder {
    color: var(--team-border-strong);
    width: 42%;
    height: 42%;
    display: block;
}
.team__photo-placeholder svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   BODY (name / position / description)
   ============================================ */
.team__body {
    width: 100%;
}

.team__name {
    font-size: 1.05rem !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--team-ink);
}

.team__position {
    font-size: 0.85rem;
    color: var(--team-primary);
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.team__description {
    font-size: 0.875rem;
    color: var(--team-muted);
    margin: 0 0 12px;
    line-height: 1.55;
    text-wrap: pretty;
}

/* Visibility-flag modifiers (engine toggles these from show_* data-attrs). */
.team--hide-position .team__position {
    display: none;
}
.team--hide-description .team__description {
    display: none;
}

/* ============================================
   SOCIAL ICONS
   ============================================ */
.team__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.team__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--team-sunken);
    color: var(--team-muted);
    border: 1px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.team__social-btn:hover,
.team__social-btn:focus-visible {
    background: var(--team-primary);
    color: #fff;
    border-color: var(--team-primary-deep);
    transform: translateY(-2px);
}

.team__social-btn:focus-visible {
    outline: 2px solid var(--team-primary);
    outline-offset: 2px;
}

.team__social-icon {
    width: 17px;
    height: 17px;
    display: block;
}

.team--hide-social .team__social {
    display: none;
}

/* ============================================
   LINKED CARD (per-language link makes the card clickable)
   ============================================ */
/* Shared by team_card (grid) and team_carousel (slide). When a member carries a
   per-language link, the whole card becomes clickable. The clickable surface is
   a stretched <a> overlay (.team__card-link) so the social buttons — which are
   their own <a> inside the card — stay independently clickable (no invalid
   nested-anchor markup; the social row is lifted above the overlay via z-index).
   cursor:pointer wins over the base .team__card { cursor: default } (and over
   team_card's lift variant) via higher specificity (.team__card.team__card--linked
   = two classes), so the hand cursor shows ONLY on members that carry a link in
   the active language. Non-linked cards keep the default arrow cursor.
   team_profile is excluded from the CARD overlay: its cards are modal triggers,
   not links — but the per-language link IS applied inside the modal photo (see
   team-profile.css .team-modal__photo-link). */
.team__card.team__card--linked {
    position: relative;
    cursor: pointer;
}

.team__card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* The link is an invisible hit-area; visual feedback comes from the
       per-type hover rules. Explicit pointer guards against any link-cursor
       reset applied by the template's base stylesheet. */
    cursor: pointer;
}

/* Social buttons sit above the stretched link so they receive the click
   instead of the card link overlay. */
.team__card--linked .team__social {
    position: relative;
    z-index: 2;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .team__grid {
        grid-template-columns: repeat(min(var(--team-columns, 4), 3), minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .team__grid {
        grid-template-columns: repeat(min(var(--team-columns, 4), 2), minmax(0, 1fr));
    }
    /* Scale the admin percentage down to 85% on phones so the photo never
       dominates a narrow single-column card while still tracking the card width
       (no fixed ceiling — same percentage-binding model as the base rule, so the
       knob keeps working at every grid density). */
    .team__photo {
        width: calc(var(--team-photo-size, 60%) * 0.85);
    }
}

@media (max-width: 575.98px) {
    .team__grid {
        grid-template-columns: 1fr;
    }
}