/* ====== /team ======
   Built 2026-09-18 on the site's system (no Figma frame); loads after
   home.css for the .hero pattern. Hero, story + pull-quote, Team grid,
   Advisors grid, CTA band, one bio dialog. */

/* ── 1 · Hero (voice-team.js, "Ripples", mounts in .hero__video) ──── */
.team-hero {
    min-height: 0;
    padding-top: 150px;   /* room for the composition above/behind the headline below 1024 */
    /* the ground voice-team.js paints on mount (same as About), so no seam */
    background: linear-gradient(104deg, var(--primary-900) 0%, var(--primary-800) 46%, var(--primary-600) 100%);
}
.team-hero h1 { max-width: 12ch; }
.team-hero__intro { margin-top: var(--space-4); max-width: 640px; font-size: var(--t-h4); line-height: var(--lh-heading); color: var(--c-text-muted); }   /* H4 intro, as the other pages */
/* Below 1024 the composition sits BEHIND the copy (site decision 2026-09-18):
   the box is the hero, at reduced opacity, masked at the foot. voice-team.js
   is briefed to lay out across the whole box, so no shift is needed.       */
.team-hero .hero__video {
    opacity: .55;
    /* the script centres the group in its box; shift the box right 20% so the
       group lands at ~70% of the screen, off the headline's start (as About) */
    transform: translateX(20%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%);
            mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 18%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}

/* ── 2 · Story + the line ──────────────────────────────────────────── */
.team-intro { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.team-intro__grid { display: flex; flex-direction: column; gap: var(--space-8); }
.team-intro__story { max-width: var(--measure); color: var(--c-text-muted); }
.team-intro__quote {                            /* the pull-quote, lit rule — Knowledge Hub pattern */
    position: relative; padding-left: var(--space-6);
    font-size: var(--t-h3); line-height: var(--lh-heading); font-weight: var(--fw-regular); max-width: 18ch;
}
.team-intro__quote::before {
    content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, var(--c-accent-cyan) 0%, rgba(171, 235, 240, .15) 100%);
    box-shadow: 0 0 12px rgba(171, 235, 240, .45);
}

/* ── 3 · People ───────────────────────────────────────────────────── */
.team-group--team     { background: linear-gradient(180deg, var(--primary-800) 0%, var(--primary-900) 100%); }
.team-group--advisors { background: linear-gradient(180deg, var(--primary-900) 0%, var(--primary-800) 100%); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-8); }   /* 2-up even on phones: the portraits are tall */

.person {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
    width: 100%; height: 100%; padding: var(--space-4);
    text-align: left; color: inherit;
    border: 1px solid rgba(171, 235, 240, .16);
    border-radius: var(--radius-card);
    background: var(--gloss-sheen), var(--c-bg-raised);
    box-shadow: var(--gloss-edge), 0 16px 40px rgba(0, 0, 0, .35);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.person:hover, .person:focus-visible { border-color: rgba(171, 235, 240, .4); box-shadow: var(--gloss-edge), var(--gloss-glow), 0 20px 48px rgba(0, 0, 0, .4); transform: translateY(-3px); }
.person__photo {
    position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
    border-radius: 12px; overflow: hidden; margin-bottom: var(--space-2);
    background: var(--neutral-black);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.person:hover .person__photo img { transform: scale(1.04); }
.person__photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--gloss-edge), inset 0 -40px 40px -20px rgba(21, 0, 27, .6); pointer-events: none; }
.person__name { font-size: var(--t-p1); line-height: var(--lh-heading); font-weight: var(--fw-medium); color: var(--c-accent-highlight); }
.person__role { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-pink); }
.person__more { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-cyan); opacity: .8; transition: opacity .2s ease; }
.person:hover .person__more { opacity: 1; }

/* ── Bio dialog (Knowledge Hub pattern) ────────────────────────────── */
.team-dialog {
    width: min(880px, calc(100vw - 2 * var(--page-gutter)));
    max-height: min(85vh, 720px);
    padding: 0; border: 0; border-radius: var(--radius-card);
    background: transparent; color: var(--c-text);
    overflow: visible;
}
.team-dialog::backdrop { background: rgba(6, 0, 10, .7); }
html:has(.team-dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }
.team-dialog[open] { animation: team-dialog-in .25s ease; }
@keyframes team-dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.team-dialog__inner { position: relative; display: grid; gap: var(--space-6); max-height: min(85vh, 720px); overflow: auto; overscroll-behavior: contain; }
.team-dialog__close {
    position: absolute; top: var(--space-4); right: var(--space-4); z-index: 1;
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); color: var(--c-text);
    box-shadow: var(--gloss-edge);
}
.team-dialog__close:hover { background: var(--c-accent-cyan); color: var(--c-primary-dark); }
.team-dialog__photo { width: 180px; max-width: 45%; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); background: var(--neutral-black); }
.team-dialog__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.team-dialog__name { font-size: var(--t-h3); color: var(--c-accent-highlight); }
.team-dialog__role { font-family: var(--font-secondary); font-size: var(--t-p3); letter-spacing: var(--ls-cta); text-transform: uppercase; color: var(--c-accent-pink); }
.team-dialog__bio  { color: var(--c-text-muted); max-width: var(--measure); }
.team-dialog__link { margin-top: var(--space-2); }

/* ── Tablet ───────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* 3-up, not 2. At 820px the 2-column grid gave each portrait ~320x375 and the
       photos dominated the page. Reduced 2026-09-29. */
    .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
    .team-dialog__inner { grid-template-columns: 220px 1fr; align-items: start; }
    .team-dialog__photo { width: 100%; max-width: none; }
}

/* ── Desktop ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .team-hero { min-height: 520px; padding-block: var(--space-15); }
    .team-hero .hero__video { opacity: 1; transform: none; -webkit-mask-image: none; mask-image: none; }
    .team-intro__grid { flex-direction: row; align-items: center; gap: var(--space-16); }
    .team-intro__story { flex: 1 1 0; }
    .team-intro__quote { flex: 0 0 40%; }
    .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
    .person__name { font-size: var(--t-h5); }
}