/* ════════════════════════════════════════════════════════════
   multiMEDICA — CSS wspólnego chromu (pasek, nagłówek, stopka).
   KOPIA sekcji z src/assets/css/index.css — wycięta bajt w bajt,
   nie przepisana. Używana wyłącznie tam, gdzie nie ma pełnego
   arkusza strony głównej: nagłówek dla WordPressa i podstrony
   o własnym systemie designu (sala-operacyjna).
   Zmieniasz nagłówek? Popraw index.css i przebuduj — build.py
   nie generuje tego pliku automatycznie, patrz README.
   ════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   multiMEDICA — landing
   Kierunek wg makiet właścicielki: krem, mosiądz, ciemna zieleń,
   Cormorant Garamond + Jost, arkady, kratownice z włoskowych linii,
   kontrolki prostokątne.
   Odcienie interaktywne przyciemnione względem makiety, żeby
   przechodziły WCAG AA (biel na złocie 5,0:1, złoto na kremie 4,7:1).
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:#FAF8F3;
  --white:#FFFFFF;
  --soft:#F3F0E8;
  --green:#4E574A;
  --ink:#1F211C;
  --ink-2:#4C4F45;
  --ink-3:#6E7165;
  --line:#E4DECF;
  --line-2:#EFEADD;

  --gold:#8A6A38;        /* elementy klikalne */
  --gold-dark:#6B5029;
  --gold-deco:#A98A57;   /* duża typografia ozdobna */
  --gold-light:#DCC79A;  /* na zieleni */
  --gold-soft:#F4EDDF;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ui:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:22px;
  --s6:30px; --s7:40px; --s8:56px; --s9:76px; --s10:104px;
  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* ── rytm pionowy ─────────────────────────────────────────────
     Jedyne źródło odstępów pionowych między sekcjami i wewnątrz
     nagłówków sekcji. Żadna sekcja nie ma własnej wartości.
     UWAGA: ten blok :root jest ZDUPLIKOWANY w chrome.css i index.css.
     Zmieniasz tu — zmień tam samo, bajt w bajt. Etap 2 refaktoryzacji
     zwinie duplikat do jednego pliku. */
  --sec-y:clamp(48px, 4.2vw, 68px);
  --head-gap:clamp(30px, 2.4vw, 40px);
  --eyebrow-gap:clamp(18px, 1.4vw, 22px);
  --para-gap:0.85em;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-weight:400; font-size:17px; line-height:1.65}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:600; line-height:1.12}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--gold-dark); outline-offset:3px}
.green :focus-visible,.promo :focus-visible{outline-color:var(--gold-light)}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s5)}
@media(min-width:768px){ .wrap{padding:0 var(--s7)} }
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s5); top:var(--s3); z-index:200; background:var(--white);
  padding:10px 18px; border:1px solid var(--gold)}

/* ── typografia ─────────────────────────────────────────── */
.eyebrow{font-family:var(--ui); font-size:.76rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.17em; color:var(--gold-dark);
  display:flex; align-items:center; gap:16px; line-height:1.5}
.eyebrow::before{content:""; width:32px; height:1px; background:var(--gold-deco); flex:none}
.eyebrow--center{justify-content:center; text-align:center}
.eyebrow--center::after{content:""; width:32px; height:1px; background:var(--gold-deco); flex:none}
.eyebrow--light{color:var(--gold-light)}
.eyebrow--light::before,.eyebrow--light::after{background:rgba(214,190,140,.6)}
.eyebrow--plain{color:rgba(255,255,255,.78)}
.eyebrow--plain::before,.eyebrow--plain::after{display:none}

h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h1 em{display:block; font-style:italic; font-weight:500; color:var(--gold-deco)}
.h2{font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.14}
.h3{font-size:1.35rem}
.lead{font-size:1.05rem; color:var(--ink-2); line-height:1.75}
.small{font-size:.92rem; color:var(--ink-3)}

