/* ==========================================================================
   SEKCJA: oś czasu („10 lat doświadczenia")
   --------------------------------------------------------------------------
   Z makiety 137:784: 1440×739, tło biel 2 %, padding 96 / 80 / 100,
   kolumna wyśrodkowana, gap 56.
     nagłówek   108  (etykieta + H2 34/40, gap 14)
     akapit     140  (18/28, szerokość 760, krycie 85 %)
     oś         169  (belka 54 + gap 20 + kamienie 95)
   ========================================================================== */

.fc-timeline {
  padding-block: var(--fc-sp-96) var(--fc-sp-100);
  background: var(--fc-glass-2);
}

.fc-timeline__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-sp-56);
}

/*
 * ⚠️ `max-width: 100%` NA TYM OPAKOWANIU JEST KONIECZNE — NIE KASUJ GO.
 *
 * `.fc-timeline__inner` ma `align-items: center`, więc ten blok jest
 * elementem flex sortowanym do szerokości TREŚCI, a nie do szerokości
 * kontenera. Jego treścią jest nagłówek z `width: 760px`, więc blok
 * przyjmował 760 px także wtedy, gdy ekran miał 320 — a wtedy `max-width:
 * 100%` na samym nagłówku odnosiło się do tych 760 px i nic nie ograniczało.
 * Skutek: nagłówek nie łamał się na telefonie i rozpychał stronę w prawo
 * o kilkaset pikseli.
 *
 * To jedyne miejsce w motywie z opakowaniem centrującym W ŚRODKU drugiego
 * opakowania centrującego — stąd tylko tu problem wystąpił.
 */
.fc-timeline__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fc-sp-14);
  max-width: 100%;
  text-align: center;
}


.fc-timeline__title {
  width: 760px;
  max-width: 100%;
  margin: 0;
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h3-sm);
  line-height: var(--fc-lh-h3-sm);
  text-align: center;
}

.fc-timeline__lead {
  width: 760px;
  max-width: 100%;
  margin: 0;
  font-size: var(--fc-fs-lead);
  line-height: var(--fc-lh-lead);
  color: var(--fc-color-text-muted);
  text-align: center;
  opacity: var(--fc-opacity-lead-soft);
}

/* ---------------------------------------------------------------------------
   OŚ

   Makieta 137:789: kolumna z odstępem 20. Najpierw PAS o wysokości 54
   (belka, kropki, strzałka, plakietka), pod nim rząd kamieni.

   ⚠️ PAS I KAMIENIE TO DWA OSOBNE WIERSZE — NIE JEDNA WARSTWOWA SIATKA.
   Wcześniej belka i kropki leżały na tej samej siatce co teksty, a ich
   pozycje liczyły się od `padding-top` toru: kropka −39 px od kamienia,
   belka +43 px od góry toru. Dwie liczby zależne od jednego paddingu —
   gdy ten nie zadziałał, belka zjechała 74 px w dół, w połowę tytułów,
   a plakietka wylądowała na tekście. W tym układzie belka i kropki
   są w JEDNYM pasie o stałej wysokości i nie mają jak się rozjechać.

   Liczbę kolumn podaje sekcja zmienną `--fc-timeline-count` na torze —
   dziedziczy ją i pas kropek, i lista kamieni, więc szósty rok dołożony
   w panelu nie wymaga zmiany w CSS.
   --------------------------------------------------------------------------- */
.fc-timeline__track {
  /* Wysokość pasa osi z makiety (137:790). Zmienna, bo liczy z niej także
     plakietka, która leży na belce, a siedzi w kamieniu pod pasem. */
  --fc-timeline-band-h: 54px;

  display: flex;
  flex-direction: column;
  gap: var(--fc-sp-20);
  width: 100%;
}

/* ---------------------------------------------------------------------------
   PAS OSI — 54 px
   --------------------------------------------------------------------------- */
.fc-timeline__band {
  position: relative;
  height: var(--fc-timeline-band-h);
}

/* Belka: 2 px w gradiencie markowym, na wysokości 43 z 54. */
.fc-timeline__rail {
  position: absolute;
  left: 0;
  top: 43px;
  width: 100%;
  height: 2px;
  background: var(--fc-gradient-brand);
}

/* Strzałka domyka oś po prawej.

   W makiecie stoi na x = 1254 przy osi szerokiej na 1280 i sama ma 29 px,
   czyli wystaje poza oś dokładnie o 3 px (1254 + 29 = 1283). Stąd −3,
   a nie −29: przy −29 strzałka odrywała się od końca belki. */
.fc-timeline__arrow {
  position: absolute;
  right: -3px;
  top: 29.5px;
  display: flex;
}

