/* Realizacje — wspólne dla /, /portfolio i /portfolio/{nazwa} (widoki 01, 03, 04): tytuł krojem
   marki realizacji (czesci/realizacje.php) i okno prelooka (czesci/prelook.php, assets/js/prelook.js).
   Tylko układ; wartości z tokenów system.css. */

/* tytuł krojem marki realizacji (obrazek z przezroczystym tłem): linia bazowa obrazka
   (--lb, ułamek wysokości od góry) siada na linii bazowej wiersza */
.tytul-obraz {
  display: inline-block;
  width: auto; height: 1.34em;
  vertical-align: calc((var(--lb, .75) - 1) * 1.34em);
}
.prelook-tytul .tytul-obraz { height: 1.9em; vertical-align: calc((var(--lb, .75) - 1) * 1.9em); }

/* ==========================================================================
   PRELOOK — stan 2 (przybliżenie) i 3 (żywa strona w ramce); system.md
   ========================================================================== */
.prelook {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0;
  padding: max(var(--o-4), env(safe-area-inset-top)) var(--margines) max(var(--o-4), env(safe-area-inset-bottom));
  border: 0;
  background: transparent;
  color: var(--tekst);
  overflow: hidden;
}
.prelook[open] { display: grid; }
.prelook::backdrop { background: rgba(7, 9, 18, .8); }
.prelook-rama {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%; height: 100%;
  transform-origin: 0 0;
}
.prelook-pasek {
  display: flex; align-items: center; gap: var(--o-3);
  padding: var(--o-2) var(--o-2) var(--o-2) var(--o-5);
  border-bottom: 1px solid var(--rama-linia);
}
.prelook-tytul { margin-right: auto; color: var(--tekst-2); }
.prelook-wyjdz {
  display: inline-flex; align-items: center; gap: var(--o-2);
  min-height: 40px;
  font-size: var(--r-0);
  font-weight: 600;
  color: var(--tekst);
  text-decoration: none;
}
.prelook-wyjdz .ikona { width: 16px; height: 16px; color: var(--akcent); }
.prelook-zamknij { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; }
.prelook-zamknij:hover { background: var(--szklo-tlo); }
.prelook-ekran { position: relative; min-height: 0; background: var(--noc-2); container-type: inline-size; }
.prelook-kadr { position: absolute; inset: 0; display: grid; place-items: center; }
.prelook-kadr img { width: 100%; height: 100%; object-fit: cover; }
.prelook-ekran iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity .5s var(--e-lagodna);
}
.prelook-ekran iframe.wczytana { opacity: 1; }
.prelook-stan {
  position: absolute; left: 50%; bottom: var(--o-5);
  max-width: calc(100% - 2 * var(--o-5));
  padding: var(--o-2) var(--o-4);
  border-radius: var(--z-pigulka);
  background: var(--szklo-lekkie);
  font-size: var(--r-0);
  text-align: center;
  transform: translateX(-50%);
}
.prelook-stan:empty { display: none; }
.prelook-stan :is(a, .prelook-ponow) { color: var(--akcent); }
/* komunikat stanu (blokada ramki, brak odpowiedzi): nagłówek w osobnym wierszu, akcje pod zdaniem */
.prelook-stan strong { display: block; margin-bottom: 2px; font-weight: var(--w-mocny); }
.prelook-akcje { display: block; margin-top: var(--o-1); }
.prelook-ponow { padding: 6px 0; border: 0; background: none; font: inherit; cursor: pointer; text-decoration: underline 1px; text-underline-offset: .3em; }
.prelook-stan:has(strong) { border-radius: var(--z-maly); padding: var(--o-3) var(--o-5); }
@media (max-width: 699px) {
  .prelook-wyjdz-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}