/* Reguły wyłącznie dla tej podstrony.
   Lista terminów i pasek filtrów są wspólne - patrz styles.css. */

#terms-intro {
  padding: 150px var(--pad-x) 40px;
  background: var(--black);
}

.terms-badge { margin-bottom: 24px; }
.terms-lead { margin-top: 20px; }

#terms-list {
  padding: 44px var(--pad-x) 110px;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}

/* Wąska kolumna filtrów po lewej, lista szkoleń po prawej */
.terms-layout {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: 52px;
  align-items: start;
}

/* Lista i karta szkolenia leżą w arkuszu wspólnym (sekcja 6c),
   bo tego samego układu używa strona główna. */

/* Podtytuł programu w wierszu, np. framework */
.term-sub {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-body);
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 10px;
  white-space: nowrap;
}

/* Komunikat, gdy filtr nic nie zwraca */
.terms-empty {
  display: none;
  padding: 44px 0;
  text-align: center;
}

.terms-empty.is-visible { display: block; }

#terms-cta {
  padding: 110px var(--pad-x);
  background: var(--deep);
  text-align: center;
}

.terms-cta-inner { max-width: 620px; margin: 0 auto; }
.terms-cta-inner .lead { margin: 18px auto 34px; }

@media (max-width: 1024px) {
  #terms-intro { padding: 130px var(--pad-x-md) 32px; }
  #terms-list { padding: 36px var(--pad-x-md) 80px; }
  .terms-layout { grid-template-columns: 184px 1fr; gap: 34px; }
  #terms-cta { padding: 80px var(--pad-x-md); }
}

@media (max-width: 768px) {
  #terms-intro { padding: 110px var(--pad-x-sm) 26px; }
  #terms-list { padding: 28px var(--pad-x-sm) 60px; }
  /* Na telefonie filtry przechodzą nad listę i przestają być przyklejone */
  .terms-layout { grid-template-columns: 1fr; gap: 26px; }
  .filter-col { position: static; }
  #terms-cta { padding: 60px var(--pad-x-sm); }
  .term-sub { display: block; margin-left: 0; margin-top: 4px; white-space: normal; }
}