/* ==========================================================================
   Przystań Somińska - arkusz wspolny dla trzech podstron
   Projekt graficzny: makieta 1512 px z canvasa. Tu ta sama kompozycja,
   ale na flexie i gridzie, z breakpointami 1200 / 900 / 640 px.
   Kolory i typografia z CLAUDE.md, nie zmieniac bez uzgodnienia.
   ========================================================================== */

/* --- 1. Zmienne ---------------------------------------------------------- */

:root {
  /* marka */
  --granat: #162660;
  --granat-2: #3d5596;
  --granat-3: #6f8fcc;
  --pudrowy: #d0e6fd;
  --kosc: #f1e4d1;
  --biel: #fff;
  --tekst-2: #4a5680;
  --obramowanie: #c9d6ea;
  --linia: #e2e8f3;

  /* siatka */
  --maks: 1800px;                 /* tresc rosnie do ~1740 px, dalej stoi na srodku */
  --margines: clamp(16px, 7.94vw, 138px);      /* 120 px przy 1512 */
  --rytm: clamp(64px, 9.92vw, 172px);          /* odstep miedzy sekcjami */
  --rytm-maly: clamp(40px, 5vw, 80px);
  /* wciecie dla paskow na cala szerokosc (naglowek, dron, stopka, pasek kategorii):
     margines, a na bardzo szerokim ekranie tyle, zeby tresc stala w tej samej
     kolumnie co reszta strony */
  --bok: max(var(--margines), calc((100% - var(--maks)) / 2 + var(--margines)));

  /* promienie */
  --r-duzy: clamp(20px, 2vw, 34px);
  --r-sredni: clamp(16px, 1.6vw, 28px);
  --r-maly: 16px;

  /* typografia */
  --font: "Poppins", "Poppins Zastepczy", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* kolor pogrubien i obwodki fokusu: ciemne kontenery przestawiaja je na jasne
     (granatowe <b> na granatowej karcie mialo kontrast 1:1, czyli bylo niewidoczne) */
  --b: var(--granat);
  --fokus: var(--granat-2);
  --font-pisany: "Respondent Light", "Segoe Script", cursive;
}

/* Respondent Light: ascent 0,570 em, descent 0,700 em, x-height 0,21 em.
   Naturalna interlinia to 1,27 em, wiec przy line-height:1 ogony wychodza
   0,135 em pod pudelko wiersza. Dlatego kazdy blok pisany ma zapas u dolu
   (--zapas-pisany) i nigdy nie wchodzi na nastepny element. */
/* Poppins hostowany u siebie (licencja OFL): bez wysylania IP goscia do Google
   i bez blokujacego CSS z obcej domeny. Podzbiory latin i latin-ext (polskie znaki). */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/poppins/poppins-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/poppins/poppins-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins/poppins-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/poppins/poppins-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins/poppins-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/poppins/poppins-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins/poppins-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/poppins/poppins-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins/poppins-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/poppins/poppins-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Zastepczy Arial o metrykach Poppinsa: tekst nie przeskakuje, gdy dociaga sie font. */
@font-face {
  font-family: "Poppins Zastepczy";
  src: local("Arial"), local("Helvetica");
  ascent-override: 93.62%; descent-override: 31.21%; line-gap-override: 8.92%; size-adjust: 112.16%;
}

@font-face {
  font-family: "Respondent Light";
  /* UWAGA: plik zrodlowy ma w nazwie PERSONAL_USE_ONLY.
     Przed publikacja trzeba kupic licencje webfont u autora (Mans Greback). */
  src: url("../fonts/RespondentLight.woff2") format("woff2");
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: "Respondent Medium";
  src: url("../fonts/RespondentMedium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* --- 2. Reset i baza ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  color: var(--granat);
  background: var(--biel);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--granat-2); }

h1, h2, h3, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
  border-radius: 6px;
}

