/* ==========================================================================
   KATALOG SZKOLEŃ — dokładka do katalog2.css.

   Karta szkolenia to karta kursu plus dwie rzeczy, których kursy nie mają:
   listę terminów i informację o miejscach. Wszystko poniżej jest scope'owane
   pod .eldago-katalog2, tak jak reszta katalogu.
   ========================================================================== */

/* ------------------------------------------------------------- TERMINY */
.eldago-katalog2 .karta__terminy,
.eldago-katalog2 .karta__lista-oczekujacych {
  margin: var(--o-2) 0 0;
  padding: var(--o-3) 0 0;
  border-top: 1px solid var(--linia);
}
.eldago-katalog2 .karta__terminy-tytul {
  margin: 0 0 var(--o-2);
  font-size: var(--rozmiar-mikro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--tekst-wygaszony);
}
.eldago-katalog2 .terminy {
  display: flex; flex-direction: column; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.eldago-katalog2 .termin {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--o-3);
  padding: 6px 10px;
  background: var(--tlo-alt);
  border-radius: var(--radius-s);
  font-size: var(--rozmiar-maly);
}
.eldago-katalog2 .termin__data {
  font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.eldago-katalog2 .termin__miejsca {
  color: var(--tekst-wygaszony); font-size: var(--rozmiar-mikro); text-align: right;
}
/* Wyprzedany termin zostaje widoczny — to dowód, że szkolenie się sprzedaje.
   Przekreślamy datę, ale nie chowamy wiersza. */
.eldago-katalog2 .termin--wyprzedany { opacity: .6; }
.eldago-katalog2 .termin--wyprzedany .termin__data { text-decoration: line-through; }

/* Lista oczekujących wchodzi w miejsce terminów przy szkoleniach sezonowych. */
.eldago-katalog2 .karta__lista-oczekujacych .karta__terminy-tytul {
  text-transform: none; letter-spacing: 0;
  font-size: var(--rozmiar-maly); color: var(--tekst-drugi);
}

/* Karta szkolenia bywa wyższa od kursowej (terminy), więc siatka potrzebuje
   trochę więcej oddechu w kolumnie. */
.eldago-katalog2 .karta--szkolenie .karta__tresc { gap: var(--o-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   WIDOK LISTY

   Ta sama karta, inny układ: zdjęcie po lewej, treść i terminy obok. Nie ma
   drugiego markupu — przełącznik dokłada klasę na kontenerze, a siatka staje
   się jedną kolumną. Dzięki temu filtry, sortowanie i przenoszenie węzłów
   działają identycznie w obu układach.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Przełącznik układu — ikony, jak w prototypie. Obszar klikalny 44 px zgodnie
   z wytycznymi, mimo że sama ikona ma 18. */
.eldago-katalog2 .katalog2__uklady { display: inline-flex; gap: 4px; }
.eldago-katalog2 .btn-ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cel-dotyku); height: var(--cel-dotyku);
  padding: 0;
  background: var(--tlo); color: var(--tekst-drugi);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: background var(--czas-krotki) var(--easing),
              border-color var(--czas-krotki) var(--easing),
              color var(--czas-krotki) var(--easing);
}
.eldago-katalog2 .btn-ikona:hover { border-color: var(--tekst); color: var(--tekst); }
.eldago-katalog2 .btn-ikona[aria-pressed="true"] {
  background: var(--akcent); color: var(--tekst-na-akcencie);
  border-color: var(--akcent-ciemny);
}
.eldago-katalog2 .btn-ikona:focus-visible { outline: 3px solid var(--akcent); outline-offset: 3px; }

@media (min-width: 700px) {
  .eldago-katalog2.katalog2--lista .siatka { grid-template-columns: 1fr; }
  .eldago-katalog2.katalog2--lista .karta {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  }
  .eldago-katalog2.katalog2--lista .karta__miniatura { aspect-ratio: auto; height: 100%; }
  .eldago-katalog2.katalog2--lista .karta:hover { transform: none; }
  /* W liście karta jest szeroka, więc terminy mogą stanąć w rzędzie zamiast
     jeden pod drugim — inaczej powstaje kolumna pustki po prawej. */
  .eldago-katalog2.katalog2--lista .terminy {
    flex-direction: row; flex-wrap: wrap;
  }
  .eldago-katalog2.katalog2--lista .termin { flex-direction: column; align-items: flex-start; gap: 2px; }
  .eldago-katalog2.katalog2--lista .termin__miejsca { text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WIDOK KALENDARZA — wiersz to termin, grupowany po miesiącu rozpoczęcia.
   ═══════════════════════════════════════════════════════════════════════════ */

.eldago-katalog2 .kalendarz { display: flex; flex-direction: column; gap: var(--o-6); }
.eldago-katalog2 .kalendarz[hidden] { display: none; }
.eldago-katalog2 .kalendarz__miesiac[hidden] { display: none; }
.eldago-katalog2 .kalendarz__wiersz[hidden] { display: none; }

.eldago-katalog2 .kalendarz__naglowek {
  display: flex; align-items: center; gap: var(--o-3);
  margin: 0 0 var(--o-3);
  padding-bottom: var(--o-2);
  border-bottom: 1px solid var(--linia);
}
.eldago-katalog2 .kalendarz__naglowek h3 {
  margin: 0;
  font-family: var(--font-naglowek);
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em;
  /* Nazwy miesięcy zapisujemy małą literą (tak jest po polsku), więc pierwszą
     podnosimy tutaj, a nie w treści. */
  text-transform: capitalize;
}
.eldago-katalog2 .kalendarz__licznik {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 8px;
  background: var(--akcent); color: var(--tekst-na-akcencie);
  border-radius: var(--radius-pigulka);
  font-size: var(--rozmiar-mikro); font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.eldago-katalog2 .kalendarz__wiersz {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--o-4);
  padding: var(--o-3) var(--o-4);
  border: 1px solid var(--linia);
  border-radius: var(--radius-m);
  margin-bottom: 6px;
  color: inherit; text-decoration: none;
  transition: border-color var(--czas-krotki) var(--easing),
              background var(--czas-krotki) var(--easing);
}
.eldago-katalog2 .kalendarz__wiersz:hover {
  border-color: var(--tekst); background: var(--tlo-alt);
}
.eldago-katalog2 .kalendarz__wiersz--wyprzedany { opacity: .65; }
.eldago-katalog2 .kalendarz__wiersz--wyprzedany .kalendarz__data { text-decoration: line-through; }

.eldago-katalog2 .kalendarz__data {
  font-family: var(--font-naglowek);
  font-size: 1.0625rem; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.eldago-katalog2 .kalendarz__opis { display: flex; flex-direction: column; min-width: 0; }
.eldago-katalog2 .kalendarz__nazwa { font-weight: 700; }
.eldago-katalog2 .kalendarz__miejsce {
  color: var(--tekst-wygaszony); font-size: var(--rozmiar-maly);
}
.eldago-katalog2 .kalendarz__cena {
  font-family: var(--font-naglowek);
  font-size: 1.0625rem; font-weight: 800; white-space: nowrap;
}

@media (max-width: 620px) {
  /* Na wąskim ekranie cztery kolumny się nie mieszczą: data i nazwa w pierwszym
     rzędzie, dostępność i cena w drugim. */
  .eldago-katalog2 .kalendarz__wiersz {
    grid-template-columns: 84px minmax(0, 1fr);
    row-gap: var(--o-2);
  }
  .eldago-katalog2 .kalendarz__wiersz .tag { grid-column: 1; justify-self: start; }
  .eldago-katalog2 .kalendarz__cena { grid-column: 2; text-align: right; }
}