/*
 * Cennik zajęć na /grafik/ (sekcja „Cennik zajęć”).
 *
 * Wszystko pod .kj-cennik, bez resetu — na tej stronie żyją obok siebie style
 * motywu (grafik, opisy grup, stopka) i nie wolno ich ruszyć.
 *
 * Świadomie NIE ładujemy tu Poppins/DM Sans, jak na podstronach kursu i karnetu:
 * ta sekcja stoi wewnątrz strony złożonej krojem motywu (Lato) i ma się z nim
 * zlewać. Hierarchię robimy grubością, wielkością i kolorem.
 *
 * Kolor marki #db003c wzięty z skompilowanego main.css motywu (klasa .u-pink),
 * żeby odcień zgadzał się z nagłówkami sekcji nad cennikiem.
 */

.kj-cennik {
  --kjc-brand: #db003c;
  --kjc-ink: #3d0b12;
  --kjc-muted: #6b6f74;
  --kjc-border: #e4e6e9;
  --kjc-tint: #fdeef2;

  display: grid;
  gap: 1.5rem;
  color: var(--kjc-ink);
}

.kj-cennik *,
.kj-cennik *::before,
.kj-cennik *::after {
  box-sizing: border-box;
}

/* --- pojedynczy próg cenowy ------------------------------------------- */

.kj-cennik__tier {
  background: #fff;
  border: 1px solid var(--kjc-border);
  border-radius: 3px;
  overflow: hidden;
}

/* Pasek z nazwą progu — odpowiednik kolorowych belek z grafiki klientki. */
.kj-cennik__band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.9rem 1.25rem;
  background: var(--kjc-tint);
}

.kj-cennik__tier--full .kj-cennik__band {
  background: var(--kjc-brand);
}

.kj-cennik__tier-name {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kjc-brand);
}

.kj-cennik__tier--full .kj-cennik__tier-name {
  color: #fff;
}

.kj-cennik__tier-desc {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--kjc-ink);
}

.kj-cennik__tier--full .kj-cennik__tier-desc {
  color: rgba(255, 255, 255, 0.92);
}

/* --- wiersze z cenami -------------------------------------------------- */

.kj-cennik__rows {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.25rem 1.1rem;
}

/* Jedna linia na wiersz — tylko ta prowadząca do ceny.
   Kreski oddzielające wiersze zdjęte: razem z prowadzącymi robiły podwójną
   siatkę i szum (tak samo jest na grafice od klientki). Zamiast nich wiersze
   rozdziela odstęp. */
.kj-cennik__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.8rem 0;
}

.kj-cennik__label {
  flex: 0 1 auto;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.4;
}

.kj-cennik__note {
  font-weight: 400;
  color: var(--kjc-muted);
}

/* Kreska prowadząca wzrok od nazwy do kwoty — jak na grafice. */
.kj-cennik__leader {
  flex: 1 1 1.5rem;
  min-width: 0.75rem;
  align-self: center;
  border-bottom: 1px dotted #c9ccd1;
  transform: translateY(-0.15em);
}

.kj-cennik__price {
  flex: 0 0 auto;
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--kjc-brand);
}

/* --- większe ekrany ---------------------------------------------------- */

@media (min-width: 720px) {
  .kj-cennik { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  .kj-cennik__band { padding: 1rem 1.5rem; }
  .kj-cennik__rows { padding: 0.65rem 1.5rem 1.35rem; }
  .kj-cennik__row { padding: 0.9rem 0; }
  .kj-cennik__tier-name { font-size: 1.15rem; }
  .kj-cennik__price { font-size: 1.25rem; }
}

/* ======================================================================
   Legenda pod grafikiem zajęć (odnośniki z gwiazdkami).
   UWAGA: to NIE jest część cennika — siedzi tutaj, bo ten plik i tak jest
   ładowany na /grafik/ i nie ma sensu dokładać drugiego żądania.
   Znaczniki generuje templates/components/rota.twig, rozbicie tekstu robi
   template-pricelist.php.
   ====================================================================== */

.kj-legend {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  /* Motyw zwęża notkę do połowy szerokości (calc(50% - 30px)) — przy kilku
     wierszach legenda łamała się bez potrzeby, więc wracamy na pełną. */
  width: 100%;
}

.kj-legend__item {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Gwiazdki w osobnej kolumnie, żeby treść zaczynała się równo. */
.kj-legend__mark {
  flex: 0 0 auto;
  min-width: 1.6em;
  font-weight: 700;
  color: #db003c;
}

/* Sama treść ciemniejsza od gwiazdek — różowy tekst na całej notce męczył. */
.kj-legend__text {
  color: #3d0b12;
}