/* ============================================================
   Sekcja 2 — O nas + statystyki  |  Figma 861:2098
   Stan końcowy jest domyślny (animacje wejścia tylko przez JS).
   ============================================================ */

.s-sekcja-2 {
  /* skala chmurek statystyk — wymiary z Figmy (desktop 1:1) */
  --stat-k: 1;
  /* Figma Container-2 (861:2098 / Home 861:1769): px 145 / py 120.
     Uwaga: hero ma własne wcięcie ~143px (--content-left) — ta sekcja
     w makiecie stoi na 145px, stąd wartość wprost. */
  padding: 120px 145px;
}

.s-sekcja-2__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* --- Blok tekstowy ------------------------------------------ */

.s-sekcja-2__text {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  padding: 64px 0;
}

.s-sekcja-2__label {
  align-self: stretch;
  font-size: var(--fs-mono-sm);
  line-height: 1;
  /* Body Mono 14 wg typografia.md: trim interlinii (cap/alphabetic)
     + cecha OpenType "ordn" — progressive enhancement */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-feature-settings: "ordn" 1;
}

.s-sekcja-2__heading {
  align-self: stretch;
  max-width: 1151px; /* szerokość H2 z Figmy — utrzymuje łamanie na 3 wiersze */
}

/* maski linii dla efektu mask-in (dodawane przez JS/SplitText) */
.s-sekcja-2__line-mask {
  overflow: hidden;
  /* zapas na wydłużenia dolne przy interlinii 1.0 */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.s-sekcja-2__cols {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.s-sekcja-2__col {
  width: 334px;
  font-size: 18px; /* wartość z projektu (między Body 20 a Body Mobile 16) */
  line-height: 1.3;
}

.s-sekcja-2__col--2 {
  width: 329px;
}

/* --- Statystyki (chmurki bąbelkowe) ------------------------- */

.s-sekcja-2__stats {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 65px 0;
}

.s-sekcja-2__stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.s-sekcja-2__cloud {
  position: relative;
}

/* wymiary chmur + pion cyfr (--y) wprost z Figmy */
.s-sekcja-2__cloud--200 { width: calc(313.079px * var(--stat-k)); height: calc(109.406px * var(--stat-k)); --y: 28.2px; }
.s-sekcja-2__cloud--98  { width: calc(218.163px * var(--stat-k)); height: calc(92.569px * var(--stat-k));  --y: 19.64px; }
.s-sekcja-2__cloud--100 { width: calc(304.519px * var(--stat-k)); height: calc(109.69px * var(--stat-k));  --y: 28.2px; }

.s-sekcja-2__cloud-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.s-sekcja-2__char {
  position: absolute;
  left: calc(var(--x) * var(--stat-k));
  top: calc(var(--y) * var(--stat-k));
  font-family: var(--font-mono);
  font-weight: 500; /* Figma: Saans Mono Medium (Fragment Mono zaokrągli do 400) */
  font-size: calc(48px * var(--stat-k));
  line-height: 1.1;
  color: var(--c-cream);
}

.s-sekcja-2__stat-label {
  margin-top: 18px;
  width: min-content;
  min-width: 100%; /* łamanie względem szerokości chmurki (jak w Figmie) */
}

/* tekst tylko dla czytników ekranu (cyfry w chmurkach są aria-hidden) */
.s-sekcja-2__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Przypis prawny ----------------------------------------- */

.s-sekcja-2__legal {
  width: 334px;
  font-size: 12px;
  line-height: 1.3;
}

/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 767px) {
  .s-sekcja-2 {
    --stat-k: 0.55; /* chmurki ~55% wielkości desktopowej (wg projektu mobile) */
    padding: 64px var(--page-margin);
  }

  .s-sekcja-2__text {
    align-items: flex-start;
    padding: 0 0 32px;
  }

  .s-sekcja-2__cols {
    flex-direction: column;
  }

  .s-sekcja-2__col {
    width: 100%;
    font-size: var(--fs-body);
  }

  /* projekt mobile pokazuje tylko pierwszy akapit */
  .s-sekcja-2__col--2 {
    display: none;
  }

  .s-sekcja-2__stats {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 0 0 48px;
  }

  .s-sekcja-2__stat {
    justify-content: flex-start;
    border-top: 1px solid var(--c-tooltip); /* linia-separator jak w projekcie mobile */
    padding-top: 24px;
  }

  .s-sekcja-2__stat-label {
    margin-top: 16px;
  }

  .s-sekcja-2__legal {
    width: min(212px, 100%);
  }
}