/* additions.css — styles for elements added after the original prototype:
   language switcher, video intro, hero meta link, misc tweaks */

/* Push nav right-group (lang + CTA) to the right edge.
   Override the original .nav-links margin-left so it clusters with its dropdowns. */
.nav-links { margin-left: auto !important; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language switcher ---------------------------------------------------- */
.lang-switcher {
  position: relative;
}
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.lang-btn:hover { background: var(--ink-100); border-color: var(--ink-300); }
.lang-btn .caret { font-size: 8px; opacity: 0.6; }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-700);
  text-align: left;
  transition: background 120ms ease;
}
.lang-option:hover { background: var(--ink-100); }
.lang-option.active { background: var(--blue-100); color: var(--ink-900); }
.lang-option .mono { min-width: 22px; font-size: 12px; color: var(--ink-500); }
.lang-option-name { flex: 1; }

.chip-xs {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink-100);
  color: var(--ink-500);
  border-radius: 999px;
}

/* Video intro ---------------------------------------------------------- */
.video-intro {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
@media (max-width: 920px) {
  .video-grid { grid-template-columns: 1fr; }
}
.video-card {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-facade {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: #000;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 120ms ease;
}
.video-facade:hover { filter: brightness(1.1); }
.video-facade .video-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(43, 139, 199, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease, background 120ms ease;
}
.video-facade:hover .video-play {
  transform: scale(1.08);
  background: var(--accent);
}
.video-facade .video-play svg { margin-left: 3px; }
.video-cap {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.video-cap .smallcaps { color: var(--ink-500); }
.video-cap-title {
  font-family: var(--serif, Georgia, serif);
  font-size: 15px;
  color: var(--ink-900);
}

/* Fintech variant overrides video-cap-title to sans */
body[data-aesthetic="fintech"] .video-cap-title {
  font-family: var(--sans);
  font-weight: 500;
}

/* Hero meta-link ------------------------------------------------------- */
.hero-meta .meta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  font-weight: 500;
  /* Match the size of the other meta values so all three items align
     vertically by their mid-points without any extra eyeballing. */
  font-size: 22px;
  letter-spacing: -0.01em;
  transition: color 120ms ease;
}
.hero-meta .meta-link:hover { color: var(--accent-hover, var(--blue-700)); }

/* Hero — text on top, line-art as background art behind it ----------- */
.hero--stacked {
  position: relative;
  overflow: hidden;
  padding: 80px 0 48px;
  isolation: isolate;
}
.hero-copy--wide { max-width: none; }
.hero-copy--wide .hero-h1 {
  font-size: clamp(48px, 7vw, 96px);
  max-width: 18ch;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
}
.hero-copy--wide .hero-lede {
  max-width: 56ch;
  font-size: 17px;
}
/* Keep hero text on top of the background art */
.hero--stacked > .page { position: relative; z-index: 1; }

/* Line-art chart sits behind the hero copy, anchored to the right
   so it peeks out around the lede/CTAs without obscuring the headline. */
.hero-art-band {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 62%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  mask-image: linear-gradient(to left, black 30%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, black 30%, transparent 100%);
}
.hero-art-band img {
  display: block;
  width: auto;
  max-width: 100%;
  height: clamp(280px, 32vw, 460px);
  margin-right: -2%;
}
@media (max-width: 980px) {
  .hero-art-band {
    width: 80%;
    opacity: 0.3;
  }
  .hero-art-band img { height: clamp(220px, 38vw, 340px); }
}
@media (max-width: 640px) {
  .hero--stacked { padding: 56px 0 64px; }
  .hero-art-band {
    width: 100%;
    opacity: 0.28;
    mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  }
}
@media (max-width: 900px) {
  .hero-copy--wide .hero-h1 { font-size: clamp(40px, 9vw, 64px); max-width: 14ch; }
  .hero-copy--wide { padding-bottom: 36px; }
}

/* Brand wordmark TLD — show ".com" in the nav, slightly subdued */
.brand .brand-tld {
  color: var(--ink-500);
  font-weight: 400;
}

/* InstitutionsBar — sits right below the hero ------------------------ */
.institutions-bar {
  padding: 18px 0 44px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.institutions-lead {
  color: var(--ink-500);
  margin-bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.institutions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 4px;
}

/* Linked institution chips in the "Used in research at" row --------- */
.logo-link {
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  padding: 4px 10px;
  border-radius: 6px;
}
.logo-link:hover {
  color: var(--accent) !important;
  background: var(--blue-100);
}

/* Inline link (re-ensured in case components.css misses it) ------------ */
.inline-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 120ms ease;
}
.inline-link:hover { color: var(--accent-hover, var(--blue-700)); }