/* ==========================================================================
   Rozkłady jazdy - interaktywna wyszukiwarka

   Układ jest dwukolumnowy na szerokim ekranie (lista przystanków obok siatki
   godzin) i jednokolumnowy na telefonie, bo tam i tak przewija się w pionie.
   ========================================================================== */

.rozklad__wstep {
  margin-bottom: var(--s6);
}

.rozklad__pusto,
.rozklad__uwaga {
  padding: var(--s5);
  background-color: var(--tlo-delikatne);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  color: var(--tekst-przygaszony);
  max-width: none;
}

/* --- kroki wyboru --- */

.rozklad__krok {
  margin-bottom: var(--s4);
}

.rozklad__etykieta {
  display: block;
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--tekst-przygaszony);
  margin-bottom: 6px;
}

.rozklad__chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rozklad__chip {
  padding: 7px 14px;
  font-size: 13.5px;
  font-family: inherit;
  font-weight: var(--weight-semi-bold);
  color: inherit;
  background-color: var(--tlo-karta);
  border: 1px solid var(--obwodka);
  border-radius: 999px;
  cursor: pointer;
}

.rozklad__chip:hover {
  border-color: var(--akcent);
}

/* Kolor tekstu z --tekst-odwrocony, a nie na sztywno biały: w trybie ciemnym
   akcent jest jasnoniebieski i białe litery na nim znikają. */
.rozklad__chip--wybrany {
  background-color: var(--akcent);
  border-color: var(--akcent);
  color: var(--tekst-odwrocony);
}

/* --- wynik: przystanki + godziny --- */

.rozklad__wynik {
  margin-top: var(--s6);
}

.rozklad__kolumny {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: var(--s5);
  align-items: start;
}

@media (max-width: 780px) {
  .rozklad__kolumny {
    grid-template-columns: 1fr;
  }
}

.rozklad__przystanki {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 460px;
  overflow-y: auto;
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  background-color: var(--tlo-karta);
}

.rozklad__przystanki li {
  max-width: none;
}

.rozklad__przystanek {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  font-size: 13.5px;
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  cursor: pointer;
  line-height: 1.35;
}

.rozklad__przystanek:hover {
  background-color: var(--tlo-delikatne);
}

.rozklad__przystanek--wybrany {
  border-left-color: var(--akcent);
  background-color: var(--tlo-delikatne);
  font-weight: var(--weight-bold);
}

.rozklad__podpis {
  margin: 0 0 var(--s3);
  font-size: 14px;
  font-weight: var(--weight-semi-bold);
  max-width: none;
}

/* Siatka godzin - jak rozkład na słupku: pełna godzina, potem minuty */
.rozklad__godziny {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: var(--s4);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-m);
  background-color: var(--tlo-karta);
}

.rozklad__pelna {
  flex: 0 0 auto;
  width: 100%;
  margin-top: 6px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  color: var(--tekst-przygaszony);
  font-variant-numeric: tabular-nums;
}

.rozklad__pelna:first-child {
  margin-top: 0;
}

.rozklad__godzina {
  min-width: 34px;
  padding: 5px 7px;
  font-size: 13px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background-color: var(--tlo-delikatne);
  border: 1px solid var(--obwodka);
  border-radius: var(--r-s);
  cursor: pointer;
}

.rozklad__godzina:hover {
  border-color: var(--akcent);
}

/* Kurs, który już odjechał - wyszarzony, ale nadal klikalny */
.rozklad__godzina--minela {
  opacity: .42;
}

/* Odjazd w ciągu najbliższego pół godziny */
.rozklad__godzina--wkrotce {
  background-color: var(--akcent);
  border-color: var(--akcent);
  color: var(--tekst-odwrocony);
  font-weight: var(--weight-bold);
}

/* Kurs po północy - z rozkładowego punktu widzenia nadal „ten" dzień */
.rozklad__godzina--noc {
  border-style: dashed;
}

.rozklad__brak {
  margin: 0;
  color: var(--tekst-przygaszony);
  font-size: 13.5px;
  max-width: none;
}

.rozklad__wskazowka {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--tekst-przygaszony);
  max-width: none;
}

/* --- szczegóły jednego kursu --- */

.rozklad__kurs {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--akcent);
  border-radius: var(--r-m);
  background-color: var(--tlo-karta);
}

.rozklad__kurs-glowka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: 14.5px;
}

.rozklad__zamknij {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  background: none;
  border: 1px solid var(--obwodka);
  border-radius: var(--r-s);
  cursor: pointer;
}

.rozklad__przejazd {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--s5);
}

@media (max-width: 640px) {
  .rozklad__przejazd {
    columns: 1;
  }
}

.rozklad__przejazd-poz {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-size: 13px;
  max-width: none;
  break-inside: avoid;
}

.rozklad__przejazd-czas {
  flex: 0 0 46px;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semi-bold);
}

.rozklad__przejazd-nazwa {
  color: var(--tekst-przygaszony);
}

.rozklad__przejazd-poz--nasz .rozklad__przejazd-nazwa {
  color: var(--akcent);
  font-weight: var(--weight-bold);
}

/* --- najbliższe odjazdy i źródła --- */

.rozklad__najblizsze {
  margin-top: var(--s7);
}

.rozklad__zrodla {
  margin-top: var(--s7);
}

.rozklad__linki {
  padding-left: var(--s5);
}

.rozklad__linki li {
  margin-bottom: 6px;
}

.rozklad__stopka {
  margin-top: var(--s4);
  font-size: 13px;
  color: var(--tekst-przygaszony);
}

/* Odnośnik do rozkładu wybranej linii u przewoźnika */
.rozklad__przewoznik {
  margin: 8px 0 0;
  font-size: 12.5px;
  max-width: none;
}