/* =========================================================
   LECH-BUD — podstrona „Realizacje” (/realizacje)
   Portfolio: filtry kategorii + siatka 3 kolumny + lightbox.
   Korzysta z design systemu z styles.css (kolory, Barlow,
   header, topbar, footer, przyciski, lightbox). Tu tylko klasy
   specyficzne dla tej podstrony.
========================================================== */

/* ---------- Breadcrumb (spójny z /uslugi) ---------- */
.breadcrumb { font-family: "Barlow", sans-serif; font-size: 0.86rem; color: var(--muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumb a { color: var(--muted); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--navy-800); }
.breadcrumb__sep { color: #b8c0d0; }
.breadcrumb [aria-current="page"] { color: var(--navy-900); font-weight: 600; }

/* =========================================================
   PAGE HERO / INTRO
========================================================== */
.rz-hero {
  background: var(--bg-soft);
  border-top: 1px solid #e7eaf0;
  padding-block: clamp(30px, 4.4vw, 58px);
}
.rz-hero__inner { max-width: 820px; }
.rz-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 16px 0 14px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--navy-800);
}
.rz-hero__eyebrow-mark { width: 34px; height: 4px; background: var(--yellow); border-radius: 2px; }
.rz-hero__title {
  margin: 0 0 14px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 800; font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.06; letter-spacing: -0.01em; color: var(--navy-900);
}
.rz-hero__lead {
  margin: 0; max-width: 66ch; color: var(--muted);
  font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.6;
}

/* =========================================================
   FILTRY KATEGORII
========================================================== */
.rz-toolbar {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
}
.rz-toolbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
}
.rz-filters {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 0; padding: 0;
}
.rz-filter {
  font-family: "Barlow", sans-serif; font-weight: 600; font-size: 0.96rem;
  color: var(--navy-800);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 15px;
  cursor: pointer; white-space: nowrap;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.rz-filter:hover { border-color: rgba(16, 37, 80, 0.4); color: var(--navy-900); }
.rz-filter:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* Aktywny: granat + żółty akcent (dolna kreska) */
.rz-filter[aria-pressed="true"] {
  background: var(--navy-800);
  color: #fff;
  border-color: var(--navy-800);
  box-shadow: inset 0 -3px 0 0 var(--yellow);
}
.rz-count {
  font-family: "Barlow", sans-serif; font-size: 0.9rem; color: var(--muted);
  white-space: nowrap; flex: 0 0 auto;
}
.rz-count b { color: var(--navy-900); font-weight: 700; }

/* =========================================================
   GALERIA
========================================================== */
.rz-gallery {
  background: var(--bg-soft);
  padding-block: clamp(28px, 3.4vw, 48px);
}
.rz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.rz-item {
  position: relative; display: block; padding: 0; margin: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(16, 37, 80, 0.14);
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-900);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
    opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.rz-item[hidden] { display: none; }
.rz-item:hover { border-color: rgba(16, 37, 80, 0.4); box-shadow: 0 6px 16px rgba(11, 26, 58, 0.10); }
.rz-item:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.rz-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
  transition: transform 0.5s var(--ease);
}
.rz-item:hover .rz-img { transform: scale(1.04); }
/* Delikatne przyciemnienie u dołu pod podpis */
.rz-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(9, 18, 40, 0.34) 0%, rgba(9, 18, 40, 0) 34%);
  pointer-events: none;
}
/* Podpis kategorii — jak na homepage */
.rz-cat {
  position: absolute; left: 10px; bottom: 10px; z-index: 1;
  padding: 5px 11px;
  font-family: "Barlow", sans-serif; font-weight: 600; font-size: 0.76rem;
  letter-spacing: 0.03em; color: #fff;
  background: rgba(9, 18, 40, 0.74);
  border-left: 3px solid var(--yellow);
  border-radius: 2px;
  backdrop-filter: blur(2px);
}

/* Subtelne wejście kafla po zmianie filtra */
.rz-item.is-enter { opacity: 0; transform: translateY(6px); }

/* =========================================================
   CTA KOŃCOWE — granatowy pas (spójny z /uslugi)
========================================================== */
.cta-band {
  background: var(--navy-900); color: #eaeefb;
  padding-block: clamp(46px, 5.6vw, 80px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.cta-band__inner { max-width: 760px; }
.cta-band__eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: #cdd6ea;
}
.cta-band__eyebrow-mark { width: 34px; height: 4px; background: var(--yellow); border-radius: 2px; }
.cta-band__title {
  margin: 0 0 12px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 800; font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.01em; color: #fff;
}
.cta-band__text {
  margin: 0 0 26px; max-width: 56ch; color: #b9c2da;
  font-size: 1.04rem; line-height: 1.6;
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* =========================================================
   RESPONSYWNOŚĆ
========================================================== */
/* Tablet: 2 kolumny */
@media (max-width: 900px) {
  .rz-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile: filtry jako przewijany pasek + 1 kolumna */
@media (max-width: 640px) {
  .rz-toolbar__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .rz-filters {
    flex-wrap: nowrap;
    min-width: 0;           /* pozwala kontenerowi zwęzić się i przewijać w środku */
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .rz-filter { flex: 0 0 auto; }
  .rz-count { align-self: flex-start; }
  .rz-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Dostępność: ograniczenie animacji */
@media (prefers-reduced-motion: reduce) {
  .rz-img, .rz-item { transition: none !important; }
  .rz-item.is-enter { opacity: 1 !important; transform: none !important; }
}