/* LISTA SZKOLEŃ (/lista-szkolen/) — nowy układ.
   Paleta motywu: marka #C7264E, tekst #1B171C, drugorzędny #666, ramki #DDD, tło kart #F5F5F5.
   Przyciski = klasy motywu .btn / .btn--black / .btn--small. Ostre kanty jak w całym motywie. */

/* ---------- Pasek: wyszukiwarka · Zapytaj o szkolenie · Kalendarz/Lista ---------- */
/* Jeden wiersz o równej wysokości: wyszukiwarka i oba przyciski */
.aecTl__filters .row { align-items: stretch; }

.aecTl__filters form,
.aecTl__filters .trainingListFilters__search {
  height: 100%;
  margin: 0;
  padding: 0;
}

.aecTl__filters .trainingListFilters__search .form-control { height: 100%; margin: 0; }

/* Widok kalendarza: wyszukiwarka niedostępna, ale zostawia miejsce — przyciski nie podskakują */
.aecTl__filters .trainingListFilters__search.d-none {
  display: flex !important;
  visibility: hidden;
}

.aecTl__btn {
  width: 100%;
  height: 100%;
  min-height: 3.42rem;
  gap: .6rem;
}

.aecTl__btn .fa-solid,
.aecTl__btn .fa-regular { font-size: 1em; line-height: 1; }

/* Wszystkie przyciski listy jak przycisk motywu: czerwony → po najechaniu białe tło, czerwony napis */
.aecTl__filters .btn:hover,
.aecTl__filters .btn:focus-visible,
.aecTlCard__btn:hover,
.aecTlCard__btn:focus-visible {
  background-color: #fff;
  border-color: #c7264e;
  color: #c7264e;
}

/* ---------- Karta szkolenia ---------- */
.aecTlCard.cardLarge {
  height: auto;               /* karta rośnie o sekcję z terminem */
  justify-content: flex-start;
}

.aecTlCard__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.aecTlCard__main:hover { color: inherit; }

.aecTlCard .cardLarge__content {
  flex: 1 1 auto;             /* treść karty jak dotąd (z przewijaniem długiej zajawki) */
}

.aecTlCard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 1.2857142857rem;
  padding: 1rem 0 1.3rem;
  border-top: 1px solid #ddd;
}

.aecTlCard__date {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.aecTlCard__dateLabel {
  font-size: .8rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.aecTlCard__dateValue {
  font-weight: 700;
  color: #1b171c;
  white-space: nowrap;
}

.aecTlCard__dateValue .fa-calendar { color: #c7264e; margin-right: .25rem; }
.aecTlCard__dateValue--none { font-weight: 600; color: #666; white-space: normal; }

.aecTlCard__dateType {
  font-size: .85rem;
  color: #666;
}

.aecTlCard__btn {
  flex-shrink: 0;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

/* ---------- Doczytywanie przy przewijaniu (tylko gdy działa JS) ---------- */
.aecTl__grid.is-enhanced .aecTlCard.is-pending,
.aecTl__grid.is-enhanced .aecTlCard.is-filtered {
  display: none;
}

.aecTl__grid.is-enhanced .aecTlCard.is-in {
  animation: aecTlFadeIn .5s ease both;
}

@keyframes aecTlFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.aecTl__grid.is-busy { opacity: .45; pointer-events: none; transition: opacity .2s; }

.aecTl__sentinel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.1428571429rem;
  margin-bottom: 2.1428571429rem;
}

.aecTl__sentinel.is-active { display: grid; }

.aecTl__skeleton {
  height: 26rem;
  background: linear-gradient(100deg, #f5f5f5 30%, #ececec 50%, #f5f5f5 70%) 0 0 / 300% 100%;
  animation: aecTlShimmer 1.2s linear infinite;
}

@keyframes aecTlShimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* Brak wyników → zachęta do kontaktu */
.aecTl__empty {
  margin: 2.1428571429rem 0;
  padding: 2.5rem 1.5rem;
  background: #f5f5f5;
  border-top: 4px solid #c7264e;
  text-align: center;
}

.aecTl__emptyTitle {
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1b171c;
}

.aecTl__emptyText {
  margin: 0 auto 1.5rem;
  max-width: 48ch;
  color: #666;
}

.aecTl__emptyBtn:hover,
.aecTl__emptyBtn:focus-visible {
  background-color: #fff;
  border-color: #c7264e;
  color: #c7264e;
}

/* ---------- Okienka (modale) ---------- */
.aecTlModal__header.modal__header {
  padding-bottom: 2rem;
}

.aecTlModal__subtitle {
  margin: .6rem 0 0;
  font-weight: 600;
  color: #c7264e;
}

.aecTlModal__subtitle:empty { display: none; }

.aecTlModal__body.modal__body {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.aecTlModal .modal-content {
  border: 0;
  border-radius: 0;
}

/* ---------- Responsywność ---------- */
@media (max-width: 991.98px) {
  .aecTl__sentinel { grid-template-columns: repeat(2, 1fr); }
  .aecTl__sentinel .aecTl__skeleton:nth-child(3) { display: none; }
}

@media (max-width: 575.98px) {
  .aecTl__sentinel { grid-template-columns: 1fr; }
  .aecTl__sentinel .aecTl__skeleton:nth-child(n+2) { display: none; }
  .aecTlCard__footer { flex-wrap: wrap; }
  .aecTlCard__btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .aecTl__grid.is-enhanced .aecTlCard.is-in,
  .aecTl__skeleton { animation: none; }
}

/* Pasek przewijania zajawki w kolorze marki także w Firefoksie (Chrome/Edge: styl motywu ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  .aecTlCard .cardLarge__content {
    scrollbar-color: #c7264e #fff;
    scrollbar-width: thin;
  }
}