/* Shared CSIT subpage hero and contextual header system. The home stays independent. */

body.team-page {
  --page-hero-bg: var(--mist);
  --page-hero-fg: var(--deep-green);
  --page-hero-muted: rgba(31, 58, 61, 0.78);
  --page-hero-accent: #346c5d;
  --page-hero-ticker: var(--deep-green);
  --page-hero-line: #346c5d;
  --page-hero-marker: rgba(31, 58, 61, 0.055);
}

body.research-page {
  --page-hero-bg: #343b3a;
  --page-hero-fg: var(--off-white);
  --page-hero-muted: rgba(245, 247, 247, 0.74);
  --page-hero-accent: var(--accent);
  --page-hero-ticker: var(--accent);
  --page-hero-line: var(--accent);
  --page-hero-marker: rgba(245, 247, 247, 0.045);
}

body.publications-page {
  --page-hero-bg: #cf927c;
  --page-hero-fg: var(--deep-green);
  --page-hero-muted: rgba(31, 58, 61, 0.82);
  --page-hero-accent: #6f3f35;
  --page-hero-ticker: var(--deep-green);
  --page-hero-line: #6f3f35;
  --page-hero-marker: rgba(31, 58, 61, 0.07);
}

body.solutions-page {
  --page-hero-bg: #bec5c3;
  --page-hero-fg: var(--deep-green);
  --page-hero-muted: rgba(31, 58, 61, 0.78);
  --page-hero-accent: #667775;
  --page-hero-ticker: var(--deep-green);
  --page-hero-line: #667775;
  --page-hero-marker: rgba(31, 58, 61, 0.06);
}

body.outreach-page {
  --page-hero-bg: #d8d1c4;
  --page-hero-fg: var(--deep-green);
  --page-hero-muted: rgba(31, 58, 61, 0.8);
  --page-hero-accent: #805b49;
  --page-hero-ticker: var(--deep-green);
  --page-hero-line: #805b49;
  --page-hero-marker: rgba(31, 58, 61, 0.052);
}

body.news-page {
  --page-hero-bg: #a8c4cf;
  --page-hero-fg: var(--deep-green);
  --page-hero-muted: rgba(31, 58, 61, 0.78);
  --page-hero-accent: #235f73;
  --page-hero-ticker: var(--deep-green);
  --page-hero-line: #235f73;
  --page-hero-marker: rgba(31, 58, 61, 0.055);
}

body .subpage-hero {
  --hero-bg: var(--off-white);
  --hero-fg: var(--deep-green);
  --hero-muted: rgba(31, 58, 61, 0.78);
  --hero-accent: var(--accent);
  --hero-ticker: var(--deep-green);
  --hero-line: rgba(31, 58, 61, 0.25);
  --hero-marker: rgba(31, 58, 61, 0.05);
  --hero-index: "[00]";
  width: 100vw;
  max-width: none;
  height: min(680px, calc(100svh - 104px));
  min-height: 540px;
  margin: 0 calc(50% - 50vw);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-fg);
}

body .subpage-hero--team {
  --hero-bg: var(--page-hero-bg);
  --hero-fg: var(--page-hero-fg);
  --hero-muted: var(--page-hero-muted);
  --hero-accent: var(--page-hero-accent);
  --hero-ticker: var(--page-hero-ticker);
  --hero-line: var(--page-hero-line);
  --hero-marker: var(--page-hero-marker);
  --hero-index: "[02]";
}

body.team-page .subpage-hero--team {
  background: var(--hero-bg);
}

body .subpage-hero--research {
  --hero-bg: var(--page-hero-bg);
  --hero-fg: var(--page-hero-fg);
  --hero-muted: var(--page-hero-muted);
  --hero-accent: var(--page-hero-accent);
  --hero-ticker: var(--page-hero-ticker);
  --hero-line: var(--page-hero-line);
  --hero-marker: var(--page-hero-marker);
  --hero-index: "[03]";
}

body .subpage-hero--publications {
  --hero-bg: var(--page-hero-bg);
  --hero-fg: var(--page-hero-fg);
  --hero-muted: var(--page-hero-muted);
  --hero-accent: var(--page-hero-accent);
  --hero-ticker: var(--page-hero-ticker);
  --hero-line: var(--page-hero-line);
  --hero-marker: var(--page-hero-marker);
  --hero-index: "[04]";
}

