/* Lista realizacji (szablon LR): nagłówek z paskami, filtr kategorii i siatka kart.
   Wymiary z obecnej strony (#11); tokeny: docs/ARCHITEKTURA.md, sekcja 4. Mobile-first. */
.projects-section { padding: 80px 0; }

.projects-section__title {
  margin: 0;
  font-size: var(--fs-banner-title);
  font-weight: var(--fw-heading-strong);
  line-height: 1;
  text-align: center;
}
/* Trzy paski pod tytułem (na starej stronie obrazek z dema motywu, 117 × 3 px). */
.projects-section__title::after {
  content: "";
  display: block;
  width: 117px;
  height: 3px;
  margin: 33px auto 40px;
  background:
    var(--g-brand) 0 0 / 21px 100% no-repeat,
    var(--g-brand) 31px 0 / 55px 100% no-repeat,
    var(--g-brand) 96px 0 / 21px 100% no-repeat;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 33px;
  margin: 0 0 37px;
}
.filter.is-pending { visibility: hidden; }
.filter__btn {
  min-width: 44px;
  min-height: 44px;
  padding: 6px 27px;
  border: 1px solid var(--c-blue);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--c-heading);
  font: 400 0.8rem/28px var(--font-heading);
  text-transform: uppercase;
  cursor: pointer;
}
/* Aktywny: jak dziś pełne tło, ale od #007AB3 (biały tekst, sekcja 4). */
.filter__btn[aria-pressed="true"] {
  border-color: var(--c-blue-text-bg);
  background: var(--c-blue-text-bg);
  color: var(--c-on-brand);
}

.projects {
  display: grid;
  gap: 2vw;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.projects__link { position: relative; display: block; aspect-ratio: 1.25; overflow: hidden; }
.projects__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Tytuł na niebieskiej warstwie po najechaniu albo fokusie (jak dziś, 1 s). Krycie 90% zamiast 73%:
   biały tekst ma kontrast ≥ 4,5:1 także na jasnym zdjęciu (sekcja 4). */
.projects__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  opacity: 0;
  transition: opacity 1s;
}
.projects__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-blue-text-bg);
  opacity: 0.9;
}
.projects__link:hover .projects__overlay, .projects__link:focus-visible .projects__overlay { opacity: 1; }
.projects__title {
  position: relative;
  margin: 0;
  color: var(--c-on-brand);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

/* Bez hover nazwa jest od razu czytelna w dolnym podpisie, zdjęcie pozostaje widoczne.
   Zależy od sposobu obsługi, a nie szerokości: dotyczy też tabletów (#11). */
@media (hover: none) {
  .projects__overlay {
    inset: auto 0 0;
    opacity: 1;
    transition: none;
  }
}

@media (min-width: 768px) {
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .projects__overlay { transition: none; }
}