/* ============================================================
   JACKOWO — sections.css
   Układy sekcji. Warianty zatwierdzone w kompozycje-jackowo.html:
     hero → A2 · kafle → B2 · rząd obraz+tekst → C1
     karta dań → D1 · polecane dania → D2 · piwo → W1
   Nie wymyślaj układów od nowa — przenoś zatwierdzone.
   ============================================================ */

/* ============================================================
   HERO — wariant A2: zdjęcie + panel z tekstem obok

   Dlaczego A2: tekst nigdy nie ląduje na zajętym tle, więc jest czytelny
   niezależnie od tego, jakie zdjęcie klient podmieni. Panel zajmuje tę część
   kadru, w której i tak byłoby tylko białoszare niebo. Działa bez przyciemniania
   zdjęcia, więc strona zostaje jasna.
   ============================================================ */
/* Hero jest kartą w kontenerze, nie pasem na całą szerokość — tak jak
   w kompozycje-jackowo.html i jak reszta bloków w serwisie (kafle, .info, .quote). */
/* max-width 1040 px, nie pełna szerokość kontenera.

   Powód jest techniczny, nie estetyczny: najlepsze kolorystycznie zdjęcia
   (domki w słońcu, basen) mają 1024 px, bo pochodzą z Booking.com. Przy hero
   na 653 px i ekranie retina przeglądarka potrzebowałaby 1306 px i obraz
   robił się miękki. Po zmniejszeniu kadr ma ok. 556 px, czyli 1024/556 ≈ 1,84×
   — na oko nie do odróżnienia od pełnej ostrości.

   Zdjęcia w pełnej rozdzielczości mają szare, pochmurne niebo; te kolorowe
   są mniejsze. Zamiast wybierać między ostrością a kolorem — pomniejszamy kadr. */
.hero{
  position:relative;overflow:hidden;background:var(--c-surface);
  border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  display:grid;grid-template-columns:minmax(0,1fr);
  max-width:1040px;margin-inline:auto;
}
@media(min-width:820px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}

.hero__media{position:relative;overflow:hidden;min-height:260px}
@media(min-width:820px){.hero__media{min-height:400px}}
/* <picture> jest domyślnie elementem inline. Jeśli zostawić go tak,
   to height:100% na <img> odnosi się do pudełka o wysokości auto i zdjęcie
   renderuje się w naturalnych proporcjach — kadr o ustalonym aspect-ratio
   zostaje częściowo pusty. Reguła musi obejmować KAŻDY kadr ze zdjęciem. */
.hero__media picture,
.tile__media picture,
.plate__media picture,
.bento__media picture,
.media picture,
.frame picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center}

.hero__panel{
  background:var(--c-bg-sand);padding:var(--sp-6) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;
}
@media(min-width:820px){.hero__panel{padding:var(--sp-8) var(--sp-7)}}

.hero__panel h1{
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;
  margin-bottom:var(--sp-3);
}
/* :not(.eyebrow) — bez tego reguła 0-1-1 zabierała etykiecie kolor akcentu,
   bo .eyebrow to tylko 0-1-0. Etykieta w hero ma iść za osobowością strony. */
.hero__panel p:not(.eyebrow){color:var(--c-text-2);max-width:46ch;margin-bottom:var(--sp-5)}
.hero__panel .eyebrow{max-width:46ch}

/* wyśrodkowanie treści hero — spójne z wyśrodkowanymi nagłówkami sekcji */
.hero__panel{text-align:center;align-items:center}
.hero__panel p{margin-inline:auto}
.hero__panel .btn-row{justify-content:center}

/* na wąskim ekranie przyciski na całą szerokość — dwa różnej długości,
   ustawione jeden pod drugim, wyglądają jak niedokończone */
@media(max-width:479px){
  .hero__panel .btn-row{flex-direction:column;align-items:stretch}
}

/* hero na podstronach działalności — niższy niż na stronie głównej.

   Mniejszy H1 i słabsza spacja niż w hero głównym to nie kosmetyka: nazwy
   działalności są długie („RESTAURACJA JACKOWO", „MUZEUM ZIEMI SŁAWIEŃSKIEJ"),
   a najdłuższe słowo wyznacza minimalną szerokość panelu. Przy skali ze strony
   głównej panel rozpychał się ponad swoje .85fr i psuł proporcję wariantu A2. */
.hero--sub .hero__media{min-height:210px}
@media(min-width:820px){.hero--sub .hero__media{min-height:330px}}
.hero--sub .hero__panel h1{
  font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);
  letter-spacing:.1em;
}

/* ============================================================
   KAFLE DZIAŁALNOŚCI — wariant B2: podpis na wysuniętej karcie

   Karta z nazwą nachodzi na zdjęcie o 30 px. Kosztuje jedną deklarację CSS,
   nie rusza czytelności, a kafle przestają wyglądać jak domyślny szablon.
   ============================================================ */
.tiles{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media(min-width:640px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}

.tile{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;height:100%;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.tile:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}

/* Proporcje 3:2 wg wariantu B2. Zdjęcia z selekcji są 4:3 (1800×1350),
   więc kadr obcina się symetrycznie góra-dół — podmiana pliku na inne
   proporcje nie zepsuje siatki. */
.tile__media{overflow:hidden;position:relative;aspect-ratio:var(--ar-tile);background:var(--c-bg-sand)}
.tile__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transition:transform .5s var(--ease);
}
.tile:hover .tile__media img{transform:scale(1.04)}

/* wysunięta karta z podpisem — sedno wariantu B2 */
.tile__body{
  position:relative;z-index:2;margin:-30px var(--sp-4) 0;
  background:var(--c-surface);border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--sp-5) var(--sp-4);
  box-shadow:0 -6px 16px rgba(31,36,33,.05);
  display:flex;flex-direction:column;flex:1;
}
.tile__body h3{font-size:1.2rem;margin-bottom:var(--sp-2)}
.tile__body p{font-size:var(--fs-sm);color:var(--c-text-2);flex:1;margin-bottom:var(--sp-4)}
.tile__body .btn{align-self:flex-start}

@media(prefers-reduced-motion:reduce){
  .tile:hover{transform:none}
  .tile:hover .tile__media img{transform:none}
}

