@charset "UTF-8";
/* ============================================================
   ETAP - jeden wiersz wykresu przebiegu (patrz acf/przebieg).
   Dwie kolumny: nazwa i tor. Pasek stoi w tej samej komórce co tor,
   a jego pozycję i długość liczy dzień razy `--dzien` - szerokość
   jednego dnia, dziedziczona z kartki wykresu.

   Wysokość toru, rozmiar kafla z numerem i wcięcie paska to metryki
   kompozycji, nie odstępy - stąd wartości wprost, nie tokeny skoku.
   ============================================================ */
.tb-etap {
  --tor-h: 34px;
  --pasek-h: 24px;
  --kafel: 28px;
  counter-increment: tb-etap;
  display: grid;
  grid-template-columns: var(--etykieta, 12rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding-block: 0.35rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.35s var(--ease-out);
  /* Podświetlenie wiersza pomaga przejechać wzrokiem od nazwy do paska -
     przy pięciu etapach kolumny są od siebie daleko. */
}
.tb-etap:hover {
  background: rgba(11, 13, 22, 0.05);
}
.tb-etap {
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. Dzięki temu nazwa i pasek są komórkami wiersza
     na równi z torem z PHP. */
}
.tb-etap .tb-etap__blocks-wrap, .tb-etap .tb-etap__blocks {
  display: contents;
}
.tb-etap {
  /* ── tor z siatką ─────────────────────────────────────── */
  /* Kreski co `--kreska` (rozstaw działki), żeby pasek dało się odczytać
     bez cofania wzroku do podziałki nad wykresem. */
}
.tb-etap__tor {
  grid-area: 1/2;
  height: var(--tor-h);
  border-radius: var(--radius-xs);
  background: repeating-linear-gradient(90deg, rgba(11, 13, 22, 0.11) 0 1px, transparent 1px var(--kreska, 25%));
}
.tb-etap {
  /* ── nazwa etapu ──────────────────────────────────────── */
}
.tb-etap .tb-etap__nazwa {
  grid-area: 1/1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  margin-block: 0;
  /* .label-name jest przygaszona - tu nazwa etapu jest treścią wykresu,
     nie podpisem danych, więc idzie pełną czernią. */
  color: var(--wp--preset--color--text);
  /* Numer liczy CSS: counter zeruje lista etapów w acf/przebieg. */
}
.tb-etap .tb-etap__nazwa::before {
  content: counter(tb-etap, decimal-leading-zero);
  display: grid;
  place-items: center;
  flex: none;
  width: var(--kafel);
  height: var(--kafel);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-sm);
  background: var(--wp--preset--color--paper-2);
  font-size: var(--wp--preset--font-size--text-xs);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--text-muted);
}
.tb-etap {
  /* ── pasek etapu ──────────────────────────────────────── */
  /* Stoi w tej samej komórce co tor, więc procenty liczą się od szerokości
     toru. `min-width` pilnuje, żeby podpis zmieścił się nawet przy etapie
     jednodniowym - bez tego „1 dzień” wychodziłby poza pasek. */
}
.tb-etap .tb-etap__czas {
  grid-area: 1/2;
  z-index: 1;
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  width: calc(var(--ile) * var(--dzien, 3.571429%));
  min-width: 74px;
  height: var(--pasek-h);
  margin-block: 0;
  margin-left: calc(var(--od) * var(--dzien, 3.571429%));
  padding-inline: var(--space-sm);
  border-radius: var(--radius-xs);
  background: linear-gradient(100deg, var(--wp--preset--color--ink-3) 0%, var(--wp--preset--color--ink) 100%);
  box-shadow: 0 8px 20px -10px rgba(6, 7, 12, 0.55);
  color: var(--wp--preset--color--paper);
  white-space: nowrap;
  /* Rozwinięcie paska odpala reveal kartki (acf/przebieg) - tam też
     siedzi opóźnienie kolejnych wierszy. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}

@media only screen and (max-width: 560px) {
  .tb-etap {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }
  .tb-etap .tb-etap__tor,
  .tb-etap .tb-etap__czas {
    grid-area: 2/1;
  }
}