/* ============================================================
   JACKOWO — restauracja.css

   Style używane wyłącznie przez restauracja.html, menu.html i przyjecia.html.
   Wydzielone z components.css i sections.css, żeby strona główna i pozostałe
   podstrony nie pobierały CSS-a karty dań ani sekcji piwa.

   Ładuj TYLKO na tych trzech podstronach, po components.css i sections.css.
   ============================================================ */

/* ============================================================
   POZYCJA KARTY DAŃ — wariant D1: lista z miniaturą 76×76
   Pozycja bez zdjęcia musi wyglądać tak samo dobrze jak ze zdjęciem.
   ============================================================ */
.dish{
  display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--c-border);
}
.dish:last-child{border-bottom:0}
.dish__thumb{
  flex:none;width:76px;height:76px;border-radius:var(--r-md);overflow:hidden;
  background:var(--c-bg-warm);border:1px solid var(--c-border);
}
/* <picture> musi dostac height:100%, inaczej height:100% na <img> nie ma sie
   do czego odniesc i miniatura wraca do wlasnych proporcji, rozpychajac wiersz.
   Ta sama pulapka co przy .hero__media picture w sections.css. */
.dish__thumb picture{display:block;width:100%;height:100%}
.dish__thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.dish__txt{flex:1;min-width:0}
.dish__name{font-family:var(--f-head);font-size:1.0625rem;font-weight:500;margin:0 0 2px}
.dish__desc{font-size:var(--fs-sm);color:var(--c-text-2);margin:0;max-width:60ch}

/* Znaczniki z karty klienta: „nowość", „wege", „fit", „dodatek", „za 100 g".
   „za 100 g" nie jest ozdobnikiem — to informacja cenowa, więc dostaje
   mocniejszy kontrast i kolor ceny, żeby nie zginęła obok kwoty. */
.dish__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dish__tag{
  font:600 11px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;
  padding:5px 8px;border-radius:100px;
  background:var(--c-bg-warm);color:var(--c-text-2);border:1px solid var(--c-border-sand);
}
.dish__tag--nowosc{background:var(--c-amber-bg);color:var(--c-amber-tx);border-color:rgba(184,134,47,.28)}
.dish__tag--wege,.dish__tag--fit{background:var(--c-green-lt);color:var(--c-green-dk);border-color:rgba(63,91,71,.2)}
.dish__tag--miara{background:transparent;color:var(--c-brown);border-color:var(--c-brown-lt)}
/* „hit” stoi na karcie obok „nowości” przy wódce Jackowo.
   Bez własnej klasy wpadłby do kosza „inny” i wyglądał jak miara. */
.dish__tag--hit{background:var(--c-green-lt);color:var(--c-green-dk);border-color:rgba(63,91,71,.28)}

.dish__tag--dodatek{background:var(--c-bg-alt)}
.dish__dots{
  flex:1;border-bottom:1px dotted var(--c-border);min-width:20px;
  align-self:flex-end;margin-bottom:7px;display:none;
}
@media(min-width:600px){.dish__dots{display:block}}
.dish__price{
  font-family:var(--f-head);font-weight:600;color:var(--c-brown);
  font-variant-numeric:tabular-nums;   /* równe cyfry w kolumnie cen */
  white-space:nowrap;align-self:flex-end;margin-bottom:2px;
}
@media(min-width:600px){.dish__price{align-self:center;margin-bottom:0}}

/* nagłówek kategorii w karcie dań */
.dish-group{margin-bottom:var(--sp-7)}
.dish-group:last-child{margin-bottom:0}
.dish-group__head{
  display:flex;align-items:baseline;gap:var(--sp-3);
  margin-bottom:var(--sp-2);padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--c-green-lt);
}
.dish-group__head h2{margin:0;font-size:var(--fs-h3)}
/* Opis kategorii — informacja cenowa z karty („Cena za 100 g”, „Średnica 30 cm”).
   Stoi pod nagłówkiem grupy, nad pierwszą pozycją. */
.dish-group__opis{
  font-size:var(--fs-sm);color:var(--c-text-2);
  margin:calc(-1 * var(--sp-2)) 0 var(--sp-3);
}

/* komunikat, gdy filtr nic nie znalazł */


/* ============================================================
   PIWO JACKOWO — wariant W1 z piwo-jackowo-uklad.html

   Nie ma i nie będzie zdjęć pojedynczych butelek — butelki na zdjęciu
   zbiorczym stoją stykami i nie da się ich wyciąć. Zamiast udawać karty
   produktowe budujemy sekcję wokół jednego zdjęcia, a pięć piw pokazujemy
   typograficznie: kropka w kolorze etykiety zastępuje zdjęcie butelki.
   ============================================================ */