/* ── kontrolki ──────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--ui); font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em;
  padding:17px 34px; border:1px solid var(--gold); background:var(--gold);
  color:var(--white); cursor:pointer; border-radius:0;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.btn:hover{background:var(--gold-dark); border-color:var(--gold-dark)}
.btn--outline{background:transparent; color:var(--gold-dark); border-color:var(--gold-deco)}
.btn--outline:hover{background:var(--gold); border-color:var(--gold); color:var(--white)}
.btn--sm{padding:13px 24px; font-size:.72rem}

.tlink{display:inline-flex; align-items:center; gap:14px;
  font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold-dark); padding-bottom:14px; border-bottom:1px solid var(--line)}
.tlink svg{transition:transform .2s var(--ease)}
.tlink:hover{color:var(--gold)} .tlink:hover svg{transform:translateX(4px)}
.tlink--light{color:var(--gold-light); border-color:rgba(214,190,140,.45)}
.tlink--light:hover{color:#EBD9B4}

/* ── pasek promocyjny ───────────────────────────────────── */
.promo{background:var(--gold-soft); border-bottom:1px solid var(--line)}
.promo__in{position:relative; display:flex; align-items:center; justify-content:center;
  gap:var(--s5); flex-wrap:wrap; min-height:46px; padding:10px 44px}
.promo p{font-size:.88rem; color:var(--ink-2)}
.promo a{font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color:var(--gold-dark); border-bottom:1px solid var(--gold-deco); padding-bottom:3px}
.promo__x{position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center; background:none;
  border:0; cursor:pointer; color:var(--ink-3)}
.promo__x:hover{color:var(--ink)}
.promo[hidden]{display:none}
/* < 768 px: krótki wariant tekstu i etykiety, tekst + link + ✕ w jednym wierszu
   (dawniej trzy: tekst w dwóch wierszach i link pod spodem). Od 768 px bez zmian.
   Wariant ukryty ma display:none — znika też z drzewa dostępności. */
.promo__short{display:none}
@media(max-width:767.98px){
  /* tekst, link i ✕ mają tę samą wysokość 28 px (link: 24 px + padding 3 + kreska 1),
     więc wyrównane do środka zaczynają się też na tej samej wysokości */
  .promo__in{flex-wrap:nowrap; justify-content:flex-start; gap:var(--s3);
    min-height:0; padding:7px 0 7px var(--s5)}
  .promo p{font-size:.8rem; line-height:28px; white-space:nowrap}
  .promo a{line-height:24px; white-space:nowrap}
  .promo__x{position:static; transform:none; flex:none; margin-left:auto; width:28px; height:28px}
  .promo__long{display:none}
  .promo__short{display:inline}
}

/* ── nagłówek ───────────────────────────────────────────── */
.hdr{position:sticky; top:0; z-index:60; background:rgba(250,248,243,.94);
  backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:var(--s7); min-height:84px}
.logo{display:block; flex:none; line-height:0}
.logo img{height:52px; width:auto}
.ftr .logo img{height:60px}
.nav{display:flex; align-items:center; gap:var(--s6); margin-left:auto}
.nav a{font-size:.95rem; font-weight:400; color:var(--ink-2); padding:6px 0;
  border-bottom:1px solid transparent; transition:color .18s, border-color .18s}
.nav a:hover{color:var(--ink); border-color:var(--gold-deco)}
/* stan aktywny (16.10.2026): bieżąca strona aria-current="page" i bieżąca sekcja
   aria-current="true" (rodzic na podstronie) — wygląd jak hover. W podmenu kreskę
   zeruje .nav .nav__sub a niżej (ta sama specyficzność, później w arkuszu). */
.nav a[aria-current]{color:var(--ink); border-color:var(--gold-deco)}
.hdr .btn{margin-left:var(--s6)}
.burger{display:none; margin-left:auto; width:44px; height:44px; background:none;
  border:1px solid var(--line); cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:1px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0;
  width:18px; height:1px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media(max-width:1040px){
  /* .hdr__in, nie .hdr: menu mobilne (.mnav) też leży w <header class="hdr">,
     a selektor .hdr .btn ukrywał w nim przycisk „Umów wizytę". */
  .nav,.hdr__in .btn{display:none}
  .burger{display:flex}
  .hdr__in{min-height:68px; gap:var(--s5)}
  .logo img{height:40px}
}
.mnav{display:none; border-bottom:1px solid var(--line); background:var(--bg)}
/* Nagłówek jest sticky, więc menu wyższe niż okno (od 5 podpozycji przy 640 px)
   nie dałoby się doprzewijać do końca — panel przewija się sam, w obrębie okna.
   68px = min-height .hdr__in na wąskim ekranie. */
.mnav.open{display:block; max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); overflow-y:auto}
.mnav a{display:block; padding:15px 0; border-bottom:1px solid var(--line-2); font-size:1rem}
.mnav a:last-of-type{border-bottom:0}
/* .mnav a nadpisuje display/padding z .btn — tu wraca wyśrodkowanie i padding przycisku. */
.mnav .btn{width:100%; margin:var(--s5) 0 var(--s6); padding:17px 34px; text-align:center}

