/* ==========================================================================
   CALLA — komponent "Timeline" (ACF flexible content, layout "timeline")
   Oś czasu: linia pionowa + karty. Mobile — linia po lewej, karty w jednej
   kolumnie. Od 640px — linia na środku, karty naprzemiennie lewo/prawo.
   .timeline__bg reużywa technikę pełnego tła z .realizacje-cards__bg
   (assets/css/realizacje-cards.css) — position:absolute, width:75%, ale
   wycentrowane pod sekcją zamiast przyklejone do lewej krawędzi.
   ========================================================================== */

.timeline {
  position: relative;
  padding-block: var(--section-spacing);
  /* Odstęp linii/kropek od bloku treści (tytuł+opis) — używany w trzech
     miejscach niżej (szerokość itemu, offset kropki, offset roku), zawsze ta
     sama wartość żeby offsety zostały spójne. Fluid, żeby skalował się razem
     z resztą layoutu zamiast zostać jedną sztywną liczbą (decyzja Mike'a,
     2026-08-26: poprzednie 88px było za ciasne). Współdzielone z "O nas"
     (ID 356) i "Jak pracujemy" (ID 12344) — patrz section-timeline.php. */
  --timeline-offset: clamp(88px, calc(2.59vw + 78.29px), 128px);
}

.timeline__bg {
  display: block;
  position: absolute;
  left: 12.5%;
  width: 75%;
  top: 0;
  bottom: 0;
  z-index: -1;
  background-color: rgba(246, 244, 243, 0.5);
}

/* Mobile: tło przyklejone do prawej krawędzi, lewa strona zostaje biała —
   ten sam wzorzec co na tablecie (patrz niżej), tylko od razu od najmniejszych
   szerokości. */
@media (max-width: 639px) {
  .timeline__bg {
    left: auto;
    right: 0;
  }
}

/* Tablet: karty prawej strony (.timeline__item--right, offset --timeline-offset
   od linii) "uciekają" poza wycentrowane tło przy węższym viewporcie — tło
   przyklejone do prawej krawędzi zamiast wycentrowane, żeby zawsze mieściło
   treść. Desktop (≥1140px) zostaje wycentrowane jak dotychczas. */
@media (min-width: 640px) and (max-width: 1139px) {
  .timeline__bg {
    left: auto;
    right: 0;
  }
}

.timeline__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.timeline__heading {
  margin: 0 0 var(--space-4);
}

.timeline__heading-highlight {
  color: var(--color-accent-green);
}

/* .timeline__description — typografia w global.css (.lead-text). */
.timeline__description {
  max-width: 80%;
  margin: 0 auto;
}

@media (min-width: 1140px) {
  .timeline__description {
    max-width: 1024px;
  }
}

.timeline__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-7);
}

/* "top" ujemny — kawałek linii wystaje NAD pierwszą kropkę (lead-in), tak
   jakby linia kontynuowała się poza górną krawędź sekcji, zamiast zaczynać
   się dokładnie na jej wysokości (decyzja Mike'a, 2026-08-26). Mieści się
   bezpiecznie w odstępie .timeline__header { margin-bottom: var(--space-8) }
   nad .timeline__track, więc nie nachodzi na nagłówek/opis sekcji. */
.timeline__line {
  position: absolute;
  top: calc(-1 * clamp(24px, calc(1.04vw + 20.1px), 40px));
  bottom: 0;
  left: var(--space-4);
  width: 2px;
  background-color: color-mix(in srgb, var(--color-primary-dark) 20%, transparent);
}

/* Mobile: blok treści (tytuł+opis) dalej niż rok — realizowane przez
   flex-gap, nie position:absolute jak na desktopie/tablecie, żeby nie zależeć
   od stałej szerokości tekstu roku. "padding-left" to odstęp od kropki
   (position:absolute, poza flexboxem) do pierwszego elementu treści — obie
   wartości zwiększone i zamienione na fluid clamp (decyzja Mike'a,
   2026-08-26: poprzednie 8px/40px za ciasne). */
.timeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, calc(1.04vw + 36.1px), 56px);
  padding-left: clamp(16px, calc(1.04vw + 12.1px), 32px);
}