/* ============================================================
   NAKŁADKI NA ZDJĘCIA — tylko te, wszystkie czysto CSS-owe.
   Nic nie wypalamy w plikach zdjęć.
   Nakładaj na element z position:relative, który zawiera <img>.
   ============================================================ */

/* wtopienie nieba — gradient w kolorze tła strony na górze kadru.
   Białoszare niebo przechodzi w kremowe tło i przestaje być płaską plamą. */
.ov-sky::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--c-bg) 0%,rgba(251,249,245,.55) 22%,transparent 46%);
}

/* poświata od dołu — pod tekst kładziony na zdjęciu.
   Nigdy jednolite przyciemnienie całości: to zabija jasność strony. */
.ov-scrim::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(24,28,25,.72) 0%,rgba(24,28,25,.35) 32%,rgba(24,28,25,0) 62%);
}

/* ramka wewnętrzna — biała linia 1 px, 8 px od krawędzi */
.ov-inset::after{
  content:"";position:absolute;inset:8px;pointer-events:none;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

/* delikatna winieta — wyrównuje zdjęcia robione telefonem. Oszczędnie. */
.ov-vignette::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 70px 12px rgba(31,36,33,.2);
}

/* etykieta narożna — „Nowość", „Sezonowe", „Hit" */
.ov-corner .ov-corner__tag{
  position:absolute;left:0;top:18px;z-index:3;
  background:var(--c-green-dk);color:#fff;
  font:600 11px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;
  padding:8px 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}

/* ============================================================
   HERO NA PEŁNĄ SZEROKOŚĆ OKNA — tylko strona główna

   Powyższe ograniczenie do 1040 px wynikało z rozdzielczości zdjęcia:
   „domki-wieczor" ma 1024 px i szerzej robiło się miękkie. Ten wariant
   używa assets/img/01-restauracja/hero (2400×1800), więc przy panelu
   zajmującym 40% okna kadr ma ok. 1150 px na ekranie 1920 px — zapas
   2400/1150 ≈ 2,1× wystarcza także na ekranach o podwójnej gęstości.

   Pas nie ma ramki, zaokrągleń ani cienia: krawędź karty na styku
   z krawędzią okna wygląda jak niedokończone tło, a nie jak kadr.
   ============================================================ */
.hero-band{padding-block:0}
.hero--pelny{
  max-width:none;margin-inline:0;
  border:0;border-radius:0;box-shadow:none;
}
.hero--pelny .hero__media{min-height:320px}
/* Niebo na zdjęciu wejścia jest prześwietlone i zajmuje górną ćwiartkę kadru.
   Przy 62% zamiast środka kadr siada na budynku i szyldzie. */
.hero--pelny .hero__media img{object-position:center 62%}
@media(min-width:820px){
  .hero--pelny{grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr)}
  .hero--pelny .hero__media{min-height:clamp(420px,54vh,620px)}
}
/* treść panelu trzyma szerokość czytelnego akapitu, choć sam panel rośnie
   razem z oknem — bez tego na 1920 px wiersz robi się nienaturalnie długi */
.hero--pelny .hero__panel-tresc{width:100%;max-width:30rem;margin-inline:auto}

/* ============================================================
   RZĄD C1 — zdjęcie + tekst, naprzemiennie lewo/prawo

   Wzorzec „C1 · Przesunięta ramka" z kompozycje-jackowo.html. Zdjęcie
   dostaje .frame (ramka przesunięta o 22 px), tekst stoi obok, nie pod.
   ============================================================ */
.split{
  display:grid;gap:var(--sp-6);align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:820px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-7)}
  /* odwrócenie rzędu — zdjęcie ląduje po prawej, tekst po lewej */
  .split--odwrotnie .split__media{order:2}
}
.split + .split{margin-top:var(--sp-8)}
@media(min-width:820px){.split + .split{margin-top:var(--sp-9)}}
.split__tresc > :last-child{margin-bottom:0}
.split__tresc .btn{margin-top:var(--sp-2)}
/* zdjęcie w rzędzie C1 nie ma stałych proporcji — wchodzi w swoich własnych,
   dzięki czemu kadr pionowy i poziomy wyglądają tak samo dobrze */
.split__media .frame img{height:auto}

/* ============================================================
   RAMKA C1 — przesunięta ramka pod zdjęciem (kuter, wędzenie, olejarnia)
   ============================================================ */
.frame{position:relative}
.frame img{
  width:100%;border-radius:var(--r-md);box-shadow:var(--sh-2);
  position:relative;z-index:1;display:block;
}
.frame .ph{border-radius:var(--r-md);position:relative;z-index:1;border-bottom:0}
.frame::before{
  content:"";position:absolute;inset:22px -22px -22px 22px;
  border:1px solid var(--c-brown-lt);border-radius:var(--r-md);z-index:0;
}
/* Na wąskim ekranie ramka nie wystaje w prawo — przy 360 px jej 14 px
   nadmiaru wypychało stronę o 1 px poza ekran. Przesunięcie w dół zostaje,
   efekt "przesuniętej ramki" jest nadal czytelny. */
@media(max-width:600px){.frame::before{inset:12px 0 -12px 12px}}

/* Podpis pod zdjęciem w .frame (01.09.2026, uwaga klienta: „żeby się
   nie zlewała z paskiem”). Ozdobna ramka biegnie 22 px poniżej zdjęcia,
   a podpis nie miał żadnych odstępów — lądował dokładnie na tej linii.
   Odstęp większy niż przesunięcie ramki, wcięcie równe przesunięciu,
   żeby tekst i ramka zaczynały się w jednej pionowej linii. */
.frame > figcaption{
  position:relative;z-index:1;
  margin-top:40px;padding-left:22px;
  font-size:var(--fs-sm);color:var(--c-text-2);
}
@media(max-width:600px){
  .frame > figcaption{margin-top:28px;padding-left:12px}
}

/* ============================================================
   SIATKA ZDJĘĆ — wariant D2

   Cztery kadry w rzędzie, wyrównane do kwadratu. Używana na pięciu
   podstronach (restauracja, osada, muzeum, sklepy, produkt), dlatego
   siedzi w sections.css, a nie w pliku jednej podstrony.
   ============================================================ */