.beer-sec{text-align:center}
/* max-width:none jest tu KONIECZNE. W base.css każdy akapit dostaje
   max-width:var(--measure) = 68ch, a eyebrow jest akapitem. Blok miał
   przez to 583 px zamiast 1200 px i bez marginesu auto przyklejał się
   do lewej: tekst był wyśrodkowany, ale wewnątrz wąskiego bloku,
   czyli wizualnie 277 px na lewo od środka sekcji. */
.beer-sec .eyebrow{letter-spacing:.14em;max-width:none}
.beer-sec .intro{color:var(--c-text-2);max-width:54ch;margin:0 auto var(--sp-6)}
.beer-sec__rule{width:56px;height:1px;background:var(--c-brown-lt);margin:0 auto var(--sp-6)}

/* Pięć kart, więc siatka jest sztywna. auto-fit przy zwężaniu zostawiał
   cztery butelki w rzędzie i jedną sierotę pod spodem. */
.beer-row{
  display:grid;gap:clamp(12px,1.8vw,22px);
  max-width:1100px;margin-inline:auto;
  grid-template-columns:repeat(5,1fr);
}
.beer-card{position:relative;padding:0 0 var(--sp-3)}

.beer-card__foto{
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:var(--sh-2);margin-bottom:var(--sp-3);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.beer-card__foto picture{display:block;aspect-ratio:3/4}
.beer-card__foto img{width:100%;height:100%;object-fit:cover;display:block}
.beer-card:hover .beer-card__foto{transform:translateY(-4px);box-shadow:var(--sh-3)}

.beer-card h3{
  font-size:clamp(1rem,1.25vw,1.14rem);margin:0 0 var(--sp-2);
  padding-bottom:8px;position:relative;
}
/* kolor etykiety wchodzi z danych przez --etykieta */
.beer-card h3::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:26px;height:2px;border-radius:2px;
  background:var(--etykieta,var(--c-brown-lt));
}

/* Odznaka siada na zdjęciu, nie nad kartą: nad kartą podnosiła wiersz. */
.beer-card .badge{top:9px;right:9px;left:auto;transform:none;z-index:2}

/* ------------------------------------------------------------
   SEKCJA NOCNA (strona główna)

   Kremowe passe-partout #E8E1D4 na tle --c-noc #17130E było jasnym
   prostokątem, który przyciągał wzrok bardziej niż samo zdjęcie.
   Na ciemnym tle ramka jest ciemna, a zdjęcie oddziela od niej
   włoskowaty obrys. Na stronie restauracji sekcja jest jasna
   i kremowa ramka zostaje bez zmian.
   ------------------------------------------------------------ */
.section--noc .beer-stage{
  background:var(--c-noc-2);
  box-shadow:0 2px 6px rgba(0,0,0,.34), 0 18px 44px rgba(0,0,0,.42);
}
.section--noc .beer-stage img{box-shadow:0 0 0 1px var(--c-noc-linia)}
.section--noc .beer-stage figcaption{color:var(--c-noc-tx-2)}

/* Kadry kart dostają ten sam obrys, żeby rząd trzymał się ramki wyżej. */
.section--noc .beer-card__foto{
  box-shadow:0 0 0 1px var(--c-noc-linia),
             0 2px 6px rgba(0,0,0,.34), 0 14px 30px rgba(0,0,0,.40);
}
.section--noc .beer-card:hover .beer-card__foto{
  box-shadow:0 0 0 1px var(--c-noc-linia),
             0 4px 10px rgba(0,0,0,.40), 0 24px 48px rgba(0,0,0,.50);
}

/* ------------------------------------------------------------
   OPIS PIWA PO NAJECHANIU

   Wysuwa się od dołu kadru na przyciemnieniu, tak jak podpisy
   w galerii muzealnej, więc strona nie uczy się nowego języka.

   Na dotyku hoveru nie ma, więc tam opis jest widoczny od razu.
   Decyduje o tym zapytanie (hover: none), a nie szerokość ekranu:
   to cecha urządzenia, nie rozmiar okna. Tekst siedzi w DOM zawsze,
   więc czytnik ekranu przeczyta go niezależnie od przezroczystości.
   ------------------------------------------------------------ */
