/* ===================== Team page (banner-top cards + intro/outro blocks) ===================== */

.team-content {
    --team-bg: var(--primary-bg);
    --team-fg: var(--text-color);
    --team-accent: var(--accent, #06B6D4);
    --team-accent-2: var(--accent-2, #10B981);
    --team-muted: color-mix(in oklab, var(--team-fg) 78%, var(--team-bg) 22%);
    --team-surface: color-mix(in oklab, var(--team-bg) 92%, var(--team-fg) 8%);
    --team-border: color-mix(in oklab, var(--team-fg) 12%, transparent);
    --team-shadow: 0 12px 28px rgba(0,0,0,10);
    --team-shadow-hover: 0 18px 46px rgba(0,0,0,18);
    --chip-bg: color-mix(in oklab, var(--team-accent) 12%, transparent);
    --chip-bd: color-mix(in oklab, var(--team-accent) 40%, transparent);
    /* Intro/Outro tokens */
    --block-surface: color-mix(in oklab, var(--team-surface) 92%, var(--team-bg) 8%);
    --block-border: color-mix(in oklab, var(--team-accent) 40%, transparent);
    --block-shadow: 0 10px 26px rgba(0,0,0,10);
    /* NEW: unified spacing between intro↔cards and cards↔outro */
    --stack-gap: clamp(28px, 4vw, 44px);
    background: radial-gradient(58% 34% at 14% 0%, color-mix(in oklab, var(--team-accent) 10%, transparent), transparent 68%), radial-gradient(52% 32% at 86% 100%, color-mix(in oklab, var(--team-accent-2) 8%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in oklab, var(--team-bg) 96%, var(--team-accent) 4%), var(--team-bg));
    color: var(--team-fg);
    padding: clamp(2.25rem, 3.5vw, 4.5rem) 0;
}

    .team-content.container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.2rem;
    }

/* ===================== Intro / Outro blocks ===================== */

.team-intro,
.team-outro {
    position: relative;
    background: var(--block-surface);
    border: 1px solid var(--block-border);
    border-radius: 16px;
    box-shadow: var(--block-shadow);
    padding: clamp(14px, 2.4vw, 22px) clamp(16px, 2.6vw, 26px);
    color: var(--team-muted);
    overflow: hidden;
}

/* Equal spacing from the card grid */
.team-intro {
    margin: 0 0 var(--stack-gap) 0;
}

.team-outro {
    margin: var(--stack-gap) 0 0 0;
}

    /* Accent rail */
    .team-intro::before,
    .team-outro::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, var(--team-accent), var(--team-accent-2));
        opacity: .9;
    }

.team-intro::before {
    left: 0;
    border-radius: 16px 0 0 16px;
}

.team-outro::before {
    right: 0;
    border-radius: 0 16px 16px 0;
}

/* Headline-like first sentence even if it's plain text */
.team-intro p:first-child,
.team-outro p:first-child {
    font-weight: 800;
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    color: var(--team-fg);
    margin: 0 0 .35rem 0;
}

/* Paragraph rhythm */
.team-intro p,
.team-outro p {
    margin: .35rem 0;
}

/* Links inside blocks */
.team-intro a,
.team-outro a {
    color: var(--team-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Slide-in animations (from left for intro, right for outro) */
.team-intro,
.team-outro {
    opacity: 0;
    transform: translateX(var(--slide, 0));
    transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s;
    will-change: transform, opacity;
}

.team-intro {
    --slide: -26px;
}

.team-outro {
    --slide: 26px;
}

    .team-intro.is-in,
    .team-outro.is-in {
        opacity: 1;
        transform: none;
    }

@media (prefers-reduced-motion: reduce) {
    .team-intro, .team-outro {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* ===================== Cards (same structure, with glow + image lift) ===================== */

.team-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    /* Ensure grid itself doesn’t add extra vertical margins around it */
    margin: 0;
}

.team-card {
    --pad: clamp(1rem, 2.2vw, 1.4rem);
    --glow-rot: 24deg; /* set per card in JS */
    --img-lift: 6px; /* set per card in JS */

    grid-column: span 12;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    background: var(--team-surface);
    border: 1px solid var(--team-border);
    border-radius: 18px;
    box-shadow: var(--team-shadow);
    overflow: hidden;
    padding: var(--pad);
    padding-top: 0;
    isolation: isolate; /* glow layer below content */
    /* reveal baseline */
    opacity: 0;
    transform: translateY(12px);
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .35s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

    .team-card.in {
        opacity: 1;
        transform: none;
    }

    .team-card:hover,
    .team-card.is-active {
        box-shadow: var(--team-shadow-hover);
        border-color: color-mix(in oklab, var(--team-fg) 18%, transparent);
    }

    /* Glow layer */
    .team-card::before {
        content: "";
        position: absolute;
        inset: -25%;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(60% 40% at 20% 0%, color-mix(in oklab, var(--team-accent) 35%, transparent) 0%, transparent 60%), radial-gradient(70% 45% at 110% 100%, color-mix(in oklab, var(--team-accent-2) 32%, transparent) 0%, transparent 65%);
        opacity: 0;
        transform: rotate(var(--glow-rot));
        transition: opacity .35s ease, transform .35s ease;
    }

    .team-card:hover::before,
    .team-card.is-active::before {
        opacity: .55;
    }

    .team-card > * {
        position: relative;
        z-index: 1;
    }

/* 2-up / 3-up */
@media (min-width: 640px) {
    .team-card {
        grid-column: span 6;
    }
}

@media (min-width: 1200px) {
    .team-card {
        grid-column: span 4;
    }
}

/* Banner image */
.avatar {
    width: 100%;
    height: clamp(180px, 28vw, 260px);
    border-radius: 18px 18px 0 0;
    overflow: hidden;
    background: color-mix(in oklab, var(--team-bg) 85%, var(--team-fg) 15%);
    position: relative;
    line-height: 0;
}

    .avatar img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block;
        transform: none;
        transition: filter .35s ease;
        background: color-mix(in oklab, var(--team-surface) 92%, var(--team-bg) 8%);
    }

.team-card:hover .avatar img,
.team-card.is-active .avatar img {
    transform: none;
    filter: saturate(1.05) contrast(1.03);
}

.avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,0) 45%, rgba(0,0,0,.22));
    pointer-events: none;
}