.tylko-dla-czytnika {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.do-tresci {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 60; background: var(--granat); color: var(--biel);
  padding: 12px 22px; border-radius: 0 0 14px 14px; font-size: 15px;
}
.do-tresci:focus { transform: translate(-50%, 0); color: var(--biel); }

/* --- 3. Typografia ------------------------------------------------------ */

.pisane {
  font-family: var(--font-pisany);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  padding-bottom: .14em;      /* zapas na ogony, patrz komentarz przy @font-face */
}
.pisane--blok { display: block; }
/* W naglowkach pisane ZAWSZE stoi we wlasnym wierszu pod linia Poppinsa
   (jedna zasada dla calej strony; w srodku wiersza wisialo pod linia pisma). */
.h1 .pisane, .h2 .pisane { display: block; margin-top: .06em; }

/* nadtytul blizej naglowka (Kamila: „mniejszy odstep”); ogon „Z” schodzi nisko, wiec nie ciasniej niz -.22em */
.nadtytul + .h2, .nadtytul + .h1 { margin-top: -.22em; }
.nadtytul {
  font-family: var(--font-pisany);
  font-weight: 400;
  /* ten sam stopien co pismo pod naglowkiem h2 (.h2 .pisane): jedna wielkosc odrecznych napisow */
  font-size: clamp(40px, 5.69vw, 99px);
  line-height: 1;
  padding-bottom: .14em;
  color: var(--granat-2);
}

.nadtytul--dlugi {
  /* 12,87 em szerokosci: przy 390 px musi zejsc do 26 px, moze sie zlamac */
  font-size: clamp(24px, 3.44vw, 60px);
  line-height: 1.27;
  padding-bottom: 0;
}

.h1 {
  font-weight: 600;
  font-size: clamp(32px, 4.37vw, 76px);
  line-height: 1.12;
  letter-spacing: -.02em;
}
.h1 .pisane { font-size: clamp(40px, 7.14vw, 124px); line-height: 1; }

.h2 {
  font-weight: 600;
  font-size: clamp(27px, 3.17vw, 55px);
  line-height: 1.2;
}
.h2 .pisane { font-size: clamp(46px, 5.69vw, 99px); }

/* rowne wiersze w naglowkach, bez wiszacego ostatniego slowa w akapitach */
.h1, .h2, h3 { text-wrap: balance; }
p, li, dd, blockquote { text-wrap: pretty; }

.lead { font-size: clamp(17px, 1.32vw, 23px); line-height: 1.5; color: var(--tekst-2); }
/* wyroznienie w tekscie pomocniczym: granat, nie tylko grubszy szary */
p b, li b, dd b, blockquote b { font-weight: 600; color: var(--b); }
/* kazdy kontener z ciemnym tlem: jasne pogrubienia i jasna obwodka fokusu */
.cytat, .film__przycisk, .kafel-imprezy, .dron, .stopka, .stopka-mala,
.panel-kontakt, .mozaika figcaption, .ocena--wyroznienie, .karta-zaproszenie, .hero-podstrona__foto,
.imprezy-hero__foto { --b: var(--biel); --fokus: var(--pudrowy); }
.cytat--jasny, .karta-zaproszenie--kosc, .stopka__karta { --b: var(--granat); --fokus: var(--granat-2); }
.opis { font-size: clamp(16px, 1.19vw, 21px); line-height: 1.55; color: var(--tekst-2); }
.opis-maly { font-size: 15px; line-height: 1.55; color: var(--tekst-2); }

/* --- 4. Szkielet strony -------------------------------------------------- */

.strona {
  width: 100%;
  background: var(--biel);
  position: relative;
  z-index: 0;
  overflow-x: clip;            /* emblematy ucinaja sie dopiero na brzegu ekranu */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* kolumna tresci: srodek ekranu, do --maks, z marginesem po bokach */
.sekcja, .hero, .menu-glowa, .ryby, .karta-kategorie, .menu-dol, .imprezy-hero {
  width: 100%;
  max-width: var(--maks);
  margin-inline: auto;
  padding-inline: var(--margines);
}
.sekcja { margin-top: var(--rytm); }
/* elementy z wlasnym marginesem bocznym zamiast paddingu */
.zapytanie, .stopka__karta { width: calc(100% - 2 * var(--margines)); max-width: calc(var(--maks) - 2 * var(--margines)); margin-inline: auto; }
.stopka__dol { width: calc(100% - 2 * clamp(16px, 5.9vw, 102px)); max-width: calc(var(--maks) - 2 * clamp(16px, 5.9vw, 102px)); margin-inline: auto; }

/* Element siatki z aspect-ratio nie rozciaga sie do kolumny: jego szerokosc
   liczy sie z proporcji. Gdy tresc podbije wysokosc (karta godzin na zdjeciu),
   proporcja przelicza ja na szerokosc i pudelko wjezdza na sasiednia kolumne
   (przy 1024 px zdjecie sali mialo 583 px w kolumnie 453 px i ucinalo oceny).
   Dlatego kazdy taki element dostaje jawne 100% szerokosci komorki. */
.hero__foto, .godziny__foto, .karta-powod, .film__przycisk,
.kafel-imprezy, .galeria-3 > div, .imprezy-hero__foto { width: 100%; min-width: 0; }

/* kotwice nie chowaja sie pod przyklejonym naglowkiem */
[id] { scroll-margin-top: calc(var(--wys-naglowka, 80px) + 16px); }

/* Naglowek sekcji: tytul i opis w jednym rzedzie, opis przy dolnej linii tytulu.
   Wczesniej flex z space-between: przy 1024 px tytul lamal sie na trzy wiersze,
   a opis odjezdzal pod prawa krawedz. Teraz siatka, w ktorej opis ma stala
   szerokosc (38 znakow), a przy ciasnym ekranie schodzi pod tytul. */
.naglowek-sekcji {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(auto, 38ch);
  align-items: end;
  column-gap: clamp(32px, 5vw, 92px);
  row-gap: 16px;
}
.naglowek-sekcji--gora { align-items: start; }

@media (max-width: 1100px) {
  .naglowek-sekcji { grid-template-columns: minmax(0, 1fr); }
  .naglowek-sekcji > .lead,
  .naglowek-sekcji > .opis,
  .naglowek-sekcji > .opis-maly { max-width: 62ch; }
}

/* emblemat ryby w tle */
.emblemat {
  position: absolute;
  z-index: -1;
  opacity: .07;
  pointer-events: none;
  user-select: none;
}
.emblemat--1 { left: 46%; top: -8vw; width: 56%; rotate: -14deg; }
.emblemat--2 { left: 66%; top: 3400px; width: 40%; rotate: 10deg; }
.emblemat--3 { left: -40%; top: 5200px; width: 160%; opacity: .08; }
.emblemat--m1 { left: 67%; top: -60px; width: 42%; rotate: -10deg; }
.emblemat--m2 { left: -12%; top: 2500px; width: 41%; rotate: 12deg; }
.emblemat--m3 { left: 73%; top: 4000px; width: 40%; }
.emblemat--i1 { left: -11%; top: 820px; width: 37%; rotate: -12deg; }
.emblemat--i2 { left: 76%; top: 1500px; width: 37%; opacity: .08; }
@media (max-width: 900px) { .emblemat { display: none; } }

/* --- 5. Przyciski ------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--granat);
  color: var(--biel);
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn:hover { background: var(--granat-2); color: var(--biel); }
.btn svg { flex-shrink: 0; }

.btn--obrys { background: transparent; color: var(--granat); border: 1px solid var(--granat); }
.btn--obrys:hover { background: var(--granat); color: var(--biel); }

.btn--bialy { background: var(--biel); color: var(--granat); font-weight: 500; }
.btn--bialy:hover { background: var(--pudrowy); color: var(--granat); }

.btn--blok { display: flex; width: 100%; }
.btn--duzy { min-height: 54px; font-size: 17px; }

/* przycisk z kolkiem na ikone po prawej */
.btn--kolko { padding-right: 8px; gap: 18px; }
.btn__kolko {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--pudrowy); color: var(--granat);
  display: grid; place-items: center;
}
.btn--bialy .btn__kolko { background: var(--granat); color: var(--biel); }

/* --- 6. Naglowek strony ------------------------------------------------- */

/* Przyklejony naglowek: telefon i menu zawsze pod reka. Po zjechaniu w dol
   robi sie nizszy i dostaje biale tlo (klasa z assets/js/strona.js). */
.naglowek {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: clamp(18px, 2.9vw, 51px) var(--bok) clamp(10px, 1.2vw, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.naglowek--przyklejony {
  padding-top: 10px;
  padding-bottom: 10px;
  background: #fffffff2;
  box-shadow: 0 1px 0 var(--linia), 0 10px 28px #1626600f;
}

.naglowek__logo img { width: clamp(158px, 16.3vw, 283px); height: auto; transition: width .25s ease; }
.naglowek--przyklejony .naglowek__logo img { width: clamp(140px, 11.5vw, 202px); }

.naglowek__nawigacja {
  display: flex;
  gap: 8px;
  background: var(--kosc);
  padding: 5px;
  border-radius: 999px;
}
.naglowek__nawigacja a {
  min-width: clamp(92px, 8.7vw, 152px);
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(14px, 1.06vw, 18px);
  white-space: nowrap;
  transition: background .18s ease;
}
.naglowek__nawigacja a[aria-current="page"] { background: var(--biel); }
.naglowek__nawigacja a:hover { background: #ffffffb3; color: var(--granat); }

.naglowek__prawa { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.naglowek__telefon { padding-left: 24px; }
.naglowek__menu { min-height: 48px; padding: 8px 22px; white-space: nowrap; }
.naglowek__telefon .btn__kolko { width: 34px; height: 34px; }

.naglowek__hamburger {
  display: none;
  width: 48px; height: 48px;
  border: 1px solid var(--obramowanie);
  border-radius: 14px;
  background: var(--biel);
  place-items: center;
  cursor: pointer;
}
.naglowek__hamburger[aria-expanded="true"] { background: var(--granat); color: var(--biel); }
.naglowek__hamburger .ikona-zamknij { display: none; }
.naglowek__hamburger[aria-expanded="true"] .ikona-menu { display: none; }
.naglowek__hamburger[aria-expanded="true"] .ikona-zamknij { display: block; }

@media (max-width: 1100px) {
  .naglowek__nawigacja a { min-width: 0; }
  /* miejsce na „Zobacz menu”: telefon jako samo kolko z ikona */
  .naglowek__telefon span:not(.btn__kolko) { display: none; }
  .naglowek__telefon { padding: 0 7px; gap: 0; min-width: 48px; }
  .naglowek__menu { padding-inline: 18px; }
}
@media (max-width: 560px) { .naglowek__menu { display: none; } }
@media (max-width: 900px) {
  .naglowek__hamburger { display: grid; }
  .naglowek__nawigacja {
    position: absolute;
    left: var(--bok); right: var(--bok); top: calc(100% + 8px);
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border-radius: var(--r-sredni);
    box-shadow: 0 24px 48px #16266026;
    display: none;
  }
  .naglowek__nawigacja[data-otwarte="tak"] { display: flex; }
  .naglowek__nawigacja a { height: 52px; justify-content: flex-start; padding: 0 18px; font-size: 17px; }
  .naglowek__telefon span:not(.btn__kolko) { display: none; }
  .naglowek__telefon { padding: 0 7px; gap: 0; min-width: 48px; }
}
@media (max-width: 420px) {
  .naglowek__logo img, .naglowek--przyklejony .naglowek__logo img { width: 140px; }
}

/* --- 7. Hero strony glownej --------------------------------------------- */

/* Pierwszy ekran odpowiada na trzy pytania, z ktorymi ktos wchodzi na strone
   restauracji: co zjem, kiedy otwarte, jak dojechac. Dwie akcje obok siebie.
   Talerz ma wlasne pole pod tekstem i zachodzi na zdjecie, a zdjecie rosnie
   do wysokosci kolumny obok - dol obu kolumn zawsze w jednej linii. */
.hero { margin-top: clamp(16px, 2.6vw, 46px); padding-inline: var(--margines); }
.hero__tytul { max-width: 1000px; }   /* "Jeziorem Sominskim" ma 7,59 em, przy 124 px = 941 px */

.hero__dol {
  margin-top: clamp(20px, 3vw, 39px);
  display: grid;
  grid-template-columns: minmax(0, 452fr) minmax(0, 772fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "tekst  foto"
    "talerz foto";
  column-gap: clamp(24px, 3.2vw, 55px);
}

.hero__tekst { grid-area: tekst; display: flex; flex-direction: column; gap: clamp(18px, 1.8vw, 30px); }
.hero__tekst .lead { max-width: 32ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__cta .btn { flex: 1 1 180px; }
.hero__cta .btn--obrys svg { margin-right: -2px; }

.hero__info {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: clamp(14px, 1.4vw, 23px);
  border-top: 1px solid var(--linia);
  font-size: 15px; line-height: 1.5; color: var(--tekst-2);
}
.hero__info li { display: flex; gap: 12px; align-items: flex-start; }
.hero__info svg { flex-shrink: 0; margin-top: 2px; color: var(--granat); }
.hero__info b { font-weight: 500; color: var(--granat); white-space: nowrap; }
.hero__info a { color: var(--granat); font-weight: 500; text-decoration: underline; text-decoration-color: var(--granat-3); text-underline-offset: 3px; }

.hero__talerz {
  grid-area: talerz;
  align-self: end;
  justify-self: start;
  width: min(124%, 26vw, 600px);      /* szerszy niz kolumna: zachodzi na zdjecie */
  margin-top: clamp(12px, 2vw, 32px);
  rotate: -6deg;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 24px 32px #16266038);
}

.hero__foto {
  grid-area: foto;
  position: relative;
  border-radius: var(--r-duzy);
  overflow: hidden;
  background: var(--pudrowy);
  min-height: clamp(340px, 35vw, 608px);
}
.hero__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.zaslona-dol {
  position: absolute; inset: auto 0 0 0;
  height: 53%;
  background: linear-gradient(to top, #162660b3, #16266000);
  pointer-events: none;
}
.zaslona-dol--mocna { background: linear-gradient(to top, #162660d9, #16266000); }

.plakietka-opinii {
  position: absolute; right: 13px; bottom: 13px;
  width: clamp(168px, 15.1vw, 262px);
  background: var(--biel);
  border-radius: var(--r-duzy);
  padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.plakietka-opinii__liczba {
  width: 100%;
  aspect-ratio: 202 / 150;
  background: var(--pudrowy);
  border-radius: var(--r-sredni);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.plakietka-opinii__liczba b { font-size: clamp(34px, 3.17vw, 55px); font-weight: 600; line-height: 1; }
.plakietka-opinii__liczba span { font-size: clamp(13px, .93vw, 16px); color: var(--tekst-2); }
.plakietka-opinii__prawa { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gwiazdki { display: flex; gap: 4px; }
.gwiazdki svg { width: 16px; height: 15px; }
.plakietka-opinii__wyroznienie { font-size: clamp(13px, .86vw, 15px); text-align: center; }

@media (max-width: 900px) {
  .hero__dol {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "tekst" "talerz" "foto";
  }
  .hero__tekst .lead { max-width: none; }
  /* talerz wchodzi na gorny rog zdjecia zamiast stac osobno na pol ekranu */
  /* obrot o 4 stopnie podnosi rog talerza o ~7% jego szerokosci - stad odstep od tekstu */
  .hero__talerz { justify-self: end; width: min(56%, 300px); margin: 22px 3% -15% 0; rotate: -4deg; }
  .hero__foto { min-height: 0; aspect-ratio: 4 / 3; }
  .plakietka-opinii {
    right: 10px; bottom: 10px; width: auto;
    flex-direction: row; align-items: center; gap: 12px;
    padding: 8px 14px 8px 8px; border-radius: 18px;
  }
  .plakietka-opinii__liczba { width: auto; aspect-ratio: auto; padding: 8px 12px; border-radius: 12px; }
  .plakietka-opinii__liczba b { font-size: 24px; }
  .plakietka-opinii__prawa { align-items: flex-start; gap: 4px; }
  .plakietka-opinii__wyroznienie { text-align: left; max-width: 13ch; font-size: 13px; }
}

/* --- 8. Karty "O nas" --------------------------------------------------- */

.karty-3 {
  margin-top: clamp(32px, 4.2vw, 74px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
.karta-powod {
  background: var(--kosc);
  border-radius: var(--r-duzy);
  display: flex; flex-direction: column;
  overflow: clip;
  aspect-ratio: 410 / 448;
}
/* numer i tytul w jednym wierszu; gdy karta jest waska, tytul schodzi
   pod numer w calosci, zamiast lamac sie na dwa wiersze po prawej */
.karta-powod__glowa {
  min-height: 66px;
  padding: 12px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 12px; row-gap: 2px;
  font-size: clamp(15px, 1.26vw, 22px);
}
.karta-powod__numer { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.karta-powod__tytul { white-space: nowrap; }
.karta-powod__foto { flex: 1; min-height: 0; border-radius: var(--r-sredni); overflow: hidden; }
.karta-powod__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1240px) {
  /* ponizej tej szerokosci najdluzszy tytul ("Smazymy, gdy zamowisz") schodzi pod numer;
     wtedy schodza wszystkie trzy, zeby naglowki w rzedzie mialy te sama wysokosc */
  .karta-powod__glowa { flex-direction: column; align-items: flex-start; justify-content: center; }
}
@media (max-width: 900px) {
  .karty-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karta-powod { aspect-ratio: 360 / 400; }
}
@media (max-width: 560px) {
  .karty-3 { grid-template-columns: 1fr; }
  .karta-powod { aspect-ratio: 420 / 330; }
  .karta-powod__glowa { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* --- 9. Sekcja wideo i rolek ------------------------------------------- */

/* Desktop: piec rolek 9:16 w jednym rzedzie. Ponizej 900 px: jeden pasek
   przesuwany palcem (przewija sie sam pasek, nie strona). */
.wideo__uklad { margin-top: clamp(28px, 3.4vw, 60px); }
.rolki__glowa {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
  gap: 18px 30px;
}
.rolki__tekst { flex: 1 1 300px; }
.rolki__tekst h3 { font-size: clamp(20px, 1.72vw, 30px); font-weight: 600; line-height: 1.3; }
.rolki__tekst p { margin-top: 12px; max-width: 52ch; font-size: clamp(16px, 1.1vw, 18px); line-height: 1.6; color: var(--tekst-2); }
.rolki__spolecznosci { display: flex; flex-direction: column; gap: 10px; }
.rolki__spolecznosci .btn { min-height: 46px; padding: 8px 22px; font-size: 15px; justify-content: flex-start; }

.filmy {
  margin-top: clamp(22px, 2.2vw, 36px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 23px);
}
.film__przycisk {
  container-type: inline-size;
  position: relative; display: block; width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-duzy); overflow: clip;
  background: var(--granat);
  color: var(--biel); text-align: left;
}
.film__przycisk > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.film__przycisk:hover > img { scale: 1.04; }
.film__play {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%;
  width: clamp(52px, 26cqw, 76px); aspect-ratio: 1;
  border-radius: 50%; background: var(--biel); color: var(--granat);
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  transition: scale .18s ease;
}
.film__przycisk:hover .film__play { scale: 1.08; }
.film__podpis {
  position: absolute; left: 8cqw; right: 8cqw; bottom: 8cqw;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.film__czas {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .92); color: var(--granat);
  font-size: 14px; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
}
.film__tytul { font-size: clamp(15px, 8.4cqw, 21px); font-weight: 600; line-height: 1.25; text-wrap: balance; }

@media (max-width: 900px) {
  .filmy {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
    padding-bottom: 10px;
  }
  .film { scroll-snap-align: start; }
}
@media (max-width: 560px) { .filmy { grid-auto-columns: 64%; } }
@media (max-width: 640px) {
  .rolki__spolecznosci { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .rolki__spolecznosci .btn { flex: 1 1 200px; justify-content: center; }
}

/* Podpis na zdjeciu = KOLUMNA flex przy dolnej krawedzi. Etykieta i napis
   pisany nie maja wlasnych odleglosci od dolu, wiec nie moga na siebie wejsc
   (na imprezach przy 1024 px napis wchodzil w dwuwierszowa etykiete). */
.podpis-zdjecia {
  position: absolute;
  left: clamp(16px, 2vw, 34px); right: 16px; bottom: clamp(12px, 1.6vw, 28px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  pointer-events: none;
}
.etykieta-biala {
  background: var(--biel); color: var(--granat);
  font-size: clamp(14px, .93vw, 16px); font-weight: 600; font-style: italic;
  padding: 6px 14px; border-radius: 10px;
  max-width: 100%;
}
.podpis-pisany {
  font-family: var(--font-pisany); font-weight: 400;
  font-size: clamp(36px, 3.84vw, 67px);
  line-height: 1; padding-bottom: .14em;
  color: var(--biel);
  rotate: -3deg; transform-origin: left center;
  white-space: nowrap;
  /* obrot o 3 stopnie unosi prawy koniec o sin(3°) = 5,2% szerokosci napisu;
     przy napisach do ~6 em to 0,31 em - tyle zapasu nad napisem */
  margin-top: .3em;
}


@media (max-width: 900px) { .podpis-pisany { font-size: clamp(30px, 6vw, 44px); } }
@media (max-width: 560px) { .podpis-pisany { font-size: clamp(32px, 9vw, 44px); } }

/* placeholder rolki / zdjecia */
.placeholder {
  background: var(--pudrowy);
  border: 2px dashed var(--granat-3);
  border-radius: 22px;
  padding: 18px;
  display: flex; flex-direction: column;
  color: var(--granat);
}
.placeholder__etykieta { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--granat-2); }
.placeholder__format { font-size: 13px; color: var(--tekst-2); margin-top: 4px; }
.placeholder__kolko {
  margin: auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--biel); display: grid; place-items: center;
}
.placeholder__tytul { font-size: clamp(13px, 1.06vw, 18px); font-weight: 600; line-height: 1.3; }

/* --- 10. Godziny i oceny ------------------------------------------------ */

.godziny__uklad {
  margin-top: clamp(32px, 4vw, 69px);
  display: grid;
  grid-template-columns: minmax(0, 670fr) minmax(0, 574fr);
  gap: clamp(20px, 1.9vw, 32px);
  align-items: stretch;
}

/* Karta godzin lezy na zdjeciu, ale w TEJ SAMEJ komorce siatki, a nie absolute.
   Komorka rosnie do wysokosci karty, wiec karta nie moze wystac poza zdjecie
   (przy 1024 px wystawala 34 px nad gorna krawedz).
   overflow: clip, nie hidden - hidden robi z pudelka kontener przewijania
   i wtedy aspect-ratio przestaje rosnac razem z trescia. */
.godziny__foto {
  position: relative;
  border-radius: var(--r-duzy);
  overflow: clip;
  background: var(--pudrowy);
  min-height: clamp(320px, 34vw, 560px);
}
.godziny__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.karta-godzin {
  background: var(--biel);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-duzy);
  padding: 24px 26px 26px;
  display: flex; flex-direction: column; gap: 20px;
}
.karta-godzin__glowa { display: flex; gap: 14px; align-items: center; }
.kolko-ikony {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; background: var(--granat); color: var(--biel);
  display: grid; place-items: center;
}
.pigulka {
  flex: 1; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; background: var(--pudrowy);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(14px, 1.06vw, 18px); text-align: center;
}
.karta-godzin__wiersze { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.karta-godzin__wiersze dt { font-size: 15px; color: var(--tekst-2); }
.karta-godzin__wiersze dd { margin: 0; font-size: clamp(19px, 1.59vw, 28px); font-weight: 500; }
.karta-godzin__wiersze div + div { margin-top: 6px; }
.karta-godzin__stopka { border-top: 1px solid var(--obramowanie); padding-top: 16px; }

/* prawa kolumna na cala wysokosc rzedu: oceny u gory, link przy dolnej linii zdjecia */
.oceny-kolumna { display: flex; flex-direction: column; gap: 22px; }
.karta-ocen {
  background: var(--biel);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-duzy);
  padding: 26px;
  display: flex; flex-direction: column; gap: 16px;
}
.karta-ocen__wiersz { display: flex; justify-content: space-between; gap: 16px; font-size: clamp(15px, 1.06vw, 18px); }
.pasek { height: 20px; border-radius: 999px; background: var(--kosc); overflow: hidden; }
.pasek span { display: block; height: 100%; border-radius: 999px; background: var(--granat); }
.pasek--fb span { background: var(--granat-3); }
.link-strzalka {
  min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: clamp(16px, 1.19vw, 21px);
  border-top: 1px solid var(--linia); padding-top: 16px;
}
.link-strzalka .btn__kolko { width: 36px; height: 36px; background: var(--granat); color: var(--biel); }
.link-strzalka:hover .btn__kolko { background: var(--granat-2); }

@media (max-width: 1000px) {
  .godziny__uklad { grid-template-columns: minmax(0, 1fr); }
  .godziny__foto { min-height: 0; aspect-ratio: 16 / 10; }
}

/* --- 11. Opinie -------------------------------------------------------- */

.opinie__glowa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(32px, 5vw, 92px);
  row-gap: 28px;
}
.opinie__glowa .opis { margin-top: 18px; max-width: 52ch; }

/* plakietka oceny: znak Google + liczba + gwiazdki, obok pozostale serwisy */
.ocena-google {
  background: var(--biel);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-duzy);
  padding: clamp(20px, 1.8vw, 30px) clamp(22px, 2vw, 34px);
  box-shadow: 0 18px 40px -28px rgba(27, 38, 89, .35);
  display: flex; flex-direction: column; gap: 10px;
  min-width: 280px;
}
.ocena-google__gora { display: flex; align-items: center; gap: 16px; }
.ocena-google__znak {
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%; background: var(--biel);
  border: 1px solid var(--obramowanie);
  display: grid; place-items: center;
}
.ocena-google__liczba { font-size: clamp(38px, 3.2vw, 56px); font-weight: 600; line-height: 1; color: var(--granat); }
.ocena-google__liczba span { font-size: .4em; font-weight: 400; color: var(--tekst-2); }
.ocena-google .gwiazdki { margin-top: 6px; color: #F4B400; }
.ocena-google__opis { font-size: 16px; color: var(--tekst-2); }
.ocena-google__opis b { color: var(--granat); }
.ocena-google__inne {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1px solid var(--obramowanie);
  font-size: 15px; color: var(--tekst-2);
}

/* trzy prawdziwe opinie z Google */
.opinie__siatka {
  margin-top: clamp(32px, 3.6vw, 60px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
.opinie__siatka .cytat { padding: clamp(24px, 2.2vw, 34px); border-radius: var(--r-duzy); justify-content: space-between; gap: 22px; }
.opinie__siatka .cytat blockquote { font-size: clamp(17px, 1.32vw, 22px); line-height: 1.5; flex: 1; }
.opinie__siatka .cytat .gwiazdki { color: #F4B400; }
.cytat figcaption { display: flex; align-items: center; gap: 10px; }
.znak-tlo { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--biel); display: grid; place-items: center; }
.cytat--jasny figcaption .znak-marki { flex-shrink: 0; }

/* pas z zacheta do opinii */
.opinie__zacheta {
  margin-top: clamp(14px, 1.4vw, 24px);
  display: flex; align-items: center; gap: clamp(16px, 1.6vw, 26px);
  padding: clamp(18px, 1.6vw, 26px) clamp(20px, 2vw, 34px);
  border: 1px solid var(--obramowanie);
  border-radius: var(--r-duzy);
  background: var(--biel);
}
.opinie__zacheta p { flex: 1; font-size: clamp(16px, 1.19vw, 21px); line-height: 1.45; color: var(--tekst-2); }
.btn--google { flex-shrink: 0; }
.btn--google__znak {
  width: 30px; height: 30px; margin-left: -8px; flex-shrink: 0;
  border-radius: 50%; background: var(--biel);
  display: grid; place-items: center;
}

.cytat {
  background: var(--granat); color: var(--biel);
  border-radius: var(--r-sredni);
  padding: 24px 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.cytat blockquote { font-size: 16px; line-height: 1.5; margin: 0; }
.cytat hr { height: 1px; border: 0; background: #ffffff55; width: 100%; margin: 0; }
.cytat figcaption { font-size: 14px; color: var(--pudrowy); }

@media (max-width: 1100px) {
  .opinie__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opinie__siatka .cytat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .opinie__glowa { grid-template-columns: minmax(0, 1fr); }
  .ocena-google { min-width: 0; justify-self: start; }
}
@media (max-width: 760px) {
  .opinie__siatka { grid-template-columns: minmax(0, 1fr); }
  .opinie__zacheta { flex-direction: column; align-items: flex-start; }
  .btn--google { align-self: stretch; justify-content: center; }
}

/* --- 12. Karty dan (polecane na glownej) -------------------------------- */

.dania-siatka {
  margin-top: clamp(28px, 3.4vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 23px);
}
.karta-dania {
  background: var(--kosc);
  border-radius: var(--r-maly);
  overflow: hidden;
  display: flex; flex-direction: column;
  container-type: inline-size;
}
.karta-dania__foto { aspect-ratio: 411 / 280; }
.karta-dania__foto img { width: 100%; height: 100%; object-fit: cover; }
.karta-dania__opis {
  flex: 1;
  padding: 22px 26px 26px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.karta-dania__nazwa { font-size: clamp(17px, 1.32vw, 23px); font-weight: 600; }
.karta-dania__gramatura { font-size: 15px; color: var(--tekst-2); margin-top: 4px; }
.karta-dania__cena { font-size: clamp(17px, 1.32vw, 23px); font-weight: 500; white-space: nowrap; }

/* waska karta: cena pod opisem, przy dolnej krawedzi - rowno w calym rzedzie */
@container (max-width: 320px) {
  .karta-dania__opis { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 20px; }
  .karta-dania__cena { margin-top: auto; }
}

.pod-siatka {
  margin-top: 30px;
  display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap;
}
.pod-siatka__lista { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tekst-2); }
.pod-siatka__lista svg { flex-shrink: 0; }

@media (max-width: 1000px) { .dania-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dania-siatka { grid-template-columns: 1fr; } }

/* --- 13. Imprezy na glownej -------------------------------------------- */

.zaproszenie { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.zaproszenie .lead { max-width: 60ch; }

.imprezy-kafle {
  margin-top: clamp(32px, 4vw, 69px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.kafel-imprezy {
  position: relative;
  border-radius: var(--r-duzy);
  overflow: hidden;
  background: var(--granat);
  aspect-ratio: 626 / 420;
  display: block;
}
.kafel-imprezy > img { width: 100%; height: 100%; object-fit: cover; transition: scale .4s ease; }
.kafel-imprezy:hover > img { scale: 1.03; }
.kafel-imprezy .zaslona-dol { height: 55%; background: linear-gradient(to top, #162660e6, #16266000); }
.kafel-imprezy__podpis {
  position: absolute; left: clamp(22px, 3.3vw, 57px); bottom: clamp(20px, 2.5vw, 44px);
  display: flex; align-items: center; gap: 16px;
  color: var(--biel);
  font-family: var(--font-pisany); font-weight: 400;
  font-size: clamp(34px, 3.97vw, 69px);
  line-height: 1.02;   /* oba podpisy nie maja ogonow w pierwszym wierszu, wiec mozna ciasno (uwaga Kamili) */
}
.kafel-imprezy__podpis svg { flex-shrink: 0; }

@media (max-width: 760px) { .imprezy-kafle { grid-template-columns: 1fr; } }

/* --- 14. Dojazd: haslo i dron --------------------------------------------- */

/* Dawny osobny pas CTA ("Do Somin nie wpada sie przypadkiem" + 8 / 60 + "Jak dojechac")
   wszedl tutaj jako wstep do dojazdu. Liczby powtarzaly hero i imprezy, a przycisk
   prowadzil do stopki, podczas gdy linia wyzej byla juz nawigacja do Map.
   Teraz: haslo, miejsce, jedna akcja. */
.sekcja-dojazd { margin-top: var(--rytm); }
.sekcja-dojazd > .cta-haslo { margin-top: 0; margin-bottom: clamp(28px, 3.4vw, 60px); }

.cta-haslo {
  margin-inline: auto;
  max-width: calc(1000px + 2 * var(--margines));
  text-align: center;
  font-weight: 500;
  font-size: clamp(24px, 2.91vw, 51px);
  line-height: 1.3;
}
.cta-haslo .pisane { font-size: clamp(34px, 5.82vw, 101px); line-height: 1.15; }

.dron {
  position: relative;
  overflow: hidden;
  background: var(--granat);
  min-height: clamp(420px, 45vw, 782px);
  display: grid;
}
.dron > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.dron__zaslona { position: absolute; inset: 0; background: linear-gradient(to right, #162660e6 0%, #162660a6 42%, #16266000 60%); }
.dron__tresc {
  position: relative;
  padding: clamp(48px, 9.9vw, 172px) var(--bok);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px;
  color: var(--biel);
  max-width: calc(var(--bok) + 900px);   /* napis pisany ma 6,34 em i zostaje w jednym wierszu */
}
.dron__pisane {
  font-family: var(--font-pisany); font-weight: 400;
  font-size: clamp(46px, 7.27vw, 126px);
  line-height: 1; padding-bottom: .14em;
  rotate: -3deg;
  white-space: nowrap;    /* zmierzone: miesci sie w jednym wierszu od 390 px w gore */
}
.dron__tresc .etykieta-adres {
  background: var(--biel); color: var(--granat);
  font-size: clamp(14px, 1.12vw, 20px); font-weight: 600; font-style: italic;
  padding: 9px 20px; border-radius: 10px;
}
.dron__tresc p:not([class]) { max-width: 42ch; font-size: clamp(16px, 1.19vw, 21px); line-height: 1.55; color: var(--pudrowy); }

@media (max-width: 900px) {
  .dron__zaslona { background: linear-gradient(to top, #162660f2 0%, #162660e6 62%, #162660b3 100%); }
  .dron__tresc { max-width: none; }
}

/* --- 16. Stopka duza (strona glowna) ----------------------------------- */

.stopka { margin-top: var(--rytm); background: var(--granat); color: var(--biel); }
main:has(.sekcja-dojazd) + .stopka { margin-top: 0; }   /* dron przechodzi prosto w pas kosci */
/* pas kosci = tyle, ile karta na niego wchodzi, plus waski oddech pod zdjeciem drona
   (wczesniej 270 px pasa i 132 px zakladki zostawialy pusty pas kosci nad karta) */
.stopka__pas-kosc { height: calc(clamp(56px, 7.6vw, 132px) + clamp(18px, 2.2vw, 38px)); background: var(--kosc); }

.stopka__karta {
  margin: calc(-1 * clamp(56px, 7.6vw, 132px)) var(--margines) 0;
  background: var(--biel);
  color: var(--granat);
  border-radius: var(--r-duzy);
  padding: clamp(32px, 4vw, 64px) clamp(20px, 3vw, 55px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.6vw, 46px);
  text-align: center;
}
.stopka__karta p:not([class]) { max-width: 1000px; font-size: clamp(18px, 1.85vw, 32px); line-height: 1.45; }
.stopka__karta .pisane { font-size: clamp(44px, 5.16vw, 90px); line-height: 1.05; margin-bottom: 8px; }

.stopka__kolumny {
  padding: clamp(48px, 9.5vw, 164px) var(--bok) 0;
  max-width: calc(var(--maks) + 2 * (var(--bok) - var(--margines)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 2.6vw, 46px);
}
.stopka__kolumny a { color: var(--biel); }
.stopka__kolumny a:hover { color: var(--pudrowy); }
.stopka__marka { display: flex; flex-direction: column; gap: 18px; }
.stopka__marka img { width: clamp(190px, 16.5vw, 288px); }
.stopka__marka p:not([class]) { font-size: 15px; line-height: 1.6; color: var(--pudrowy); }
.stopka__kolumna { display: flex; flex-direction: column; gap: 18px; font-size: 15px; }
.stopka__kolumna h2, .stopka__kolumna h3 { font-size: 17px; font-weight: 500; }
/* odstepy miedzy linkami (wczesniej lista byla sklejona w jeden blok) */
.stopka__kolumna ul { display: flex; flex-direction: column; gap: 4px; }
.stopka__kolumna li { padding-block: 5px; }
.stopka__kolumna li a { display: inline-block; padding-block: 5px; margin-block: -5px; }
.stopka__kolumna li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; min-width: 0; }
.stopka__kolumna li svg { flex-shrink: 0; margin-top: 2px; }
.stopka__kolumna li.wciecie { padding-left: 28px; }
/* dlugi adres email nie wchodzi na sasiednia kolumne */
.stopka__kolumna li a, .stopka__kolumna li span { overflow-wrap: break-word; }
.stopka__kolumna .wyroznione { color: var(--pudrowy); }

.stopka__dol {
  margin-top: clamp(40px, 6.2vw, 108px); margin-bottom: clamp(32px, 4.6vw, 80px);
  background: var(--biel); color: var(--granat);
  border-radius: 999px;
  min-height: 97px;
  padding: 18px clamp(24px, 3.6vw, 63px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: clamp(15px, 1.19vw, 21px);
}
.stopka__dol a { color: var(--tekst-2); font-size: 15px; }
.stopka__dol a:hover { color: var(--granat); }

@media (max-width: 1100px) {
  .stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
}
@media (max-width: 900px) {
  .stopka__dol { border-radius: var(--r-duzy); justify-content: center; text-align: center; }
  .stopka__dol-linki { justify-content: center; }
}
@media (max-width: 560px) {
  .stopka__kolumny { grid-template-columns: minmax(0, 1fr); }
}

/* --- 17. Stopka mala (menu, imprezy) ---------------------------------- */

.stopka-mala {
  margin-top: var(--rytm);
  background: var(--granat); color: var(--biel);
  padding: clamp(36px, 3.7vw, 64px) var(--bok) clamp(32px, 3.2vw, 55px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
.stopka-mala img { width: clamp(190px, 16.5vw, 288px); }
.stopka-mala__dane, .stopka-mala__prawa { font-size: 15px; color: var(--pudrowy); line-height: 1.6; }
.stopka-mala a { color: var(--pudrowy); }
.stopka-mala a:hover { color: var(--biel); }
.stopka-mala__lewa { display: flex; flex-direction: column; gap: 16px; }

/* --- 18. Podstrona Menu ----------------------------------------------- */

.menu-glowa {
  margin-top: clamp(32px, 4.6vw, 80px);
  padding-inline: var(--margines);
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: clamp(24px, 4vw, 69px);
}
.menu-glowa__tekst .h1 { margin-top: 10px; font-size: clamp(40px, 4.76vw, 83px); line-height: 1.05; }
/* w hero obok zdjecia kolumna jest wezsza: 8,17 em („imprezy okolicznościowe") musi sie zmiescic */
.menu-glowa__tekst .nadtytul, .hero-podstrona__tekst .nadtytul:not(.nadtytul--dlugi), .imprezy-hero__tekst .nadtytul { font-size: clamp(40px, 4.4vw, 76px); }
.menu-glowa__tekst p:not([class]) { margin-top: 22px; max-width: 52ch; font-size: clamp(16px, 1.19vw, 21px); line-height: 1.6; color: var(--tekst-2); }

/* Karta „z tablicy": jasna jak reszta kart, zdjecie sezonowego dania + plakietka + zwykly tytul.
   Bez drugiego pisma odrecznego obok „nasza karta" (dwa pisma obok siebie sie gryzly). */
.karta-tablica {
  width: clamp(400px, 40vw, 640px);
  flex-shrink: 0;
  background: var(--kosc); color: var(--granat);
  border-radius: var(--r-duzy);
  padding: clamp(10px, .8vw, 14px);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(16px, 1.6vw, 26px); align-items: center;
}
.karta-tablica__foto { aspect-ratio: 1; width: 100%; border-radius: var(--r-sredni); overflow: clip; }
.karta-tablica__foto img { width: 100%; height: 100%; object-fit: cover; }
.karta-tablica__tresc { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: clamp(8px, 1vw, 18px); }
.karta-tablica .pigulka { flex: none; min-height: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.karta-tablica__tytul { font-size: clamp(20px, 1.6vw, 27px); font-weight: 600; line-height: 1.2; }
.karta-tablica p:not([class]) { font-size: clamp(15px, 1.05vw, 18px); line-height: 1.55; color: var(--tekst-2); }

.kategorie-pigulki {
  /* Przyklejone pod naglowkiem: na dlugiej karcie skok do kategorii jest zawsze
     pod reka, a podswietlenie pokazuje, gdzie jestesmy (assets/js/strona.js).
     Jeden wiersz: na telefonie zamiast pieciu rzedow pigulek przesuwany pasek. */
  position: sticky;
  top: var(--wys-naglowka, 72px);
  z-index: 30;
  margin-top: clamp(24px, 2.6vw, 46px);
  padding: 10px var(--bok);
  background: #fffffff2;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
@media (max-width: 900px) {
  .kategorie-pigulki {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--margines);
  }
  .kategorie-pigulki::-webkit-scrollbar { display: none; }
}
.kategorie-pigulki a {
  flex: 0 0 auto;
  min-height: 42px; padding: 8px 18px;
  border-radius: 999px; background: var(--kosc);
  display: flex; align-items: center;
  font-size: 15px; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.kategorie-pigulki a:hover { background: var(--granat-3); color: var(--biel); }
.kategorie-pigulki a[aria-current="true"] { background: var(--granat); color: var(--biel); }
.kategorie-pigulki a[aria-current="true"]:hover { background: var(--granat-2); }
/* skok do kategorii nie chowa tytulu pod naglowkiem i paskiem pigulek */
.ryby, .kategoria { scroll-margin-top: calc(var(--wys-naglowka, 72px) + 80px); }

.ryby { margin-top: clamp(48px, 5.95vw, 103px); padding-inline: var(--margines); }
.ryby__siatka {
  margin-top: clamp(24px, 2.6vw, 46px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.6vw, 28px);
}
.karta-ryby { background: var(--kosc); border-radius: var(--r-sredni); overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }
.karta-ryby img { width: 100%; aspect-ratio: 408 / 300; object-fit: cover; }
.karta-ryby__opis { flex: 1; padding: 20px 24px 24px; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
@container (max-width: 300px) {
  .karta-ryby__opis { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px 18px; }
  .karta-ryby__cena { margin-top: auto; }
}
.karta-ryby__nazwa { font-size: clamp(17px, 1.32vw, 23px); font-weight: 600; }
.karta-ryby__gramatura { font-size: 14px; color: var(--tekst-2); margin-top: 3px; }
.karta-ryby__cena { font-size: clamp(17px, 1.32vw, 23px); font-weight: 600; white-space: nowrap; }

@media (max-width: 1000px) { .ryby__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ryby__siatka { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .menu-glowa { flex-direction: column; align-items: stretch; }
  .karta-tablica { width: auto; max-width: 640px; }
}
/* na telefonie zdjecie nad tekstem, zeby tekst nie stal w waskiej kolumnie */
@media (max-width: 560px) {
  .karta-tablica { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .karta-tablica__foto { aspect-ratio: 16 / 9; }
  .karta-tablica__tresc { padding: 0 10px 12px; }
}

/* dwie kolumny kategorii */
.karta-kategorie {
  margin-top: clamp(56px, 7.3vw, 126px);
  padding-inline: var(--margines);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5.3vw, 92px);
  row-gap: clamp(48px, 5.95vw, 103px);
  align-items: start;
}
.kategoria + .kategoria { margin-top: 50px; }
.kategoria__opis { margin: -6px 0 12px; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--tekst-2); }
.kategoria__tytul {
  margin-bottom: 14px;
  font-weight: 600; font-size: clamp(24px, 2.38vw, 41px);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.kategoria__tytul span { font-size: 15px; font-weight: 400; color: var(--tekst-2); }

.pozycja {
  display: flex; gap: 18px; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linia);
}
.pozycja img, .pozycja .placeholder--mini {
  width: 84px; height: 84px; flex-shrink: 0;
  border-radius: 14px; object-fit: cover;
}
.pozycja__tresc { flex: 1; min-width: 0; }
.pozycja--bez-foto { padding-block: 18px; }
.pozycja__nazwa { font-size: clamp(16px, 1.19vw, 21px); font-weight: 600; }
.pozycja__opis { font-size: 14px; color: var(--tekst-2); margin-top: 3px; line-height: 1.45; }
.pozycja__cena { font-size: clamp(16px, 1.19vw, 21px); font-weight: 600; white-space: nowrap; }

.wiersz-napoju {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--linia);
  font-size: clamp(15px, 1.12vw, 20px);
}
.wiersz-napoju b { font-weight: 600; }
.wiersz-napoju .pojemnosc { font-size: 14px; font-weight: 400; color: var(--tekst-2); }

.kategoria__uwaga {
  margin-top: 40px;
  background: var(--pudrowy);
  border-radius: var(--r-sredni);
  padding: 24px 26px;
  display: flex; gap: 16px; align-items: center;
  font-size: 15px; line-height: 1.55;
}
.kategoria__uwaga svg { flex-shrink: 0; }

.kawa__glowa { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }

.placeholder--mini {
  display: grid; place-items: center; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 1.2;
  color: var(--granat-2);
  background: var(--pudrowy); border: 2px dashed var(--granat-3);
  padding: 4px;
}
.placeholder--pasek {
  border-radius: 14px; padding: 12px;
  min-height: 64px;
  align-items: center; justify-content: center; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--granat-2);
}
.placeholder--etykieta {
  border-radius: 14px; padding: 10px 16px; min-height: 84px; width: 150px;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--granat-2);
}

@media (max-width: 900px) {
  .karta-kategorie { grid-template-columns: 1fr; row-gap: clamp(40px, 6vw, 69px); }
}

/* alergeny i CTA na dole menu */
/* Dol karty: alergeny jako krotka notka, pod nia jasny pas z zaproszeniem i talerzem.
   Wczesniej dwie karty obok siebie (kosc + granat z pismem) nie pasowaly do siebie („brzydko”). */
.menu-dol { margin-top: clamp(48px, 6vw, 104px); padding-inline: var(--margines); display: flex; flex-direction: column; gap: clamp(28px, 3.4vw, 56px); }
.menu-alergeny {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 22px; border: 1px solid var(--obramowanie); border-radius: var(--r-sredni);
  font-size: 15px; line-height: 1.6; color: var(--tekst-2);
}
.menu-alergeny .kolko-ikony { width: 36px; height: 36px; }
.menu-alergeny b { color: var(--granat); }
.menu-zaproszenie {
  position: relative;
  background: var(--kosc); border-radius: var(--r-duzy);
  padding: clamp(28px, 3.6vw, 64px) clamp(24px, 4vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: center;
}
.menu-zaproszenie__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.4vw, 22px); }
.menu-zaproszenie__info { display: flex; flex-direction: column; gap: 10px; }
.menu-zaproszenie__info li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; color: var(--tekst-2); }
.menu-zaproszenie__info svg { flex-shrink: 0; margin-top: 3px; color: var(--granat); }
.menu-zaproszenie__akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* talerz wychodzi poza pas od gory i od dolu */
.menu-zaproszenie__talerz { margin-block: calc(-1 * clamp(40px, 5vw, 90px)); justify-self: center; width: min(100%, 460px); }
.menu-zaproszenie__talerz img { width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(22, 38, 96, .28)); }
@media (max-width: 760px) {
  .menu-zaproszenie { grid-template-columns: minmax(0, 1fr); }
  .menu-zaproszenie__talerz { order: -1; margin: calc(-1 * clamp(56px, 16vw, 90px)) auto 0; width: min(78%, 340px); }
  .menu-zaproszenie__akcje .btn { flex: 1 1 100%; justify-content: center; white-space: nowrap; font-size: 15px; padding-inline: 16px; }
}

/* --- 19. Podstrona Imprezy -------------------------------------------- */

.imprezy-hero {
  margin-top: clamp(28px, 4.2vw, 74px);
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 672fr);
  gap: clamp(20px, 2.6vw, 46px);
  align-items: stretch;
}
.imprezy-hero__tekst { display: flex; flex-direction: column; }
.imprezy-hero__tekst .h1 { margin-top: 14px; font-size: clamp(32px, 3.97vw, 69px); }
.imprezy-hero__tekst .h1 .pisane { font-size: clamp(50px, 6.35vw, 110px); white-space: nowrap; }
.imprezy-hero__tekst > p:not([class]) { margin-top: 24px; font-size: clamp(17px, 1.26vw, 22px); line-height: 1.55; color: var(--tekst-2); }
.imprezy-hero__liczby {
  margin-top: clamp(28px, 4vw, 55px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
}
.kafel-liczby {
  background: var(--kosc); border-radius: var(--r-sredni);
  padding: 22px 24px; position: relative;
}
.kafel-liczby svg { position: absolute; right: 22px; top: 22px; }
.kafel-liczby b { display: block; font-size: clamp(30px, 2.65vw, 46px); font-weight: 600; line-height: 1; }
.kafel-liczby span { display: block; font-size: 15px; color: var(--tekst-2); margin-top: 8px; }
.imprezy-hero__tekst .btn { margin-top: 20px; }

.imprezy-hero__foto {
  position: relative; border-radius: var(--r-duzy); overflow: hidden;
  background: var(--pudrowy);
  min-height: clamp(280px, 45vw, 782px);
}
.imprezy-hero__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imprezy-hero__foto .podpis-zdjecia { left: clamp(20px, 2.6vw, 46px); right: clamp(20px, 2.6vw, 46px); bottom: clamp(12px, 1.4vw, 23px); gap: 10px; }
.imprezy-hero__foto .etykieta-biala { font-size: clamp(14px, 1.06vw, 18px); }
.imprezy-hero__foto .podpis-pisany { font-size: clamp(42px, 5.3vw, 92px); }

@media (max-width: 900px) {
  .imprezy-hero { grid-template-columns: 1fr; }
}

.galeria-3 {
  margin-top: clamp(28px, 2.9vw, 51px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.galeria-3 div { border-radius: var(--r-sredni); overflow: hidden; background: var(--pudrowy); aspect-ratio: 411 / 380; }
.galeria-3 img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .galeria-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .galeria-3 { grid-template-columns: 1fr; } }

/* formularz */
.zapytanie {
  margin-top: clamp(48px, 7.9vw, 138px);
  background: var(--kosc);
  border-radius: var(--r-duzy);
  padding: clamp(24px, 4.2vw, 74px);
  display: grid;
  grid-template-columns: minmax(0, 716fr) minmax(0, 380fr);
  gap: clamp(24px, 3.2vw, 55px);
  align-items: start;
}
.formularz { display: flex; flex-direction: column; gap: 20px; }
.formularz .h2 { display: flex; align-items: center; gap: 14px; font-size: clamp(26px, 2.65vw, 46px); }
.formularz > p:not([class]) { font-size: clamp(16px, 1.12vw, 20px); color: var(--tekst-2); }
.formularz__pola { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.pole { display: flex; flex-direction: column; gap: 8px; font-size: 15px; font-weight: 500; }
.pole input, .pole select, .pole textarea {
  min-height: 52px;
  border: 1px solid var(--obramowanie);
  border-radius: 14px;
  background: var(--biel);
  padding: 14px 18px;
  font: inherit; font-weight: 400; font-size: 16px;   /* ponizej 16 px iPhone powieksza strone przy wpisywaniu */
  color: var(--granat);
  width: 100%;
}
.pole select { padding: 13px 14px; }
.pole textarea { resize: vertical; min-height: 110px; }
/* :user-invalid, nie :invalid. Puste pole wymagane jest niepoprawne od zaladowania
   strony i podswietlalo sie na czerwono, zanim ktokolwiek cokolwiek wpisal. */
.pole input:user-invalid, .pole select:user-invalid, .pole textarea:user-invalid { border-color: #b3321f; }
.pole--wymagane > span::after { content: " *"; color: #b3321f; }
.formularz__wymagane { font-size: 14px; color: var(--tekst-2); margin-top: -8px; }
.formularz__wymagane span { color: #b3321f; }

.zgoda { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--tekst-2); font-weight: 400; }
.zgoda input { width: 24px; height: 24px; min-height: 0; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--granat); padding: 0; }
.zgoda a { text-decoration: underline; }

.pulapka { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.komunikat { border-radius: 14px; padding: 16px 20px; font-size: 15px; line-height: 1.5; }
.komunikat--ok { background: #e4f3e6; color: #1d5b2a; border: 1px solid #9ccfa6; }
.komunikat--blad { background: #fbe6e2; color: #8e2716; border: 1px solid #e0a79b; }
.komunikat[hidden] { display: none; }

.panel-kontakt {
  background: var(--granat); color: var(--biel);
  border-radius: var(--r-sredni);
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 22px;
  height: 100%;
}
.panel-kontakt__pisane { font-family: var(--font-pisany); font-weight: 400; font-size: clamp(38px, 3.84vw, 67px); line-height: 1.27; }
.panel-kontakt__telefon { font-size: clamp(24px, 1.98vw, 34px); font-weight: 600; color: var(--biel); }
.panel-kontakt__mail { font-size: 16px; color: var(--pudrowy); }
.panel-kontakt hr { height: 1px; border: 0; background: #ffffff33; margin: 0; }
.panel-kontakt ul { display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 1.5; }
.panel-kontakt li { display: flex; gap: 12px; align-items: center; }
.panel-kontakt li svg { flex-shrink: 0; }
.panel-kontakt__foto { margin-top: auto; border-radius: var(--r-maly); overflow: hidden; aspect-ratio: 316 / 200; }
.panel-kontakt__foto img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1100px) {
  .zapytanie { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 700px) and (max-width: 1100px) {
  /* panel pod formularzem, na cala szerokosc: tekst po lewej, zdjecie po prawej */
  .panel-kontakt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 18px; }
  .panel-kontakt > * { grid-column: 1; }
  .panel-kontakt__foto { grid-column: 2; grid-row: 1 / span 5; margin: 0; aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 640px) {
  .formularz__pola { grid-template-columns: 1fr; }
}

/* --- 20. Okno filmu --------------------------------------------------- */

.modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 520px); }
.modal::backdrop { background: #162660e6; }
.modal__ramka { border-radius: var(--r-duzy); overflow: hidden; background: #000; }
.modal__ramka video { width: 100%; height: auto; max-height: 88vh; display: block; object-fit: contain; background: #000; }
.modal { max-width: min(92vw, 460px); }
.cena-potw { font-size: 14px; font-weight: 500; font-style: italic; color: var(--tekst-2); white-space: nowrap; }
.modal__zamknij {
  position: absolute; right: 10px; top: 10px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--biel); color: var(--granat);
  display: grid; place-items: center; cursor: pointer;
}
.modal__info { background: var(--biel); color: var(--granat); padding: 24px; font-size: 16px; line-height: 1.55; }

/* --- 21. Podstrona tekstowa (polityka) ------------------------------- */

.tresc { padding-inline: var(--margines); margin-top: clamp(32px, 4.6vw, 80px); max-width: 76ch; }
.tresc h1 { font-weight: 600; font-size: clamp(30px, 3.17vw, 55px); line-height: 1.15; }
.tresc h2 { margin-top: 40px; font-weight: 600; font-size: clamp(20px, 1.72vw, 30px); }
.tresc p, .tresc li { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--tekst-2); }
.tresc ul { list-style: disc; padding-left: 22px; }
.tresc a { text-decoration: underline; }
.tresc strong { color: var(--granat); }

/* --- 21b. Polityka prywatnosci: spis tresci z boku, numerowane dzialy --- */

.polityka-glowa { padding-inline: var(--margines); margin-top: clamp(32px, 4.6vw, 80px); max-width: calc(820px + 2 * var(--margines)); display: flex; flex-direction: column; gap: clamp(14px, 1.4vw, 22px); }
.polityka-glowa .lead { max-width: 58ch; }
.polityka-glowa__wersja { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--pudrowy); font-size: 14px; font-weight: 500; color: var(--granat); }

.polityka {
  padding-inline: var(--margines);
  margin-top: clamp(32px, 4vw, 64px);
  display: grid; grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
  counter-reset: dzial;
}
.polityka__spis {
  position: sticky; top: calc(var(--wys-naglowka, 80px) + 20px);
  background: var(--kosc); border-radius: var(--r-duzy);
  padding: 22px 22px 18px;
  max-height: calc(100vh - var(--wys-naglowka, 80px) - 40px); overflow-y: auto;
}
.polityka__spis-tytul { font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.polityka__spis ol { list-style: decimal-leading-zero; padding-left: 30px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--tekst-2); }
.polityka__spis li::marker { color: var(--granat-3); font-variant-numeric: tabular-nums; }
.polityka__spis a { display: block; padding-block: 4px; line-height: 1.35; color: var(--granat); }
.polityka__spis a:hover { text-decoration: underline; text-underline-offset: 3px; }

.polityka__tresc { max-width: 78ch; }
.polityka__tresc > section { counter-increment: dzial; padding-bottom: clamp(26px, 2.6vw, 40px); margin-bottom: clamp(26px, 2.6vw, 40px); border-bottom: 1px solid var(--linia); }
.polityka__tresc > section:last-child { border-bottom: 0; }
.polityka__tresc h2 { display: flex; align-items: baseline; gap: 14px; font-weight: 600; font-size: clamp(21px, 1.72vw, 30px); line-height: 1.25; }
.polityka__tresc h2::before { content: counter(dzial, decimal-leading-zero); flex-shrink: 0; font-size: .62em; font-weight: 600; color: var(--granat-3); font-variant-numeric: tabular-nums; }
.polityka__tresc p, .polityka__tresc li, .polityka__tresc dd { font-size: 16px; line-height: 1.65; color: var(--tekst-2); }
.polityka__tresc p { margin-top: 14px; }
.polityka__tresc b { color: var(--granat); font-weight: 600; }
.polityka__tresc a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; color: var(--granat); }
.polityka__tresc > section > ul:not([class]) { margin-top: 12px; list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }

.polityka__karta { margin-top: 16px; background: var(--kosc); border-radius: var(--r-sredni); padding: 20px 24px; display: flex; flex-direction: column; gap: 6px; }
.polityka__karta p { margin-top: 0 !important; display: flex; align-items: center; gap: 10px; }
.polityka__karta svg { color: var(--granat); flex-shrink: 0; }

.polityka__skrot { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.polityka__skrot li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--obramowanie); border-radius: var(--r-sredni); font-size: 15px !important; line-height: 1.5 !important; }
.polityka__skrot svg { flex-shrink: 0; margin-top: 2px; color: var(--granat); }
.polityka__skrot b { display: block; }

.polityka__kategorie { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.polityka__kategorie li { padding: 12px 16px; border-left: 3px solid var(--granat-3); background: #f7f8fc; border-radius: 0 12px 12px 0; }

.polityka__fakty { margin-top: 16px; display: flex; flex-direction: column; border: 1px solid var(--obramowanie); border-radius: var(--r-sredni); overflow: clip; }
.polityka__fakty > div { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 16px; padding: 14px 18px; }
.polityka__fakty > div + div { border-top: 1px solid var(--obramowanie); }
.polityka__fakty dt { font-weight: 600; font-size: 15px; color: var(--granat); }
.polityka__fakty dd { margin: 0; font-size: 15px !important; }

.polityka__tabela-ramka { margin-top: 16px; overflow-x: auto; border: 1px solid var(--obramowanie); border-radius: var(--r-sredni); }
.polityka__tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.polityka__tabela th, .polityka__tabela td { text-align: left; vertical-align: top; padding: 12px 14px; line-height: 1.5; color: var(--tekst-2); }
.polityka__tabela thead th { background: var(--kosc); color: var(--granat); font-weight: 600; font-size: 14px; }
.polityka__tabela tbody tr + tr th, .polityka__tabela tbody tr + tr td { border-top: 1px solid var(--obramowanie); }
.polityka__tabela tbody th { color: var(--granat); font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; white-space: nowrap; }
.polityka__przypis { font-size: 14px !important; }
.link-cookies--tekst { display: inline; padding: 0; font-size: inherit; color: var(--granat); }

@media (max-width: 1000px) {
  .polityka { grid-template-columns: minmax(0, 1fr); }
  .polityka__spis { position: static; max-height: none; }
  .polityka__spis ol { columns: 2; column-gap: 24px; display: block; }
}
@media (max-width: 640px) {
  /* tabela cookies jako karty: bez przewijania w bok na telefonie */
  .polityka__tabela-ramka { border: 0; overflow: visible; }
  .polityka__tabela { min-width: 0; }
  .polityka__tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .polityka__tabela, .polityka__tabela tbody, .polityka__tabela tr, .polityka__tabela th, .polityka__tabela td { display: block; }
  .polityka__tabela tr { border: 1px solid var(--obramowanie); border-radius: var(--r-sredni); padding: 6px 0; }
  .polityka__tabela tr + tr { margin-top: 10px; }
  .polityka__tabela tbody tr + tr th, .polityka__tabela tbody tr + tr td { border-top: 0; }
  .polityka__tabela th, .polityka__tabela td { padding: 6px 16px; }
  .polityka__tabela td::before { content: attr(data-etykieta); display: block; font-size: 13px; font-weight: 600; color: var(--granat); }
  .polityka__skrot { grid-template-columns: minmax(0, 1fr); }
  .polityka__spis ol { columns: 1; }
  .polityka__fakty > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* --- 21c. Strona w budowie (budowa.html, na czas przed startem domeny) --- */

.budowa {
  min-height: 100vh; min-height: 100dvh;
  padding: clamp(28px, 4vw, 72px) var(--margines);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px); align-items: center;
  max-width: calc(var(--maks) + 2 * var(--margines)); margin-inline: auto;
}
.budowa__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.6vw, 26px); }
.budowa__logo { width: clamp(170px, 15vw, 250px); height: auto; margin-bottom: clamp(8px, 2vw, 32px); }
.budowa .lead { max-width: 46ch; }
/* „zapraszamy do nas!” = 6,54 em; kolumna ~42vw, wiec max 6,4vw, zeby zostalo w jednym wierszu */
.budowa .h1 .pisane { font-size: clamp(38px, 5.6vw, 92px); white-space: nowrap; }
.budowa__info { display: flex; flex-direction: column; gap: 10px; }
.budowa__info li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; color: var(--tekst-2); }
.budowa__info svg { flex-shrink: 0; margin-top: 3px; color: var(--granat); }
.budowa__akcje { display: flex; flex-wrap: wrap; gap: 12px; }
.budowa__foto { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-duzy); overflow: clip; background: var(--pudrowy); }
.budowa__foto img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .budowa { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .budowa__foto { aspect-ratio: 4 / 3; }
  .budowa .h1 .pisane { font-size: clamp(36px, 12vw, 60px); }
}
@media (max-width: 560px) { .budowa__akcje .btn { flex: 1 1 100%; justify-content: center; } }

/* --- 22. Podstrony O nas i Kontakt ------------------------------------- */

.hero--podstrona {
  display: grid;
  grid-template-columns: minmax(0, 560fr) minmax(0, 672fr);
  gap: clamp(20px, 2.6vw, 46px);
  align-items: center;
}
.hero-podstrona__tekst { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); }
.hero-podstrona__tekst .lead { max-width: 46ch; }
.hero-podstrona__foto {
  position: relative; border-radius: var(--r-duzy); overflow: clip; background: var(--pudrowy);
  aspect-ratio: 672 / 560; width: 100%;
}
.hero-podstrona__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero--kontakt { align-items: start; }
.hero-kontakt__telefon { align-self: flex-start; font-size: clamp(20px, 1.6vw, 26px); font-weight: 600; padding-inline: clamp(22px, 2vw, 34px); }

/* kafle kontaktu */
.kontakt-kafle {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
}
.kafel-kontakt {
  background: var(--kosc); border-radius: var(--r-sredni);
  padding: clamp(20px, 1.8vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
}
.kafel-kontakt h2 { font-size: clamp(17px, 1.2vw, 20px); font-weight: 600; margin-top: 6px; }
.kafel-kontakt p:not([class]) { font-size: 15px; line-height: 1.55; color: var(--tekst-2); }
.kafel-kontakt > a { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--granat-3); text-underline-offset: 3px; overflow-wrap: break-word; }

/* fakty (o nas) */
.fakty {
  margin-top: clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
.fakt {
  background: var(--kosc); border-radius: var(--r-duzy);
  padding: clamp(22px, 2.2vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
}
.fakt h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; margin-top: 8px; }
.fakt p:not([class]) { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.6; color: var(--tekst-2); }

/* mozaika zdjec (o nas) */
.mozaika {
  margin-top: clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.4vw, 24px);
}
.mozaika figure { position: relative; border-radius: var(--r-duzy); overflow: clip; background: var(--pudrowy); min-height: 240px; }
.mozaika__duza { grid-row: 1 / span 2; min-height: clamp(360px, 36vw, 620px); }
.mozaika img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mozaika figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(40px, 4vw, 64px) clamp(18px, 1.8vw, 28px) clamp(16px, 1.6vw, 24px);
  background: linear-gradient(to top, #162660d9, #16266000);
  color: var(--biel); font-size: clamp(14px, 1.06vw, 16px); line-height: 1.45;
}

/* pas ocen */
.oceny-pas {
  margin-top: clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
}
.ocena {
  background: var(--pudrowy); border-radius: var(--r-sredni);
  padding: clamp(18px, 1.8vw, 28px);
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.ocena b { font-size: clamp(34px, 3vw, 52px); font-weight: 600; line-height: 1; }
.ocena span { font-size: 15px; color: var(--tekst-2); }
.ocena--wyroznienie { background: var(--granat); color: var(--biel); justify-content: center; }
.ocena--wyroznienie span { color: var(--pudrowy); font-size: clamp(15px, 1.12vw, 17px); font-weight: 500; }

/* dwa cytaty obok siebie */
.cytaty-2 {
  margin-top: clamp(24px, 2.6vw, 40px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
.cytaty-2 .cytat { padding: clamp(24px, 2.2vw, 34px); border-radius: var(--r-duzy); }
.cytaty-2 .cytat blockquote { font-size: clamp(17px, 1.32vw, 21px); line-height: 1.5; }
.cytat--jasny { background: var(--kosc); color: var(--granat); }
.cytat--jasny hr { background: var(--obramowanie); }
.cytat--jasny figcaption { color: var(--tekst-2); }
#opinie-imprezy { margin-top: var(--rytm-maly); }

/* karta zaproszenia (granatowa lub kosc) */
.karta-zaproszenie {
  background: var(--granat); color: var(--biel);
  border-radius: var(--r-duzy);
  padding: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 52px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 48px); align-items: center;
}
.karta-zaproszenie__pisane { font-family: var(--font-pisany); font-weight: 400; font-size: clamp(34px, 3.2vw, 54px); line-height: 1; padding-bottom: .14em; }
.karta-zaproszenie p:not([class]) { margin-top: 8px; max-width: 52ch; font-size: clamp(16px, 1.19vw, 19px); line-height: 1.55; color: var(--pudrowy); }
.karta-zaproszenie__akcje { display: flex; flex-wrap: wrap; gap: 12px; }
.karta-zaproszenie--kosc { background: var(--kosc); color: var(--granat); }
.karta-zaproszenie--kosc p:not([class]) { color: var(--tekst-2); }
.karta-zaproszenie--kosc .karta-zaproszenie__pisane { color: var(--granat-2); }
.btn--obrys-jasny { color: var(--biel); border-color: #ffffff99; }
.btn--obrys-jasny:hover { background: var(--biel); color: var(--granat); }
.link-tekst { color: var(--granat); font-weight: 500; text-decoration: underline; text-decoration-color: var(--granat-3); text-underline-offset: 3px; white-space: nowrap; }

/* dojazd */
.dojazd {
  margin-top: clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(16px, 1.8vw, 28px);
}
.dojazd__mapa { border-radius: var(--r-duzy); overflow: clip; background: var(--pudrowy); min-height: 380px; }
.dojazd__mapa iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.mapa-koniec__mapa iframe { position: absolute; inset: 0; }
.mapa-koniec__mapa { position: relative; }
.dojazd__tabela {
  background: var(--kosc); border-radius: var(--r-duzy);
  padding: clamp(22px, 2.2vw, 34px);
  display: flex; flex-direction: column; gap: 18px;
}
.dojazd__tabela h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; }
.dojazd__tabela table { width: 100%; border-collapse: collapse; font-size: clamp(15px, 1.12vw, 17px); }
.dojazd__tabela th, .dojazd__tabela td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid #16266022; }
.dojazd__tabela thead th { font-size: 13.5px; font-weight: 500; color: var(--tekst-2); text-transform: uppercase; letter-spacing: .06em; }
.dojazd__tabela tbody th { font-weight: 600; }
.dojazd__tabela td { color: var(--tekst-2); white-space: nowrap; }
.dojazd__tabela th:last-child, .dojazd__tabela td:last-child { padding-right: 0; }
.dojazd__tabela tbody th { white-space: normal; }
@media (max-width: 640px) {
  .dojazd__tabela { padding: 20px 18px; }
  .dojazd__tabela table { font-size: 14px; }
  .dojazd__tabela thead th { font-size: 13px; }
}
.dojazd__tabela td:last-child, .dojazd__tabela th:last-child { text-align: right; }
.dojazd__uwaga { font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
/* wstep z naglowkiem i przyciskiem obok tabeli; mapa stoi osobno na koncu strony */
.dojazd--opis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px); }
.dojazd__wstep { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 1.8vw, 28px); }
.dojazd__wstep .opis { max-width: 52ch; }

.mapa-koniec__glowa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; }
.mapa-koniec .etykieta-adres {
  background: var(--kosc); color: var(--granat);
  font-size: clamp(14px, 1.12vw, 19px); font-weight: 600; font-style: italic;
  padding: 9px 20px; border-radius: 10px;
}
/* width 100%: przy min-height proporcja inaczej poszerza pudelko poza kolumne (pulapka aspect-ratio) */
.mapa-koniec__mapa { margin-top: clamp(20px, 2.2vw, 36px); width: 100%; aspect-ratio: 21 / 9; min-height: 380px; }
@media (max-width: 760px) { .mapa-koniec__mapa { aspect-ratio: 4 / 5; } }

/* --- 23. Imprezy: okazje, kroki ---------------------------------------- */

.okazje {
  margin-top: clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}
.okazja {
  background: var(--kosc); border-radius: var(--r-duzy);
  padding: clamp(22px, 2.2vw, 32px);
  display: flex; flex-direction: column; gap: 10px;
}
.okazja svg { color: var(--granat-2); }
.okazja h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; margin-top: 6px; }
.okazja p { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.55; color: var(--tekst-2); }

.kroki {
  margin-top: clamp(28px, 3.4vw, 56px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
  counter-reset: krok;
}
.krok {
  position: relative;
  background: var(--biel); border: 1px solid var(--obramowanie); border-radius: var(--r-duzy);
  padding: clamp(24px, 2.2vw, 34px);
  display: flex; flex-direction: column; gap: 10px;
}
.krok__numer {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--granat); color: var(--biel);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 600;
}
.krok h3 { font-size: clamp(19px, 1.5vw, 24px); font-weight: 600; margin-top: 8px; }
.krok p { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.55; color: var(--tekst-2); }

/* --- 24. Powiekszenie dania ---------------------------------------------- */

.powieksz {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  overflow: clip;
}
.powieksz img { transition: scale .5s ease; }
.powieksz:hover img { scale: 1.04; }
.powieksz__znak {
  position: absolute; right: 14px; bottom: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffffffe6; color: var(--granat);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .2s ease;
}
.powieksz:hover .powieksz__znak, .powieksz:focus-visible .powieksz__znak { opacity: 1; }
@media (hover: none) { .powieksz__znak { opacity: 1; width: 32px; height: 32px; right: 10px; bottom: 10px; } }
.powieksz--mini { width: 96px; height: 96px; flex-shrink: 0; border-radius: 14px; }
.powieksz--mini img { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; }
.karta-dania__foto.powieksz { border-radius: 0; }
.pozycja img, .pozycja .placeholder--mini { width: 96px; height: 96px; }
.podpowiedz { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; color: var(--granat-2); white-space: nowrap; }

.okno-dania { border: 0; padding: 0; background: transparent; width: min(94vw, 980px); max-width: none; max-height: calc(100dvh - 24px); overflow: visible; }
.okno-dania::backdrop { background: #162660e6; backdrop-filter: blur(4px); }
.okno-dania__ramka {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--biel); border-radius: var(--r-duzy); overflow: clip;
}
/* Zdjecie zawsze CALE i kwadratowe: bok = mniejsze z polowy okna i wysokosci ekranu.
   Wczesniej na niskim ekranie okno bylo przyciete przez wysokosc i talerz ucinal sie u dolu (Kamila 5.10). */
.okno-dania__ramka { grid-template-columns: auto minmax(0, 1fr); max-height: calc(100dvh - 24px); }
.okno-dania__foto { background: var(--kosc); height: min(490px, 47vw, calc(100dvh - 24px)); aspect-ratio: 1; }
.okno-dania__foto img { width: 100%; height: 100%; object-fit: cover; }
.okno-dania__tresc { overflow-y: auto; }
.okno-dania__tresc { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; gap: 10px; }
.okno-dania__nadtytul { font-size: clamp(28px, 2.4vw, 40px); }
.okno-dania__nazwa { font-size: clamp(26px, 2.4vw, 38px); font-weight: 600; line-height: 1.15; }
.okno-dania__opis { font-size: clamp(15px, 1.12vw, 17px); color: var(--tekst-2); line-height: 1.5; }
.okno-dania__cena { font-size: clamp(28px, 2.4vw, 40px); font-weight: 600; margin-top: 6px; }
.okno-dania__cena:empty { display: none; }
.okno-dania__dopisek { font-size: 14px; line-height: 1.5; color: var(--tekst-2); padding-top: 14px; border-top: 1px solid var(--linia); margin-top: auto; }
.okno-dania__akcje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.okno-dania__zamknij {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #ffffffe6; color: var(--granat);
  display: grid; place-items: center; cursor: pointer;
}

/* --- 25. Stopka: warianty ------------------------------------------------ */

.stopka--bez-karty .stopka__kolumny { padding-top: clamp(40px, 5vw, 80px); }
.stopka__dol {
  border-radius: 0; background: transparent; color: var(--pudrowy);
  border-top: 1px solid #ffffff33;
  min-height: 0; padding: 22px 0 0; margin-bottom: clamp(28px, 3vw, 48px);
  width: calc(100% - 2 * var(--bok)); max-width: calc(var(--maks) - 2 * var(--margines));
  font-size: 14px;
}
.stopka__dol a { color: var(--pudrowy); font-size: 14px; }
.stopka__dol a:hover { color: var(--biel); }
.stopka__dol-linki { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.stopka__dol-linki a { display: inline-block; padding-block: 6px; }
.stopka__autor a { font-weight: 600; text-decoration: none; color: var(--biel); }
.stopka__autor a:hover { color: var(--pudrowy); }

/* --- 26. Podstrony: telefon i tablet ------------------------------------- */

@media (max-width: 1000px) {
  .hero--podstrona { grid-template-columns: minmax(0, 1fr); }
  .hero-podstrona__foto { aspect-ratio: 4 / 3; }
  .kontakt-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oceny-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .okazje, .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dojazd { grid-template-columns: minmax(0, 1fr); }
  .mozaika { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; }
  .mozaika__duza { grid-column: 1 / -1; grid-row: auto; min-height: clamp(260px, 50vw, 480px); }
}
@media (max-width: 760px) {
  .karta-zaproszenie { grid-template-columns: minmax(0, 1fr); }
  .okno-dania__ramka { grid-template-columns: minmax(0, 1fr); }
  .okno-dania { width: min(94vw, 520px); }
  /* telefon: kwadrat na srodku pasa kosci, nigdy przyciety (4:3 ucinalo talerz) */
  .okno-dania__foto { width: 100%; height: min(94vw, 46dvh); aspect-ratio: auto; display: grid; place-items: center; }
  .okno-dania__foto img { width: auto; height: 100%; aspect-ratio: 1; }
}
@media (max-width: 640px) {
  .kontakt-kafle, .fakty, .cytaty-2, .okazje, .kroki, .mozaika { grid-template-columns: minmax(0, 1fr); }
  .oceny-pas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mozaika figure { min-height: 200px; aspect-ratio: 4 / 3; }
  .podpowiedz { white-space: normal; }
  .powieksz--mini, .powieksz--mini img, .pozycja img, .pozycja .placeholder--mini { width: 84px; height: 84px; }
}


/* --- 27. Audyt 1.10: linki, mapa na klikniecie, zgoda na cookies --------- */

/* link czekajacy na adres (Facebook, Instagram) nie wyswietla sie wcale;
   karta, w ktorej nie zostal zaden link, tez znika */
a[data-brak] { display: none !important; }
.karta-zaproszenie--social:not(:has(.karta-zaproszenie__akcje a:not([data-brak])))
{ display: none; }

/* mapa Google laduje sie dopiero po kliknieciu: bez ciasteczek Google przed zgoda
   i bez kilkuset kB skryptow mapy przy kazdym wejsciu na Kontakt */
.mapa-zaslona {
  position: relative; width: 100%; height: 100%; min-height: 380px;
  border: 0; padding: 0; cursor: pointer; background: var(--granat); color: var(--biel);
  display: grid; place-items: center; overflow: clip; border-radius: inherit;
  --fokus: var(--pudrowy);
}
.mapa-zaslona img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .3s ease, scale .5s ease; }
.mapa-zaslona:hover img { opacity: .4; scale: 1.03; }
.mapa-zaslona__tresc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px; }
.mapa-zaslona__tresc .btn { pointer-events: none; }
.mapa-zaslona__tresc small { font-size: 14px; color: var(--pudrowy); max-width: 34ch; line-height: 1.5; }

/* baner zgody: tylko gdy podpiete jest GA4 */
.zgoda-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70;
  max-width: 640px; margin-inline: auto;
  background: var(--biel); color: var(--granat);
  border: 1px solid var(--obramowanie); border-radius: var(--r-sredni);
  box-shadow: 0 18px 48px #16266033;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
}
.zgoda-cookies[hidden] { display: none; }
.zgoda-cookies p { font-size: 14px; line-height: 1.55; color: var(--tekst-2); }
.zgoda-cookies a { text-decoration: underline; }
.zgoda-cookies__tytul { font-size: 17px !important; font-weight: 600; color: var(--granat) !important; }
.zgoda-cookies__opcje { display: flex; flex-direction: column; gap: 8px; }
.zgoda-cookies__opcje[hidden] { display: none; }
.zgoda-opcja { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--kosc); cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--tekst-2); }
.zgoda-opcja b { display: block; color: var(--granat); }
.zgoda-opcja input { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--granat); }
.zgoda-opcja--stala { cursor: default; opacity: .85; }
.zgoda-cookies__przyciski { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.zgoda-cookies__wybor { flex-basis: 100%; text-align: center; }
.zgoda-cookies__przyciski .btn { flex: 1 1 140px; min-height: 44px; padding: 8px 18px; font-size: 15px; }
.link-cookies { background: none; border: 0; padding: 6px 0; color: inherit; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; }

/* ======================================================================
   28. TELEFON (do 760 px): UX pod kciuk
   Wczesniej wszystko ukladalo sie w jedna kolumne duzych kart (glowna ~11 tys. px).
   Teraz: hero ze zdjeciem od razu, paski do przesuwania z kropkami zamiast slupow
   kart, zwarte listy, dolny pasek akcji i krotsza stopka.
   ====================================================================== */

/* telefon i godziny w rozwijanym menu: tylko gdy menu jest hamburgerem */
.nawigacja__kontakt { display: none; }
@media (max-width: 900px) {
  .nawigacja__kontakt { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding: 16px 8px 6px; border-top: 1px solid rgba(22, 38, 96, .12); }
  .nawigacja__kontakt .btn { width: 100%; justify-content: center; height: auto; }
  .naglowek__nawigacja .nawigacja__kontakt .btn, .naglowek__nawigacja .nawigacja__kontakt .btn:hover { background: var(--granat); color: var(--biel); padding: 8px 8px 8px 24px; font-size: 16px; min-height: 52px; }
  .nawigacja__kontakt p { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--tekst-2); padding-inline: 10px; }
  .nawigacja__kontakt p svg { flex-shrink: 0; margin-top: 2px; color: var(--granat); }
}

/* kropki pod paskiem przewijanym: tylko na telefonie */
.kropki { display: none; }
/* dolny pasek akcji: tylko na telefonie */
.pasek-akcji { display: none; }

@media (max-width: 760px) {
  :root { --rytm: 64px; --rytm-maly: 40px; }

  /* --- paski do przesuwania palcem (od brzegu do brzegu ekranu) --- */
  .przewijak {
    display: grid !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 12px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--margines));
    padding-inline: var(--margines);
    scroll-padding-inline: var(--margines);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .przewijak::-webkit-scrollbar { display: none; }
  .przewijak > * { scroll-snap-align: start; min-width: 0; }
  .kropki { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .kropki span { width: 7px; height: 7px; border-radius: 99px; background: var(--obramowanie); transition: width .25s ease, background .25s ease; }
  .kropki span.aktywna { width: 22px; background: var(--granat); }

  /* --- dolny pasek akcji --- */
  .pasek-akcji {
    display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 6px;
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 60;
    padding: 6px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--obramowanie); border-radius: 20px;
    box-shadow: 0 14px 36px rgba(22, 38, 96, .22);
    transform: translateY(calc(100% + 24px)); opacity: 0;
    transition: transform .3s ease, opacity .3s ease;
  }
  .pasek-akcji--widoczny { transform: none; opacity: 1; }
  .pasek-akcji a {
    min-height: 52px; border-radius: 15px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 14px; font-weight: 500; color: var(--granat);
  }
  .pasek-akcji a svg { color: var(--granat); }
  .pasek-akcji .pasek-akcji__glowny { flex-direction: row; gap: 8px; background: var(--granat); color: var(--biel); font-size: 16px; font-weight: 600; }
  .pasek-akcji .pasek-akcji__glowny svg { color: var(--biel); }
  /* baner zgody nad paskiem */
  .zgoda-cookies { z-index: 80; }

  /* --- hero glownej: zdjecie od razu, akcje obok siebie --- */
  .hero__dol { grid-template-areas: "foto" "tekst"; row-gap: 0; margin-top: 16px; }
  .hero__foto { aspect-ratio: 5 / 4; }
  /* talerz zachodzi na prawy dolny rog zdjecia; plakietka opinii idzie na gore, zeby sie nie zderzaly */
  .hero__talerz {
    grid-area: foto; align-self: end; justify-self: end;
    width: 42%; margin: 0 -1% -12% 0; rotate: -6deg;
  }
  .hero .plakietka-opinii { top: 10px; bottom: auto; left: 10px; right: auto; }
  .hero .zaslona-dol { display: none; }
  /* tekst zaczyna sie pod nawisem talerza (12% szerokosci + obrot) */
  .hero__tekst { padding-top: 52px; gap: 18px; }
  .hero .hero__cta { flex-wrap: nowrap; gap: 10px; }
  .hero .hero__cta .btn { flex: 1 1 0; padding-inline: 10px; gap: 8px; white-space: nowrap; }
  .hero__tekst .lead { font-size: 17px; }

  /* --- trzy powody: karty w pasku --- */
  .karta-powod { aspect-ratio: 4 / 4.2; }

  /* --- polecane dania: karty w pasku --- */
  .karta-dania__foto { aspect-ratio: 4 / 3; }
  .karta-dania__opis { padding: 16px 18px 18px; }
  .pod-siatka { margin-top: 20px; }

  /* --- „zostajemy na zime”: bez powtorki ocen (sa nizej w opiniach) --- */
  .karta-ocen { display: none; }
  .godziny__foto { aspect-ratio: 16 / 11; }

  /* --- opinie --- */
  .opinie__siatka .cytat { padding: 22px; }
  .opinie__siatka .cytat blockquote { font-size: 17px; }
  .opinie__zacheta { padding: 18px; gap: 14px; }

  /* --- rolki: bez powtorzonego opisu --- */
  .rolki__tekst { display: none; }
  .filmy { margin-top: 0; }

  /* --- menu: karta „z tablicy” w jednym wierszu --- */
  .karta-tablica { grid-template-columns: 92px minmax(0, 1fr) !important; gap: 14px !important; padding: 10px !important; }
  .karta-tablica__foto { aspect-ratio: 1 !important; }
  .karta-tablica__tresc { padding: 4px 6px 4px 0 !important; gap: 6px !important; }
  .karta-tablica .pigulka { display: none; }
  .karta-tablica__tytul { font-size: 18px; }
  .karta-tablica p:not([class]) { font-size: 14px; line-height: 1.5; }

  /* --- menu: ryby w dwoch kolumnach --- */
  .ryby__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px; }
  .karta-ryby img { aspect-ratio: 1; }
  .karta-ryby__opis { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px 14px; }
  .karta-ryby__nazwa { font-size: 16px; line-height: 1.3; }
  .karta-ryby__cena { font-size: 16px; margin-top: auto; }
  .powieksz__znak { width: 30px !important; height: 30px !important; right: 8px !important; bottom: 8px !important; }

  /* --- imprezy: okazje jako zwarta lista --- */
  .okazje { display: block; background: var(--kosc); border-radius: var(--r-duzy); padding: 4px 18px; }
  .okazja {
    background: none; border-radius: 0; padding: 16px 0;
    display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 2px;
  }
  .okazja + .okazja { border-top: 1px solid rgba(22, 38, 96, .1); }
  .okazja svg { grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 2px; }
  .okazja h3 { margin-top: 0; font-size: 17px; }
  .okazja p { font-size: 15px; }

  /* --- imprezy: zdjecia sali w pasku --- */
  .galeria-3 div { aspect-ratio: 4 / 5; }

  /* --- imprezy: kroki jako os czasu --- */
  .kroki { display: block; }
  .krok {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px;
    background: none; border: 0; border-radius: 0; padding: 0 0 26px;
  }
  .krok:last-child { padding-bottom: 0; }
  .krok__numer { grid-row: 1 / span 2; width: 40px; height: 40px; font-size: 17px; position: relative; z-index: 1; }
  .krok:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--obramowanie); }
  .krok h3 { margin-top: 7px; font-size: 18px; }

  /* --- imprezy: panel z telefonem bez zdjecia (formularz i tak jest dlugi) --- */
  .panel-kontakt__foto { display: none; }

  /* --- o nas: mozaika zdjec w pasku --- */
  .mozaika figure, .mozaika__duza { grid-row: auto !important; grid-column: auto !important; min-height: 0 !important; aspect-ratio: 4 / 5; }

  /* --- kontakt: kafle jako zwarte wiersze --- */
  .kontakt-kafle { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .kafel-kontakt {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px;
    padding: 16px 18px;
  }
  .kafel-kontakt > .kolko-ikony { grid-row: 1 / span 3; }
  .kafel-kontakt > * { grid-column: 2; }
  .kafel-kontakt > .kolko-ikony { grid-column: 1; }
  .kafel-kontakt h2 { margin-top: 0; }

  /* --- stopka: krotsza, w dwoch kolumnach --- */
  .stopka__kolumny { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 32px !important; column-gap: 20px; padding-top: 48px; }
  .stopka__marka { grid-column: 1 / -1; order: 0; }
  .stopka__kolumny > :nth-child(2) { order: 1; }
  .stopka__kolumny > :nth-child(4) { order: 2; }
  .stopka__kolumny > :nth-child(3) { order: 3; grid-column: 1 / -1; }
  .stopka { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}