.beer-card__foto{position:relative}
.beer-card__opis{
  position:absolute;inset:auto 0 0 0;margin:0;
  padding:26px 12px 11px;
  /* Punkty gradientu POLICZONE, nie dobrane okiem. Tekst zaczyna sie
     na 29 procentach wysokosci nakladki. Przy poprzednim ustawieniu
     (.74 na 40 procentach) przezroczystosc w tym miejscu wynosila .53
     i na trzech z pieciu zdjec kontrast spadal do 3,7:1. Najjasniejszy
     piksel pod tekstem to biel 255, wiec zlozenie musi zejsc ponizej
     111 jasnosci, czyli przezroczystosc musi wynosic co najmniej .60.
     Stad .72 juz na 26 procentach. */
  background:linear-gradient(180deg,
    rgba(12,9,6,0) 0%, rgba(12,9,6,.72) 26%, rgba(12,9,6,.94) 100%);
  color:var(--c-kosc);
  font-size:12.5px;line-height:1.45;max-width:none;
  text-shadow:0 1px 5px rgba(0,0,0,.55);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.beer-card:hover .beer-card__opis,
.beer-card:focus-within .beer-card__opis{opacity:1;transform:none}

@media(hover:none){
  .beer-card__opis{opacity:1;transform:none}
}

/* Zasada fail-safe: kto prosi o brak ruchu, dostaje karty nieruchome. */
@media(prefers-reduced-motion:reduce){
  .beer-card__opis{transition:none;transform:none}
  .beer-card__foto{transition:none}
  .beer-card:hover .beer-card__foto{transform:none}
}

/* zdjęcie zbiorcze w kremowym passe-partout, pod kartami */
.beer-stage{
  max-width:760px;margin:var(--sp-7) auto 0;background:var(--c-bg-sand);
  padding:16px;border-radius:var(--r-lg);box-shadow:var(--sh-1);
}
.beer-stage img{border-radius:var(--r-md);width:100%;margin-inline:auto}
.beer-stage figcaption{
  margin-top:12px;font-size:13px;color:var(--c-text-2);text-align:center;
}

/* Poniżej 640 px pięć butelek robi się nieczytelne. Dwie kolumny,
   a piąta karta rozpina się na oba pola i centruje, więc nie zostaje
   przyklejona do lewej krawędzi. Odstęp na sztywno, bo szerokość
   ostatniej karty liczy się z jego połowy. */
/* Między 900 a 640 px pięć kart w rzędzie robi się za wąskie: pomiar
   przy 665 px dał po 111 px na kartę, czyli około 37 px samej butelki.
   Trzy karty w rzędzie, dwie ostatnie wyśrodkowane pod nimi.

   Sześć kolumn, karta zajmuje dwie. Czwarta startuje od kolumny 2,
   piąta od kolumny 4, więc z obu stron zostaje po jednej kolumnie
   i para siada na środku. Bez procentów, bo procent na karcie
   rozpiętej na kilka kolumn liczy się od kolumny, nie od pola. */
@media(max-width:900px) and (min-width:641px){
  .beer-row{grid-template-columns:repeat(6,1fr)}
  .beer-row .beer-card{grid-column:span 2}
  .beer-row .beer-card:nth-child(4){grid-column:2 / span 2}
  .beer-row .beer-card:nth-child(5){grid-column:4 / span 2}
}

@media(max-width:640px){
  /* Cztery kolumny, karta zajmuje dwie, czyli w rzędzie mieszczą się dwie
     karty. Piąta startuje od kolumny drugiej, więc z obu stron zostaje po
     jednej kolumnie i sama siada na środku.

     Wcześniej stało tu max-width:calc(50% - 7px) na karcie rozpiętej na
     całą szerokość. Pomiar przy 390 px dał 77 px zamiast 168: procent
     policzył się od kolumny, nie od rozpiętego pola, więc połowa weszła
     dwa razy. Na kolumnach nie ma czego źle policzyć. */
  .beer-row{grid-template-columns:repeat(4,1fr);gap:14px}
  .beer-row .beer-card{grid-column:span 2}
  .beer-row .beer-card:last-child{grid-column:2 / span 2}
  .beer-stage{margin-top:var(--sp-6);padding:12px}
}


/* Lista atutów przyjęć — wyśrodkowana, z zielonymi znacznikami.
   Bez <ul> z kropkami: przy wyśrodkowanym układzie kropki wiszą krzywo. */
.atuty{
  list-style:none;margin:var(--sp-7) auto 0;padding:0;
  max-width:640px;display:grid;gap:var(--sp-3);text-align:center;
}
.atuty li{
  font-size:var(--fs-sm);color:var(--c-text-2);
  padding-top:var(--sp-3);border-top:1px solid var(--c-border);
}
.atuty li:first-child{border-top:0;padding-top:0}

/* ============================================================
   NAGRODY I WYRÓŻNIENIA — skromny blok, dwa kadry obok siebie

   Nie używamy .plates: tam siatka ma cztery kolumny (--cols-plate), więc
   dwa kafle zostawiłyby połowę rzędu pustą.

   Dyplom Orłów jest pionowy, tablica Złotej Firmy pozioma. Wspólne
   aspect-ratio z object-fit:cover ucięłoby jednemu z nich treść, a to
   zdjęcia dokumentacyjne — liczy się na nich to, co napisane. Dlatego
   kadr ma stałą WYSOKOŚĆ i object-fit:contain: obie karty są równe,
   żaden dokument nie jest przycięty, a wolne miejsce wypełnia piaskowe tło.
   Bez tego karty różniły się wysokością o 232 px.
   ============================================================ */
.nagrody{
  display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr);
  align-items:start;max-width:820px;margin-inline:auto;
}
@media(min-width:640px){.nagrody{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nagroda{
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
}
/* Oprawa jak przy eksponatach muzeum: passe-partout z piaskowego tla
   i włoskowa kreska wokoło odbitki. To ta kreska daje wrażenie ramy —
   bez niej zdjęcie wygląda jak wklejone.

   Wysokość stała 280 px zastąpiona proporcją 3:4 na samym <picture>.
   Oba dyplomy są docięte dokładnie do 3:4, więc object-fit nie ma już
   czego przycinać, a oba kafle mają identyczną wysokość.
   Przy stałej wysokości i object-fit:contain pionowy dyplom zostawiał
   po bokach szerokie puste pasy. */
.nagroda__media{
  background:var(--c-bg-sand);
  padding:clamp(14px, 2.6vw, 26px);
  border-bottom:1px solid var(--c-border-sand);
}
/* <picture> niesie proporcję, bo to ono jest pudełkiem odbitki.
   Ta sama pułapka co przy .hero__media picture w sections.css:
   wysokość na <img> nie ma się do czego odnieść, jeśli rodzic
   ma wysokość auto. */
.nagroda__media picture{
  display:block;
  aspect-ratio:3/4;
  box-shadow:0 0 0 1px var(--c-brown-lt), var(--sh-1);
  background:var(--c-surface);
}
.nagroda__media img{width:100%;height:100%;object-fit:cover;display:block}
.nagroda figcaption{padding:var(--sp-4)}
.nagroda strong{
  display:block;font-family:var(--f-head);font-weight:500;
  font-size:1.05rem;color:var(--c-text);
}
.nagroda span{display:block;font-size:var(--fs-sm);color:var(--c-text-2);margin-top:2px}

/* ============================================================
   PASEK GRUP — pierwszy poziom filtra karty dań

   Karta ma 26 kategorii. W jednym rzędzie zajmowały trzy wiersze
   i 167 px, przez co pierwsza pozycja startowała 559 px od góry.
   Przełącznik Wszystko / Jedzenie / Napoje skraca listę kafelków
   do jednej grupy naraz.
   ============================================================ */
.grupy{
  display:flex; gap:var(--sp-2); flex-wrap:wrap;
  margin-bottom:var(--sp-3);
}
.grupa{
  font:inherit; font-size:var(--fs-sm); font-weight:600;
  padding:9px 20px; min-height:var(--tap);
  border:1px solid var(--c-border-sand); border-radius:999px;
  background:var(--c-surface); color:var(--c-text-2);
  cursor:pointer;
  transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}
.grupa:hover{border-color:var(--c-green); color:var(--c-green-dk)}
.grupa[aria-pressed="true"]{
  background:var(--c-green); border-color:var(--c-green); color:#fff;
}
/* Kafelek schowany atrybutem hidden musi zniknąć także z układu flex —
   display:flex na .chips nadpisałby domyślne display:none. */
.chips .chip[hidden]{display:none}

@media(prefers-reduced-motion:reduce){ .grupa{transition:none} }


/* ============================================================
   WIĘKSZA KARTA DAŃ – tylko na podstronie karty

   menu.html i restauracja.html dzielą tę samą klasę body (p-restauracja),
   więc powiększenie musi się zaczepić o coś, co jest wyłącznie na karcie.
   Tym czymś jest #karta-dan. Dzięki temu lista dań rośnie, a ta sama
   karta w skrócie na stronie restauracji zostaje jak była.
   ============================================================ */
#karta-dan .dish__name{font-size:1.25rem;line-height:1.35}
#karta-dan .dish__desc{font-size:1.0625rem;line-height:1.6;max-width:64ch}
#karta-dan .dish__price{font-size:1.1875rem}
#karta-dan .dish-group__head h2{font-size:clamp(1.5rem,1.25rem + 1.1vw,2rem)}
#karta-dan .dish-group__opis{font-size:1rem}
#karta-dan .dish__tag{font-size:12px;padding:6px 10px}
#karta-dan .dish{padding:calc(var(--sp-4) + 4px) 0}
#karta-dan .dish__thumb{width:92px;height:92px}

@media(min-width:768px){
  #karta-dan .dish__name{font-size:1.375rem}
  #karta-dan .dish__desc{font-size:1.125rem}
  #karta-dan .dish__price{font-size:1.3125rem}
  #karta-dan .dish__thumb{width:104px;height:104px}
}


/* ============================================================
   WSUWKI ZE ZDJĘCIAMI W KARCIE DAŃ

   Zdjęcie ma 18 ze 160 pozycji. Miniatura w wierszu robiła z tego
   problem: wiersz ze zdjęciem miał 145 px, bez zdjęcia 101 px, więc
   lista falowała, a siedemnaście kategorii bez zdjęć wyglądało ubogo.

   Miniatura znikła z wiersza. Zdjęcia wracają jako przekrzywione
   odbitki między kategoriami, pojedynczo albo parami, raz z lewej,
   raz z prawej, rozrzucone po całej karcie.
   ============================================================ */
.wsuwka{
  display:flex;
  /* Odstęp musi uwzględniać obrót. Przy 21 stopniach róg odbitki wychodzi
     25 px poza jej krawędź, więc dwie sąsiednie stykają się rogami przy
     odstępie 30 px. Sprawdzone testem na obróconych wielokątach, nie
     na pudełkach opisanych: te drugie kłamią w obie strony. */
  gap:clamp(30px, 4.4vw, 68px);
  margin:clamp(30px, 4.5vw, 56px) 0 clamp(18px, 2.5vw, 30px);
  /* Zapas na obrót. Przy 21 stopniach róg odbitki wychodzi 27 px poza
     jej pudełko, więc bez tego zahaczałby o krawędź kolumny. */
  padding-inline:30px;
}
.wsuwka--lewo{justify-content:flex-start}
.wsuwka--prawo{justify-content:flex-end}
.wsuwka--srodek{justify-content:center}

.wsuwka__foto{
  width:clamp(148px, 19vw, 246px);
  margin:0;
  background:var(--c-krem-odbitki);
  padding:9px 9px 12px;
  border-radius:2px;
  box-shadow:0 2px 4px rgba(58,44,26,.15), 0 16px 30px rgba(58,44,26,.17);
  transform:rotate(var(--kat, 0deg));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.wsuwka__foto picture{
  display:block;
  aspect-ratio:4/3;
  box-shadow:0 0 0 1px rgba(92,69,38,.18);
}
.wsuwka__foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Po najechaniu odbitka prostuje się i unosi, jak w muzeum. */
.wsuwka__foto:hover{
  transform:rotate(0deg) translateY(-5px) scale(1.03);
  box-shadow:0 3px 6px rgba(58,44,26,.18), 0 26px 46px rgba(58,44,26,.24);
}

/* Zasada fail-safe: kto prosi o brak ruchu, dostaje odbitki równo. */
@media(prefers-reduced-motion:reduce){
  .wsuwka__foto{transform:none; transition:none}
  .wsuwka__foto:hover{transform:none}
}

@media(max-width:600px){
  .wsuwka{gap:20px; margin-block:26px 16px; padding-inline:14px}
  .wsuwka__foto{
    width:clamp(118px, 34vw, 150px);
    padding:7px 7px 9px;
    /* POŁOWA KĄTA. Przy 390 px dwie odbitki obok siebie zajmują prawie
       całą szerokość, więc na pełny obrót nie ma zapasu i rogi się
       stykały. Sprawdzone testem na obróconych wielokątach: przy połowie
       kąta i odstępie 20 px żadna para się nie dotyka. */
    transform:rotate(calc(var(--kat, 0deg) * .5));
  }
  .wsuwka__foto:hover{transform:rotate(0deg) translateY(-4px) scale(1.02)}
}


/* ============================================================
   KARTA DAŃ W DWÓCH KOLUMNACH (27.08.2026)

   160 pozycji w jednej kolumnie dawało sekcję wysoką na 10 547 px.
   Dwie kolumny skracają ją o połowę i skracają drogę oka od nazwy
   dania do ceny.

   CSS columns, nie grid: kategorie mają różną długość, a columns
   pakuje je ciasno, zamiast zostawiać dziury pod krótszymi. Ten sam
   mechanizm co galeria bursztynowa na muzeum.

   break-inside:avoid pilnuje, żeby kategoria nigdy nie pękła w pół
   między kolumnami — nazwa kategorii zawsze stoi nad swoimi daniami.

   Przy JEDNEJ widocznej kategorii (po filtrze) menu.js dokłada klasę
   .karta--jedna i karta wraca na jedną kolumnę — inaczej cała treść
   lądowałaby w lewej kolumnie, a prawa świeciłaby pustką.
   ============================================================ */
@media(min-width:900px){
  #karta-dan{
    columns:2;
    column-gap:clamp(32px, 4vw, 64px);
  }
  #karta-dan.karta--jedna{columns:1}

  #karta-dan .dish-group{
    break-inside:avoid;
    /* margines dolny na dole kolumny bywa zjadany przez silnik
       kolumn — padding trzyma odstęp niezależnie od miejsca podziału */
    padding-bottom:var(--sp-6);
    margin-bottom:0;
  }

  /* Odbitki w wąskiej kolumnie: przy 246 px i odstępie 68 px dwie
     sztuki plus marginesy nie mieściły się w połowie kontenera. */
  #karta-dan .wsuwka{
    gap:clamp(14px, 1.6vw, 26px);
    padding-inline:10px;
    margin-block:clamp(22px, 2.6vw, 34px) clamp(14px, 1.6vw, 20px);
  }
  #karta-dan .wsuwka__foto{width:clamp(120px, 13vw, 172px)}
}