.plates{
  display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:var(--plates-max);margin-inline:auto;
}
@media(min-width:768px){.plates{grid-template-columns:repeat(var(--cols-plate),minmax(0,1fr))}}
.plate{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);overflow:hidden;
}
/* 4:3 zamiast kwadratu — zdjęcia w zbiorze są 4:3 albo 3:4, więc kwadrat
   obcinał je najmocniej ze wszystkich formatów. */
.plate__media{aspect-ratio:var(--ar-plate);overflow:hidden;background:var(--c-bg-sand)}
.plate__media img{
  width:100%;height:100%;object-fit:cover;
  /* 58% zamiast środka: na zdjęciach wnętrz ciekawa treść (stoły, lada,
     eksponaty) jest poniżej połowy kadru, a nad nią jest sufit. */
  object-position:center 58%;
}
.plate figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--c-text-2)}


/* ============================================================
   PASEK FAKTÓW — konkretne liczby zamiast ogólników
   ============================================================ */
.fakty{
  list-style:none;margin:0 auto;padding:0;max-width:960px;
  display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,minmax(0,1fr));
  text-align:center;
}
@media(min-width:820px){.fakty{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fakty li{display:flex;flex-direction:column;gap:2px}
.fakty strong{
  font-family:var(--f-head);font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  font-weight:600;color:var(--c-green-dk);line-height:1.1;
}
.fakty span{font-size:var(--fs-sm);color:var(--c-text-2)}

/* ============================================================
   BENTO PIĘCIU DZIAŁALNOŚCI — dwa duże kafle i trzy mniejsze

   Równe kafle w rzędzie po trzy wyglądały jak lista, a nie jak strona
   firmy z pięcioma biznesami. Bento nadaje hierarchię: restauracja i Osada
   dostają dwa razy więcej miejsca, bo to one prowadzą ruch.
   ============================================================ */
.bento{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Przy dwóch kolumnach piąty kafel zostawałby sam w ostatnim rzędzie.
   Rozciągamy go na całą szerokość — rząd jest domknięty, a kafel dostaje
   szerszy kadr zamiast pustego miejsca obok. */
@media(min-width:640px) and (max-width:999px){
  .bento--piec .bento__kafel:nth-child(5){grid-column:span 2}
}
/* Cztery działalności w układzie 4+2 / 2+4 — asymetryczny, ale domknięty:
   każdy rząd wypełnia całą szerokość, a wielkość kafla nadaje hierarchię.
   Restauracja i Muzeum dostają szerokie kadry, Osada i Sklep Rybny wąskie. */
@media(min-width:1000px){
  .bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bento__kafel{grid-column:span 3}
  .bento__kafel:nth-child(1),
  .bento__kafel:nth-child(4){grid-column:span 4}
  .bento__kafel:nth-child(2),
  .bento__kafel:nth-child(3){grid-column:span 2}

  /* szeroki kadr dla szerokiego kafla, wyższy dla wąskiego.
     3/2 zamiast 16/9: klient zgłosił, że zdjęcia za mało rzucają się w oczy.
     Przy kaflu ~770 px daje to 513 px kadru zamiast 433 px. Do 4/3 nie idziemy,
     bo 578 px wypełniłoby cały ekran laptopa jednym kaflem i rozpadłaby się
     kompozycja rzędu — a to ona niesie hierarchię pięciu działalności. */
  .bento__kafel:nth-child(1) .bento__media,
  .bento__kafel:nth-child(4) .bento__media{aspect-ratio:3/2}
  .bento__kafel:nth-child(2) .bento__media,
  .bento__kafel:nth-child(3) .bento__media{aspect-ratio:4/3}
}

/* PIĘĆ KAFLI — układ 4+2 / 2+2+2.
   Bazowa siatka jest zestrojona pod cztery kafle (4+2 / 2+4) i pod sześć
   (4+2 / 2+4 / 3+3). Piąty kafel zostawiłby w niej sierotę w ostatnim
   rzędzie, więc dostaje własny wariant. Reguły bazowej nie ruszamy —
   korzystają z niej muzeum (sześć kafli) i Osada (cztery). */
@media(min-width:1000px){
  .bento--piec .bento__kafel:nth-child(1){grid-column:span 4}
  .bento--piec .bento__kafel:nth-child(2),
  .bento--piec .bento__kafel:nth-child(3),
  .bento--piec .bento__kafel:nth-child(4),
  .bento--piec .bento__kafel:nth-child(5){grid-column:span 2}
  .bento--piec .bento__kafel:nth-child(1) .bento__media{aspect-ratio:3/2}
  .bento--piec .bento__kafel:nth-child(2) .bento__media,
  .bento--piec .bento__kafel:nth-child(3) .bento__media,
  .bento--piec .bento__kafel:nth-child(4) .bento__media,
  .bento--piec .bento__kafel:nth-child(5) .bento__media{aspect-ratio:4/3}
}

.bento__kafel{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--c-border);background:var(--c-surface);
  display:flex;flex-direction:column;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.bento__kafel:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}

.bento__media{overflow:hidden;aspect-ratio:var(--ar-bento);background:var(--c-bg-sand)}
.bento__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
  transition:transform .55s var(--ease);
}
.bento__kafel:hover .bento__media img{transform:scale(1.05)}

.bento__tresc{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);flex:1}
.bento__tresc h3{margin:0}
.bento__tresc p{font-size:var(--fs-sm);color:var(--c-text-2);margin:0;flex:1}
.bento__tresc .btn{align-self:flex-start;margin-top:var(--sp-2)}

@media(prefers-reduced-motion:reduce){
  .bento__kafel:hover{transform:none}
  .bento__kafel:hover .bento__media img{transform:none}
}

/* lista pozycji karty dań użyta jako zajawka na stronie głównej */
.dish-lista{max-width:760px;margin-inline:auto}

