/* Widok 04 — pojedyncza realizacja. Odwaga 3 — spokój: bez znaku, czytelność przed efektem.
   Kompozycja: okruszki → nazwa i typ → duży kadr (okno na tę stronę) → opis w kolumnie
   do czytania, obok „Zakres i cena" przyklejone do ekranu → jedno wezwanie → sąsiednie realizacje.
   Tylko układ; wartości z tokenów system.css. */

.realizacja { display: grid; gap: var(--o-8); padding: calc(var(--logo-wys) + var(--o-8)) var(--margines) var(--o-9); }

.rz-okruszki ol { display: flex; flex-wrap: wrap; gap: var(--o-2); margin: 0; padding: 0; list-style: none; color: var(--tekst-2); }
.rz-okruszki li + li::before { content: "›"; margin-right: var(--o-2); color: var(--tekst-3); }
.rz-okruszki a { display: inline-block; padding-block: 6px; color: var(--tekst-2); text-decoration: none; }
.rz-okruszki a:hover { color: var(--tekst); }
.rz-okruszki [aria-current] { color: var(--tekst); }
.realizacja > .rz-okruszki { margin-bottom: calc(-1 * var(--o-6)); }

.rz-glowa { display: grid; gap: var(--o-2); }
.rz-tytul { font-size: var(--r-6); font-weight: var(--w-rzezba); line-height: 1; letter-spacing: -.03em; }
.rz-typ { color: var(--tekst-2); }

/* duży kadr: rama jak w portfolio (płaska — tu się czyta), przycisk podglądu na ramie */
.rz-prelook { position: relative; max-width: 72rem; }
.rz-rama { aspect-ratio: 16 / 10; }
.rz-prelook:has(.rz-otworz) .rz-rama { cursor: pointer; }
.rz-kadr { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.rz-otworz { position: absolute; left: 50%; bottom: var(--o-6); transform: translateX(-50%); gap: var(--o-2); }
.rz-otworz .ikona { width: 16px; height: 16px; }
.rz-blokada { display: grid; gap: var(--o-1); max-width: 46ch; margin-top: var(--o-4); color: var(--tekst-2); }
.rz-blokada strong { color: var(--tekst); font-weight: var(--w-mocny); }
.rz-blokada .odnosnik-dalej { justify-self: start; margin-top: var(--o-2); }

.rz-tresc { display: grid; gap: var(--o-8); max-width: 72rem; }
@media (min-width: 960px) {
  .rz-tresc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--o-8); align-items: start; }
  .rz-zakres { position: sticky; top: calc(var(--logo-wys) + var(--o-8)); }
}
.rz-opisy { display: grid; gap: var(--o-7); }
.rz-sekcja { display: grid; gap: var(--o-3); }
.rz-sekcja h2, .rz-zakres h2 { font-size: var(--r-3); font-weight: var(--w-lekki); line-height: 1.15; }
.rz-sekcja p { max-width: var(--szer-tekstu, 62ch); color: var(--tekst-2); font-size: var(--r-1); line-height: 1.7; }

.rz-zakres { display: grid; gap: var(--o-4); }
.rz-zakres dl { margin: 0; display: grid; }
.rz-zakres dl > div { display: grid; gap: var(--o-1); padding: 12px 0; border-top: 1px solid var(--linia); }
.rz-zakres dl > div:last-child { border-bottom: 1px solid var(--linia); }
.rz-zakres dt { color: var(--tekst-2); }
.rz-zakres dd { margin: 0; color: var(--tekst); font-size: var(--r-0-5); line-height: 1.6; }
.rz-zakres .rz-cena { font-size: var(--r-2); font-weight: var(--w-mocny); font-variant-numeric: tabular-nums lining-nums; }
.rz-zakres .odnosnik-dalej { justify-self: start; }

.rz-wezwanie { display: grid; justify-items: start; gap: var(--o-4); max-width: 46rem; }
.rz-wezwanie p { font-size: var(--r-3); font-weight: var(--w-lekki); line-height: 1.3; }

.rz-dalej { display: flex; justify-content: space-between; gap: var(--o-5); max-width: 72rem; padding-top: var(--o-5); border-top: 1px solid var(--linia); }
.rz-dalej a { display: inline-flex; align-items: center; gap: var(--o-2); min-height: 44px; color: var(--tekst-2); font-size: var(--r-2); text-decoration: none; transition: color .25s var(--e-lagodna); }
.rz-dalej a:hover { color: var(--tekst); }
.rz-dalej .ikona { width: 20px; height: 20px; color: var(--akcent); }