/* Komunikat zamykający kartę — ton rozmowy, nie regulaminu. */
.karta-koniec{
  max-width:52ch;
  margin:var(--sp-7) auto 0;
  padding:var(--sp-5) var(--sp-6);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  text-align:center;
  font-family:var(--f-head);
  font-size:clamp(1.02rem, .95rem + .4vw, 1.2rem);
  line-height:1.55;
  color:var(--c-text);
}


/* ============================================================
   DUET W SEKCJI PIWA (pakiet finalny 27.08.2026)

   Panorama pięciu butelek + pionowy kadr szklanki obok siebie.
   Klient prosił, żeby przy piwie były też fotografie szklanki —
   kadr istniał już w projekcie (karta dań, Jackowo Ciemne).
   Na wąskim ekranie szklanka schodzi POD panoramę i zwęża się:
   pełnowymiarowy pion po poziomym pasie wyglądał jak nowy hero.
   ============================================================ */
.beer-duet{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:var(--sp-4);
  max-width:1000px;
  margin:var(--sp-7) auto 0;
  align-items:stretch;
}
.beer-duet .beer-stage{margin:0;max-width:none}
.beer-duet .beer-stage picture,
.beer-duet .beer-stage img{height:100%;object-fit:cover}
.beer-puchar{
  margin:0;background:var(--c-bg-sand);
  padding:16px;border-radius:var(--r-lg);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;
}
.beer-puchar picture{display:block;flex:1;min-height:0}
.beer-puchar img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:var(--r-md);
}
.beer-puchar figcaption{
  margin-top:12px;font-size:13px;color:var(--c-text-2);text-align:center;
}
@media(max-width:720px){
  .beer-duet{grid-template-columns:1fr}
  .beer-puchar{width:100%;max-width:300px;margin-inline:auto}
  .beer-puchar picture{aspect-ratio:3/4}
}


