/* =============================================================================
   KUUSAMO.gg V2 — Section 1: Hero
   Full-bleed photograph. Headline top-left. Slogan + CTA centred between players.
   ============================================================================= */

.kgg-hero {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background-color: var(--c-forest);
}

.kgg-hero__text {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  /* Full-width with same centering as content sections */
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: calc(13vh - 40px) var(--space-4) var(--space-6) var(--space-5);
}

.kgg-hero__text-inner {
  max-width: 480px;
}
.kgg-hero__headline {
  font-size: clamp(2.8rem, 3.8vw, 4rem);
  font-weight: var(--fw-bold);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--c-snow);
  margin: 0;
}

.kgg-hero__headline em {
  font-style: normal;
  color: var(--c-ember);
}

.kgg-hero__centre {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  width: 360px;
  pointer-events: auto;
}

.kgg-hero__subline {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--c-mist); /* lifted from stone, not full snow */
  letter-spacing: 0.02em;
  margin: 0;
  text-transform: none;
  margin-top: 180px;
}

.kgg-hero__cta-btn {
  margin-top: 180px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  background-color: var(--c-ember);
  color: var(--c-snow);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;

  white-space: nowrap;
}
.kgg-hero__cta-btn:hover  { background-color: var(--c-burnt); }
.kgg-hero__cta-btn:active { filter: brightness(0.92); }
.kgg-hero__cta-btn:focus-visible { outline: 2px solid var(--c-ember); outline-offset: 4px; border-radius: 2px; }

.kgg-hero__visual         { display: none; }
.kgg-hero__visual::before { display: none; }
.kgg-hero__seal           { display: none; }

@keyframes kgg-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kgg-hero__headline { animation: kgg-fade-in 400ms 100ms ease-out both; }
.kgg-hero__centre   { animation: kgg-fade-in 400ms 300ms ease-out both; }

@media (max-width: 1099px) and (min-width: 768px) {
  .kgg-hero__text     { width: 65%; min-width: 400px; padding: 10vh var(--space-3) var(--space-5) var(--space-3); }
  .kgg-hero__headline { font-size: clamp(2.4rem, 4.5vw, 3.5rem); }
  .kgg-hero__centre   { width: 280px; }
}

@media (max-width: 767px) {
  /* Mobile hero: photo background enabled via v2-photography.css */
  .kgg-hero {
    align-items: flex-start;
    min-height: auto;
    padding-bottom: 0;
    /* bg fallback if photo fails to load */
    background-color: #26272B;
  }
  /* Visual/seal: hidden. Background photo comes from v2-photography.css ::before */
  .kgg-hero__visual {
    display: none;
  }
  .kgg-hero__seal {
    display: none;
  }
  /* Text block */
  .kgg-hero__text {
    width: 100%;
    min-width: unset;
    padding: 0.5rem 1.25rem 0;
    gap: 0;
    box-sizing: border-box;
  }
  /*
   * Heading: nowrap spans guarantee exactly 2 lines.
   * Font must not overflow at 320px (narrowest real device).
   * Container at 320px = 320 - 2*20px(padding) = 280px.
   * Using 5.8vw: at 320px = 18.6px < floor 1.375rem=22px -> 22px.
   * Tomorrow Bold at 22px, ls=-0.02em: 'Tervetuloa matkalle'(19c) ~225px. Fits 280px.
   * At 360px: 5.8vw=20.9px < 22px floor -> 22px still.
   * At 390px: 5.8vw=22.6px -> 22.6px (above floor). 'T.matkalle' ~230px in 318px. Fits.
   * At 430px: 5.8vw=24.9px. 'T.matkalle' ~245px in 358px. Fits.
   * padding-inline on headline itself as belt-and-suspenders overflow guard.
   */
  .kgg-hero__headline {
    font-size: clamp(1.55rem, 6.5vw, 2.25rem);
    line-height: 1.14;
    letter-spacing: -0.02em;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-inline: 4px;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Centre block: hidden on mobile (desktop-only absolute position) */
  .kgg-hero__centre {
    display: none;
  }
  /* CTA directly in .kgg-hero__text */
  .kgg-hero__cta-btn {
    width: auto;
    justify-content: center;
    margin-top: 3.5rem;
    margin-bottom: 2rem;
    /* CTA smaller on mobile */
    padding: 7px 18px;
    font-size: 0.75rem;
  }
  .kgg-hero__subline { margin-top: 0; }
}
/* Hero overlays */
.kgg-hero__colour-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 65% at 50% 50%, transparent 20%, rgba(38,39,43,0.96) 85%); z-index: 1; pointer-events: none; }
.kgg-hero__text-gradient { position: absolute; inset: 0; background: linear-gradient(to right, rgba(38,39,43,0.65) 0%, rgba(38,39,43,0.2) 30%, transparent 55%); z-index: 1; pointer-events: none;
}
/* Two headline spans: each on its own line, guaranteed 2-line layout */
.kgg-hero__headline-line {
  display: block;
  white-space: nowrap;
  max-width: 100%;
}