body .subpage-hero--solutions {
  --hero-bg: var(--page-hero-bg);
  --hero-fg: var(--page-hero-fg);
  --hero-muted: var(--page-hero-muted);
  --hero-accent: var(--page-hero-accent);
  --hero-ticker: var(--page-hero-ticker);
  --hero-line: var(--page-hero-line);
  --hero-marker: var(--page-hero-marker);
  --hero-index: "[05]";
}

body .subpage-hero--outreach {
  --hero-bg: var(--page-hero-bg);
  --hero-fg: var(--page-hero-fg);
  --hero-muted: var(--page-hero-muted);
  --hero-accent: var(--page-hero-accent);
  --hero-ticker: var(--page-hero-ticker);
  --hero-line: var(--page-hero-line);
  --hero-marker: var(--page-hero-marker);
  --hero-index: "[06]";
}

body .subpage-hero--news {
  --hero-bg: var(--page-hero-bg);
  --hero-fg: var(--page-hero-fg);
  --hero-muted: var(--page-hero-muted);
  --hero-accent: var(--page-hero-accent);
  --hero-ticker: var(--page-hero-ticker);
  --hero-line: var(--page-hero-line);
  --hero-marker: var(--page-hero-marker);
  --hero-index: "[07]";
}

body.hero-header-active .site-header {
  background: var(--page-hero-bg);
  border-bottom-color: var(--page-hero-line);
  color: var(--page-hero-fg);
}

body.hero-header-active:not(.research-page) .site-header .logo-image {
  content: url("../assets/logos/LogoVerde.svg");
  /* The light-page lockup is deliberately monochrome so the shield remains
     legible against clay, sand, lavender, mist and newsroom blue. */
  filter: brightness(0) saturate(100%) invert(20%) sepia(13%) saturate(1048%)
    hue-rotate(136deg) brightness(91%) contrast(88%);
}

body.hero-header-active.research-page .site-header .logo-image {
  filter: none;
}

body.hero-header-active .site-header .logo,
body.hero-header-active .site-header .site-nav a,
body.hero-header-active .site-header .nav-toggle {
  color: var(--page-hero-fg);
}

body.hero-header-active .site-header .logo-name {
  color: var(--page-hero-muted);
}

body.hero-header-active .site-header .site-nav a::before,
body.hero-header-active .site-header .site-nav a[aria-current="page"]::before {
  color: var(--page-hero-accent);
}

body.hero-header-active .site-header .site-nav a:hover,
body.hero-header-active .site-header .site-nav a:focus-visible,
body.hero-header-active .site-header .site-nav a[aria-current="page"] {
  color: var(--page-hero-accent);
}

body.hero-header-active .site-header .site-nav a[aria-current="page"] {
  box-shadow: inset 0 -1px 0 var(--page-hero-accent);
}

body.hero-header-active .site-header .nav-toggle {
  border-color: var(--page-hero-line);
  background: transparent;
}

.site-header {
  transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease;
}

