/* === Realizacje (ARCHIVE) — corporate, spójne z home === */
:root{
  /* Paleta „korpo” */
  --rz-text: #0f172a;           /* ciemny granat */
  --rz-muted: #64748b;
  --rz-border: #e2e8f0;
  --rz-card-bg: #ffffff;
  --rz-bg: #f7f9fc;
  --rz-brand: #0a7a54;          /* stonowana zieleń */
  --rz-brand-weak: #0a7a5422;
  --rz-shadow: 0 6px 24px rgba(13, 38, 76, .06);

  /* Geometria kafelka (ścięcia) */
  --bevel: 14px;
  --bevel-hover: 20px;
}

/* Sekcja / tło */
.rz-archive{ position: relative; isolation: isolate; padding: 48px 0; background: transparent; }
.rz-archive::before{
  content: ""; position: absolute; inset: 0;
  background: url('../img/bg-archive.svg') center / cover no-repeat fixed;
  opacity: .07; z-index: -1;
}
.rz-container{ width: min(1200px, 92%); margin: 0 auto; }

/* Nagłówek */
.rz-header{ text-align: center; margin-bottom: 28px; }
.rz-title{
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15; margin: 0 0 8px; color: var(--rz-text);
}
.rz-subtitle{ color: var(--rz-muted); margin: 0; }

/* === Grid (4 kol. desktop / 3 / 2 / 1) === */
.rz-grid{
  display: grid; gap: 22px;
  grid-template-columns: 1fr;                 /* mobile-first */
}
@media (min-width: 640px){  .rz-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px){  .rz-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .rz-grid{ grid-template-columns: repeat(4, 1fr); } }

/* =========================
   KARTA REALIZACJI (kafelek)
   ========================= */
.rz-card{
  position: relative; overflow: hidden;
  background: var(--rz-card-bg);
  box-shadow: var(--rz-shadow);

  /* brak klasycznego bordera — narysujemy go pseudo-elementem zgodnie z clip-path */
  border: none; border-radius: 0;

  /* Ścięte rogi kafelka */
  --b: var(--bevel);
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                     calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));

  transition: transform .2s ease, box-shadow .2s ease, clip-path .25s ease;
}

/* Cienki „border” podążający za clip-path */
.rz-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                     calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  box-shadow: inset 0 0 0 1px var(--rz-border);
}

/* Pasek akcentu u góry karty */
.rz-card::after{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--rz-brand), #0b8f61);
  opacity:.8;
}

/* Hover: powiększ ścięcie + lekki lift */
@media (hover:hover){
  .rz-card:hover{
    --b: var(--bevel-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(13, 38, 76, .10);
  }
}

/* Link/układ wewnątrz karty */
.rz-card__link{
  display: grid; grid-template-rows: auto 1fr;
  width: 100%; color: inherit; text-decoration: none;
}

/* Media (miniatura) */
.rz-card__media{ aspect-ratio: 16/10; background: #eef1f4; position: relative; overflow: hidden; }
.rz-card__img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.12) saturate(.95);
  transform: scale(1.01);
  transition: transform .35s ease, filter .35s ease;
}
.rz-card:hover .rz-card__img{
  transform: scale(1.06);
  filter: grayscale(0) saturate(1);
}
.rz-card__placeholder{ width: 100%; height: 100%; display: block; }

/* Treść karty */
.rz-card__body{ padding: 16px 16px 18px; }
.rz-card__title{
  font-size: 18px; line-height: 1.25; margin: 0 0 8px; color: var(--rz-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rz-card__excerpt{
  color: var(--rz-muted); margin: 0 0 12px; font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rz-card__cta{ font-size: 13px; color: var(--rz-brand); font-weight: 600; }

/* Fokus dostępności – bez rounded */
.rz-card__link:focus-visible{
  outline: 3px solid var(--rz-brand-weak);
  outline-offset: 3px; border-radius: 0;
}

/* === Paginacja === */
.rz-pagination{ display:flex; justify-content:center; margin: 28px 0 4px; }
.rz-pagination .nav-links{ display:flex; gap: 8px; align-items:center; }
.rz-pagination a, .rz-pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--rz-border); border-radius: 999px;
  background: #fff; color: var(--rz-text); text-decoration:none; font-weight:700;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.rz-pagination a:hover{ border-color:#cbd5e1; transform: translateY(-1px); }
.rz-pagination .current{ background: var(--rz-brand); color: #fff; border-color: var(--rz-brand); }

/* === Puste archiwum === */
.rz-empty{
  background:#fff; border:1px solid var(--rz-border);
  padding: 40px; text-align:center; box-shadow: var(--rz-shadow);
  /* spójność z „ostrą” geometrią */
  border-radius: 0;
  --b: var(--bevel);
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                     calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
}
.rz-empty h2{ margin:0 0 6px; color: var(--rz-text); }
.rz-empty p{ margin:0; color:var(--rz-muted); }

/* Responsywność drobna */
@media (max-width: 640px){
  .rz-container{ width: 90%; }
}

/* === Load more (jeśli używasz) === */
.rz-meta{ margin: 8px 0 0; color: var(--rz-muted); }
.rz-loadmore-wrap{ display:flex; justify-content:center; margin: 26px 0 4px; }
.rz-loadmore{
  appearance: none;
  border: 1px solid var(--rz-border);
  background: #fff; color: var(--rz-text);
  border-radius: 999px;
  padding: 10px 18px; font-weight: 700; cursor: pointer;
  box-shadow: var(--rz-shadow);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.rz-loadmore:hover{ transform: translateY(-2px); border-color:#cbd5e1; }
.rz-loadmore:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

/* Preferencje systemowe: mniej ruchu */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}