/* ============================================================
   ZWIJANE KATEGORIE KARTY (28.08.2026, prośba klienta)

   Drugi poziom filtrów zajmował pół ekranu. Kategorie chowają się
   za przyciskiem w stylu chipa; strzałka obraca się przy otwarciu.
   ============================================================ */
.kat-toggle{
  font:inherit;font-size:var(--fs-sm);font-weight:600;
  padding:9px 20px;min-height:var(--tap);
  display:inline-flex;align-items:center;gap:8px;
  border-radius:999px;cursor:pointer;
  border:1px solid var(--c-border-sand);background:var(--c-surface);
  color:var(--c-text-2);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.kat-toggle:hover{border-color:var(--c-green);color:var(--c-green)}
.kat-toggle::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease);
}
.kat-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translateY(-1px)}
.chips--zwiniete{display:none}


/* ============================================================
   NAGŁÓWEK KARTY DAŃ (28.08.2026, prośba klienta)

   Delikatnie rozmyty kolaz trzech kadrów z karty na całej
   szerokości paska. Scrim jest liczony z zapasem: nawet czarny
   piksel pod warstwą .88 kremu daje tło ~#D9D5CD, a atrament
   na nim trzyma kontrast powyżej 9:1.
   ============================================================ */
.karta-naglowek{position:relative;isolation:isolate;overflow:hidden}
.karta-tlo{position:absolute;inset:0;z-index:-2;display:flex}
.karta-tlo img{
  width:33.34%;height:100%;object-fit:cover;
  filter:blur(6px) saturate(1.05);
  transform:scale(1.08);   /* rozmyte krawędzie nie świecą przy brzegach */
}
.karta-naglowek::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,
    rgba(251,249,245,.94) 0%,
    rgba(251,249,245,.88) 55%,
    rgba(251,249,245,.80) 100%);
}