/*
 * ============================================================================
 * PLAKIETKA JEST POZYCJONOWANA WZGLĘDEM SWOJEGO KAMIENIA — NIE WZGLĘDEM TORU.
 * ----------------------------------------------------------------------------
 * W markupie siedzi w OSTATNIM kamieniu, między rokiem a tytułem (uzasadnienie
 * w timeline.php), a wizualnie ma leżeć na belce, czyli w pasie NAD listą
 * kamieni — i o jedną kolumnę w lewo od swojego kamienia.
 *
 * ⚠️ KOTWICĄ NIE MOŻE BYĆ TOR, CHOĆ TAK BYŁOBY PROŚCIEJ.
 * Kamień nosi klasę `.fc-reveal`, a ta przed odsłonięciem ma
 * `transform: translateY(16px)`. Element z transformacją JEST blokiem
 * zawierającym dla potomków `position: absolute` — więc plakietka i tak
 * liczyłaby się od kamienia, dopóki animacja nie dobiegnie końca, a potem
 * (`transform: none`) przeskakiwałaby do toru. Pozycja zależna od stanu
 * animacji to błąd, który widać tylko przy przewijaniu.
 *
 * Dlatego kamień dostaje `position: relative` NA STAŁE (patrz
 * `.fc-timeline__item` niżej) i jest kotwicą zawsze, w obu stanach.
 *
 * SKĄD TE DWIE LICZBY:
 *   top  — plakietka ma w makiecie y = 30.5 w pasie o wysokości 54, a między
 *          pasem a kamieniami leży odstęp toru (20). Od górnej krawędzi
 *          kamienia to 30.5 − 54 − 20, czyli −43.5 px.
 *   left — w makiecie plakietka stoi na x = 818, a kolumna CZWARTEGO kamienia
 *          zaczyna się na 777.6, czyli 40.4 px dalej. Zaokrąglone do tokenu 40,
 *          bo 0.4 px to skala, nie decyzja.
 *
 *          Plakietka mieszka jednak w kamieniu PIĄTYM, więc do tych 40 px
 *          trzeba cofnąć się o całą jedną kolumnę: `100%` to szerokość
 *          kamienia (pudełko wyściełane = szerokość kolumny siatki),
 *          a `--fc-sp-16` to `gap` między kolumnami w `.fc-timeline__items`.
 *          Obie wartości są procentowe albo tokenowe, więc plakietka zostaje
 *          na swoim miejscu także wtedy, gdy kolumny się zwężą — i przy innej
 *          liczbie kamieni niż pięć, bo siatka dzieli tor po równo.
 * ============================================================================
 */
.fc-timeline__badge {
  position: absolute;
  left: calc(var(--fc-sp-40) - 100% - var(--fc-sp-16));
  top: calc(30.5px - var(--fc-timeline-band-h) - var(--fc-sp-20));
  display: inline-flex;
  align-items: center;
  gap: var(--fc-sp-6);
  padding: var(--fc-sp-6) var(--fc-sp-12);
  border-radius: var(--fc-radius-pill);
  background: var(--fc-color-accent-2);
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-bold);
  font-size: var(--fc-fs-xs);
  line-height: var(--fc-lh-auto);
  letter-spacing: .5px;
  color: var(--fc-color-text);
  white-space: nowrap;
}

/*
 * Oś z JEDNYM kamieniem: nie ma kolumny na lewo, więc cofnięcie wyprowadziłoby
 * plakietkę poza tor (a sekcja i tak by ją przycięła). Wtedy zostaje odsunięcie
 * od własnej kolumny, czyli zachowanie sprzed przeniesienia plakietki.
 */
.fc-timeline__item:only-child .fc-timeline__badge {
  left: var(--fc-sp-40);
}

.fc-timeline__badge-mark {
  color: var(--fc-color-accent);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   KROPKI

   Osobny rząd na tej samej siatce co kamienie, więc każda kropka wypada
   na początku swojej kolumny — tak jak w makiecie (0, 255, 511, 768, 1044
   przy kolumnach zaczynających się na 0, 256, 512, 768, 1047).
   --------------------------------------------------------------------------- */
.fc-timeline__dots {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--fc-timeline-count, 5), minmax(0, 1fr));
  gap: var(--fc-sp-16);
}

/*
 * Kropka: koło 18 px w gradiencie z białym środkiem 12 px. W makiecie to
 * okrąg o promieniu 7.5 z obrysem 3 — obrys zajmuje promień 6…9, a widoczna
 * biel kończy się na 6. Dwa koła odtwarzają to bez maski.
 *
 * `align-self: end` + 1 px marginesu: w pasie 54 px kropka zaczyna się na 35
 * i kończy na 53, czyli jej środek (44) leży dokładnie na belce (43–45).
 */
.fc-timeline__dot {
  align-self: end;
  position: relative;
  width: 18px;
  height: 18px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: var(--fc-gradient-brand);
}

.fc-timeline__dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--fc-color-text);
}

/* ---------------------------------------------------------------------------
   KAMIENIE
   --------------------------------------------------------------------------- */
.fc-timeline__items {
  display: grid;
  grid-template-columns: repeat(var(--fc-timeline-count, 5), minmax(0, 1fr));
  gap: var(--fc-sp-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `position: relative` przy każdej szerokości — kamień jest blokiem
   zawierającym dla plakietki, patrz komentarz przy `.fc-timeline__badge`.
   Na wąskim ekranie wisi na nim dodatkowo kropka pionowej osi. */
.fc-timeline__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--fc-sp-6);
  /* Kolumny w makiecie mają 240 px treści przy 264 px podziału — ostatnia
     nie ma prawego odstępu, bo nie ma po niej sąsiada. */
  padding-right: var(--fc-sp-24);
}

