/* Realizacje — strona. Kolory dziedziczy z motywu (--ink, --muted, --line, --card, --accent). */
.rz, .rz-dlg { --rz-ink: var(--ink, #0f1a2b); --rz-muted: var(--muted, #5b6676); --rz-line: var(--line, #e4e8ee); --rz-card: var(--card, #f4f6f9); --rz-acc: var(--accent, #1d4ed8); --rz-bg: var(--bg, #fff); }
.rz-bar { border-block: 1px solid var(--rz-line); padding-block: 16px; }
.rz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rz-chip { flex: none; border: 1px solid var(--rz-line); background: transparent; color: var(--rz-ink); font: inherit; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 99px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.rz-chip small { color: var(--rz-muted); margin-left: 6px; font-size: 12px; }
.rz-chip:hover { border-color: var(--rz-ink); }
.rz-chip[aria-pressed="true"] { background: var(--rz-ink); color: var(--rz-bg); border-color: var(--rz-ink); }
.rz-chip[aria-pressed="true"] small { color: inherit; opacity: .65; }
.rz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px 14px; padding: 28px 0 12px; align-items: start; }
.rz-t { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rz-t[hidden] { display: none; }
.rz-t:focus-visible { outline: 2px solid var(--rz-acc); outline-offset: 4px; border-radius: 14px; }
.rz-v { position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 14px; border: 1px solid var(--rz-line); background: var(--rz-card); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.rz-t:hover .rz-v { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(15,26,43,.14); }
.rz-r-1x1 { aspect-ratio: 1 / 1; } .rz-r-3x2 { aspect-ratio: 3 / 2; } .rz-r-4x3 { aspect-ratio: 4 / 3; } .rz-r-3x4 { aspect-ratio: 3 / 4; }
.rz-v img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-ph { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 900; font-size: clamp(48px, 6vw, 84px); letter-spacing: -.03em; color: rgba(15,26,43,.72); }
.rz-ph-0 { background: linear-gradient(135deg, #dbe4ff, #a5b4fc); } .rz-ph-1 { background: linear-gradient(135deg, #f3e8ff, #d8b4fe); }
.rz-ph-2 { background: linear-gradient(135deg, #fce7f3, #f9a8d4); } .rz-ph-3 { background: linear-gradient(135deg, #ffedd5, #fdba74); }
.rz-ph-4 { background: linear-gradient(135deg, #fef9c3, #bef264); } .rz-ph-5 { background: linear-gradient(135deg, #dcfce7, #5eead4); }
.rz-ph-6 { background: linear-gradient(135deg, #e0f2fe, #93c5fd); } .rz-ph-7 { background: linear-gradient(135deg, #ede9fe, #f0abfc); }
.rz-online { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,.92); color: #0f1a2b; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; box-shadow: 0 4px 12px rgba(15,26,43,.15); }
.rz-cap { display: flex; flex-direction: column; gap: 2px; }
.rz-cap strong { font-size: 15px; line-height: 1.25; font-weight: 650; color: var(--rz-ink); }
.rz-cap small { font-size: 13px; color: var(--rz-muted); }
.rz-empty { padding: 48px 0; color: var(--rz-muted); }
.rz-more { display: block; margin: 24px auto 8px; padding: 14px 32px; border-radius: 99px; border: 1px solid var(--rz-ink); background: none; color: var(--rz-ink); font: inherit; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.rz-more:hover { background: var(--rz-ink); color: var(--rz-bg); }
.rz-more[hidden] { display: none; }

/* Karta realizacji */
.rz-dlg { border: 0; padding: 0; background: var(--rz-card, #f4f6f9); color: var(--rz-ink, #0f1a2b); width: min(1080px, 94vw); max-height: 92vh; border-radius: 22px; overflow: auto; }
.rz-dlg::backdrop { background: rgba(8,10,16,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rz-dlg[open] { animation: rz-in .3s cubic-bezier(.2,.7,.2,1); }
@keyframes rz-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.rz-md { display: grid; grid-template-columns: 1.15fr 1fr; }
.rz-md-v { min-height: 420px; display: grid; place-items: center; background: #e9edf3; }
.rz-md-v img { width: 100%; height: 100%; max-height: 92vh; object-fit: contain; display: block; }
.rz-md-v .rz-ph { min-height: 420px; font-size: clamp(100px, 14vw, 200px); }
.rz-inf { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.rz-inf h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; letter-spacing: -.03em; margin: 0; }
.rz-cat { margin: 0; color: var(--rz-muted); font-size: 14px; }
.rz-inf dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 4px 0; font-size: 15px; }
.rz-inf dt { color: var(--rz-muted); } .rz-inf dd { margin: 0; }
.rz-desc { margin: 0; color: var(--rz-muted); white-space: pre-line; line-height: 1.6; }
.rz-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.rz-btn { display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 99px; font-weight: 650; text-decoration: none; border: 1px solid var(--rz-ink); color: var(--rz-ink); background: transparent; }
.rz-btn--main { background: var(--rz-ink); color: var(--rz-bg); }
.rz-btn:hover { transform: translateY(-2px); }
.rz-nav { margin-top: auto; display: flex; gap: 8px; padding-top: 16px; }
.rz-nav button { border: 1px solid var(--rz-line); background: none; color: var(--rz-ink); padding: 10px 18px; border-radius: 99px; font: inherit; font-size: 14px; cursor: pointer; }
.rz-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: #0f1a2b; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
@media (max-width: 560px) {
  .rz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; padding-top: 20px; }
  .rz-cap strong { font-size: 14px; } .rz-cap small { font-size: 12px; }
  .rz-online { top: 6px; right: 6px; font-size: 11px; padding: 3px 8px; }
  .rz-ph { font-size: 44px; }
  .rz-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .rz-chips::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) { .rz-md { grid-template-columns: 1fr; } .rz-md-v, .rz-md-v .rz-ph { min-height: 240px; } }
@media (prefers-reduced-motion: reduce) { .rz-dlg[open] { animation: none; } .rz-v, .rz-t:hover .rz-v { transition: none; transform: none; } }

/* Liczniki */
.rz-cnt { --rz-ink: var(--ink, #0f1a2b); --rz-muted: var(--muted, #5b6676); --rz-line: var(--line, #e4e8ee);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); border-block: 1px solid var(--rz-line); margin: 0 0 8px; }
.rz-cnt-i { padding: 28px 20px 26px; display: flex; flex-direction: column; gap: 6px; border-left: 1px solid var(--rz-line); }
.rz-cnt-i:first-child { border-left: 0; padding-left: 0; }
.rz-cnt-i b { font-weight: 900; font-size: clamp(34px, 4.2vw, 56px); line-height: 1; letter-spacing: -.035em; color: var(--rz-ink); font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #2563eb, #7c3aed 55%, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rz-cnt-i span { color: var(--rz-muted); font-weight: 600; font-size: 15px; line-height: 1.3; }
@media (max-width: 560px) {
  .rz-cnt { grid-template-columns: 1fr 1fr; }
  .rz-cnt-i { padding: 20px 14px; border-left: 0; border-top: 1px solid var(--rz-line); }
  .rz-cnt-i:nth-child(-n+2) { border-top: 0; }
  .rz-cnt-i:nth-child(odd) { padding-left: 0; }
}

/* Kafelek z serduszkiem (serduszko leży na grafice, poza linkiem) */
.rz-item { position: relative; min-width: 0; display: flex; flex-direction: column; }
.rz-item[hidden] { display: none; }
.rz-like { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 9px; border: 0; border-radius: 99px;
  background: rgba(255,255,255,.92); color: #0f1a2b; font: 700 13px/1 var(--b, system-ui, sans-serif); cursor: pointer; box-shadow: 0 6px 18px -6px rgba(15,26,43,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .2s, background .2s, color .2s; }
.rz-like svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.rz-like:hover { transform: scale(1.06); }
.rz-like:focus-visible { outline: 3px solid var(--rz-acc, #2563eb); outline-offset: 2px; }
.rz-like.is-on { color: #e11d48; } .rz-like.is-on svg { fill: #e11d48; stroke: #e11d48; }
.rz-like.pop svg { animation: rz-pop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes rz-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.rz-lc { min-width: 1ch; font-variant-numeric: tabular-nums; }
/* w podglądzie i na podstronie projektu — zwykły przycisk, nie na grafice */
.rz-like--dlg, .rz-like--page { position: static; align-self: flex-start; margin: 4px 0 10px; padding: 9px 15px 9px 12px; border: 1px solid #e4e8ee; box-shadow: none; background: #fff; font-size: 14px; }
.rz-like--page { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .rz-like, .rz-like svg { transition: none; } .rz-like.pop svg { animation: none; } }

/* Serduszko w prawym dolnym rogu grafiki: wysokość grafiki = szerokość kafelka × proporcja */
.rz-item { container-type: inline-size; }
.rz-ir-1x1 { --r: 1; } .rz-ir-3x2 { --r: .6667; } .rz-ir-4x3 { --r: .75; } .rz-ir-3x4 { --r: 1.3333; }
.rz-item > .rz-like { top: auto; bottom: auto; right: 10px; top: calc(100cqw * var(--r, 1) - 42px); }
.rz-item:has(.rz-t:hover) > .rz-like { transform: translateY(-5px); } /* rusza się razem z grafiką */
.rz-item:has(.rz-t:hover) > .rz-like:hover { transform: translateY(-5px) scale(1.06); }
@supports not (top: 1cqw) { .rz-item > .rz-like { top: 10px; } } /* bardzo stare przeglądarki: prawy górny róg */
@media (prefers-reduced-motion: reduce) { .rz-item:has(.rz-t:hover) > .rz-like { transform: none; } }

/* Numery stron (podstrona Realizacje) */
.rz { scroll-margin-top: 110px; }
.rz-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 32px 0 8px; }
.rz-pager[hidden] { display: none; }
.rz-pg { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--rz-line, #e4e8ee); background: #fff; color: var(--rz-ink, #0f1a2b);
  font: inherit; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.rz-pg:hover:not(:disabled) { border-color: var(--rz-ink, #0f1a2b); }
.rz-pg[aria-current="page"] { background: var(--rz-ink, #0f1a2b); color: #fff; border-color: var(--rz-ink, #0f1a2b); cursor: default; }
.rz-pg:disabled:not([aria-current]) { opacity: .4; cursor: default; }
.rz-pg:focus-visible { outline: 3px solid var(--rz-acc, #2563eb); outline-offset: 2px; }
.rz-pg-gap { padding: 0 4px; color: var(--rz-muted, #5b6676); }
@media (max-width: 560px) { .rz-pg-nav { flex-basis: calc(50% - 6px); order: 2; } .rz-pager { row-gap: 10px; } }