@charset "UTF-8";
/* ============================================================
   PRZEBIEG ZAMÓWIENIA - biała kartka wykresu (patrz acf/terminy).
   Etapy jako paski na wspólnej osi dni: szerokość paska to czas
   trwania, pozycja to moment startu.

   Kartka jest kolumną, w której kolejność daje `order`, nie DOM -
   podziałka rysuje się w PHP (wynika ze skali, nie z treści) i musi
   wejść między tytuł a listę etapów, choć w kodzie stoi pierwsza.

   Promień, cień i szerokość kolumny etykiet to metryki kompozycji,
   nie odstępy - stąd wartości płynne zamiast tokenów skoku.
   ============================================================ */
.tb-przebieg {
  /* Szerokość kolumny z nazwami etapów. Tor zaczyna się dokładnie za nią,
     więc ta sama zmienna odsuwa podziałkę - inaczej kreski nie stałyby
     nad paskami. */
  --etykieta: clamp(8.5rem, 13vw, 12rem);
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.4vw, 2rem) clamp(1rem, 2vw, 1.8rem) clamp(1.1rem, 2vw, 1.7rem);
  border: 1px solid var(--line-l-2);
  border-radius: var(--radius-lg);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--shadow-md);
  color: var(--wp--preset--color--text);
  /* Dwa poziomy przezroczyste dla kolumny: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. Dzięki temu tytuł, lista i podpis są dziećmi
     kartki na równi z podziałką z PHP. */
}
.tb-przebieg .tb-przebieg__blocks-wrap, .tb-przebieg .tb-przebieg__blocks {
  display: contents;
}
.tb-przebieg {
  /* ── tytuł kartki ─────────────────────────────────────── */
}
.tb-przebieg .tb-przebieg__tytul {
  order: 1;
  margin-block: 0 var(--space-md);
}
.tb-przebieg {
  /* ── podziałka osi ────────────────────────────────────── */
}
.tb-przebieg__os {
  order: 2;
  position: relative;
  height: 1.4rem;
  /* Kolumna etykiet plus odstęp do toru - podziałka ma stać dokładnie
     nad kreskami siatki, a te zaczynają się dopiero za odstępem. */
  margin-left: calc(var(--etykieta) + var(--space-md));
  margin-bottom: var(--space-sm);
}
.tb-przebieg__os span {
  position: absolute;
  left: var(--at);
  translate: -50% 0;
  font-size: var(--wp--preset--font-size--text-xs);
  white-space: nowrap;
}
.tb-przebieg__os {
  /* Skrajne podpisy trzymają się krawędzi wykresu, nie środka kreski -
     inaczej „0” i „28 dni” wystawałyby poza kartkę. */
}
.tb-przebieg__os span:first-child {
  translate: 0 0;
}
.tb-przebieg__os span:last-child {
  translate: -100% 0;
}
.tb-przebieg {
  /* ── lista etapów ─────────────────────────────────────── */
}
.tb-przebieg .tb-przebieg__etapy {
  order: 3;
  display: grid;
  gap: var(--space-sm);
  margin-block: 0;
  counter-reset: tb-etap;
  /* W kanwie edytora między listą a etapem siedzi wrapper Gutenberga.
     Ma przepuścić szerokość i nie dokładać własnego rytmu. */
}
.tb-przebieg .tb-przebieg__etapy > * {
  margin-block: 0;
  min-width: 0;
}
.tb-przebieg .tb-przebieg__etapy > *:not(.tb-etap) {
  display: grid;
}
.tb-przebieg {
  /* ── podpis pod wykresem ──────────────────────────────── */
  /* `margin-top: auto` dociąga stopkę do dołu, więc obie kartki w sekcji
     kończą się tą samą kreską niezależnie od liczby wierszy. */
}
.tb-przebieg .tb-przebieg__nota {
  order: 4;
  margin-block: auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-l);
  line-height: 1.55;
  color: var(--wp--preset--color--text-muted);
}
.tb-przebieg .tb-przebieg__nota b,
.tb-przebieg .tb-przebieg__nota strong {
  font-family: var(--ffont);
  font-weight: 700;
  color: var(--wp--preset--color--text);
}
.tb-przebieg {
  /* ── wjazd pasków ─────────────────────────────────────── */
  /* Paski rozwijają się od lewej, kolejno od góry - wykres „rysuje się”
     w tempie czytania. Opóźnienie liczy pozycja wiersza, nie pole:
     selektor łapie też wrapper edytora, bo idzie potomkiem. */
}
.tb-przebieg.is-in .tb-etap__czas {
  transform: scaleX(1);
}
.tb-przebieg__etapy > *:nth-child(1) .tb-etap__czas {
  transition-delay: 200ms;
}
.tb-przebieg__etapy > *:nth-child(2) .tb-etap__czas {
  transition-delay: 310ms;
}
.tb-przebieg__etapy > *:nth-child(3) .tb-etap__czas {
  transition-delay: 420ms;
}
.tb-przebieg__etapy > *:nth-child(4) .tb-etap__czas {
  transition-delay: 530ms;
}
.tb-przebieg__etapy > *:nth-child(5) .tb-etap__czas {
  transition-delay: 640ms;
}
.tb-przebieg__etapy > *:nth-child(6) .tb-etap__czas {
  transition-delay: 750ms;
}
.tb-przebieg__etapy > *:nth-child(7) .tb-etap__czas {
  transition-delay: 860ms;
}
.tb-przebieg__etapy > *:nth-child(8) .tb-etap__czas {
  transition-delay: 970ms;
}
.tb-przebieg__etapy > *:nth-child(9) .tb-etap__czas {
  transition-delay: 1080ms;
}
.tb-przebieg__etapy > *:nth-child(10) .tb-etap__czas {
  transition-delay: 1190ms;
}
.tb-przebieg__etapy > *:nth-child(11) .tb-etap__czas {
  transition-delay: 1300ms;
}
.tb-przebieg__etapy > *:nth-child(12) .tb-etap__czas {
  transition-delay: 1410ms;
}

/* W edytorze nie ma obserwatora scrolla (patrz _effects.scss), więc paski
   muszą stać rozwinięte - inaczej wykres wygląda w kanwie na pusty. */
.block-editor-block-list__layout .tb-przebieg .tb-etap__czas,
.is-root-container .tb-przebieg .tb-etap__czas {
  transform: scaleX(1);
  transition-delay: 0s;
}

@media only screen and (max-width: 560px) {
  .tb-przebieg {
    --etykieta: 100%;
  }
  .tb-przebieg .tb-przebieg__os {
    margin-left: 0;
  }
}