/* ============================================
   gs-hero — homepage hero section (dark bg)
   ============================================ */

.gs-hero {
  /* Bg color stays as fallback while the SVG loads / for users where
     the image fails. The waves SVG hosted on HubSpot CDN — same file
     used on the live site, also reused on the closing CTA section. */
  background-color: var(--color-bg-dark);
  background-image: url('https://www.giantswarm.io/hubfs/Illustrations/gs23-dark-blue-waves-bg.svg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--color-fg-on-dark);
  /* Extra top padding (9rem) gives the hero title room to breathe
     under the fixed header overlay. Bottom stays at 6rem for the
     section-rhythm consistency. */
  padding: 9rem 1.5rem 6rem;
  text-align: center;
}

.gs-hero__inner {
  max-width: var(--content-max);
  margin: 0 auto;
}

.gs-hero__title {
  color: var(--color-fg-on-dark);
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin: 0 auto 1rem;
  /* Bumped 18ch → 22ch so the longer German headline ("Der kuratierte
     Platform Engineering Stack", ~41 chars) wraps to 2-3 lines
     instead of being squeezed to 3-4. text-wrap: balance lets the
     browser pick the optimal break points within the cap — works
     well for EN AND DE without per-language overrides. */
  max-width: 22ch;
  text-wrap: balance;
}

.gs-hero__subtitle {
  color: var(--color-fg-on-dark);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  margin: 0 auto 1.5rem;
}

.gs-hero__description {
  /* Override the global muted-on-dark token (#A8B5C2) just here — at
     hero scale the description sits below a bold subtitle and pure-
     white title, so it needs more presence than the system's default
     "muted body on dark" tier. rgba(255,255,255,0.85) lifts it close
     to white while keeping a subtle hierarchy step under the
     subtitle above. */
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 42rem;
  margin: 0 auto 2.5rem;
  /* Override the global `<p>` text-wrap: pretty here with balance.
     `pretty` targets orphan-avoidance but has narrower browser
     support (Chrome 117+, no Firefox stable yet). `balance` is
     more widely supported and works well on short paragraphs like
     this hero description (~50 words). Both prevent the
     "Experten-Support." orphan; balance just lands earlier across
     the browser matrix. */
  text-wrap: balance;
}

.gs-hero__actions {
  display: flex;
  gap: 0.75rem;
  margin: 0 auto 4rem;
  max-width: 26rem;
  flex-wrap: wrap;
  justify-content: center;
}

.gs-hero__actions .gs-btn {
  flex: 1 1 11rem; /* equal-width siblings, min 11rem so they fit comfortably */
}

.gs-hero__stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-width: 800px;
  margin: 0 auto;
  /* Hero divider intentionally brighter than the system --color-border-dark
     because it's a feature line, not just a structural separator */
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2.5rem;
}

.gs-hero__stat {
  text-align: center;
}

.gs-hero__stat-value {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-fg-on-dark);
  line-height: var(--leading-tight);
  margin-bottom: 0.25rem;
}

.gs-hero__stat-label {
  color: var(--color-fg-muted-on-dark);
  font-size: var(--text-sm);
}

@media (max-width: 767px) {
  /* Mobile top padding bumped from 4rem to 7rem — the header is
     ~64px tall on mobile (announcement bar hidden), so 4rem (64px)
     of top padding gave zero clearance between header bottom and
     title top. 7rem (~112px) leaves a ~50px breathing band of dark
     navy between the chrome and the title. */
  .gs-hero { padding: 7rem 1.5rem 3rem; }
  .gs-hero__stats {
    /* Keep all 4 stats in one row, just shrink the text */
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding-top: 2rem;
  }
  .gs-hero__stat-value {
    /* Tighter than system H2 because of the 4-col grid constraint */
    font-size: 1.5rem;
  }
  .gs-hero__stat-label {
    font-size: 0.75rem;
    line-height: 1.3;
  }
  /* Force each label's word groups onto their own line so all 4 stats
     show as 2 visual lines and align uniformly across the row */
  .gs-hero__stat-label span {
    display: block;
  }
}