/* Bidragskompassen – hero: giant headline, drifting e-avatar pattern (brand mark), search combobox, counters */

.hero {
  position: relative; overflow: hidden;
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(48px, 9vh, 112px);
  background: var(--blue-600);
}
.hero__pattern {
  position: absolute; inset: -168px; pointer-events: none;
  color: var(--blue-200); opacity: 0.1;
  animation: hero-drift 120s linear infinite;
}
.hero__pattern svg { width: 100%; height: 100%; }
@keyframes hero-drift { to { transform: translate3d(168px, 168px, 0); } }
.hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 60% at 82% 28%, rgba(79, 106, 140, 0.55), transparent 70%),
    radial-gradient(45% 50% at 0% 100%, rgba(56, 74, 102, 0.9), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; }

.hero__eyebrow { display: flex; align-items: center; gap: 16px; color: var(--blue-300); margin-bottom: var(--sp-lg); }
.hero__eyebrow::before { content: ""; width: 48px; height: 1px; background: currentColor; }

.hero__title {
  font-size: var(--fs-h1); line-height: 0.98; letter-spacing: 0.01em;
  max-width: 14ch;
}
.hero__title em { display: block; padding-left: clamp(0px, 8vw, 1.1em); color: var(--blue-200); }

.hero__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-lg) var(--gutter);
  align-items: end; margin-top: clamp(32px, 6vh, 64px);
}
.hero__lead { grid-column: 1 / span 4; max-width: 36ch; font-size: var(--fs-ingress); color: var(--blue-100); }
.hero-search { grid-column: 6 / span 7; }
.hero-search__label { display: block; margin-bottom: 12px; color: var(--blue-300); }
@media (max-width: 960px) {
  .hero__lead, .hero-search { grid-column: 1 / -1; }
}

/* ---------- Combobox ---------- */
.combo {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: var(--r-sm); background: var(--blue-100);
}
.combo:focus-within { outline: 3px solid var(--white); outline-offset: 3px; }
.combo__input {
  flex: 1; min-width: 0; min-height: 52px; padding: 12px 14px;
  border: 0; background: transparent; color: var(--ink);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem);
}
.combo__input:focus-visible { outline: none; }
.combo__input::placeholder { color: var(--blue-400); opacity: 1; }
.combo__submit { flex: none; }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20;
  max-height: min(60vh, 520px); overflow: auto;
  background: var(--beige-100); color: var(--ink);
  border-top: 3px solid var(--blue-400);
  --mark-bg: var(--blue-200);
  --text-soft: var(--blue-500);
}
.combo__opt {
  display: grid; gap: 4px; padding: 12px 16px 12px 20px; cursor: pointer;
  border-bottom: 1px solid rgba(60, 60, 59, 0.18); border-left: 4px solid transparent;
}
.combo__opt:hover { background: var(--beige-200); }
.combo__opt.is-active { background: var(--blue-200); border-left-color: var(--blue-600); }
.combo__name { font-family: var(--serif); font-size: 1.25rem; letter-spacing: var(--track-serif); }
.combo__meta { font-size: var(--fs-sm); color: var(--blue-500); }
.combo__cannot { font-weight: 700; }
.combo__opt--all { display: flex; align-items: center; justify-content: space-between; background: var(--beige-200); font-weight: 700; }
.combo__opt--all.is-active { background: var(--blue-200); }
@media (max-width: 520px) {
  .combo { flex-wrap: wrap; }
  .combo__input { flex-basis: 100%; }
  .combo__submit { width: 100%; }
}

/* ---------- Counters ---------- */
.hero__counters {
  display: flex; flex-wrap: wrap; gap: var(--sp-md) clamp(24px, 5vw, 72px);
  margin-top: clamp(40px, 7vh, 80px); padding-top: var(--sp-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.counter { display: flex; align-items: baseline; gap: 12px; }
.counter__num {
  font-family: var(--serif); font-size: clamp(3rem, 2rem + 4vw, 6rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0;
}
.counter__label {
  max-width: 11ch; color: var(--blue-300);
  font-size: 11px; font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; line-height: 1.3;
}

.hero__foot {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-md);
  padding-block: var(--sp-lg);
}
.hero__cue { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; font-weight: 700; text-decoration: none; }
.hero__cue:hover { text-decoration: underline; }
.hero__cue-line { width: 1px; height: 44px; background: currentColor; animation: hero-cue 2.6s var(--ease-io) infinite; }
@keyframes hero-cue {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero__motion { color: var(--blue-100); }

/* ---------- Word rise (all [data-split] headlines) ---------- */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.08em 0.14em 0; margin: 0 -0.08em -0.14em 0; }
.js [data-split] .w__i {
  display: inline-block; transform: translateY(112%);
  transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.js [data-split].is-in .w__i { transform: none; }