/* ============================================================
   REALIZACJE — jedna realizacja = jeden pas (ustalenie z Dawidem, 14.09.2026)
   Komputer: wszystko widoczne naraz (siatka).
   Telefon:  pas przewijany w bok; zdjęcie Dawida stoi jako OSTATNIE
             — najpierw produkt, twarz na końcu buduje zaufanie.
   ⛔ Bez znaku wodnego na zdjęciach — odrzucone przez klienta.
   ============================================================ */

.realizacja{ margin: clamp(3rem, 6vw, 5.5rem) 0; }

.realizacja-head{
  display:flex; align-items:baseline; gap:.9rem;
  flex-wrap:wrap; margin-bottom:1.25rem;
}
.realizacja-head h3{ margin:0; }
.realizacja-miejsce{
  font-size:.86rem; letter-spacing:.08em; text-transform:uppercase;
  opacity:.62;
}
.realizacja-opis{ max-width:62ch; margin:.35rem 0 1.35rem; opacity:.85; }

/* --- KOMPUTER: siatka, wszystko na raz --- */
.realizacja-pas{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:.85rem;
}
.realizacja-pas figure{ margin:0; position:relative; }
.realizacja-pas img{
  width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3; display:block;
  border-radius:2px;
}
/* kadr pionowy nie ma się rozciągać na siłę */
.realizacja-pas figure.pion img{ aspect-ratio:3/4; }
/* pierwszy kadr realizacji dostaje więcej miejsca */
.realizacja-pas figure.wiodace{ grid-column:span 2; }
.realizacja-pas figure.wiodace img{ aspect-ratio:16/10; }

.realizacja-pas figcaption{
  font-size:.8rem; opacity:.6; padding:.4rem .1rem 0;
}

/* zdjęcie właściciela — na komputerze ostatni kafel; podpis leży NA kadrze (sekcja niżej) */
.realizacja-pas figure.wlasciciel img{ aspect-ratio:3/4; }

/* --- TELEFON: pas przewijany w bok --- */
@media (max-width:767px){
  .realizacja-pas{
    display:flex;
    gap:.6rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* pas wychodzi poza margines strony, żeby sąsiedni kadr było widać */
    margin-inline:calc(-1 * var(--pad, 1rem));
    padding-inline:var(--pad, 1rem);
    padding-bottom:.5rem;
  }
  .realizacja-pas::-webkit-scrollbar{ display:none; }

  .realizacja-pas figure{
    flex:0 0 84%;              /* kawałek następnego widać = sygnał „przewiń” */
    scroll-snap-align:center;
  }
  .realizacja-pas figure.wiodace{ grid-column:auto; }
  .realizacja-pas figure.wiodace img,
  .realizacja-pas figure.pion img,
  .realizacja-pas img{ aspect-ratio:4/3; }
  .realizacja-pas figure.wlasciciel img{ aspect-ratio:4/3; }
}