/* ============================================================
   CIEMNY PAS NA PEŁNĄ SZEROKOŚĆ — .section--noc

   Po uwadze klienta o restauracjastarydom.pl. Pomiar tamtej strony:
   pasy skaczą kontrastem średnio 8,57 (max 17,71), u nas było 1,12 —
   czyli granice sekcji były praktycznie niewidoczne i strona czytała
   się jak jedna płachta. Ciemny pas przywraca rytm.

   DZIAŁA PRZEZ PRZEMAPOWANIE TOKENÓW, nie przez łatanie komponentów.
   Sekcja podmienia u siebie --c-text, --c-text-2 i --c-border, więc
   każdy komponent zbudowany na tokenach dostosowuje się sam.

   CZEGO NIE WOLNO TU RUSZAĆ: --c-green. Ten token jest tłem przycisku
   .btn--primary, na którym stoi biały napis. Rozjaśnienie go zamieniłoby
   przycisk w jasną zieleń z białym tekstem — nieczytelną. Zieleń jako
   KOLOR TEKSTU podmieniamy punktowo, niżej.
   ============================================================ */
.section--noc{
  background:var(--c-noc);
  color:var(--c-noc-tx);
  --c-text:var(--c-noc-tx);
  --c-text-2:var(--c-noc-tx-2);
  --c-text-3:var(--c-noc-tx-2);
  --c-border:var(--c-noc-linia);
  --c-border-sand:var(--c-noc-linia);
}
.section--noc h2,.section--noc h3,.section--noc h4{color:var(--c-noc-tx)}
.section--noc .muted,.section--noc .lead,.section--noc .intro{color:var(--c-noc-tx-2)}

/* Zieleń i ciemny brąz jako tekst nikną na tym tle — bursztyn nie.
   Ten sam wybór co w wystawie bursztynowej na muzeum.html. */
.section--noc .eyebrow,
.section--noc .eyebrow--green,
.section--noc .dish__price{color:var(--c-amber)}
.section--noc .section__head.is-visible h2::after{background:var(--c-amber)}

/* JASNE WYSPY NA CIEMNYM PASIE
   Karty i cokoły mają własne jasne tło. Tekst w środku musi wrócić do
   ciemnego — inaczej dziedziczy jasny kolor pasa i znika na białym.
   To najczęstszy błąd przy ciemnych sekcjach, więc reguła stoi tuż obok. */
/* .beer-card CELOWO POZA TA LISTA — karty piw maja tlo przezroczyste
   (sprawdzone pomiarem: rgba(0,0,0,0)), wiec stoja wprost na ciemnym pasie
   i maja uzywac jego jasnego tekstu. Wpisanie ich tutaj dawalo ciemny tekst
   na ciemnym tle, kontrast 1,17. Do tej listy trafiaja WYLACZNIE elementy,
   ktore naprawde maja wlasne jasne tlo. */
.section--noc .beer-stage,
.section--noc .card,
.section--noc .plate,
.section--noc .info{
  --c-text:#1F2421;
  --c-text-2:#5A615B;
  --c-text-3:#7C837C;
  --c-border:#E3DCCE;
  color:var(--c-text);
}
.section--noc .beer-stage h3,
.section--noc .card h3,
.section--noc .plate figcaption{color:var(--c-text)}

/* Plakietka ma WŁASNE jasne tło (--c-amber-bg), więc jej tekst musi zostać
   ciemny. Wymaga specyficzności (0,3,0), bo .beer-card span z restauracja.css
   ma (0,3,0)... a dokładniej (0,2,0) — i wygrywało z samym .badge (0,1,0),
   podmieniając kolor na jasny z przemapowanych tokenów. Efekt: jasny tekst
   na jasnej plakietce, kontrast 1,68. Ta reguła to cofa. */
.section--noc .beer-card .badge,
.section--noc .badge{color:var(--c-amber-tx)}

/* ============================================================
   PRZEKŁADKA — dwa zdjęcia zachodzące na siebie

   Wzór wskazany przez klienta: odbitki rzucone jedna na drugą,
   biały margines dookoła, lekki obrót, miękki cień.

   Komponent jest OGÓLNY, nie muzealny — klient dosyła kolejne
   foldery, więc ma się wpinać wszędzie jedną klasą.

   Obrót jest statyczny, nie animowany: to układ, nie ruch.
   Dlatego prefers-reduced-motion go NIE wyłącza — nic się nie porusza.
   ============================================================ */
.przekladka{
  position:relative;
  aspect-ratio:4/3;
  /* width:100% JEST KONIECZNE. Bez niego, w komorce siatki, samo
     margin-inline:auto zamienia element z rozciaganego na dopasowany
     do tresci — a cala tresc jest pozycjonowana absolutnie, wiec
     szerokosc wychodzi 0 i odbitki zapadaja sie do 21 px. */
  width:100%;
  max-width:640px;
  justify-self:center;
  margin-inline:auto;
}
.przekladka__foto{
  position:absolute; margin:0;
  padding:10px;                       /* biały margines odbitki */
  background:var(--c-surface);
  border-radius:2px;
  box-shadow:var(--sh-3);
  overflow:hidden;
}
.przekladka__foto picture{display:block;width:100%;height:100%}
.przekladka__foto img{
  display:block; width:100%; height:100%;
  object-fit:cover; border-radius:1px;
}

/* Pierwsza odbitka: wyżej i w lewo. Druga: niżej i w prawo, nachodzi. */
/* Szerokosci dobrane tak, zeby zakrycie bylo kilkuprocentowe i tylko
   na rogu. 58% + 54% = 112% szerokosci, wiec poziomo zachodza na 12%,
   a pionowo na 9% — w polu daje to okolo 5%. Wczesniej bylo 74% + 64%
   i zdjecia zakrywaly sie w 27%. */
.przekladka__foto:nth-child(1){
  width:60%; aspect-ratio:4/3;
  top:0; left:0;
  transform:rotate(-2deg);
  z-index:1;
}
.przekladka__foto:nth-child(2){
  width:56%; aspect-ratio:4/3;
  bottom:0; right:0;
  transform:rotate(1.6deg);
  z-index:2;
}

/* Na wąskim ekranie zmniejszamy zachodzenie i obrót — przy 390 px
   mocny obrót zjada szerokość i odbitki wychodzą poza kolumnę. */