/* Tags overlay on banner */
.member-tags {
    position: absolute;
    top: calc(var(--pad) + 10px);
    left: calc(var(--pad) + 10px);
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

    .member-tags .tag {
        padding: .26rem .55rem;
        border-radius: 999px;
        border: 1px solid var(--chip-bd);
        background: var(--chip-bg);
        color: color-mix(in oklab, var(--team-fg) 94%, transparent);
        font-size: .75rem;
        line-height: 1;
        font-weight: 600;
        letter-spacing: .01em;
        backdrop-filter: saturate(1.1) blur(2px);
    }

/* Name / Role / Bio */
.member-name {
    margin: .7rem 0 0 0;
    font-family: var(--font-display, inherit);
    font-weight: 800;
    letter-spacing: -0.01em;
    font-size: clamp(1.15rem, 2.4vw, 1.48rem);
    line-height: 1.12;
    color: var(--team-fg);
    padding: 0 var(--pad);
    background-image: linear-gradient(90deg, var(--team-accent), var(--team-accent-2));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .35s ease, text-shadow .35s ease;
}

.team-card:hover .member-name,
.team-card.is-active .member-name {
    background-size: 100% 2px;
    text-shadow: 0 10px 34px rgba(0,0,0,.35);
}

@keyframes nameShimmer {
    0% {
        text-shadow: 0 0 0 rgba(0,0,0,0);
    }

    25% {
        text-shadow: 0 8px 22px rgba(0,0,0,.25);
    }

    100% {
        text-shadow: 0 10px 34px rgba(0,0,0,.30);
    }
}

.team-card.in .member-name {
    animation: nameShimmer .8s ease .15s 1 both;
}

.member-role {
    margin: .18rem 0 0 0;
    color: var(--team-muted);
    font-size: .98rem;
    padding: 0 var(--pad);
    transform: translateY(2px);
    transition: transform .28s cubic-bezier(.22,.61,.36,1), color .25s ease;
}

.team-card:hover .member-role,
.team-card.is-active .member-role {
    transform: translateY(0);
    color: color-mix(in oklab, var(--team-fg) 86%, transparent);
}

.member-bio {
    margin: .5rem 0 0 0;
    color: var(--team-muted);
    font-size: .95rem;
    padding: 0 var(--pad);
}

/* Links at bottom (distinct from tags) */
.member-links {
    margin-top: .9rem;
    padding: 0 var(--pad) var(--pad);
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

    .member-links a {
        display: inline-block;
        padding: .42rem .75rem;
        border-radius: 12px;
        border: 1px solid color-mix(in oklab, var(--team-accent) 55%, transparent);
        background: linear-gradient(180deg, color-mix(in oklab, var(--team-accent) 12%, transparent), transparent);
        color: color-mix(in oklab, var(--team-fg) 96%, transparent);
        text-decoration: none;
        font-size: .84rem;
        line-height: 1;
        font-weight: 600;
        transition: transform .15s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }

        .member-links a:hover {
            transform: translateY(-1px);
            border-color: var(--team-accent);
            box-shadow: 0 6px 16px rgba(0,0,0,.18);
        }

/* Focus ring */
.team-card:focus-within {
    outline: 2px solid var(--team-accent);
    outline-offset: 3px;
}

/* ===================== Theme patches ===================== */
[class*="theme-"][class*="-dark"] .team-content {
    --team-surface: color-mix(in oklab, var(--team-bg) 84%, var(--team-fg) 16%);
    --team-border: color-mix(in oklab, var(--team-fg) 18%, transparent);
    --team-shadow: 0 12px 32px rgba(0,0,0,.42);
    --team-shadow-hover: 0 20px 54px rgba(0,0,0,.6);
    --team-muted: color-mix(in oklab, var(--team-fg) 88%, var(--team-bg) 12%);
    --block-surface: color-mix(in oklab, var(--team-surface) 88%, var(--team-bg) 12%);
}

[class*="theme-"][class*="-light"] .team-content {
    --team-surface: #fff;
    --team-border: rgba(0,0,0,.09);
    --team-shadow: 0 12px 28px rgba(0,0,0,.10);
    --team-shadow-hover: 0 18px 46px rgba(0,0,0,.18);
    --team-muted: color-mix(in oklab, var(--team-fg) 72%, var(--team-bg) 28%);
    --block-surface: #fff;
}

/* Reveal timing for cards */
.team-card.in {
    transition-delay: var(--delay, 0ms);
}