@charset "UTF-8";
/* ============================================================
   DROGA - jeden wiersz porównania dróg zaopatrzenia
   (patrz acf/drogi). Nazwa, dopisek i termin w jednej linii, pasek
   pod spodem na całą szerokość wiersza.

   Pasek pod nazwą, a nie w osobnej kolumnie: w układzie dwóch kartek
   obok siebie tor miałby raptem ~216 px i wykres byłby nieczytelny.

   Siatkę w tle rysuje kartka (jedna ciągła na cały wykres), wiersz
   dokłada wyłącznie pasek - stąd tor bez własnego tła.
   ============================================================ */
.tb-droga {
  --tor-h: 26px;
  --pasek-h: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--wciecie, 0.55rem) 0.6rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.35s var(--ease-out);
}
.tb-droga:hover {
  background: rgba(255, 255, 255, 0.12);
}
.tb-droga {
  /* Dwa poziomy przezroczyste dla siatki: własny wrapper i div, który ACF
     robi z <InnerBlocks/>. */
}
.tb-droga .tb-droga__blocks-wrap, .tb-droga .tb-droga__blocks {
  display: contents;
}
.tb-droga {
  /* ── pierwsza linia ───────────────────────────────────── */
  /* Jawne pozycje, bo w DOM tor stoi przed treścią. */
}
.tb-droga .tb-droga__nazwa {
  grid-area: 1/1;
  margin-block: 0;
}
.tb-droga .tb-droga__opis {
  grid-area: 1/2;
  margin-block: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tb-droga .tb-droga__wartosc {
  grid-area: 1/3;
  margin-block: 0;
  white-space: nowrap;
  text-align: right;
}
.tb-droga {
  /* ── pasek ────────────────────────────────────────────── */
}
.tb-droga__tor {
  grid-area: 2/1/3/-1;
  position: relative;
  height: var(--tor-h);
  margin-top: var(--space-xs);
}
.tb-droga__pasek {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  left: calc(var(--od) * var(--dzien, 1.333333%));
  width: calc(var(--ile) * var(--dzien, 1.333333%));
  min-width: 16px;
  height: var(--pasek-h);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34));
  /* Rozwinięcie paska odpala reveal kartki (acf/drogi) - tam też siedzi
     opóźnienie kolejnych wierszy. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}
.tb-droga {
  /* Nasza droga pełną bielą: gradient marki zniknąłby na gradiencie tła,
     a to jedyny pasek, który ma się wybić z zestawienia. */
}
.tb-droga--wlasna .tb-droga__pasek {
  background: var(--wp--preset--color--paper);
  box-shadow: 0 6px 18px -6px rgba(6, 7, 12, 0.45);
}

/* ── przebicie wariantów .on-dark ─────────────────────────── */
/* Kartka acf/drogi jest ciemną wyspą, więc globalne warianty tekstu
   przełączają się na wersje przygaszone: `body .on-dark .label-name`
   (0,2,1) przebija zwykłe `.tb-droga .tb-droga__nazwa` (0,2,0) i nazwy
   dróg gasną do rgba(255,255,255,.44).

   Nazwa i termin to treść wykresu, nie podpis danych - muszą iść pełną
   bielą, stąd zdublowana klasa (0,3,0). Dopisek zostaje przygaszony,
   ale nie aż tak: na gradiencie marki .44 jest już nieczytelne. */
.tb-droga .tb-droga__nazwa.tb-droga__nazwa,
.tb-droga .tb-droga__wartosc.tb-droga__wartosc {
  color: var(--wp--preset--color--paper);
}

.tb-droga .tb-droga__opis.tb-droga__opis {
  color: rgba(255, 255, 255, 0.72);
}

@media only screen and (max-width: 620px) {
  .tb-droga {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .tb-droga .tb-droga__nazwa {
    grid-area: 1/1;
  }
  .tb-droga .tb-droga__wartosc {
    grid-area: 1/2;
  }
  .tb-droga .tb-droga__opis {
    grid-area: 2/1/3/-1;
  }
  .tb-droga .tb-droga__tor {
    grid-area: 3/1/4/-1;
  }
}