/* Style rzadziej używanych bloków (paczka 201) — osobny plik zamiast wbudowania w każdą stronę.
   Dołącza go tylko strona z takim blokiem (src/layouts/Podstawa.astro, „styleBlokow”; lista bloków:
   BLOKI_Z_WLASNYM_CSS w src/plugins/bloki.mjs). Tokeny (--space-*, --radius-* …) są już na stronie.
   Podgląd w panelu: /panel/statyczne/bloki.css (app/main.py). */
/* Przed i po (```przed-po). Bez skryptu: dwa obrazy obok siebie. Ze skryptem (klasa pp-aktywny, strona.js cz. 9):
   obraz „po” wyznacza ramkę, „przed” leży na nim przycięty do --poz od lewej; suwak (range) na całej powierzchni. */
.blok-przed-po { margin: var(--space-6) 0; }
.pp-ramka { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pp-warstwa { position: relative; margin: 0; }
.pp-warstwa img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--radius-md); }
.pp-przed { order: -1; }
.pp-etykieta { position: absolute; top: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, .55); pointer-events: none; }
.pp-l { left: var(--space-3); }
.pp-p { right: var(--space-3); }
.pp-linia { display: none; }
.pp-aktywny .pp-ramka { display: block; overflow: hidden; border-radius: var(--radius-md); touch-action: pan-y; }
.pp-aktywny .pp-warstwa img { border-radius: 0; }
.pp-aktywny .pp-przed { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--poz)) 0 0); }
.pp-aktywny .pp-przed img { width: 100%; height: 100%; object-fit: cover; }
.pp-aktywny .pp-linia { display: block; position: absolute; top: 0; bottom: 0; left: var(--poz); width: 3px; margin-left: -1.5px; background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .4); pointer-events: none; }
.pp-uchwyt { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
.pp-uchwyt::before, .pp-uchwyt::after { content: ''; position: absolute; top: 50%; margin-top: -6px; border: 6px solid transparent; }
.pp-uchwyt::before { left: 5px; border-right-color: var(--ink); }
.pp-uchwyt::after { right: 5px; border-left-color: var(--ink); }
.pp-suwak { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.pp-aktywny .pp-ramka:has(.pp-suwak:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.blok-przed-po figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--ink-muted); text-align: center; }
.blok-warianty { margin: var(--space-6) 0; }
.war-uklad { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.blok-warianty .war-uklad .blok-przed-po { margin: 0; }   /* mocniej niż .tresc [class^="blok-"] (wbudowany CSS strony) */
.war-siatka { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.war-miniatura { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; outline-offset: 2px; }
.war-miniatura img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; transition: transform .2s; }
.war-miniatura:hover img { transform: scale(1.04); }
.war-miniatura span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.war-podpis { margin: var(--space-2) 0 0; font-size: 14px; color: var(--ink-muted); text-align: center; }
/* Szeroki ekran: siatka ma dokładnie wysokość porównania (miniatury wypełniają 3 równe rzędy, kadr do środka). */
@media (min-width: 721px) {
  .war-uklad { align-items: stretch; }
  .war-siatka { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .war-miniatura img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 720px) { .war-uklad { grid-template-columns: minmax(0, 1fr); } .war-siatka { grid-template-columns: repeat(3, 1fr); } }

/* Model 3D (```model-3d): okno o stałej wysokości; przeglądarkę wstawia strona.js (cz. 10) po uruchomieniu. */
.blok-model-3d { margin: var(--space-6) 0; }
.m3d-scena { position: relative; height: var(--m3d-wysokosc, 480px); border-radius: var(--radius-md); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff, var(--sand, #f1ece4)); display: grid; place-items: center; }
.m3d-podglad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; margin: 0; }
.m3d-uruchom { position: relative; z-index: 1; }
.m3d-pobierz { position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-3); font-size: 13px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .8); }   /* nad przeglądarką 3D */
.m3d-scena model-viewer { position: absolute; inset: 0; width: 100%; height: 100%; --poster-color: transparent; }
.m3d-dziala .m3d-podglad, .m3d-dziala .m3d-uruchom { display: none; }
.blok-model-3d figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--ink-muted); text-align: center; }

/* Zakładki (```zakladki, „=== Tytuł”): przełączanie bez skryptu — pola radio
   przed etykietami i panelami; zaznaczone pole pokazuje swój panel (do 8). */