/* Kierunek odwrotny do domyślnego .reveal (global.css robi "fade in up",
   translateY(16px) -> 0) — karty timeline mają wjeżdżać z góry ("fade in
   down"), stąd ten sam dystans ze znakiem minus. .is-visible (dodawana przez
   reveal.js) i tak nadpisuje transform na translateY(0), więc kierunek startu
   to jedyne co trzeba tu zmienić. */
.timeline__item.reveal {
  transform: translateY(-16px);
}

@media (prefers-reduced-motion: reduce) {
  .timeline__item.reveal {
    transform: none;
  }
}

/* Kropka na .timeline__line — środek kropki musi pokrywać się dokładnie ze
   współrzędną x linii, inaczej niż .timeline__year (10px OD linii). Linia
   jest position:absolute względem .timeline__track, a jej "left" liczy się
   od brzegu paddingu tego kontenera (czyli sprzed --container-padding); item
   siedzi już WEWNĄTRZ tego paddingu, więc na mobile trzeba odjąć
   --container-padding, żeby wrócić do tego samego układu współrzędnych co
   linia (na ≥640px linia jest wycentrowana symetrycznie, więc padding się
   znosi i można użyć tej samej techniki co .timeline__year, offset
   --timeline-offset). */
.timeline__dot {
  position: absolute;
  top: 0;
  left: calc(var(--space-4) - var(--container-padding) - 8px);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #264045;
  border: 2px solid var(--color-bg);
}

.timeline__year {
  flex-shrink: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-h3);
  color: var(--color-primary-dark);
}

.timeline__card {
  padding: 0;
}

.timeline__item-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  /* Desktop 18px z Figmy = dokładnie górny koniec istniejącego --fs-body-lg. */
  font-size: var(--fs-body-lg);
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--color-text);
}

.timeline__item-description {
  max-width: 315px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-light);
  /* Desktop 14px z Figmy — żaden istniejący token nie ma takiego górnego
     końca (--fs-small to 14px, ale na sztywno, nie clamp), więc dedykowany
     fluid clamp tą samą metodą co reszta motywu (interpolacja 375px->1920px,
     ten sam wzorzec liczbowy co --fs-xs/--fs-tiny). */
  font-size: clamp(13px, calc(0.06vw + 12.76px), 14px);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-text);
}

@media (min-width: 640px) {
  .timeline__line {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Blok treści (.timeline__card, wypełnia .timeline__item od jego krawędzi)
     zaczyna się dokładnie --timeline-offset od .timeline__line — stąd ta
     zmienna zamiast dawnego var(--space-8) w wyliczeniu szerokości/pozycji
     itemu (patrz deklaracja --timeline-offset w .timeline wyżej). */
  .timeline__item {
    width: calc(50% - var(--timeline-offset));
    padding-left: 0;
  }

  .timeline__item--left {
    margin-right: auto;
    flex-direction: row-reverse;
    text-align: left;
  }

  .timeline__item--right {
    margin-left: auto;
  }

  /* Rok wyjęty z flexboxa i przypięty do własnej pozycji: dokładnie 10px od
     .timeline__line (obie strony), niezależnie od bloku treści (który zaczyna
     się --timeline-offset od linii — patrz .timeline__item wyżej), wyrównany
     do góry z .timeline__item-title. .timeline__item jest już
     position:relative, więc top:0 pokrywa się z górną krawędzią karty (bez
     paddingu/marginesu górnego), a odległość od linii liczymy odejmując
     odstęp itemu od linii (--timeline-offset, ta sama wartość co
     w .timeline__item) i dodając docelowe 10px. */
  .timeline__year {
    position: absolute;
    top: 0;
  }

  .timeline__item--right .timeline__year {
    left: calc(10px - var(--timeline-offset));
  }

  .timeline__item--left .timeline__year {
    right: calc(10px - var(--timeline-offset));
  }

  /* Kropka na ≥640px: linia wycentrowana (left:50%, symetryczny padding się
     znosi), więc można wrócić do dokładnie tej samej techniki co rok — offset
     --timeline-offset od krawędzi itemu — z tą różnicą, że cel to 0px OD
     linii (środek kropki na linii), pomniejszone o połowę szerokości kropki
     (8px), żeby wycentrować samą kropkę, a nie jej krawędź. */
  .timeline__dot {
    left: auto;
    right: auto;
  }

  .timeline__item--right .timeline__dot {
    left: calc(-8px - var(--timeline-offset));
  }

  .timeline__item--left .timeline__dot {
    right: calc(-8px - var(--timeline-offset));
  }
}