/* PASEK FILTRÓW bez „białego pasa”: tło przejmuje kolor sekcji
   karty pod spodem (tint), twardy border ustępuje miękkiemu
   cieniowi — żadnych obcych barw między sekcjami. */
.filterbar{
  background:var(--c-tint);
  border-bottom:0;
  box-shadow:0 8px 20px rgba(58,44,26,.07);
}


/* Finalny audyt 28.08.2026: na telefonie nagłówek kategorii karty
   dostaje więcej światła nad sobą — przy jednej kolumnie kategorie
   zlewały się z końcówką poprzedniej. */
@media(max-width:760px){
  #karta-dan .dish-group__head{margin-top:var(--sp-6)}
}


/* ============================================================
   NAGLOWKI KATEGORII W KARCIE (29.08.2026, uwaga klienta:
   „wszystko się zlewa, można dać inny kolor nagłówków”)

   Kategoria dostaje kolor marki (ciemna zieleń, kontrast 9,2:1
   na tle karty), bursztynowy znacznik nad nazwą i mocniejszą
   linię pod spodem. Nazwy dań zostają atramentowe — różnica
   koloru buduje hierarchię: zieleń = rozdział, atrament = danie.
   ============================================================ */
.dish-group__head{
  border-bottom-color:var(--c-green);
  border-bottom-width:2px;
  position:relative;
}
.dish-group__head h2{
  color:var(--c-green-dk);
  letter-spacing:.01em;
}
/* Bursztynowy znacznik nad nazwą kategorii — krótka kreska
   w kolorze akcentu, ten sam język co kreski przy nagłówkach sekcji. */