/* ── podmenu w nawigacji (desktop) ──────────────────────────
   Rozwijane przyciskiem (.nav__tgl, aria-expanded), nie na :hover —
   na dotyku i klawiaturze hover jest niedostępny. Stan .open dokłada nav.js.
   W menu mobilnym podmenu to zwykłe linki .mnav__sub z wcięciem. */
.nav__item{position:relative; display:flex; align-items:center; gap:2px}
.nav__tgl{width:32px; height:32px; display:grid; place-items:center; padding:0;
  background:none; border:0; cursor:pointer; color:var(--ink-2)}
.nav__tgl:hover{color:var(--ink)}
.nav__tgl svg{transition:transform .2s var(--ease)}
.nav__tgl[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__sub{display:none; position:absolute; top:100%; left:0; margin-top:6px; min-width:240px;
  background:var(--white); border:1px solid var(--line); padding:var(--s3) 0; z-index:70;
  box-shadow:0 18px 40px -22px rgba(31,33,28,.35)}
/* 14 pozycji = 657 px: przy oknie 600–768 px panel wystawał poza dół okna, a sticky
   nagłówek nie pozwalał go doprzewijać — panel przewija się sam (jak .mnav.open).
   120px ≈ pasek promocyjny + nagłówek nad górną krawędzią panelu. */
.nav__sub{max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); overflow-y:auto}
.nav__sub.open{display:block}
.nav .nav__sub a{display:block; padding:10px var(--s5); border-bottom:0; white-space:nowrap}
.nav .nav__sub a:hover{background:var(--gold-soft); color:var(--ink)}
.mnav .mnav__sub{padding:13px 0 13px var(--s6); font-size:.95rem; color:var(--ink-2)}
.mnav a[aria-current]{color:var(--ink); font-weight:500}

/* ── sekcje i pas zielony ────────────────────────────────────
   KOPIA z index.css, wycięta bajt w bajt. Komponent nagłówka sekcji
   (.sec__head + .eyebrow + .h2) jest teraz wspólny dla strony głównej
   i podstron — wcześniej każda miała swój.
   ──────────────────────────────────────────────────────────── */
.sec{padding:var(--sec-y) 0}

/* Dwie sekcje o tym samym tle stykają się bez wizualnej granicy, więc ich
   zsumowany padding czyta się jako jedna dziura. Druga z pary dostaje połowę.
   .sec nie deklaruje własnego tła — dziedziczy tło strony — więc para .sec+.sec
   ZAWSZE ma to samo tło. Gdyby wróciła klasa z naprzemiennym tłem
   (dawne .sec--paper, dziś nieistniejące), tę regułę trzeba zawęzić. */
.sec + .sec,
.hero + .sec{padding-top:calc(var(--sec-y) / 2)}
.sec__head{text-align:center; max-width:880px; margin:0 auto var(--head-gap)}
.sec__head .h2{max-width:22ch; margin-left:auto; margin-right:auto; text-wrap:balance}
.sec__head .eyebrow{margin-bottom:var(--eyebrow-gap)}
.sec__head p{margin-top:var(--s5); max-width:56ch; margin-left:auto; margin-right:auto}
.green{background:var(--green); color:var(--white); text-align:center;
  padding:calc(var(--sec-y) * 1.4) 0}
.green h2{color:var(--white); margin:var(--s6) 0 var(--s7);
  font-size:clamp(2rem,4.2vw,3.4rem)}
.green .eyebrow{justify-content:center}
@media(min-width:900px){ .sec__head .eyebrow{white-space:nowrap} }

/* ── stopka ─────────────────────────────────────────────── */
.ftr{background:var(--white); border-top:1px solid var(--line);
  padding:clamp(40px,5vw,var(--s9)) 0 var(--s6)}
.ftr__in{display:grid; gap:var(--s7); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .ftr__in{grid-template-columns:auto 1fr 1fr auto} }
.ftr dt{font-family:var(--display); font-size:1.15rem; font-weight:600; margin-bottom:var(--s3)}
.ftr dd{margin:0; font-size:.98rem; color:var(--ink-2); line-height:1.9}
/* inline-block: obszar klikalny = cały wiersz (≥24 px, WCAG 2.5.8), a nie sam
   obszar glifów (23 px). Geometria stopki bez zmian. */