@media(max-width:600px){
  /* Kontener wezszy niz kolumna. Obrocona odbitka wystaje poza swoje
     pudelko o kilkanascie pikseli — przy 340 px w kolumnie 350 px
     wychodzila poza ekran i strona przewijala sie w bok. */
  .przekladka{aspect-ratio:3/4; max-width:296px}
  .przekladka__foto:nth-child(1){width:80%; transform:rotate(-1.2deg)}
  .przekladka__foto:nth-child(2){width:76%; transform:rotate(1deg)}
}

/* W muzeum odbitka dostaje pergaminowy margines zamiast białego —
   spójnie z ramami passe-partout na tej podstronie. */
body.p-muzeum .przekladka__foto{
  background:var(--c-bg-sand) url("../img/brand/pergamin.jpg") center/cover;
}

/* ============================================================
   PRZEKŁADKA POTRÓJNA — .przekladka--trzy

   Trzy odbitki zamiast dwóch. Trzecia wchodzi od dołu z lewej
   i podbija kompozycję o kolejny plan.
   ============================================================ */
/* 4/3 zamiast 5/4 — nizszy kontener zaciska trojkat ze zdjec.
   Przy 5/4 srodek zostawal pusty i uklad wygladal na rozsypany. */
.przekladka--trzy{aspect-ratio:4/3; max-width:760px}
/* KAZDA odbitka musi miec aspect-ratio. Trzecia go nie miala i brala
   naturalne proporcje zdjecia — przy kadrze pionowym wchodzila na oba
   pozostale, zakrywajac 45% pierwszego. */
.przekladka--trzy .przekladka__foto{aspect-ratio:4/3}
/* Trzy rogi: lewy gorny, prawy gorny, dol. Kazda odbitka dotyka
   krawedzi kontenera — stad brak pustych naroznikow. */
.przekladka--trzy .przekladka__foto:nth-child(1){
  width:54%; top:0; left:0; right:auto; bottom:auto;
  transform:rotate(-2.4deg); z-index:1;
}
.przekladka--trzy .przekladka__foto:nth-child(2){
  width:50%; top:0; right:0; bottom:auto; left:auto;
  transform:rotate(2deg); z-index:3;
}
.przekladka--trzy .przekladka__foto:nth-child(3){
  width:52%; bottom:0; left:24%; right:auto; top:auto;
  transform:rotate(-1.4deg); z-index:2;
}
@media(max-width:600px){
  /* Trzy odbitki w waskiej kolumnie potrzebuja WYZSZEGO kontenera.
     Przy 3/4 i szerokosciach 78/74/76% zakrywaly sie w 20%. */
  .przekladka--trzy{aspect-ratio:2/3; max-width:292px}
  .przekladka--trzy .przekladka__foto:nth-child(1){width:68%; top:0; left:0; right:auto; transform:rotate(-1.4deg)}
  .przekladka--trzy .przekladka__foto:nth-child(2){width:65%; top:33%; right:0; left:auto; transform:rotate(1.3deg)}
  .przekladka--trzy .przekladka__foto:nth-child(3){width:63%; bottom:0; left:0; right:auto; transform:rotate(-1deg)}
}

/* ============================================================
   WEJŚCIE PRZEKŁADKI — odbitki zjeżdżają się na miejsce

   Kontener nosi klasę .reveal, żeby skorzystać z istniejącego
   IntersectionObservera w main.js. Sam kontener NIE animuje się
   jednak jak zwykły .reveal — gdyby to robił, mielibyśmy podwójne
   zanikanie: raz cała grupa, raz każda odbitka. Dlatego go zerujemy
   i cały ruch przenosimy na dzieci.
   ============================================================ */
.przekladka.reveal{opacity:1; transform:none}

.przekladka.reveal .przekladka__foto{
  opacity:0;
  transition:opacity .6s var(--ease), transform .7s var(--ease);
}
.przekladka.reveal .przekladka__foto:nth-child(1){
  transform:rotate(-2.4deg) translate(-20px, 14px) scale(.97);
}
.przekladka.reveal .przekladka__foto:nth-child(2){
  transform:rotate(2deg) translate(20px, 16px) scale(.97);
  transition-delay:.09s;
}
.przekladka.reveal .przekladka__foto:nth-child(3){
  transform:rotate(-1.4deg) translate(-12px, 20px) scale(.97);
  transition-delay:.18s;
}
/* stan docelowy — te same obroty co w układzie, bez przesunięcia */
.przekladka.reveal.is-visible .przekladka__foto{opacity:1}
.przekladka.reveal.is-visible .przekladka__foto:nth-child(1){transform:rotate(-2deg)}
.przekladka.reveal.is-visible .przekladka__foto:nth-child(2){transform:rotate(1.6deg)}
.przekladka--trzy.reveal.is-visible .przekladka__foto:nth-child(1){transform:rotate(-2.4deg)}
.przekladka--trzy.reveal.is-visible .przekladka__foto:nth-child(2){transform:rotate(2deg)}
.przekladka--trzy.reveal.is-visible .przekladka__foto:nth-child(3){transform:rotate(-1.4deg)}

/* Ruch jest ozdobą. Kto go wyłączył, dostaje gotowy układ od razu. */
@media(prefers-reduced-motion:reduce){
  .przekladka.reveal .przekladka__foto{
    opacity:1; transition:none; transition-delay:0s;
  }
  .przekladka.reveal .przekladka__foto:nth-child(1){transform:rotate(-2deg)}
  .przekladka.reveal .przekladka__foto:nth-child(2){transform:rotate(1.6deg)}
  .przekladka--trzy.reveal .przekladka__foto:nth-child(1){transform:rotate(-2.4deg)}
  .przekladka--trzy.reveal .przekladka__foto:nth-child(2){transform:rotate(2deg)}
  .przekladka--trzy.reveal .przekladka__foto:nth-child(3){transform:rotate(-1.4deg)}
}


/* ============================================================
   ZDJĘCIE W TLE SEKCJI — na całą szerokość, pod przesłoną

   CZYTELNOŚĆ POLICZONA, NIE ZGADNIĘTA. Dla każdego kadru wzięliśmy
   jego najciemniejszy fragment (średnia z bloku 32×32, żeby pojedynczy
   piksel nie zafałszował wyniku) i policzyliśmy kontrast tekstu po
   złożeniu z przesłoną:

     tekst treści (#1F2421)      przy .80  →  9,2   próg 4,5
     tekst przygaszony (#5A605C) przy .80  →  3,2   ZA MAŁO

   Przygaszony był wąskim gardłem. Zamiast dusić zdjęcie mocniejszą
   przesłoną — przy .90 widać je już tylko w 10% — przyciemniamy TEN
   JEDEN kolor. Wtedy .80 daje 5,1: dwa razy więcej widać zdjęcia
   i jednocześnie większy zapas czytelności.
   ============================================================ */
