/* ============================================================
   HOME — hero, research highlights deck, funders, join panel.
   ============================================================ */

/* ── HERO — full-bleed astrocyte photo ─────────────────────── */
.hero {
    position: relative;
    min-height: clamp(460px, 46vw, 700px);
    max-height: 86vh;
    display: flex; align-items: center;
    overflow: hidden;
    background-color: var(--blue-50);
    isolation: isolate;
}
/* The photo lives on its own layer (not on .hero) so it can settle from a
   slight zoom on load without repainting the copy — see base/motion.css. */
.hero__media {
    position: absolute; inset: 0; z-index: -2;
    background-size: cover;
    background-position: right 38%;
    background-repeat: no-repeat;
}
/* Looping video (desktop): sits in the right ~76% and fades out to the left
   so the copy column stays clean. Its first frame is painted as a
   background with the same framing, so playback starts without a seam. */
.hero__video {
    position: absolute; top: 0; bottom: 0; right: 0; left: 24%;
    width: 76%; height: 100%;
    object-fit: cover; object-position: 60% 45%;
    background: url('../../img/hero-loop-poster.jpg') 60% 45% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%);
            mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 42%);
    pointer-events: none;
    /* Own compositor layer from the first paint, so starting playback
       doesn't re-promote it and nudge the frame by a sub-pixel */
    transform: translateZ(0);
    will-change: transform;
}
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }
}
.hero__overlay {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.12) 70%, rgba(255,255,255,0) 86%);
}
/* Soft sky halo behind the copy + a fade into the next section */
.hero__overlay::before {
    content: ""; position: absolute; width: 60vw; aspect-ratio: 1; left: -22vw; top: -18vw;
    background: radial-gradient(circle, rgba(138,168,236,.26) 0%, transparent 62%);
}
.hero__overlay::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, transparent 16%, transparent 80%, var(--blue-50) 100%);
}
.hero__inner {
    position: relative;
    max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem);
    padding-top: calc(var(--header-h) + 1.25rem);
    width: 100%;
}
.hero__copy { max-width: 660px; }
.hero__title { margin-bottom: 1.2rem; font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.7rem); line-height: 1.06; letter-spacing: -.02em; }
.hero__lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); font-weight: 400; margin-bottom: 2rem; max-width: 50ch; }
.hero__actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.hero__actions--center { justify-content: center; }
/* No backdrop-filter: it puts the button on its own layer and softens the label */
.btn--ghost-on-photo { background: rgba(255,255,255,.82); border-color: rgba(14,28,58,.14); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    .btn--ghost-on-photo:hover { background: #fff; border-color: var(--blue-300); }
}
.btn--ghost-on-photo:active { background: var(--blue-50); }

/* ── RESEARCH HIGHLIGHTS — three-column deck ───────────────── */
.highlights {
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(4rem, 7vw, 6.5rem);
    background:
        radial-gradient(circle at 12% 18%, var(--blue-100) 0%, transparent 42%),
        radial-gradient(circle at 88% 82%, var(--blue-100) 0%, transparent 45%),
        linear-gradient(180deg, var(--blue-50), #EEF3FD 60%, var(--blue-50));
}

.deck {
    display: grid;
    /* Middle column (the tabs) wide enough that every title fits on one line
       at desktop widths, so all three rows share a height. Below 1080px the
       grid collapses to one column (see the media query). */
    grid-template-columns: .72fr .92fr 1fr;
    gap: clamp(1.4rem, 3vw, 2.2rem); align-items: stretch; margin-top: 1rem;
}

.deck__intro { display: flex; flex-direction: column; justify-content: center; }
.deck__intro h2 { margin: .3rem 0 1rem; }
.deck__intro p { margin-bottom: 1.6rem; }

.deck__tabs { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.deck-tab { display: flex; align-items: center; text-align: left; width: 100%; border-radius: var(--radius-pill); }
.deck-tab:focus-visible { outline-offset: 4px; }
.deck-tab__icon {
    width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; z-index: 2;
    background: var(--paper); border: 1px solid var(--blue-100);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.deck-tab__icon img {
    width: 30px; height: 30px; object-fit: contain;
    /* Plain black line icons, recoloured to a dark navy close to --ink
       (filter computed for #000 → #0B1E3C). */
    filter: invert(30%) sepia(121%) saturate(122%) hue-rotate(177deg) brightness(66%) contrast(156%);
}
.deck-tab__bar {
    flex: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    margin-left: -30px; padding: 1rem 1.25rem 1rem 2.75rem;
    background-color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-pill);
    /* The active gradient sits on ::before and fades in, because gradients
       can't be transitioned directly. */
    position: relative; isolation: isolate; overflow: hidden;
    /* Never transformed: it carries the text, and moving/scaling it (or
       promoting it to its own layer) blurs and jiggles the label. Hover,
       press and active states use colour, border and shadow instead. */
    transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.deck-tab__bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--blue-600), var(--blue-900));
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.deck-tab__label { display: flex; align-items: baseline; gap: .65rem; }
.deck-tab__num { font-size: .75rem; font-weight: 700; letter-spacing: .06em; color: var(--blue-300); transition: color var(--dur-base) var(--ease-out); }
.deck-tab__title { font-weight: 700; font-size: .95rem; color: var(--ink); transition: color var(--dur-base) var(--ease-out); }
.deck-tab__chevron { color: var(--blue-300); font-size: 1rem; line-height: 1; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .deck-tab:hover .deck-tab__bar { border-color: var(--blue-300); box-shadow: var(--shadow-sm); }
    .deck-tab:hover .deck-tab__chevron { transform: translateX(3px); }
}
/* Press feedback on the icon disc, not on the text */
.deck-tab:active .deck-tab__icon { transform: scale(.94); }
.deck-tab.is-active .deck-tab__icon { border-color: var(--blue-600); box-shadow: 0 0 0 5px var(--blue-100); }
.deck-tab.is-active .deck-tab__bar { border-color: var(--blue-900); box-shadow: var(--shadow-accent); }
.deck-tab.is-active .deck-tab__bar::before { opacity: 1; }
.deck-tab.is-active .deck-tab__num { color: var(--blue-200); }
.deck-tab.is-active .deck-tab__title { color: #fff; }
.deck-tab.is-active .deck-tab__chevron { color: #fff; transform: translateX(3px); }

.deck__panel {
    position: relative; border-radius: var(--radius-lg); overflow: hidden;
    background: linear-gradient(150deg, var(--night) 0%, var(--blue-900) 58%, var(--blue-600) 120%);
    padding: clamp(1.8rem, 3vw, 2.6rem); color: #fff;
    /* All panels share one grid cell so they can crossfade in place */
    display: grid; align-items: center;
    min-height: 280px;
}
.deck__panel::after {
    content: ""; position: absolute; width: 380px; aspect-ratio: 1; right: -140px; top: -170px;
    background: radial-gradient(circle, rgba(138,168,236,.34), transparent 65%);
    pointer-events: none;
}
.deck-panel {
    grid-area: 1 / 1; position: relative; z-index: 1;
    opacity: 0; visibility: hidden; translate: 0 6px; filter: blur(2px);
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.deck-panel.is-active {
    opacity: 1; visibility: visible; translate: 0 0; filter: none;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out), visibility 0s;
}
.deck-panel__num { display: flex; gap: .5rem; font-size: .8rem; font-weight: 700; color: var(--blue-300); letter-spacing: .06em; }
.deck-panel__num span { color: rgba(255,255,255,.4); }
.deck-panel h3 { color: #fff; margin: .5rem 0 .9rem; font-size: 1.45rem; }
.deck-panel h3::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--blue-300); margin-top: .9rem; }
.deck-panel p { color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
    .deck-panel { translate: none; filter: none; }
}

.deck__cta { display: none; }
@media (max-width: 1080px) {
    .deck { grid-template-columns: 1fr; }
    .deck__intro { text-align: left; }
    .deck__panel { order: 3; }
    /* Below 1080px the intro's "Explore our research" link is swapped for a
       mobile-only duplicate (.deck__cta) placed after the tabs and panel —
       the intro's own copy can't be reordered past .deck's grid items. */
    .deck__cta-link--intro { display: none; }
    .deck__cta { display: flex; justify-content: center; order: 4; margin-top: .4rem; }
}

/* ── FUNDERS MARQUEE ──────────────────────────────────────── */
.funders { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.funders-marquee { overflow: hidden; margin-top: 1rem; position: relative; }
.funders-marquee::before, .funders-marquee::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.funders-marquee::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.funders-marquee::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.funders-marquee__track {
    display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); width: max-content;
    will-change: transform;
    /* Animated via JS (requestAnimationFrame) with a measured pixel distance —
       more reliable than a CSS % keyframe, which drifts if the two duplicated
       halves don't end up pixel-identical (image loading order, rounding, etc). */
}
.funders-marquee__item { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 128px; }
/* Logos shown exactly as they are (full colour, full opacity). To keep very
   wide logos (e.g. Ikerbasque) from dwarfing compact ones (e.g. Achucarro)
   every logo is fitted inside the same box: capped in BOTH width and height,
   aspect ratio preserved, so wide ones end up shorter and tall ones narrower
   and they read as the same visual weight. */
.funders-marquee__item img { width: auto; height: auto; max-width: 220px; max-height: 96px; object-fit: contain; }
.funders-marquee__label { font-weight: 700; color: var(--ink-faint); font-size: .95rem; }

@media (max-width: 640px) {
    .funders-marquee::before, .funders-marquee::after { width: 36px; }
}


/* ── JOIN US (home panel) ─────────────────────────────────── */
.join-home { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.join-panel {
    background: linear-gradient(135deg, var(--night) 0%, var(--blue-900) 60%, var(--blue-600) 130%);
    border-radius: var(--radius-lg); overflow: hidden; position: relative;
    display: grid; grid-template-columns: .8fr 1.2fr; min-height: 300px;
}
.join-panel__photo { position: relative; overflow: hidden; }
.join-panel__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .85; }
.join-panel__photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 40%, var(--night) 100%);
}
.join-panel__body { padding: clamp(2rem, 4vw, 3.2rem); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.join-panel__body h2 { color: #fff; margin-bottom: .9rem; }
.join-panel__body p { color: rgba(255,255,255,.78); max-width: 46ch; margin-bottom: 1.4rem; }
.join-panel__cta { padding: .8rem 1.7rem; font-size: .98rem; }
.join-panel__jobs { margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: .6rem; }
.join-panel__jobs a {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .8rem 1.1rem; background: rgba(255,255,255,.08); border-radius: var(--radius-sm);
    font-weight: 600; font-size: .92rem; transition: background-color var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .join-panel__jobs a:hover { background: rgba(255,255,255,.16); }
}
.join-panel__empty { font-style: italic; color: rgba(255,255,255,.6); margin-bottom: 1.6rem; }
.job-status { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .25rem .6rem; border-radius: var(--radius-pill); }
.job-status--open { background: #E3F5EA; color: #1A7A4C; }
.job-status--closed { background: #FBEAEA; color: #B3261E; }