@charset "UTF-8";
/* ============================================================
   DROGI ZAOPATRZENIA - kartka wykresu na gradiencie marki
   (patrz acf/terminy). Cztery drogi w tej samej skali dni, żeby dało
   się je porównać jedną liczbą.

   Kartka jest negatywem sąsiadki (acf/przebieg): ta sama skorupa,
   ten sam rytm wiersza, odwrócony kolor. Napisy jadą na bieli o różnym
   kryciu - klasa .on-dark przełącza globalne warianty tekstu.

   Kartka jest kolumną, w której kolejność daje `order`, nie DOM -
   podziałka rysuje się w PHP i musi wejść między tytuł a wiersze.
   ============================================================ */
.tb-drogi {
  /* Wcięcie wiersza. Ta sama zmienna trzyma siatkę w tle i paski w wierszach
     (acf/droga), więc kreski i pasek startują dokładnie z jednej pionowej. */
  --wciecie: 0.55rem;
  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 rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  background: var(--grad-brand-v);
  box-shadow: var(--shadow-glow);
  color: var(--wp--preset--color--paper);
  /* Dwa poziomy przezroczyste dla kolumny: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. */
}
.tb-drogi .tb-drogi__blocks-wrap, .tb-drogi .tb-drogi__blocks {
  display: contents;
}
.tb-drogi {
  /* ── tytuł kartki ─────────────────────────────────────── */
}
.tb-drogi .tb-drogi__tytul {
  order: 1;
  margin-block: 0 var(--space-md);
}
.tb-drogi {
  /* ── podziałka osi ────────────────────────────────────── */
  /* Selektor z klasą kartki, bo podpisy noszą globalną .label-tech, a ta
     na ciemnym gaśnie do rgba(255,255,255,.44) regułą `body .on-dark
     .label-tech` (0,2,1). Podziałka ma być czytelna, nie ozdobna. */
}
.tb-drogi .tb-drogi__os {
  order: 2;
  position: relative;
  height: 1.1rem;
  margin-inline: var(--wciecie);
  margin-bottom: var(--space-xs);
}
.tb-drogi .tb-drogi__os .label-tech {
  position: absolute;
  left: var(--at);
  translate: -50% 0;
  font-size: var(--wp--preset--font-size--text-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.68);
}
.tb-drogi .tb-drogi__os {
  /* Skrajne podpisy trzymają się krawędzi wykresu, nie środka kreski. */
}
.tb-drogi .tb-drogi__os .label-tech:first-child {
  translate: 0 0;
}
.tb-drogi .tb-drogi__os .label-tech:last-child {
  translate: -100% 0;
}
.tb-drogi {
  /* ── wiersze ──────────────────────────────────────────── */
  /* Jedna ciągła siatka za całym wykresem, nie osobne tło pod każdym paskiem:
     inaczej pionowe kreski rwą się na wysokości odstępów i wykres przestaje
     czytać się jako jedna oś czasu. Ostatnia kreska osobno, bo powtarzalny
     gradient rysuje ją dopiero za krawędzią. */
}
.tb-drogi .tb-drogi__wiersze {
  order: 3;
  position: relative;
  display: grid;
  gap: 2px;
  margin-block: 0;
}
.tb-drogi .tb-drogi__wiersze::before, .tb-drogi .tb-drogi__wiersze::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.tb-drogi .tb-drogi__wiersze::before {
  inset: 0 var(--wciecie);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px var(--kreska, 20%));
}
.tb-drogi .tb-drogi__wiersze::after {
  top: 0;
  bottom: 0;
  right: var(--wciecie);
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}
.tb-drogi .tb-drogi__wiersze {
  /* W kanwie edytora między listą a drogą siedzi wrapper Gutenberga.
     Ma przepuścić szerokość i stać nad siatką, jak sam wiersz. */
}
.tb-drogi .tb-drogi__wiersze > * {
  position: relative;
  z-index: 1;
  margin-block: 0;
  min-width: 0;
}
.tb-drogi .tb-drogi__wiersze > *:not(.tb-droga) {
  display: grid;
}
.tb-drogi {
  /* ── 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-drogi .tb-drogi__nota {
  order: 4;
  margin-block: auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.tb-drogi .tb-drogi__nota b,
.tb-drogi .tb-drogi__nota strong {
  font-family: var(--ffont);
  font-weight: 700;
  color: var(--wp--preset--color--paper);
}
.tb-drogi {
  /* ── wjazd pasków ─────────────────────────────────────── */
  /* Paski rozwijają się od lewej, kolejno od góry. Opóźnienie liczy pozycja
     wiersza: selektor idzie potomkiem, więc łapie też wrapper edytora. */
}
.tb-drogi.is-in .tb-droga__pasek {
  transform: scaleX(1);
}
.tb-drogi__wiersze > *:nth-child(1) .tb-droga__pasek {
  transition-delay: 260ms;
}
.tb-drogi__wiersze > *:nth-child(2) .tb-droga__pasek {
  transition-delay: 380ms;
}
.tb-drogi__wiersze > *:nth-child(3) .tb-droga__pasek {
  transition-delay: 500ms;
}
.tb-drogi__wiersze > *:nth-child(4) .tb-droga__pasek {
  transition-delay: 620ms;
}
.tb-drogi__wiersze > *:nth-child(5) .tb-droga__pasek {
  transition-delay: 740ms;
}
.tb-drogi__wiersze > *:nth-child(6) .tb-droga__pasek {
  transition-delay: 860ms;
}
.tb-drogi__wiersze > *:nth-child(7) .tb-droga__pasek {
  transition-delay: 980ms;
}
.tb-drogi__wiersze > *:nth-child(8) .tb-droga__pasek {
  transition-delay: 1100ms;
}
.tb-drogi__wiersze > *:nth-child(9) .tb-droga__pasek {
  transition-delay: 1220ms;
}
.tb-drogi__wiersze > *:nth-child(10) .tb-droga__pasek {
  transition-delay: 1340ms;
}
.tb-drogi__wiersze > *:nth-child(11) .tb-droga__pasek {
  transition-delay: 1460ms;
}
.tb-drogi__wiersze > *:nth-child(12) .tb-droga__pasek {
  transition-delay: 1580ms;
}

/* 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-drogi .tb-droga__pasek,
.is-root-container .tb-drogi .tb-droga__pasek {
  transform: scaleX(1);
  transition-delay: 0s;
}