.section--foto{
  position:relative;
  isolation:isolate;      /* własny kontekst warstw, żeby z-index:-1
                             nie uciekł pod tło całej strony */
  overflow:hidden;
  --c-text-2:var(--c-szarozielen);
  --c-text-3:var(--c-szarozielen);
}

/* zdjęcie */
.section--foto::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--foto);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* przesłona — słabsza w środku pasma, mocniejsza przy krawędziach.
   Zdjęcie jest najlepiej widoczne tam, gdzie zwykle nie ma liter,
   a przy górze i dole wtapia się w sąsiednie sekcje. Najsłabszy
   punkt to .80, czyli ten policzony wyżej. */
.section--foto::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(247,244,238,.90) 0%,
    rgba(247,244,238,.80) 34%,
    rgba(247,244,238,.80) 66%,
    rgba(247,244,238,.90) 100%);
}

/* Paralaksa: zdjęcie przypięte do okna, więc sekcja przejeżdża po nim,
   a ono stoi. Efekt tylko na większych ekranach — iOS renderuje
   background-attachment:fixed szarpiąc albo wcale, a telefon i tak
   pokazuje pasmo na tyle wysoko, że ruchu by nie było widać. */
@media(min-width:768px){
  .section--foto::before{background-attachment:fixed}
}

/* Zasada fail-safe: kto prosi o brak ruchu, dostaje zwykłe tło. */
@media(prefers-reduced-motion:reduce){
  .section--foto::before{background-attachment:scroll}
}

/* Wybrane kadry. Ścieżki są względem tego pliku, czyli assets/css/. */
/* --- czytelnosc na pasmie ze zdjeciem, dwie poprawki z pomiaru ---

   Przycisk drugorzedny jest przezroczysty, wiec zdjecie przebijalo pod
   zielonym napisem: 4,06 przy progu 4,5. Kryjace tlo zalatwia sprawe
   i przy okazji sprawia, ze przycisk na zdjeciu wyglada jak przycisk. */
.section--foto .btn--secondary{
  background:var(--c-surface);
  border-color:var(--c-green);
}
.section--foto .btn--secondary:hover{background:var(--c-green-lt)}

/* Brazowy nadtytul mial 3,41. Ten sam braz co naglowki rozdzialow
   muzeum daje 5,16. */
.section--foto{--c-eyebrow:var(--c-braz-gleboki)}

/* Zwykły link tekstowy na paśmie ze zdjęciem. Podstawowa zieleń #2C6343
   daje tam 4,05 przy progu 4,5 – zmierzone na najciemniejszych fragmentach
   wszystkich siedmiu kadrów. Ciemniejszy wariant, który serwis już ma
   w palecie, daje 5,95. Nie wymyślamy nowego koloru.
   Przycisków to nie dotyczy: --primary ma własne kryjące tło,
   a --secondary dostaje je wyżej. */
.section--foto a:not(.btn){color:var(--c-green-dk)}
.section--foto .eyebrow{color:var(--c-eyebrow)}

.foto--domki{--foto:url("../img/02-osada/domki-01-1800.webp")}
.foto--basen{--foto:url("../img/02-osada/basen-01-1800.webp")}
.foto--muzeum{--foto:url("../img/04-muzeum/budynek-01-1800.webp")}
.foto--ogrodek{--foto:url("../img/01-restauracja/ogrodek-01-1800.webp")}
.foto--budynek{--foto:url("../img/01-restauracja/budynek-bok-1800.webp")}
.foto--kuter{--foto:url("../img/03-sklep-rybny/kuter-dar-348-1527.webp")}
.foto--restauracja{--foto:url("../img/01-restauracja/hero-1600.webp")}
.foto--osada{--foto:url("../img/02-osada/domki-lato-03-1600.webp")}
.foto--ogrodek2{--foto:url("../img/01-restauracja/ogrodek-02-1800.webp")}


/* ============================================================
   RYTM W SIATCE ZDJĘĆ

   Sekcje, które są samą galerią, miały cztery kafle w idealnie równym
   rzędzie, zawsze tak samo, na pięciu podstronach. Przesunięcie co
   drugiego kafla w dół łamie tę linijkę i czyta się jak rozłożone
   odbitki, a nie jak tabela.

   Przesuwamy MARGINESEM, nie transformacją. Kafel ma już przy najechaniu
   transform:translateY(-3px) z interakcje.css; gdyby rytm też siedział
   w transformacji, jedno nadpisałoby drugie i kafel skakałby przy
   najechaniu o całe przesunięcie zamiast o trzy piksele.
   ============================================================ */
.plates--rytm > :nth-child(even){margin-top:clamp(14px, 2.2vw, 30px)}

/* Zabezpieczenia na jedną kolumnę nie ma: .plates ma w podstawie
   repeat(2, ...) i nigdy nie schodzi do jednej kolumny, więc rytm działa
   także na telefonie. Wcześniejszy warunek max-width:479px tylko zabierał
   efekt tam, gdzie był poprawny. Przesunięcie skaluje się samo:
   clamp daje 14 px na wąskim ekranie i 30 px na szerokim. */


/* ============================================================
   GRANICA MIĘDZY SEKCJAMI O TYM SAMYM TLE

   Dziewięć miejsc w serwisie, gdzie dwie sąsiadujące sekcje mają
   identyczny kolor tła i zlewają się w jedno długie pasmo. Zamiast
   przemalowywać którąś z nich (kolory są dobrane pod treść: błękit
   przy wodzie, zieleń przy wezwaniu do działania), druga z pary
   dostaje włoskową kreskę.

   Kreska gaśnie przy krawędziach, żeby nie ciąć ekranu na pół.
   Robi to border-image, więc nie potrzeba pseudo-elementu, który
   kolidowałby z ::before pasma ze zdjęciem.
   ============================================================ */