.site-header .logo-name,
.site-header .site-nav a,
.site-header .site-nav a::before,
.site-header .nav-toggle {
  transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

@media (max-width: 1040px) {
  body.hero-header-active .site-header .site-nav {
    border-top-color: var(--page-hero-line);
  }

  body.hero-header-active .site-header .site-nav a {
    border-bottom-color: var(--page-hero-line);
  }
}

body .subpage-hero::after {
  content: var(--hero-index);
  position: absolute;
  right: -0.08em;
  bottom: -0.24em;
  color: var(--hero-marker);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(13rem, 29vw, 34rem);
  font-weight: 500;
  letter-spacing: -0.12em;
  line-height: 0.72;
  pointer-events: none;
  z-index: 0;
}

body .subpage-hero .solution-hero-marker,
body .subpage-hero .outreach-hero-marker,
body .subpage-hero .research-hero-symbol {
  display: none;
}

body .subpage-hero .subpage-hero__ticker {
  width: 100%;
  margin: 0;
  padding: 18px 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

body .subpage-hero .subpage-hero__ticker .ticker-track {
  width: max-content;
  min-width: max-content;
  animation: subpage-hero-ticker-scroll 26s linear infinite;
}

body .subpage-hero .subpage-hero__ticker.reverse .ticker-track {
  animation-direction: reverse;
}

body .subpage-hero .subpage-hero__ticker .ticker-text {
  flex: none;
  padding-right: 0;
  color: var(--hero-ticker);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(0.66rem, 0.72vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 1;
}

@keyframes subpage-hero-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

body .subpage-hero .subpage-hero__inner {
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: clamp(54px, 6vw, 96px) max(4.5vw, 64px);
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(380px, 0.82fr);
  align-items: center;
  gap: clamp(70px, 9vw, 180px);
}

.team-page .subpage-hero .team-hero,
.research-page .subpage-hero .publications-hero-module,
.research-page .subpage-hero .publications-hero-module .hero-band {
  width: 100%;
  max-width: none;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  inset: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body .subpage-hero .subpage-hero__kicker {
  margin: 0 0 24px;
  color: var(--hero-accent);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body .subpage-hero .subpage-hero__heading h1,
.research-page .research-stack .publications-hero-module .subpage-hero__heading h1 {
  margin: 0;
  color: var(--hero-fg);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(4.5rem, 9.5vw, 10rem);
  font-weight: 400;
  letter-spacing: -0.07em;
  line-height: 0.8;
}

body .subpage-hero .subpage-hero__copy {
  width: 100%;
  max-width: 690px;
  min-width: 0;
  justify-self: end;
}

body .subpage-hero .subpage-hero__copy > p,
.research-page .research-stack .subpage-hero__copy .research-hero-description {
  max-width: none;
  margin: 0;
  color: var(--hero-muted);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(1.12rem, 1.52vw, 1.55rem);
  font-weight: 400;
  line-height: 1.5;
}

body .subpage-hero .subpage-hero__facts {
  width: 100%;
  margin: clamp(34px, 4vw, 56px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hero-line);
}

body .subpage-hero .subpage-hero__facts:has(> div:nth-child(3)) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body .subpage-hero .subpage-hero__facts div {
  min-width: 0;
  padding: 18px 18px 0 0;
}

body .subpage-hero .subpage-hero__facts div + div {
  padding-left: 18px;
  border-left: 1px solid var(--hero-line);
}

body .subpage-hero .subpage-hero__facts dt {
  margin: 0 0 8px;
  color: var(--hero-accent);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.59rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body .subpage-hero .subpage-hero__facts dd {
  margin: 0;
  color: var(--hero-fg);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(0.92rem, 1.16vw, 1.2rem);
  font-weight: 500;
  line-height: 1.2;
}

@media (max-width: 900px) {
  body .subpage-hero {
    height: auto;
    min-height: min(760px, calc(100svh - 88px));
  }

  body .subpage-hero .subpage-hero__inner {
    padding: 48px 6vw;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 54px;
  }

  body .subpage-hero .subpage-hero__copy {
    max-width: 680px;
    justify-self: start;
  }
}

@media (max-width: 620px) {
  body .subpage-hero {
    min-height: min(690px, calc(100svh - 78px));
  }

  body .subpage-hero::after {
    right: -0.15em;
    font-size: 13rem;
  }

  body .subpage-hero .subpage-hero__ticker {
    padding: 14px 0;
  }

  body .subpage-hero .subpage-hero__inner {
    padding: 38px 6vw;
    gap: 38px;
  }

  body .subpage-hero .subpage-hero__heading,
  body .subpage-hero .subpage-hero__copy {
    min-width: 0;
    max-width: 100%;
  }

  body .subpage-hero .subpage-hero__kicker {
    margin-bottom: 18px;
    font-size: 0.61rem;
  }

  body .subpage-hero .subpage-hero__heading h1,
  .research-page .research-stack .publications-hero-module .subpage-hero__heading h1 {
    font-size: clamp(3.2rem, 14.5vw, 4.4rem);
    line-height: 0.86;
    overflow-wrap: anywhere;
  }

  body.publications-page .subpage-hero .subpage-hero__heading h1 {
    font-size: clamp(2.7rem, 12.2vw, 4.4rem);
  }

  body .subpage-hero .subpage-hero__copy > p,
  .research-page .research-stack .subpage-hero__copy .research-hero-description {
    font-size: 1rem;
  }

  body .subpage-hero .subpage-hero__facts {
    margin-top: 28px;
  }

  body .subpage-hero .subpage-hero__facts div {
    padding: 14px 9px 0 0;
  }

  body .subpage-hero .subpage-hero__facts div + div {
    padding-left: 9px;
  }

  body .subpage-hero .subpage-hero__facts dt {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  body .subpage-hero .subpage-hero__facts dd {
    font-size: 0.76rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .subpage-hero .subpage-hero__ticker .ticker-track {
    animation-play-state: paused;
  }
}