/* Shared hero system for the eight primary WhyGermany pillars. */
.macro-view-page { --pillar-hero-image: url('../macro-bg.webp'); }
.study-page { --pillar-hero-image: url('../study-bg.webp'); }
.work-page { --pillar-hero-image: url('../bg.webp'); }
.culture-page { --pillar-hero-image: url('../bg.webp'); }
.settling-page { --pillar-hero-image: url('../bg.webp'); }
.unwritten-page { --pillar-hero-image: url('../UR1.webp'); }
.finances-page { --pillar-hero-image: url('../finances-breakdown.webp'); }
.future-page { --pillar-hero-image: url('../bg.webp'); }

body.wg-hub-page #hero.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 680px !important;
  padding: 150px 0 92px !important;
  display: grid !important;
  align-items: center !important;
  background-image:
    linear-gradient(112deg, rgba(4,25,43,.94), rgba(7,42,67,.84) 52%, rgba(4,25,43,.91)),
    var(--pillar-hero-image) !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body.wg-hub-page #hero.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(90deg, transparent 5%, #000 48%, #000);
  pointer-events: none;
}

body.wg-hub-page #hero.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: auto;
  bottom: auto;
  width: 610px;
  height: 610px;
  right: -190px;
  top: -220px;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 50%;
  box-shadow:
    0 0 0 92px rgba(255,255,255,.022),
    0 0 0 184px rgba(255,255,255,.014);
  pointer-events: none;
}

body.wg-hub-page #hero .container,
body.wg-hub-page #hero .row,
body.wg-hub-page #hero [class*="col-lg-"] {
  width: 100%;
}

body.wg-hub-page #hero .hero-content {
  width: min(100%, 1060px) !important;
  margin-inline: auto;
}

body.wg-hub-page #hero .company-badge {
  min-height: 40px;
  margin-bottom: 24px !important;
  padding: 8px 18px !important;
  color: #ffcc00 !important;
  border: 1px solid rgba(255,204,0,.34) !important;
  border-radius: 999px !important;
  background: rgba(255,204,0,.1) !important;
  backdrop-filter: blur(10px);
  font-size: .75rem !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
}

body.wg-hub-page #hero h1 {
  max-width: 1000px !important;
  margin: 0 auto 26px !important;
  color: #fff !important;
  font-family: Nunito, sans-serif !important;
  font-size: clamp(3rem, 5.5vw, 5.45rem) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -.048em !important;
  text-wrap: balance;
}

body.wg-hub-page #hero h1 .accent-text {
  color: #ffcc00 !important;
}

body.wg-hub-page #hero .lead,
body.wg-hub-page #hero .macro-hero-lead {
  max-width: 800px !important;
  margin: 0 auto !important;
  color: #d6e0e8 !important;
  font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
  line-height: 1.7 !important;
  text-wrap: balance;
}

/* Keep the hero anatomy identical: badge, title and concise introduction. */
body.wg-hub-page #hero .hero-buttons,
body.wg-hub-page #hero .macro-hero-signals,
body.wg-hub-page #hero .study-hero-signals {
  display: none !important;
}

/* High-contrast selected state shared by all pillar navigators. */
body.wg-hub-page .toc-link.is-active {
  color: #fff !important;
  background: #071f35 !important;
}

body.wg-hub-page .toc-link.is-active span {
  color: #fff !important;
}

body.wg-hub-page .toc-link.is-active i {
  color: #ffcc00 !important;
}

@media (max-width: 991px) {
  body.wg-hub-page #hero.hero {
    min-height: 610px !important;
    padding: 128px 0 80px !important;
  }

  body.wg-hub-page #hero h1 {
    font-size: clamp(2.65rem, 9vw, 4.35rem) !important;
  }
}

@media (max-width: 767px) {
  body.wg-hub-page #hero.hero {
    min-height: 560px !important;
    padding: 112px 0 68px !important;
  }

  body.wg-hub-page #hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.55rem) !important;
    line-height: 1 !important;
    overflow-wrap: anywhere;
  }

  body.wg-hub-page #hero h1 br {
    display: none;
  }

  body.wg-hub-page #hero .lead,
  body.wg-hub-page #hero .macro-hero-lead {
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }

  body.wg-hub-page #hero.hero::after {
    width: 390px;
    height: 390px;
    right: -210px;
    top: -120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.wg-hub-page #hero * { transition: none !important; }
}