.section--kreska{
  border-top:1px solid var(--c-border-sand);
  border-image:linear-gradient(90deg,
    transparent 0%,
    var(--c-border-sand) 16%,
    var(--c-border-sand) 84%,
    transparent 100%) 1;
}


/* ============================================================
   FORMULARZ NA PAŚMIE ZE ZDJĘCIEM

   Formularz stoi na kryjącej karcie, nie wprost na zdjęciu. Powód jest
   zmierzony: przy formularzu na gołym paśmie gwiazdka pola wymaganego
   dawała 3,41, a link do polityki prywatności 4,05, przy progu 4,5.
   Przyciemnienie tych dwóch kolorów leczyłoby objaw. Formularz jest
   gęsty od drobiazgów: etykiety, gwiazdki, podpowiedzi pod polami,
   komunikaty błędów, linki prawne. Karta daje im wszystkim pewne tło
   raz na zawsze, także tym, które dojdą później.

   Zdjęcie widać dookoła karty, a nagłówek sekcji zostaje na nim,
   bo to trzy kolory, które są już zmierzone.
   ============================================================ */
.form--karta{
  margin-inline:auto;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  padding:clamp(20px, 3.4vw, 40px);
}

/* Siatka dwóch kolumn liczy się od szerokości POJEMNIKA, a karta zabiera
   z niej po kilkadziesiąt pikseli na wyściółkę z każdej strony. Przy
   640 px dwie kolumny robiły się za ciasne dla etykiet pisanych
   wersalikami, więc próg przesuwamy o tyle, ile zabiera wyściółka. */
@media(max-width:719px){
  .form--karta.form--2{grid-template-columns:minmax(0,1fr)}
}

/* Braz na paśmie ze zdjęciem: gwiazdka pola wymaganego i wszystko inne,
   co bierze kolor z --c-brown. Zabezpieczenie na wypadek, gdyby taki
   element trafił kiedyś poza kartę. Zmierzone: #7A5F3E daje 3,45,
   #5C4526 daje 5,22. */
.section--foto{--c-brown:var(--c-braz-gleboki)}

/* ============================================================
   HERO STRONY GŁÓWNEJ — karuzela w tle, napis wprost na zdjęciu

   Ten sam język co hero muzeum: bez pudełka pod tekstem, napis leży
   na przyciemnionym zdjęciu. Różnica jest jedna: tutaj zdjęcie jest
   ROZMYTE, bo klatki są cztery i mają bardzo różną jasność.

   ILE ROZMYCIA — policzone. Najjaśniejszy punkt pod treścią:

     klatka              bez   10px  18px  26px
     front restauracji   249   233   211   200
     domki latem         236   228   222   215
     wiatrak             223   183   168   153
     kuter               253   246   223   201
     NAJGORSZY           253   246   223   215

   Rozmycie pomaga mniej, niż mogłoby się wydawać: niebo na zdjęciu kutra
   to duża jednolita plama, a nie mała iskra, więc uśrednianie prawie jej
   nie rusza. Dopiero od 18 px robi się różnica.

   Kontrast akapitu na najgorszej klatce: 18 px z przesłoną 0,52 daje 4,15
   i to za mało, a z przesłoną 0,58 daje 5,00. Stąd te dwie liczby.
   ============================================================ */
.hero-tlo{
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:center;
  min-height:clamp(460px, 70vh, 700px);
  padding-block:var(--sp-9);
  overflow:hidden;
  background:var(--c-czern-scrim);      /* podkład na czas wczytywania pierwszej klatki */
}

.hero-tlo__foto{
  position:absolute;
  inset:0;
  z-index:-2;
  overflow:hidden;
}
/* WSZYSTKIE klatki absolutnie, także pierwsza: w wariancie kaflowym
   pierwsza zostaje w przepływie i to ona nadaje wysokość, a tutaj
   wysokość daje samo pasmo. */
.hero-tlo__foto .karuzela__klatka{
  position:absolute;
  inset:0;
  display:block;
}
.hero-tlo__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  display:block;
  filter:blur(20px);
  /* Rozmycie zjada brzegi i zostawia przezroczystą obwódkę. Powiększenie
     o 8% wypycha ją poza kadr, a overflow:hidden wyżej ją obcina. */
  transform:scale(1.08);
}

.hero-tlo::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,
    rgba(16,12,8,.46) 0%,
    rgba(16,12,8,.58) 24%,
    rgba(16,12,8,.58) 76%,
    rgba(16,12,8,.50) 100%);
}

.hero-tlo__tresc{
  max-width:44ch;
  margin-inline:auto;
  text-align:center;
  color:var(--c-pergamin);
}
.hero-tlo__tresc .eyebrow{
  color:var(--c-pergamin-2);
  font-size:.875rem;
  letter-spacing:.2em;
  margin-bottom:var(--sp-3);
}
.hero-tlo__tresc h1{
  font-size:clamp(2.6rem, 1.7rem + 4vw, 5.2rem);
  line-height:1.04;
  margin:0 0 var(--sp-4);
  color:var(--c-pergamin);
  text-shadow:0 2px 20px rgba(10,8,5,.5);
}
.hero-tlo__tresc .lead{
  font-size:clamp(1.0625rem, .98rem + .6vw, 1.4375rem);
  line-height:1.6;
  color:#F2EDE2;
  max-width:44ch;
  margin:0 auto var(--sp-6);
  text-shadow:0 1px 14px rgba(10,8,5,.45);
}
.hero-tlo .btn-row{justify-content:center}

/* Przycisk drugorzędny jest przezroczysty i ma zieleń w literach,
   więc na ciemnym tle znika. Dostaje biel, tak samo jak w muzeum. */
.hero-tlo .btn--secondary{
  color:var(--c-pergamin);
  border-color:rgba(250,247,240,.72);
  background:rgba(250,247,240,.07);
}
.hero-tlo .btn--secondary:hover,
.hero-tlo .btn--secondary:focus-visible{
  background:rgba(250,247,240,.17);
  border-color:var(--c-pergamin);
  color:#FFFFFF;
}