.ftr dd a,.ftr__bot a{display:inline-block; min-height:24px}
.ftr dd a:hover{color:var(--gold-dark)}
.ftr__bot{margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line-2);
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  font-size:.86rem; color:var(--ink-3)}

/* ── watermark: kadr zespołu bez zdjęcia ───────────────────
   Wypełnia ramkę zdjęcia (.tcard__img na /nasz-zespol/ i w sekcji lekarzy
   na /zakres-opieki/<slug>/, .prof__img na profilu) — proporcja 4:5 zostaje,
   siatka kart równa. Znak to src/static/img/sygnet.svg jako maska: kolor
   daje background (--gold-deco), więc to ten sam plik co favicon, bez
   osobnej grafiki. Dekoracja: w markupie aria-hidden="true", imię i nazwisko
   stoją obok jako tekst. Strona główna pokazuje wyłącznie karty ze zdjęciem,
   dlatego index.css tej reguły nie ma. */
.wm{display:block; position:relative; width:100%; height:100%; background:var(--soft)}
.wm::after{content:""; position:absolute; left:50%; top:50%; width:40%; aspect-ratio:640/620;
  transform:translate(-50%,-50%); background:var(--gold-deco); opacity:.1;
  /* longhandy zamiast skrótu mask — walidator W3C Nu nie zna skrótu (zgłasza błąd CSS) */
  -webkit-mask-image:url(/img/sygnet.svg); -webkit-mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat;
  mask-image:url(/img/sygnet.svg); mask-position:center; mask-size:contain; mask-repeat:no-repeat}

/* === Komponent: hero z arkadą, nagłówek .t-hero, rząd przycisków, lista specjalności ===
   Przeniesione bez zmian z sala-operacyjna.css (16.10.2026) — /sala-operacyjna/
   i /o-nas/. Markup hero:
   <section class="hero"><div class="wrap grid"><div>tekst</div>
     <figure class="arch"><div class="arch__inner"><img …></div></figure></div></section> */
.t-hero{font-size:clamp(2.1rem,4.4vw,3.35rem); line-height:1.1}
.t-hero em{font-style:italic; font-weight:500; color:var(--gold); display:block}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.actions--center{justify-content:center}

.hero{padding:var(--sec-y) 0 calc(var(--sec-y) * 1.15)}
.hero .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero .lead{max-width:52ch}

/* arkada — kadr zamknięty łukiem, cienki mosiężny obrys */
.arch{position:relative; padding:12px; margin:0}   /* margin:0 — <figure> ma domyślny margines 40 px */
.arch::before{
  content:""; position:absolute; inset:0;
  border:1px solid var(--gold-deco); opacity:.6;
  border-radius:min(50%,240px) min(50%,240px) 0 0 / 30% 30% 0 0;
  pointer-events:none;
}
.arch__inner{
  border-radius:min(50%,228px) min(50%,228px) 0 0 / 30% 30% 0 0;
  overflow:hidden; background:#EDE7DC;
}
.arch__inner img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}

/* lista specjalności: 3 / 2 / 1 kolumna (progi 900 i 640 px niżej) */
.specs{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(24px,4vw,56px);
  padding:0; margin:0; list-style:none;
}
.specs li{
  padding:13px 0; border-bottom:1px solid rgba(201,169,97,.35);
  font-size:1.02rem;
}
/* Wariant: dwie kolumny od 640 px (lista w kolumnie obok zdjęcia na /o-nas/).
   Kompletny — jawnie ustawia liczbę kolumn powyżej 900 px; ≤ 640 px jedna
   kolumna z bazy (reguła w @media niżej, później w arkuszu). */
.specs--2{grid-template-columns:repeat(2,1fr)}

@media(max-width:900px){
  .hero .grid{grid-template-columns:1fr}
  .hero .arch{max-width:420px; margin-inline:auto}
  .specs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .specs{grid-template-columns:1fr}
}

/* === Komponent: galeria + lightbox ===
   Przeniesione bez zmian z sala-operacyjna.css (16.10.2026) — jedno źródło
   dla /sala-operacyjna/, /o-nas/ i /o-nas/zobacz-klinike/. Markup podglądu:
   partial lightbox.html (front-matter "lightbox": true), logika: lightbox.js.
   Siatka domyślnie 3 kolumny, max-width:900px, wyśrodkowana. */