/* licznik „1 / 8” pod pasem — tylko telefon, tylko gdy skrypt żyje */
.realizacja-licznik{ display:none; }
@media (max-width:767px){
  .js .realizacja-licznik{
    display:block; text-align:center;
    font-size:.78rem; letter-spacing:.1em; opacity:.55;
    margin-top:.5rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .realizacja-pas{ scroll-behavior:auto; }
}

/* ============================================================
   FILM W PASIE REALIZACJI — życzenie Dawida z 04.09.2026
   („w realizacjach na pewno chciałbym te filmiki mieć")
   Kafel to PLAKAT + znaczek „graj". Samo wideo dociąga się dopiero po kliknięciu
   (`data-pelne` w HTML, zero <video> na wejściu) — sekcja z dwoma filmami
   ciągnęłaby przy wejściu kilkanaście megabajtów na cudzym pakiecie danych.
   ============================================================ */
/* kafel filmu trzyma DOKŁADNIE tę samą ramkę co zdjęcia obok (4:3) — inaczej wiersz siatki
   robi się nierówny; pełny kadr 16:9 i tak widać dopiero po kliknięciu, w kinie */
/* ⛔ bez `background:var(--ink)` na figurze — podpis leży POD kadrem, na tle figury,
   więc ciemne tło dawało ciemny tekst na ciemnym (bramka kontrastu: 1.00, 15.09) */
.realizacja-pas figure.kadr-wideo{ cursor:pointer; }
.realizacja-pas figure.kadr-wideo img{ background:var(--ink); }

.kadr-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3.4rem; height:3.4rem; border-radius:50%;
  display:grid; place-items:center; color:#fff; cursor:pointer;
  background:rgba(20,18,16,.58); border:1px solid rgba(255,255,255,.34);
  transition:background var(--dur,.35s) var(--ease,ease), transform var(--dur,.35s) var(--ease,ease);
}
.kadr-play svg{ width:1.9rem; height:1.9rem; display:block; margin-left:.12rem; }
.kadr-wideo:hover .kadr-play{ background:var(--accent); border-color:transparent; transform:translate(-50%,-50%) scale(1.07); }
.kadr-play:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* PODPISY W PASIE LEŻĄ NA KADRZE, nie pod nim (15.09.2026).
   Pod kadrem być nie mogą: zdjęcia w siatce mają `height:100%`, więc podpis wychodził
   poza pudełko figury i wjeżdżał na następny wiersz (widać to było na zrzucie).
   Ten sam przepis co podpisy na ścianie nagrań — jeden wzór na całej stronie.
   Dotyczy OBU kafli z podpisem: filmu i zdjęcia Dawida (albo wszystkie tak samo, albo żaden). */
.realizacja-pas figure.kadr-wideo figcaption,
.realizacja-pas figure.wlasciciel figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:2.2rem .75rem .6rem; margin:0;
  color:#fff; opacity:1; font-weight:600; font-size:.84rem; line-height:1.35;
  text-shadow:0 1px 3px rgba(8,6,4,.9), 0 2px 12px rgba(8,6,4,.6);
  background:linear-gradient(180deg, rgba(14,12,10,0) 0%, rgba(14,12,10,.72) 45%, rgba(14,12,10,.95) 100%);
  pointer-events:none;
}

/* ============================================================
   KINO — pełny ekran po kliknięciu (Dawid 04.09: „to jest bardzo ważne",
   „czy tutaj, czy na telefon, żeby na cały ekran wchodziło")
   Nakładka zakrywa ekran także tam, gdzie przeglądarka nie daje fullscreena
   na zwykłym elemencie (Safari na iPhonie) — efekt jest ten sam.
   ============================================================ */
.kino{
  position:fixed; inset:0; z-index:9000;
  background:rgba(10,8,6,.97);
  display:grid; place-items:center;
  padding:clamp(.5rem,2vw,2rem);
}
.kino video{
  width:100%; height:100%; max-height:100%;
  object-fit:contain; background:#000; display:block;
  border-radius:2px;
}
.kino-zamknij{
  position:absolute; top:clamp(.6rem,2vw,1.4rem); right:clamp(.6rem,2vw,1.4rem);
  width:2.8rem; height:2.8rem; border-radius:50%; z-index:2;
  display:grid; place-items:center; cursor:pointer; color:#fff;
  background:rgba(20,18,16,.72); border:1px solid rgba(255,255,255,.38);
}
.kino-zamknij svg{ width:1.2rem; height:1.2rem; display:block; }
.kino-zamknij:hover{ background:var(--accent); border-color:transparent; }
.kino-zamknij:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
/* tło strony nie przewija się pod nakładką */
html.kino-otwarte, html.kino-otwarte body{ overflow:hidden; }

/* Ściana nagrań na stronie głównej: kliknięcie w kafel otwiera kino, więc przycisk dźwięku
   nie może już zajmować CAŁEJ płytki (tak było do 15.09) — zostaje pod swoją ikoną. */
.reel-btn{ inset:0 0 auto auto; width:3.7rem; height:3.7rem; border-radius:50%; }
.reel{ cursor:pointer; }
/* znaczek „graj" mówi, że kafel można otworzyć; gaśnie, gdy leci pętla podglądu */
.reel::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:3.4rem; height:3.4rem; border-radius:50%; z-index:1; pointer-events:none;
  background:rgba(20,18,16,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7.5v9l7.5-4.5z' fill='%23ffffff'/%3E%3C/svg%3E") center/1.9rem no-repeat;
  border:1px solid rgba(255,255,255,.34);
  transition:opacity .45s var(--ease,ease);
}
.reel.gra::after{ opacity:0; }