@media(max-width:600px){
  .hero-tlo{min-height:clamp(400px, 62vh, 560px); padding-block:var(--sp-8)}
  /* Na telefonie kadr jest mniejszy, więc ten sam promień rozmycia zjada
     go proporcjonalnie mocniej. Mniejsze rozmycie daje ten sam efekt. */
  .hero-tlo__foto img{filter:blur(14px)}
}


/* Pasmo restauracji na stronie glownej.

   Wszystkie trzy jasne pasma dzialalnosci mialy ten sam bez #E8E1D4, wiec
   restauracja, sklep rybny i sklepy wygladaly identycznie. Restauracja
   bierze teraz swoj wlasny kolor: ten sam rodzaj zieleni, ktory ma jej
   podstrona (--c-tint) i jej przycisk. Kolor przestaje byc ozdoba
   i zaczyna cos znaczyc.

   Kontrast policzony: naglowek 13,17, akapit 5,38, nadtytul 4,97
   przy progach 3,0 i 4,5. */
.section--zielen{background:var(--c-green-md)}

/* ============================================================
   OPINIE NA STRONIE GŁÓWNEJ: PIĘĆ KADRÓW ZAMIAST JEDNEGO

   Wcześniej po prawej stało samo zdjęcie sali, a kolumna kończyła
   się w połowie wysokości czterech cytatów obok. Doszło drugie
   wnętrze i trzy małe odbitki potraw.

   Rząd na dole to SIATKA, nie stos. Odbitki są lekko obrócone, ale
   kwadrat 104 px obrócony o 3 stopnie rośnie o 5,3 px w poziomie,
   czyli 2,7 px na stronę, a odstęp w siatce ma 10 px. Rogi mają
   zapas i żadna odbitka nie wchodzi na sąsiada.
   ============================================================ */
.opinie-foto{display:grid;gap:12px}

.opinie-foto__sala picture{display:block;aspect-ratio:4/3}
.opinie-foto__sala img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--r-md);box-shadow:var(--sh-2);
}

.opinie-foto__rzad{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
  align-items:start;
}

.opinie-foto__sala2{margin:0}
.opinie-foto__sala2 picture{display:block;aspect-ratio:16/10}
.opinie-foto__sala2 img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--r-md);box-shadow:var(--sh-2);
}

/* Potrawy jako kremowe odbitki, żeby odróżniały się od wnętrz. */
.opinie-foto__danie{
  margin:0;background:var(--c-krem-odbitki);padding:5px 5px 7px;border-radius:2px;
  box-shadow:0 1px 3px rgba(58,44,26,.16), 0 8px 18px rgba(58,44,26,.18);
  transform:rotate(var(--kat, 0deg));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.opinie-foto__danie picture{display:block;aspect-ratio:1/1}
.opinie-foto__danie img{width:100%;height:100%;object-fit:cover;display:block}
.opinie-foto__danie:hover{
  transform:rotate(0deg) translateY(-4px);
  box-shadow:0 2px 5px rgba(58,44,26,.20), 0 14px 28px rgba(58,44,26,.26);
}

@media(prefers-reduced-motion:reduce){
  .opinie-foto__danie{transition:none}
  .opinie-foto__danie:hover{transform:rotate(var(--kat, 0deg))}
}

/* Na wąskim ekranie drugie wnętrze bierze całą szerokość, a potrawy
   ustawiają się pod nim w trzech równych kolumnach. Przy 2fr 1fr 1fr 1fr
   kadry potraw schodziły na telefonie poniżej 60 px. */
@media(max-width:520px){
  .opinie-foto__rzad{grid-template-columns:repeat(3, 1fr)}
  .opinie-foto__sala2{grid-column:1 / -1}
  .opinie-foto__danie{transform:rotate(calc(var(--kat, 0deg) * .5))}
}


/* ============================================================
   PAS PERGAMINOWY — zapowiedź muzeum na stronie głównej

   Zapowiedź niesie prawdziwy świat podstrony: tę samą fakturę
   pergaminu, na której stoi całe muzeum.html. Przesłona 0,82
   w odcieniu F4ECD8 — jak pasy sekcji na samej podstronie.
   Gradient w background, nie pseudoelement: zero zabaw z z-index.

   Kontrast policzony z pliku faktury (najciemniejszy piksel pod
   przesłoną): tekst 10,84:1, atrament 6,81:1, brąz etykiet 6,19:1.
   Wartości w skrypcie krok3_zapowiedzi.py.
   ============================================================ */
.section--pergamin{
  background:linear-gradient(rgba(244,236,216,.82), rgba(244,236,216,.82)),
             var(--c-bg-warm) url("../img/brand/pergamin.jpg") center/cover;
  /* zwykly --c-text-2 na najciemniejszym ziarnie faktury ma 4,38:1;
     pas przechodzi na postarzaly atrament, tak jak cale muzeum.css */
  --c-text-2:var(--c-atrament-2);
  --c-text-3:var(--c-atrament-2);
  --c-eyebrow:var(--c-braz-gleboki);
}


/* ============================================================
   MAPA DOJAZDU (29.08.2026)

   Grafika od klienta. Ramka i cień jak przy kaflach, żeby jasne tło
   mapy nie zlewało się z piaskowym tłem sekcji. Kroki obok mapy
   numerowane krążkiem — ten sam język co legenda w grafice.
   ============================================================ */
.dojazd{margin:0}
/* Na telefonie .row--flip nie dziala (jedna kolumna), a w kodzie kroki
   stoja przed mapa. Tu wracamy do naturalnej kolejnosci: najpierw mapa,
   pod nia lista krokow. */
@media(max-width:767px){.dojazd{order:-1}}
.dojazd img{
  width:100%;height:auto;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  background:var(--c-surface);
}
.dojazd__kroki{
  list-style:none;counter-reset:krok;
  margin:var(--sp-4) 0 0;padding:0;
}
.dojazd__kroki li{
  counter-increment:krok;
  position:relative;padding-left:2.25rem;
  margin-bottom:var(--sp-3);
  color:var(--c-text-2);font-size:var(--fs-sm);line-height:1.5;
}
.dojazd__kroki li::before{
  content:counter(krok);
  position:absolute;left:0;top:-.05em;
  width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--c-green);color:#fff;
  font-size:.8125rem;font-weight:700;font-variant-numeric:tabular-nums;
}