/* ==========================================================================
   Fastkava — B1 hero
   Full-bleed background photo (per-theme) + scrim + left content column.
   ========================================================================== */

.fk-hero {
  position: relative;
  min-height: clamp(560px, 92vh, 860px);
  display: flex;
  align-items: center;
  padding-top: var(--fk-header-h);
  overflow: hidden;
  background:
    radial-gradient(1200px 620px at 72% 42%, var(--fk-accent-glow), transparent 60%),
    var(--fk-bg-hero);
}

/* Background photo layers — the correct one shows per active theme */
.fk-hero__bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
/* Dark is the default when no [data-theme] is set (e.g. JS disabled) */
:root:not([data-theme="light"]) .fk-hero__bg--light { display: none; }
:root[data-theme="light"] .fk-hero__bg--dark { display: none; }

.fk-hero__scrim {
  position: absolute; inset: 0;
  background: var(--fk-hero-scrim);
}

.fk-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
}

.fk-hero__content { max-width: 560px; }

.fk-hero__title {
  margin: 0 0 20px;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  color: var(--fk-text-strong);
  text-wrap: balance;
}
.fk-hero__title .fk-hero__accent-text { color: var(--fk-accent); display: block; }

.fk-hero__subtitle {
  margin: 0 0 34px;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  color: var(--fk-text-strong);
  opacity: 0.92;
}

.fk-hero__cta { letter-spacing: 1.5px; }

/* Bottom accent hairline (matches header/footer accent line) */
.fk-hero__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--fk-accent) 16%, var(--fk-accent) 84%, transparent);
  z-index: 2;
}

@media (max-width: 768px) {
  /*
   * Fill the screen on load.
   *
   * `svh`, not `vh` or `dvh`, and the distinction matters on a phone:
   *
   *   vh  resolves to the LARGE viewport — the height with the address bar
   *       retracted. On load the bar IS showing, so a 100vh hero is taller than
   *       what you can see and the stats bar and bottom hairline start below the
   *       fold. That is the opposite of what is wanted here.
   *   dvh tracks the bar as it slides, so it always fits — but it relayouts the
   *       hero on every transition, which re-rasterises the full-bleed photo
   *       mid-scroll. Not worth it after the raster work on this page.
   *   svh is the height WITH the bar visible: exactly the load state, and a
   *       fixed value that never reflows afterwards.
   *
   * The plain-vh line above it is the fallback for anything predating svh; a
   * browser that understands the second declaration discards the first.
   *
   * `min-height` rather than `height` so a long translation can still push the
   * hero taller instead of overflowing it.
   */
  .fk-hero {
    align-items: flex-end;
    min-height: 100vh;
    min-height: 100svh;
  }
  .fk-hero__content { max-width: 100%; padding-bottom: clamp(28px, 8vw, 56px); }
  .fk-hero__subtitle { margin-bottom: 22px; }
}

/* ---- Stats bar (design 4a) ----------------------------------------------
   Sits on the hero's bottom rule. Desktop/tablet pin it to the foot of the
   section; on mobile it follows the CTA inside the content block, as the
   390 canvas shows. */
.fk-hero__stats {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 5vw, 72px);
  padding-top: clamp(16px, 1.8vw, 26px);
}

.fk-hero__stat { display: flex; flex-direction: column; gap: clamp(5px, .5vw, 7px); }
.fk-hero__stat-value {
  margin: 0;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  color: var(--fk-text-strong);
  /* Tabular figures stop the live counter jittering as digits change. */
  font-variant-numeric: tabular-nums;
}
.fk-hero__stat-label {
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--fk-text-muted);
}

/*
 * Desktop + tablet: the bar sits at the foot of the hero.
 *
 * It stays in normal flow and is pushed down with `margin-top:auto` rather than
 * being absolutely positioned — `left:0` on an absolute child resolves against
 * the container's PADDING box, so at widths below --fk-maxw the bar started at
 * the viewport edge and its first label was clipped by the gutter.
 */
@media (min-width: 769px) {
  .fk-hero { align-items: stretch; }
  .fk-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(24px, 4vw, 56px);
    padding-bottom: clamp(28px, 3vw, 44px);
  }
  .fk-hero__stats { margin-top: clamp(40px, 6vw, 88px); }
}

@media (max-width: 768px) {
  /* Follows the CTA inside the content block, as the 390 canvas shows. The
     inner needs its own bottom padding: the stats are a sibling of .__content,
     so that element's padding-bottom does not hold them off the hero's
     bottom hairline — and translated labels wrap to two lines. */
  .fk-hero__inner { padding-bottom: clamp(22px, 6vw, 40px); }
  .fk-hero__content { padding-bottom: 0; }
  .fk-hero__stats { margin-top: 22px; gap: 14px; }
  .fk-hero__stat { flex: 1 1 0; min-width: 0; }
  .fk-hero__stat-label { font-size: 11px; }
}