.shots{
  display:grid; grid-template-columns:repeat(3,1fr); align-items:start;
  gap:var(--s5);
  max-width:900px; margin-inline:auto;
}
/* Wariant na pełną szerokość kontenera (strona galerii, zajawka na /o-nas/).
   Kompletny: ustawia jawnie wszystko, czym różni się od bazy. */
.shots--wide{max-width:var(--maxw); margin-inline:auto; grid-template-columns:repeat(3,1fr)}
/* Cztery kolumny od 900 px (zajawka galerii). Poniżej 900 / 640 px obowiązują
   te same progi co w bazie (2 / 1 kolumna) — reguły w @media niżej stoją
   później w arkuszu przy tej samej specyficzności. */
.shots--4{grid-template-columns:repeat(4,1fr)}
.shot{margin:0}
.shot__btn{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  font:inherit; color:inherit; text-align:left;
}
/* Kadr prostokątny. overflow:hidden MUSI zostać — bez niego zdjęcie
   powiększone na hoverze (scale 1.035) wychodziłoby poza ramkę.
   Łuk arkady jest wyłącznie w hero, patrz .arch__inner. */
.shot__frame{position:relative; display:block; overflow:hidden; background:#EDE7DC}
/* height:auto jest konieczne, nie kosmetyczne. Atrybut height="600" w HTML
   staje się wskazówką prezentacyjną `height:600px`; gdy wysokość jest podana
   jawnie, przeglądarka IGNORUJE aspect-ratio. Bez tego kadr miał 285x600 px
   zamiast 3:2. Atrybutów w markupie nie ruszamy — trzymają proporcję
   dla mechanizmu rezerwacji miejsca przed wczytaniem obrazu. */
.shot__frame img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  transition:transform .5s ease}
.shot__btn:hover .shot__frame img{transform:scale(1.035)}
.shot figcaption{margin-top:12px; font-size:.82rem; color:var(--ink-3)}
/* Wariant: kadr pionowy 3:4 (obok tekstu). Poziome zdjęcie przycięte object-fit:cover —
   sizes takiego kafla liczy się z WYSOKOŚCI kadru (szerokość × 4/3 × proporcja pliku). */
.shot--34 .shot__frame img{aspect-ratio:3/4}

/* ramka zastępcza, gdy pliku zdjęcia jeszcze nie ma (.is-missing dokłada lightbox.js) */
.shot.is-missing .shot__frame{
  background:
    repeating-linear-gradient(135deg,#EEE8DC 0 12px,#EAE3D4 12px 24px);
}
.shot.is-missing img{visibility:hidden}
.shot.is-missing .shot__frame::after{
  content:"zdjęcie"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:.8rem; letter-spacing:.14em; color:#A99C82;
}
.shot.is-missing .shot__btn{cursor:default}

/* podgląd zdjęcia */
.lb[hidden]{display:none}
.lb{
  position:fixed; inset:0; z-index:100; background:rgba(26,26,22,.94);
  display:grid; grid-template-rows:auto 1fr auto; padding:18px;
}
.lb__bar{display:flex; justify-content:space-between; align-items:center; color:#E8E5DA; font-size:.9rem}
.lb__stage{display:grid; place-items:center; min-height:0; position:relative}
.lb__stage img{max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb__cap{color:#CFCCC0; font-size:.92rem; text-align:center; padding:14px 8px 4px; min-height:2.6em}
.lb__x,.lb__nav{
  background:none; border:1px solid rgba(255,255,255,.28); color:#EFECE1;
  width:46px; height:46px; cursor:pointer; font-size:1.15rem; line-height:1;
  display:grid; place-items:center; transition:background .15s,border-color .15s;
}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6)}
.lb__nav{position:absolute; top:50%; transform:translateY(-50%)}
.lb__nav--prev{left:0}
.lb__nav--next{right:0}
/* Fokus w podglądzie: domyślny obrys --gold-dark (#6B5029) na tle lightboxa
   rgba(26,26,22,.94) daje 2,33:1 — poniżej progu 3:1 (WCAG 1.4.11).
   Ten sam zabieg co dla .green i .promo wyżej. */
.lb :focus-visible{outline-color:var(--gold-light)}

@media(max-width:900px){
  .shots{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .shots{grid-template-columns:1fr; gap:26px}
  .lb__nav{top:auto; bottom:-4px; transform:none}
}
@media(prefers-reduced-motion:reduce){
  .shot__btn:hover .shot__frame img{transform:none}
}

/* ── ruch ───────────────────────────────────────────────── */
.rv{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}