.fc-timeline__item:last-child {
  padding-right: 0;
}

/* Rok w gradiencie markowym.

   `width: fit-content` z tego samego powodu co przy etykietach sekcji —
   `background-clip: text` przycina tło CAŁEGO pudełka, więc rozciągnięty
   na kolumnę blok pokazałby na czterech cyfrach sam początek gradientu.
   Uzasadnienie w assets/css/components/eyebrow.css. */
.fc-timeline__year {
  width: fit-content;
  margin: 0;
  font-family: var(--fc-font-heading);
  font-weight: var(--fc-fw-black);
  font-size: var(--fc-fs-h6);
  line-height: var(--fc-lh-auto);
  background-image: var(--fc-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fc-timeline__item-title {
  margin: 0;
  font-weight: var(--fc-fw-bold);
  font-size: var(--fc-fs-activity);
  line-height: var(--fc-lh-activity);
  letter-spacing: 0;
  color: var(--fc-color-text);
}

.fc-timeline__text {
  margin: 0;
  font-size: var(--fc-fs-xs);
  line-height: var(--fc-lh-xs);
  color: var(--fc-color-text-muted);
}

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

@media (max-width: 1199.98px) {
  /*
   * ========================================================================
   * OŚ PIONOWA
   *
   * Pięć kolumn poniżej ~1100 px zostawia kamieniowi 180 px, czyli mniej niż
   * szerokość słowa „franczyzowym". Trzy kamienie w rzędzie i belka nad
   * każdym rzędem byłyby kłamstwem o chronologii, więc oś staje się pionowa.
   *
   * ⚠️ WCIĘCIE SIEDZI NA KAMIENIU, NIE NA LIŚCIE — I TO JEST CAŁA SZTUCZKA.
   *
   * Wcześniej `padding-left` był na liście, a belka i kropka miały własne
   * przesunięcia (`left: 8px` od listy, `left: -32px` od kamienia). Znowu
   * dwie liczby liczone od dwóch różnych pudełek — i znowu się rozjechały:
   * belka wylądowała przy tekście, kropki 40 px na lewo od niej.
   *
   * Teraz lista nie ma paddingu, więc jej pudełko wyściełane równa się
   * pudełku treści, a belka i kropka odnoszą się do TEGO SAMEGO początku:
   * kropka 0…18 (środek 9), belka 8…10. Belka przechodzi środkiem kropki
   * i nie ma jak przestać.
   * ========================================================================
   */

  /* Belka, strzałka i kropki opisują ruch w poziomie — pionowo nie mają
     czego domykać, a plakietka wyprowadziła się do ostatniego kamienia.
     Pas nie ma już czego pokazać, więc znika w całości; gdyby został,
     `gap: 20px` toru dołożyłby pustą przerwę nad listą. */
  .fc-timeline__band {
    display: none;
  }

  /*
   * Plakietka wraca do przepływu i staje tam, gdzie ją postawił markup:
   * w ostatnim kamieniu, między rokiem „2026" a „17 lokalizacji FlyPark".
   * Przesunięcie o kolumnę z wersji desktopowej znika razem z `position`,
   * bo pionowa oś ma tylko jedną kolumnę i nie ma czego cofać.
   *
   * INTERPRETACJA — BRAK W DESIGNIE: 6 px dodatkowego odstępu z góry i z dołu
   * (razem z `gap: 6px` kamienia daje po 12). Makieta nie ma wersji mobilnej,
   * a przy samym `gap` pigułka sklejała się z rokiem i tytułem w jeden blok.
   */
  .fc-timeline__badge {
    position: static;
    align-self: flex-start;
    margin-block: var(--fc-sp-6);
  }

  .fc-timeline__items {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--fc-sp-36);
  }

  /* Belka biegnie od środka pierwszej kropki do środka ostatniej —
     4 px odsunięcia kropki od góry kamienia + 9 px do jej środka. */
  .fc-timeline__items::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 13px;
    bottom: 13px;
    width: 2px;
    background: linear-gradient(180deg, var(--fc-color-accent) 0%, var(--fc-color-accent-2) 100%);
  }

  /* `position: relative` stoi już w regule bazowej — tu tylko wcięcie. */
  .fc-timeline__item {
    /* 18 px kropki + 22 px oddechu do tekstu. */
    padding-left: var(--fc-sp-40);
    padding-right: 0;
  }

  /*
   * Kropka: dwa tła w jednej deklaracji — biały krążek 12 px NA gradiencie
   * markowym. Odpowiednik dwóch kół z wersji desktopowej, bez drugiego
   * elementu w markupie.
   *
   * ⚠️ NIE `box-shadow: inset … biel`. Cień wewnętrzny rysuje się przy
   * KRAWĘDZI, więc dawał biały pierścień na zewnątrz i gradient w środku —
   * dokładnie odwrotnie niż w makiecie.
   */
  .fc-timeline__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, var(--fc-color-text) 0 6px, transparent 6px),
      var(--fc-gradient-brand);
  }
}