/* ==========================================================================
   SEKCJA 03: Potencjał inwestycji
   --------------------------------------------------------------------------
   Z designu (home:0/4): 1440×672, padding 80/80/120, kolumna, gap 64.
   Panel 1280×386, promień 32, padding 56, kolumna, gap 40.

   ⚠️ W Figmie istnieje komponent `Stat Block` z INNĄ wersją tego bloku
   (ikona wektorowa z gradientową kreską, liczba wypełniona gradientem,
   50 px). Nie jest użyty w makiecie — kodujemy według sekcji, nie komponentu.
   ========================================================================== */

.fc-stats {
  padding-block: var(--fc-sp-80) var(--fc-sp-120);
  overflow: hidden;
}

.fc-stats__inner {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-64);
}

.fc-stats__panel {
  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-40);
  padding: var(--fc-sp-56);
}

/* Pasek dekoracyjny 64×4 — nie jest interaktywny, nie myl go ze wskaźnikiem
   slajdów w hero (ten ma 3 px wysokości i trzy segmenty). */
.fc-stats__bar {
  width: 64px;
  height: 4px;
  border-radius: var(--fc-radius-pill);
  background-image: var(--fc-gradient-brand);
}

/* ---------------------------------------------------------------------------
   KOLUMNY

   BEZ `gap` — odstępy robią paddingi, a separację pionowa kreska na lewej
   krawędzi. Pierwsza kolumna kreski nie ma i nie ma lewego paddingu.
   --------------------------------------------------------------------------- */
.fc-stats__cols {
  display: flex;
  align-items: flex-start;
}

.fc-stats__col {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-sp-20);
  padding: 0 var(--fc-sp-32) 0 var(--fc-sp-48);
  border-left: var(--fc-border-width) solid var(--fc-color-hairline-weak);
}

.fc-stats__col:first-child {
  padding-left: 0;
  border-left: 0;
}

.fc-stats__icon {
  height: 76px;
  width: auto;
  object-fit: contain;
}

.fc-stats__value,
.fc-stats__unit,
.fc-stats__text {
  margin: 0;
  /* --fc-stats-w podaje sekcja z danych; bez niego szerokość wynika z treści. */
  width: var(--fc-stats-w, auto);
}

.fc-stats__value {
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-stat);
  line-height: var(--fc-lh-stat);
  letter-spacing: var(--fc-ls-stat);
  color: var(--fc-color-text);
}

.fc-stats__unit {
  width: auto;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-semibold);
  font-size: var(--fc-fs-xs);
  line-height: var(--fc-lh-auto);
  letter-spacing: var(--fc-ls-label);
  color: var(--fc-color-accent);
  text-transform: uppercase;
}

.fc-stats__text {
  font-size: var(--fc-fs-body);
  line-height: var(--fc-lh-body);
  color: var(--fc-color-text-muted);
}

/* ==========================================================================
   RESPONSYWNOŚĆ — INTERPRETACJA, BRAK W DESIGNIE
   ========================================================================== */

/*
 * ⚠️ ZAWIJANIE ZACZYNA SIĘ OD 1200, NIE OD 900.
 *
 * Kolumny brały tu stałą podstawę 280 px, ale `.fc-stats__cols` nie zawijał
 * aż do 900 px — a to dwie połowy jednej decyzji, które rozjechały się na
 * dwa progi. Skutek: przy 900 px trzy kolumny (840 px podstawy) dzieliły
 * 724 px wnętrza panelu i kurczyły się do 241 px, z czego 80 zjadały paddingi
 * rozdzielające. Na liczbę 46 px zostawało 161 px i wartość łamała się
 * w środku.
 *
 * Kreski pionowe znikają razem z zawijaniem: przy dwóch rzędach kolumna
 * otwierająca drugi rząd dostawałaby wiszącą kreskę, bo `:first-child` widzi
 * tylko pierwszą kolumnę w całej siatce, a nie pierwszą w rzędzie. Separację
 * przejmuje odstęp — tak jak było dotąd poniżej 900.
 */
@media (max-width: 1199.98px) {
  .fc-stats__cols {
    flex-wrap: wrap;
    gap: var(--fc-sp-40);
  }

  .fc-stats__col {
    flex: 1 1 280px;
    padding: 0;
    border-left: 0;
  }

  .fc-stats__value,
  .fc-stats__text {
    width: auto;
  }
}

@media (max-width: 899.98px) {
  .fc-stats {
    padding-block: var(--fc-sp-56) var(--fc-sp-72);
  }

  .fc-stats__inner {
    gap: var(--fc-sp-40);
  }

  .fc-stats__panel {
    padding: var(--fc-sp-32);
  }
}