#karta-dan .dish-group__head{
  display:block;
  padding-top:var(--sp-3);
  margin-top:var(--sp-7);
}
#karta-dan .dish-group__head::before{
  content:"";
  display:block;
  width:34px;height:3px;
  background:var(--c-amber);
  border-radius:2px;
  margin-bottom:10px;
}
#karta-dan .dish-group:first-of-type .dish-group__head{margin-top:0}
/* Wyraźniejsza linia między daniami — przy gęstej karcie sama
   przerwa nie wystarczała. */
#karta-dan .dish{border-bottom-color:var(--c-border-sand)}


/* ============================================================
   UKŁAD POZYCJI W KARCIE (29.08.2026, uwaga klienta o wyglądzie)

   Wiersz „nazwa ····· cena” + opis pod spodem. Prowadnik kropkowy
   jest w kolorze brązu (wcześniej najjaśniejszy szary — w praktyce
   niewidoczny), a cena stoi na tej samej linii bazowej co nazwa.
   ============================================================ */
.dish{display:block}
.dish__gora{
  display:flex;
  align-items:baseline;
  gap:10px;
}
.dish__gora .dish__name{flex:0 1 auto;margin-bottom:0}
.dish__gora .dish__dots{
  flex:1 1 24px;
  min-width:24px;
  align-self:auto;
  margin-bottom:0;
  border-bottom:1px dotted var(--c-brown-lt);
  transform:translateY(-.28em);
  display:block;
}
.dish__gora .dish__price{
  flex:0 0 auto;
  align-self:auto;
  margin-bottom:0;
}
.dish__desc{margin-top:4px}
.dish__tags{margin-top:8px}


/* Telefon: prowadnik kropkowy schodzi — przy wąskiej kolumnie zostaje
   z niego kilka kropek i wygląda przypadkowo. Nazwa i cena i tak stoją
   na jednej linii bazowej, więc czytelność nie cierpi. */
@media(max-width:600px){
  .dish__gora .dish__dots{display:none}
  .dish__gora{gap:var(--sp-3)}
}

/* Kolaż w tle nagłówka karty: na wąskim ekranie trzy kadry obok siebie
   pokazywały ostre pionowe granice. Zostaje jeden kadr, mocniej rozmyty. */