.blok-zakladki { position: relative; margin-block: var(--space-6); }
.blok-zakladki .zk-wybor { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.zk-etykiety { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line); }
.zk-etykiety label { cursor: pointer; padding: var(--space-3) var(--space-4); min-height: var(--touch-min); font-weight: 600; color: var(--ink-muted); border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; margin-bottom: -1px; }
.zk-etykiety label:hover { color: var(--ink); }
.zk-panel { display: none; padding-top: var(--space-4); }
.zk-panel > :first-child { margin-top: 0; }
.zk-wybor:nth-of-type(1):checked ~ .zk-panele > .zk-panel:nth-child(1),
.zk-wybor:nth-of-type(2):checked ~ .zk-panele > .zk-panel:nth-child(2),
.zk-wybor:nth-of-type(3):checked ~ .zk-panele > .zk-panel:nth-child(3),
.zk-wybor:nth-of-type(4):checked ~ .zk-panele > .zk-panel:nth-child(4),
.zk-wybor:nth-of-type(5):checked ~ .zk-panele > .zk-panel:nth-child(5),
.zk-wybor:nth-of-type(6):checked ~ .zk-panele > .zk-panel:nth-child(6),
.zk-wybor:nth-of-type(7):checked ~ .zk-panele > .zk-panel:nth-child(7),
.zk-wybor:nth-of-type(8):checked ~ .zk-panele > .zk-panel:nth-child(8) { display: block; }
.zk-wybor:nth-of-type(1):checked ~ .zk-etykiety > label:nth-child(1),
.zk-wybor:nth-of-type(2):checked ~ .zk-etykiety > label:nth-child(2),
.zk-wybor:nth-of-type(3):checked ~ .zk-etykiety > label:nth-child(3),
.zk-wybor:nth-of-type(4):checked ~ .zk-etykiety > label:nth-child(4),
.zk-wybor:nth-of-type(5):checked ~ .zk-etykiety > label:nth-child(5),
.zk-wybor:nth-of-type(6):checked ~ .zk-etykiety > label:nth-child(6),
.zk-wybor:nth-of-type(7):checked ~ .zk-etykiety > label:nth-child(7),
.zk-wybor:nth-of-type(8):checked ~ .zk-etykiety > label:nth-child(8) { color: var(--accent); background: var(--surface); border-color: var(--line); box-shadow: inset 0 3px 0 var(--accent); }
.zk-wybor:nth-of-type(1):focus-visible ~ .zk-etykiety > label:nth-child(1),
.zk-wybor:nth-of-type(2):focus-visible ~ .zk-etykiety > label:nth-child(2),
.zk-wybor:nth-of-type(3):focus-visible ~ .zk-etykiety > label:nth-child(3),
.zk-wybor:nth-of-type(4):focus-visible ~ .zk-etykiety > label:nth-child(4),
.zk-wybor:nth-of-type(5):focus-visible ~ .zk-etykiety > label:nth-child(5),
.zk-wybor:nth-of-type(6):focus-visible ~ .zk-etykiety > label:nth-child(6),
.zk-wybor:nth-of-type(7):focus-visible ~ .zk-etykiety > label:nth-child(7),
.zk-wybor:nth-of-type(8):focus-visible ~ .zk-etykiety > label:nth-child(8) { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Panorama / spacer / animacja z AiRender (```panorama, paczka 202): viewer AiRender w ramce; „klik” — ramkę wstawia strona.js (cz. 12). */
.blok-panorama { margin: var(--space-6) 0; }
.pan-scena { position: relative; height: var(--pan-wysokosc, 520px); border-radius: var(--radius-md); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fff, var(--sand, #f1ece4)); display: grid; place-items: center; }
.pan-podglad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.pan-uruchom { position: relative; z-index: 1; }
.pan-otworz { position: absolute; z-index: 2; right: var(--space-3); bottom: var(--space-3); font-size: 13px; padding: 2px var(--space-2);
  border-radius: var(--radius-sm); background: rgba(255, 255, 255, .85); color: var(--ink); }
.pan-scena iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pan-dziala .pan-podglad, .pan-dziala .pan-uruchom, .pan-dziala .pan-otworz { display: none; }
.blok-panorama figcaption { margin-top: var(--space-2); font-size: 14px; color: var(--ink-muted); text-align: center; }
@media (max-width: 640px) { .pan-scena { height: min(var(--pan-wysokosc, 520px), 70vh); } }

/* Paczka 205: model 3D / panorama / przed i po sam w karcie kolumny — okno rośnie do wysokości karty (równe kafle w rzędzie). */
.kolumna-karta > .blok-model-3d:only-child > .m3d-scena { flex: 1; height: auto; min-height: var(--m3d-wysokosc, 480px); border-radius: 0; }
.kolumna-karta > .blok-panorama:only-child > .pan-scena { flex: 1; height: auto; min-height: var(--pan-wysokosc, 520px); border-radius: 0; }
.kolumna-karta > .blok-przed-po:only-child > .pp-ramka { flex: 1; border-radius: 0; }