/* ============================================================
   WSKAŹNIK OTWARTE/ZAMKNIĘTE (Dawid 04.09: „fajne, ciekawe")
   Kropka i napis liczone z zegara odwiedzającego — treść wpisuje main.js,
   więc bez JS zostaje sam, poprawny napis z godzinami.
   ============================================================ */
.godziny-stan{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.86rem; font-weight:600; letter-spacing:.01em;
  margin-top:.3rem;
}
.godziny-stan .kropka{
  width:.62rem; height:.62rem; border-radius:50%; flex:0 0 auto;
  background:var(--muted);
}
.godziny-stan.otwarte .kropka{ background:#2F7A4F; box-shadow:0 0 0 .22rem rgba(47,122,79,.18); }
.godziny-stan.zamkniete .kropka{ background:#9A3B2A; box-shadow:0 0 0 .22rem rgba(154,59,42,.16); }
.godziny-stan .kiedy{ font-weight:400; color:var(--muted); }
/* w stopce (ciemne tło) napis musi zostać czytelny */
footer .godziny-stan .kiedy{ color:rgba(255,255,255,.72); }

/* ============================================================
   RUCH W PASIE REALIZACJI (Dawid 04.09: „więcej ruchu takiego jak na
   podstronie oferta") — kurtynę i zoom-out daje warstwa MOTION z main.js,
   tu zostaje tylko to, czego JS nie ustawi:
   ============================================================ */
/* ⛔ NIE dawać tu `overflow:hidden` — podpis („Dawid Busłowicz", podpis filmu) leży POD
   kadrem, poza pudełkiem figury, i zostaje ucięty (wpadka 15.09, złapana na zrzucie).
   Zamiast tego wyłączamy sam zoom w pasie: kurtyna (clip-path) nie wychodzi poza kadr,
   więc nie ma czego przycinać. Ruch zostaje ten sam co na Ofercie, tylko bez dojazdu skali. */
.mt-on .realizacja-pas .mt-ph > img{ scale:1; }
.realizacja-pas figure{ border-radius:2px; }
/* kolejne kadry wchodzą PO SOBIE, nie wszystkie naraz (rytm jak w siatce Oferty) */
.realizacja-pas figure:nth-child(2){ --mt-d:.06s; }
.realizacja-pas figure:nth-child(3){ --mt-d:.12s; }
.realizacja-pas figure:nth-child(4){ --mt-d:.18s; }
.realizacja-pas figure:nth-child(5){ --mt-d:.24s; }
.realizacja-pas figure:nth-child(6){ --mt-d:.30s; }
.realizacja-pas figure:nth-child(7){ --mt-d:.36s; }
.realizacja-pas figure:nth-child(n+8){ --mt-d:.42s; }
@media (prefers-reduced-motion:reduce){
  .realizacja-pas figure{ --mt-d:0s; }
}

/* ============================================================
   FORMULARZ ZAPYTAŃ (poz. 2 z listy Dawida, 15.09.2026)
   Silnik ma już `.form input` i `.form textarea` (styles.css). Brakowało dwóch rzeczy:
   listy rozwijanej i miejsca na komunikat błędu — dokładamy je w tym samym stylu.
   ============================================================ */
.form select{
  width:100%; font-family:inherit; font-size:var(--text-base); color:var(--ink);
  background:var(--paper); border:var(--hairline); border-radius:var(--r-sm);
  padding:var(--space-4); appearance:none; transition:border-color var(--dur);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%236C6860' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .7rem center; background-size:1.1rem;
  padding-right:2.4rem;
}
.form select:focus{ outline:none; border-color:var(--accent); background-color:#fff; }
/* komunikat „podaj telefon albo e-mail" — pusty nie zajmuje miejsca */
.form .form-error{ color:#9A3B2A; font-size:var(--text-sm); font-weight:600; margin:0 0 var(--space-3); }
.form .form-error:empty{ display:none; }