@media(max-width:760px){
  .karta-tlo img:not(:first-child){display:none}
  .karta-tlo img{width:100%;filter:blur(10px) saturate(1.05)}
}


/* ============================================================
   UKLAD MIESZANY KARTY DAN (29.08.2026, wybór klienta)

   Desktop zostaje przy prowadniku kropkowym (wariant A) — zwarty,
   dobrze znosi 160 pozycji. Telefon dostaje TABLICZKI (wariant B):
   każda pozycja na własnym białym polu z ramką, cena zielenią
   po prawej. Palec ma wyraźne pola, nic się nie zlewa.
   Próg 600 px — ten sam, przy którym schodzi prowadnik kropkowy.
   ============================================================ */
@media(max-width:600px){
  #karta-dan .dish{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-md);
    padding:13px 15px;
    margin-bottom:10px;
    transition:border-color .2s var(--ease);
  }
  #karta-dan .dish:last-child{border-bottom:1px solid var(--c-border)}
  #karta-dan .dish:active{border-color:var(--c-green)}
  #karta-dan .dish__gora{justify-content:space-between;gap:12px}
  #karta-dan .dish__name{font-size:1.0625rem}
  #karta-dan .dish__price{
    font-family:var(--f-body);
    font-weight:700;
    color:var(--c-green-dk);   /* kontrast 9,2:1 na bieli tabliczki */
  }
  #karta-dan .dish__desc{margin-top:6px;font-size:.9375rem}
  /* Nagłówek kategorii bez zmian (zieleń + bursztynowy znacznik),
     ale z większym światłem, żeby tabliczki nie kleily się do niego. */
  #karta-dan .dish-group__head{margin-bottom:var(--sp-4)}
}


/* ============================================================
   SEKCJA „ZAPYTAJ O TERMIN” (29.08.2026, prośba klienta)

   Formularz miał max-width 720 px i zerowe marginesy, więc przy
   kontenerze 1200 px stał przy lewej krawędzi — stąd wrażenie
   „rozjechanej” sekcji. Teraz: wyśrodkowany, na białej karcie,
   na tle rozmytego kadru nakrytego stołu. Zdjęcie wchodzi przez CSS,
   więc nie liczy się jako powtórka wśród zdjęć strony.
   ============================================================ */
.zapytanie-sek{position:relative;isolation:isolate;overflow:hidden}
.zapytanie-sek::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:url('../img/01-restauracja/przyjecia/stol-zastawa-02-1200.webp') center/cover;
  filter:blur(7px) saturate(1.03);
  transform:scale(1.06);          /* rozmyte krawędzie poza kadr */
}
.zapytanie-sek::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(233,244,237,.93) 0%,
    rgba(233,244,237,.88) 45%,
    rgba(233,244,237,.93) 100%);
}
/* Biała karta pod formularzem — pola muszą zostać czytelne. */
.zapytanie-sek .form{
  margin-inline:auto;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  box-shadow:0 2px 6px rgba(58,44,26,.08), 0 18px 40px rgba(58,44,26,.10);
  padding:var(--sp-6) var(--sp-5);
}
@media(min-width:820px){
  .zapytanie-sek .form{padding:var(--sp-7) var(--sp-6)}
}
@media(max-width:600px){
  /* rozmycie dużego tła kosztuje na telefonie — zostaje sam kolor */
  .zapytanie-sek::before{display:none}
  .zapytanie-sek .form{
    padding:var(--sp-5) var(--sp-4);
    border-radius:var(--r-md);
  }
}


/* ============================================================
   KOLAŻ Z PRZYJĘĆ (29.08.2026)

   Siatka, nie kolumny: przy czterech kadrach tej samej wysokości
   columns:3 wypełniało dwie kolumny i zostawiało trzecią pustą.
   Zdjęcia zostają w swoich proporcjach — nic nie jest przycinane.
   ============================================================ */
.kolaz-przyjecia{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);
  align-items:start;
}
@media(min-width:1000px){
  .kolaz-przyjecia{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* przesunięcie co drugiego kafla — rząd przestaje być równym paskiem
     i czyta się jak kolaż; ten sam chwyt co w .plates--rytm */
  .kolaz-przyjecia figure:nth-child(even){margin-top:clamp(16px, 2.4vw, 34px)}
}
@media(max-width:560px){.kolaz-przyjecia{grid-template-columns:1fr}}
.kolaz-przyjecia figure{
  margin:0;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--sh-1);
}
.kolaz-przyjecia img{width:100%;height:auto;display:block}
.kolaz-przyjecia figcaption{
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);color:var(--c-text-2);
}