/* ============================================================================
   SZKIELET „ALPAKI" - arkusz wzorcowy makiet leadowych PART-WEB
   Przepisany 1:1 z alpaki-niechorze.pl (dziadkowizna/strona/css/style.css),
   z poprawkami wymaganymi przez bramki QA. Kazde odstepstwo od oryginalu
   jest opisane komentarzem zaczynajacym sie od „ZMIANA:".

   PODMIENIASZ TYLKO BLOK :root (paleta) I PARE FONTOW W <head>.
   Reszta zostaje - to jest to, co czyni makiete „nasza".
   ============================================================================ */

:root {
  /* --- PALETA: jasna baza + JEDEN akcent. Podmieniasz te siedem wartosci. ---
     Wzorzec z alpak: krem, piasek, biel karty, ciemny atrament, koral, brazy.
     Zasady doboru:
     - baza zawsze JASNA (--bg), ciemne sa tylko pasy (trust / oferta / kontakt / stopka),
     - JEDEN akcent, nigdy dwa,
     - akcent musi dawac >=4,5:1 dla bialego tekstu na przycisku ORAZ
       >=4,5:1 jako --akcent-ciemny na kremie (tam niesie tekst i linki),
     - policz kontrasty ZANIM napiszesz reszte arkusza. */
  --bg: #FAF6EE;            /* baza strony - krem */
  --sand: #F0EADB;          /* druga jasna sekcja - piasek, do rytmu */
  --card: #FFFDF7;          /* karty i formularz */
  --ink: #2C2A21;           /* tekst podstawowy */
  --muted: #52503F;         /* tekst drugorzedny - 7,3:1 na kremie */
  --akcent: #C0704D;        /* AKCENT - przyciski, plakietki, ikony */
  --akcent-ciemny: #99512F; /* akcent na jasnym tle - napisy, ceny, eyebrow */
  --akcent-jasny: #F2BC9E;  /* akcent na ciemnym tle - pas CTA, eyebrow na pasmach */
  --ciemny: #2E3831;        /* ciemne pasy sekcji */
  --ciemny-stopka: #232B25; /* stopka - odcien ciemniejszy niz pasy */
  --na-ciemnym: #FFFFFF;        /* podstawowy na ciemnym - biel */
  --na-ciemnym-cichy: #F7F4EE;  /* drugorzedny na ciemnym - prawie biel, ok. 13:1.
                                   ⚠️ NIE przyciemniaj do ciepłego beżu: przy 12-14 px
                                   wygładzanie czcionki miesza go z tłem i wychodzi brąz. */
  --zielony: #3F5230;       /* jedyny kolor poza akcentem: „gratis", „w cenie" */

  --line: rgba(0, 0, 0, .13);
  --cien: 0 22px 60px -28px rgba(28, 16, 8, .45);
  --radius: 16px;
  --tap: 48px;              /* minimalny cel dotyku */
  --topsum: 154px;          /* pasek demo + topbar + nav - liczone w JS */
}

/* --- reset + mobile baseline 2026 ------------------------------------------ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ZMIANA: `overflow-x: clip`, nie `hidden`. Oryginal ma `hidden` na <body>,
   a to na iOS zabija `position: sticky` w naglowku. `clip` przycina tak samo,
   a przyklejony pasek zyje. */
html, body { overflow-x: clip; }
/* `scroll-padding-top` jest OBOWIAZKOWE przy przyklejonym naglowku - bez niego
   kotwica („#cennik") chowa naglowek sekcji pod paskiem nawigacji.
   Bramka „kotwice nie chowaja tresci" wymaga wartosci >= wysokosci naglowka. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink); background: var(--bg);
  font-size: 16px; line-height: 1.72; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Bree Serif', Georgia, serif; font-weight: 500; line-height: 1.08; letter-spacing: -.015em; }
/* `height: auto` jest OBOWIAZKOWE. Kazdy <img> ma atrybuty width/height
   (rezerwuja miejsce, zeby uklad nie skakal przy doladowaniu), a bez tej linii
   przegladarka bierze wysokosc z atrybutu i rozciaga zdjecie na pelny plik. */
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }                    /* domyslne 1em/40px rozwalalo siatki */
:is(section, .zoo, .grupy, .kontakt) > * { min-width: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--akcent); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--akcent-ciemny); outline-offset: 3px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-bg img { animation: none !important; transform: scale(1.04); }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 26px; }
/* ⚠️ W `.wrap` NIGDY skrotu `padding` - druga klasa na tym samym elemencie
   (np. `class="wrap hero-inner"`) skasowalaby marginesy boczne na telefonie. */

/* ETYKIETA SEKCJI (eyebrow) - WARIANT B: pigulka.
   Alpaki maja przed napisem kreske `26x2 px`. Klient czyta ja jako dlugi myslnik,
   czyli jako tell AI (decyzja 01.08.2026), a bramka mierzy geometrie pseudoelementow
   i oblewa kazdy prostokat `8-48 x 1-4 px` z tlem.
   Pigulka trzyma sie naszego jezyka form (przyciski, chipy i plakietki tez sa pigulkami),
   niesie kolor marki i z niczym sie nie myli.
   PRZELACZENIE NA INNY WARIANT: podmien ten jeden blok.
     A - sama etykieta:  zdejmij `background` i `padding`.
     C - kropka:         dodaj `.eyebrow::before{content:'';width:7px;height:7px;
                         border-radius:50%;background:var(--akcent)}` i `gap:10px`
                         (7x7 px przechodzi bramke, bo nie jest kreska).
     D - numer sekcji:   `<span class="nr">02</span>` przed napisem, szeryfem w akcencie.
   ⛔ NIE przywracaj kreski `width:26px;height:2px`. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 700;
  /* ⚠️ Etykieta ma 12,5 px, wiec kolor musi byc CIEMNY. Poprzedni #99512F dawal
     4,33:1 na `--sand` (#F0EADB), czyli PONIZEJ podlogi 4,5:1 - a komentarz
     twierdzil 7,5:1 i bronil tego odcienia. Zmierzone w audycie 17.08.
     #6E3820 daje ok. 7,8:1 na piasku i ok. 8,4:1 na kremie. */
  letter-spacing: .16em; text-transform: uppercase; color: #6E3820;
  background: color-mix(in srgb, var(--akcent) 13%, transparent);
  padding: 7px 15px; border-radius: 999px;
}
.eyebrow .nr { font-family: 'Bree Serif', serif; font-size: 26px; font-weight: 600; letter-spacing: 0; color: var(--akcent); }
/* Na ciemnym tle pigulka musi byc jasniejsza od sekcji, inaczej znika. */
/* ⛔ Ta regula ustawiala TYLKO tlo, wiec etykieta brala kolor bazowy - ciemny braz -
   i siedziala na CIEMNEJ sekcji. Zmierzone pikselowo 17.08: 1,56:1 i 1,66:1, czyli
   napis praktycznie niewidoczny. Bylo tak od dawna, a moje przyciemnienie bazy
   (4,33:1 -> 7,8:1 na jasnym) pogorszylo sprawe. Na ciemnym MUSI byc `--akcent-jasny`. */
.sekcja--ciemna .eyebrow, .kontakt .eyebrow, .grupy .eyebrow {
  background: rgba(255, 255, 255, .1); color: var(--akcent-jasny);
}
/* ZMIANA: pigulka pod eyebrow jest CIEMNA, nie jasna. Jasna nad jasnym zdjeciem
   dawala kontrast 2,4-3,2:1 i napis praktycznie ginal. Zmierzone na trzech makietach. */
.hero .eyebrow { background: rgba(0, 0, 0, .58); }

/* --- przyciski ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  cursor: pointer; font: 700 14.5px 'Nunito', sans-serif;
  padding: 14px 26px; min-height: var(--tap); border-radius: 999px;
  /* ZMIANA: bialy tekst siedzi na --akcent-ciemny, nie na --akcent. Na alpakach
     biel na koralu #C0704D daje 3,02:1, a napis 14,5 px potrzebuje 4,5:1.
     Ciemniejszy odcien daje 4,68:1 i wyglada praktycznie tak samo.
     ZASADA: --akcent to wypelnienie DEKORACYJNE (ikony, ramki, tla bez tekstu),
     --akcent-ciemny wszedzie, gdzie na kolorze stoi bialy napis. */
  border: 1.5px solid var(--akcent-ciemny); background: var(--akcent-ciemny); color: #fff;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 12px 26px -12px rgba(28, 16, 8, .7);
}
/* ⚠️ Hover PRZESUWA przycisk - na iOS dotkniecie przykleja `:hover` i przycisk
   zostawal podniesiony po zabraniu palca. Na dotyku odzew daje `:active`. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ciemny); border-color: var(--ciemny); transform: translateY(-2px); }
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; flex: none; }
/* Przycisk-obrys MUSI miec jawne `background`, inaczej natywny <button> bierze
   szare tlo systemowe i napis znika do czasu najechania. */
.btn-obrys { background: transparent; color: var(--ink); border-color: rgba(28, 16, 8, .28); box-shadow: none; }
.btn-obrys:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-jasny { background: #fff; color: var(--akcent-ciemny); border-color: #fff; }
.btn-jasny:hover { background: var(--ciemny); color: #fff; border-color: var(--ciemny); }

/* --- pasek makiety (tylko demo, na stronie klienta go nie ma) --------------- */
.demobar {
  background: var(--ciemny); color: #f0e6d6; font-size: 12.5px; text-align: center;
  padding: 9px 16px; line-height: 1.5;
}
.demobar b { color: #fff; }
.demobar a { color: var(--akcent); font-weight: 700; text-decoration: underline; }

/* --- topbar ---------------------------------------------------------------- */
.topbar { background: var(--ciemny); color: #f0e6d6; font-size: 13px; }
/* Klient 14.08.2026: tresc gornego paska ma stac NA SRODKU, a nie rozjezdzac sie
   na boki. Konto rodzica przeniesione stad do glownego naglowka juz wczesniej. */
.topbar .wrap {
  display: flex; align-items: center; justify-content: center; gap: 12px 22px;
  min-height: 40px; flex-wrap: wrap; padding-block: 6px;
}
/* „Zadzwon" siedzi w pasku informacyjnym - w glownym naglowku nachodzil na menu */
/* ⚠️ Selektor MUSI byc mocniejszy niz .topbar a - tamta regula ustawia jasny
   kolor tekstu i na terakotowej pigulce dawala 2,2:1 (nieczytelne).
   Ciemny napis na jasnej pigulce: 9,4:1. */
.topbar .tb-tel {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 6px;
  padding: 5px 13px; border-radius: 100px; min-height: 30px;
  background: #F2C9AE; color: #2C2A21; font-weight: 700; white-space: nowrap;
}
.topbar .tb-tel svg { width: 14px; height: 14px; flex: none; }
@media (hover: hover) { .topbar .tb-tel:hover { background: #fff; color: var(--ciemny); } }
/* na telefonie pasek jest jedyna droga do telefonu, wiec cel dotyku ma 44 px */
@media (max-width: 720px){ .topbar .tb-tel{ min-height: 44px; padding: 8px 16px; } }
/* Ikony social w gornym pasku (klient, 14.08.2026: „u gory ikona Facebooka oraz
   Instagrama"). Kolor jasny, bo pasek jest ciemny; cel dotyku 44 px na telefonie. */
.topbar .tb-social { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.topbar .tb-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: #F0E6D6; transition: background .2s, color .2s;
}
.topbar .tb-social svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .topbar .tb-social a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
}
@media (max-width: 720px) { .topbar .tb-social a { width: 44px; height: 44px; } }
.tb-info { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
/* Konto rodzica - prawy gorny rog. Pigulki, a nie gole linki, zeby nie zlewaly sie
   z informacjami po lewej i mialy sensowny cel dotyku na telefonie. */
.tb-konto { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tb-konto .tb-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px;
  padding: 6px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 800;
  letter-spacing: .01em; color: #fff; border: 1px solid rgba(255, 255, 255, .38);
  transition: background .2s, border-color .2s, color .2s;
}
/* Drugi z linkow jest PELNA pigulka - w pasku obok czterech linii tekstu sama
   ramka gubila sie zupelnie. Ciemny napis na jasnym bezie: ok. 7,5:1. */
.tb-konto .tb-btn--ramka {
  background: var(--akcent-jasny); border-color: var(--akcent-jasny); color: var(--ciemny);
}
.tb-konto .tb-btn svg { width: 15px; height: 15px; flex: none; }
/* „Wyloguj" bywa <button>, a nie <a> - bez tego dostaje szare tlo i font systemowy. */
.tb-konto button.tb-btn { background: none; font-family: inherit; cursor: pointer; }
/* ⛔ Bez klasy `.tb-imie` - powitanie „Cześć, <imię>" zdjete z naglowka 14.08. */
@media (hover: hover) and (pointer: fine) {
  .tb-konto .tb-btn:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
  .tb-konto .tb-btn--ramka:hover { background: #fff; border-color: #fff; color: var(--ciemny); }
}
.topbar b { color: #fff; font-weight: 700; }
.topbar .sep { opacity: .35; }
/* Akcent na ciemnym MUSI byc jasny - #C0704D na pasie dawal 3,3:1. */
.topbar a { color: var(--akcent-jasny); font-weight: 700; white-space: nowrap; }

/* --- nawigacja ------------------------------------------------------------- */
header.nav {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid transparent;
  transition: box-shadow .3s ease, border-color .3s ease;
}
/* ⚠️ Po przewinieciu naglowek dostawal 1 px obramowania. Na tle zdjecia hero czytalo
   sie to jak jasna kreska doklejona miedzy naglowkiem a kadrem (uwaga Macka).
   Zostaje sam cien - oddziela pasek wystarczajaco, a nie rysuje linii. */
header.nav.scrolled { box-shadow: 0 10px 34px -20px rgba(28, 16, 8, .5); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 18px; }
.nav-logo { display: inline-flex; align-items: center; gap: 13px; }   /* odstep znak-napis min. 12px */
.nav-logo img { height: 46px; width: auto; }
.nav-logo .nazwa { font-family: 'Bree Serif', serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 22px; }
/* MENU: GRUPA ROZWIJANA „OFERTA" (Maciek 17.08.2026).
   ⛔ Podmenu chowa CSS, NIE atrybut `hidden` - arkusz ma globalne
      `[hidden] { display: none !important }`, ktore zablokowaloby otwieranie przez `:hover`.
   ⚠️ `::after` to niewidoczny MOSTEK: bez niego kursor traci hover na przerwie 10 px
      miedzy przyciskiem a lista i podmenu zamyka sie w polowie drogi.
   ⚠️ `html:not(.js-menu)` - bez JavaScriptu podmenu otwiera `:focus-within`, czyli dotkniecie
      przycisku. Gdy JS jest, ta regula sie wylacza, bo dotkniecie otwieraloby i zamykalo
      podmenu w jednym gescie. */
.ma-grupa { position: relative; display: inline-flex; }
.ma-grupa::after { content: ''; position: absolute; left: -8px; right: -8px; top: 100%; height: 14px; }
.ma-przycisk {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  padding: 0; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink); transition: color .2s;
}
.ma-strzalka { width: 12px; height: 12px; flex: none; transition: transform .25s; }
.ma-grupa.otw .ma-strzalka { transform: rotate(180deg); }
.ma-lista {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; gap: 2px; min-width: 238px; z-index: 95;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px;
  box-shadow: 0 26px 52px -28px rgba(28, 16, 8, .5);
}
/* ⚠️⚠️ HOVER, KTORY OTWIERA - TYLKO NA MYSZY (24.08.2026). Na iPhonie dotkniecie
   przykleja `:hover` az do dotkniecia gdzie indziej: skrypt zdejmowal `.otw` (strzalka
   wracala), a lista zostawala otwarta i grupy NIE DALO SIE ZWINAC. */
@media (hover: hover) and (pointer: fine) {
  .ma-grupa:hover .ma-lista { display: flex; }
}
.ma-grupa.otw .ma-lista { display: flex; }
html:not(.js-menu) .ma-grupa:focus-within .ma-lista { display: flex; }
.ma-lista a.link { padding: 10px 14px; border-radius: 10px; white-space: nowrap; }
@media (hover: hover) {
  .ma-lista a.link:hover { background: color-mix(in srgb, var(--akcent) 14%, transparent); }
  .ma-przycisk:hover { color: var(--akcent-ciemny); }
}
/* ⚠️ Jedenascie pozycji przy odstepie 22 px nie mieszczy sie w jednym rzedzie nad progiem
   hamburgera - dlatego 16 px. Zmierzone na renderze, nie na oko. */
.nav-links { gap: 10px; }
/* W ROZWINIETYM MENU (hamburger): podmenu jest zwykla, wcieta lista - zamiast wyskakujacego
   panelu, ktory na telefonie wychodzilby za ekran. */
@media (max-width: 1130px) {
  .ma-grupa { display: block; width: 100%; }
  .ma-grupa::after { display: none; }
  /* ⚠️ `min-height` MUSI byc, nie tylko padding: przy `padding: 11px 0` cel dotyku wychodzil
     43 px, czyli o JEDEN piksel pod progiem 44 px. Zmierzone, nie oszacowane. */
  .ma-przycisk { width: 100%; justify-content: space-between; padding: 11px 0; min-height: 46px; font-size: 16px; }
  .ma-lista {
    position: static; transform: none; min-width: 0; padding: 0 0 6px 16px;
    background: none; border: 0; box-shadow: none; gap: 0;
  }
  .ma-lista a.link { padding: 10px 0; }
}

/* ⚠️ Etykiety nawigacji NIE moga sie lamac („Cennik i / karnety", „O / nas") -
   przy siedmiu pozycjach naglowek robil sie dwuwierszowy i nierowny. Zamiast
   lamania: szerszy pas naglowka i wczesniejszy hamburger. */
.nav-links .link { white-space: nowrap; }
header.nav .wrap { max-width: 1560px; }
/* Uklad naglowka: logo z lewej, LINKI WYSRODKOWANE, przycisk przy prawej krawedzi.
   Przycisk stoi w HTML wewnatrz .nav-links (na telefonie ma byc w rozwijanym menu),
   wiec na desktopie wyjmujemy go z nurtu absolutem, a strefe srodkowania
   pomniejszamy o jego szerokosc (padding-right), zeby linki nie wjezdzaly pod niego. */
.nav-inner { position: relative; }
.nav-links { flex: 1 1 auto; justify-content: center; padding-right: 215px; }
.nav-links .btn { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); }
.nav-links a.link { font-size: 15px; font-weight: 600; color: var(--ink); transition: color .2s; }
.nav-links a.link:hover, .nav-links a.link.aktywny { color: var(--akcent-ciemny); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; position: relative; z-index: 90; }
.nav-toggle span { display: block; width: 25px; height: 2.4px; background: var(--ink); border-radius: 3px; margin: 5px 0; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.4px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.4px) rotate(-45deg); }

/* --- hero ------------------------------------------------------------------ */
/* ZMIANA: wysokosc liczona z odjeciem paskow nad hero (`--topsum` z JS).
   Oryginal ma `92vh`; w makiecie doklada sie jeszcze pasek demo, wiec rzad chipow
   ladowal pod zagieciem. Bramka „hero miesci sie w ekranie" oblewa powyzej 900 px. */
/* Tresc hero WYSRODKOWANA W PIONIE (uwaga Macka 14.08 - siedziala przy dolnej
   krawedzi i wygladala na zsunieta). Odstepy po obu stronach rowne. */
.hero {
  position: relative; padding: 0;
  min-height: min(calc(100svh - var(--topsum)), 860px);
  display: flex; align-items: center; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: kenburns 22s ease-out forwards; }
@keyframes kenburns { to { transform: scale(1.13); } }
/* Welon: srodek NIGDY `transparent` - na jasnym zdjeciu napis hero w to wpada. */
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  /* ⚠️ Wzmocnione po podmianie kadru: nowy hero ma jasne okna, na ktorych
     wyroznienie w h1 spadalo do 3,96:1 (mediana 7,11:1). */
  background: linear-gradient(180deg, rgba(28, 16, 8, .74) 0%, rgba(28, 16, 8, .74) 42%, rgba(28, 16, 8, .92) 100%);
}
.hero-inner { position: relative; z-index: 2; color: #fff; padding-block: 48px; max-width: 880px; }
.hero .eyebrow { color: #F2BC9E; }
.hero h1 { font-size: clamp(42px, 7.2vw, 88px); color: #fff; margin: 16px 0 20px; text-shadow: 0 2px 30px rgba(0, 0, 0, .28); }
.hero h1 em { font-style: normal; color: #F2BC9E; }
.hero p.sub { font-size: clamp(16.5px, 2.2vw, 21px); font-weight: 400; color: #F7F4EE; max-width: 620px; margin-bottom: 30px; text-shadow: 0 1px 16px rgba(0, 0, 0, .3); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 8px 15px; border-radius: 999px;
}
.chip svg { width: 15px; height: 15px; opacity: .92; flex: none; }
.chip .gwiazda { color: #ffcf5d; }

/* --- rytm sekcji ----------------------------------------------------------- */
section { padding: 104px 0; position: relative; }
.lead { max-width: 660px; }
.lead h2 { font-size: clamp(31px, 4.7vw, 52px); margin: 15px 0 0; }
.lead p { color: var(--muted); margin-top: 16px; font-size: 17.5px; }
/* Sekcja „wstep + tresc" jest WYSRODKOWANA - domyslnie, bez pytania.
   Wyjatki (swiadome): hero, sekcje z formularzem, uklady „tekst obok zdjecia". */
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }
.sekcja--sand { background: var(--sand); }
.sekcja--ciemna { background: var(--ciemny); color: #f4ebdb; }
.sekcja--ciemna h2, .sekcja--ciemna h3 { color: #fff; }
.sekcja--ciemna .eyebrow { color: #F2BC9E; }
.sekcja--ciemna .lead p { color: #d3c3ae; }

/* --- pas zaufania (ciemny) -------------------------------------------------- */
.trust { background: var(--ciemny); color: #f3ead9; padding: 30px 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.trust-item .num { font-family: 'Bree Serif', serif; font-size: 34px; font-weight: 600; color: #fff; line-height: 1; }
.trust-item .num .gwiazda { color: #ffcf5d; font-size: 24px; }
.trust-item .lbl { font-size: 13px; color: var(--na-ciemnym-cichy); letter-spacing: .02em; }
.trust-cta { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- historia: dwa przechylone zdjecia + tekst ------------------------------ */
.hist-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
/* ⚠️ Wysokosc kolaza MUSI isc za szerokoscia kolumny, nie stac na sztywno. Przy stalym
   `min-height` zakladka dwoch ramek zmieniala sie w szczeline, gdy okno bylo wezsze
   (zmierzone: 146 px zakladki przy 1600, MINUS 25 px przy 900). Proporcja 1,2:1 wynika
   z rachunku: ramka ma 80% szerokosci i kadr 3:2, czyli 0,53 szerokosci kolumny -
   dwie takie ramki z sensowna zakladka mieszcza sie wlasnie w tej proporcji. */
.hist-photos { position: relative; aspect-ratio: 1.2 / 1; min-height: 300px; }
.hist-photos img { position: absolute; border-radius: 14px; box-shadow: var(--cien); border: 6px solid #fff; }
/* Klient 14.08: „oba podłużne, ten sam rozmiar". Jedna szerokość dla obu ramek
   i kadr 3:2 w pliku - bez tego jedna była pionowa, druga pozioma. */
/* Maciek 14.08: „te zdjecia powinny byc wieksze". Bylo 64% - wokol kolaza zostawalo
   tyle wolnego miejsca, ze wygladal jak miniaturka wrzucona w pusta kolumne. */
.hist-photos img.p1 { width: 80%; top: 0; left: 0; transform: rotate(-3deg); z-index: 2; }
.hist-photos img.p2 { width: 80%; bottom: 0; right: 0; transform: rotate(3deg); z-index: 1; }
.hist-text p { color: var(--muted); font-size: 17.5px; margin-top: 18px; }
.hist-text .podpis { margin-top: 26px; font-family: 'Bree Serif', serif; font-style: italic; font-size: 20px; color: var(--akcent-ciemny); }
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; background: var(--card);
  border: 1px solid var(--line); padding: 10px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 8px 22px -16px rgba(28, 16, 8, .4);
}
.badge svg { width: 17px; height: 17px; color: var(--akcent-ciemny); flex: none; }

/* --- bento: to, co klient MA (zwierzeta / produkty / realizacje) ------------ */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 16px; margin-top: 52px; }
.b-card { position: relative; overflow: hidden; border-radius: 14px; box-shadow: 0 16px 40px -26px rgba(28, 16, 8, .55); }
.b-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.b-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(28, 16, 8, .72)); }
.b-card .name { position: absolute; left: 16px; bottom: 13px; z-index: 2; color: #fff; font-family: 'Bree Serif', serif; font-size: 21px; font-weight: 600; }
.b-card .name.mala { font-size: 18px; }
.b-card.duza { grid-column: span 2; grid-row: span 2; }
.b-card.szeroka { grid-column: span 2; }
@media (hover: hover) and (pointer: fine) { .b-card:hover img { transform: scale(1.07); } }

/* --- pas z jedna dodatkowa usluga ------------------------------------------ */
.pas-usluga {
  display: flex; align-items: center; gap: 22px; margin-top: 26px; padding: 24px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.pas-usluga .ico { flex: none; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--akcent) 13%, transparent); display: grid; place-items: center; }
.pas-usluga .ico svg { width: 26px; height: 26px; color: var(--akcent-ciemny); }
.pas-usluga .t { flex: 1 1 auto; min-width: 0; }
.pas-usluga h3 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.pas-usluga p { color: var(--muted); font-size: 14.5px; margin-top: 5px; }
.pas-usluga .btn { flex: none; }

/* --- cennik: karta + kolumna korzysci -------------------------------------- */
.cennik-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items: center; }
.cennik-karta { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--cien); overflow: hidden; }
.cennik-karta .head { background: var(--akcent-ciemny); color: #fff; padding: 22px 28px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 14px; }
.cennik-karta .head h3 { color: #fff; font-size: 24px; }
.cennik-karta .head .od { font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .92; }
/* Wiersz cennika reaguje na najechanie - regula „hover na KAZDYM powtarzalnym bloku".
   Delikatny cieply podklad + akcentowa krecha przy lewej krawedzi; kwota ZOSTAJE
   w swoim kolorze, bo jasniejszy akcent zbilby jej kontrast ponizej normy. */
.poz {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 28px; border-bottom: 1px solid var(--line);
  position: relative; transition: background .22s ease;
}
.poz::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--akcent); opacity: 0; transition: opacity .22s ease;
}
.poz:last-child { border-bottom: 0; }
.poz .t { font-weight: 600; }
.poz .t small { display: block; font-weight: 500; color: var(--muted); font-size: 13.5px; }
.poz .v { font-family: 'Bree Serif', serif; font-size: 27px; font-weight: 600; color: var(--akcent-ciemny); white-space: nowrap; }
/* ⚠️ Wartosci SLOWNE („wycena indywidualna", „wstep wolny") nie mieszcza sie na
   telefonie przy 27 px i `nowrap` - karta ucinala je na „wycena indywidua".
   Zmierzone przy 390 px: scrollWidth 377 przy clientWidth 336. */
@media (max-width: 560px) {
  .poz .v { font-size: 19px; white-space: normal; text-align: right; max-width: 46%; }
}
.poz .v.gratis { font-size: 19px; color: var(--zielony); }
/* „zapytajcie" zamiast kwoty - to nie jest cena, wiec nie moze krzyczec jak cena.
   Klient nie podal stawek za wejscia i karnety, a zgadywanie ich jest niedopuszczalne. */
.poz .v--pytaj {
  font-family: 'Nunito', system-ui, sans-serif; font-size: 15px; font-weight: 700;
  color: var(--muted); letter-spacing: .01em;
}
@media (hover: hover) and (pointer: fine) {
  .poz:hover { background: color-mix(in srgb, var(--akcent) 7%, var(--card)); }
  .poz:hover::before { opacity: 1; }
}
/* Notka pod blokiem cennika - WYSRODKOWANA (uwaga Macka 13.08).
   Miara ograniczona do 76ch: najdluzsza z notek ma 299 znakow i wysrodkowana
   na pelnej szerokosci rozjezdzalaby sie na jedna dluga linie. */
.cennik-nota { padding: 16px 28px; font-size: 13.5px; color: var(--muted);
  text-align: center; max-width: 76ch; margin-inline: auto; }
/* ⚠️ Bez `background`. Tlo notki bylo identyczne z tlem sekcji, wiec przy pelnej
   szerokosci nic nie bylo widac - ale po zwezeniu jej nieprzezroczysty prostokat
   zaczal WYCINAC cien karty lezacej wyzej i notka wygladala jak jasna plama. */
.cennik-obok h3 { font-size: clamp(28px, 4vw, 40px); }
.cennik-obok p { color: var(--muted); margin-top: 14px; font-size: 17px; }
.korzysc { display: flex; gap: 12px; margin-top: 16px; align-items: flex-start; }
.korzysc svg { width: 22px; height: 22px; color: var(--akcent-ciemny); flex: none; margin-top: 2px; }
.korzysc b { display: block; }
.korzysc span { color: var(--muted); font-size: 15px; }

/* --- sekcja ciemna: oferta dla grup ---------------------------------------- */
.oferta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 52px; align-items: stretch; }
.oferta-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.oferta-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.oferta-foto img:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.oferta-lista { list-style: none; }
.oferta-lista li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.oferta-lista li:last-child { border-bottom: 0; }
.oferta-lista .ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--akcent) 18%, transparent); display: grid; place-items: center; }
.oferta-lista .ico svg { width: 22px; height: 22px; color: #ffb59c; }
.oferta-lista b { color: #fff; font-size: 16.5px; }
.oferta-lista .cena { color: #ffcdb9; font-weight: 700; }
.oferta-lista p { color: var(--na-ciemnym-cichy); font-size: 14.5px; margin-top: 2px; }
.oferta-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 13px; align-items: center; }
/* Wariant wysrodkowany (uwaga Maćka 13.08): przycisk na srodku, nota POD nim.
   Bazowy uklad kladl je obok siebie z dosunieciem do lewej. */
.oferta-cta--srodek { flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
/* Wariant dla SAMYCH przyciskow (bez noty): wysrodkowany rzad, bez ukladania
   ich jeden pod drugim - dwa pelne przyciski w kolumnie wygladaja za ciezko. */
.oferta-cta--centruj { justify-content: center; }
.oferta-cta--srodek .nota { max-width: 56ch; }
/* Nota domyslnie w kolorze dla JASNEGO tla; kremowy wariant tylko w ciemnych sekcjach.
   ⚠️ Wczesniej bylo odwrotnie - kremowy #F7F4EE trafial na krem i dawal 1,76:1
   (nota pod pakietami i w „Gdzie nas znalezc" byly praktycznie niewidoczne). */
.oferta-cta .nota { font-size: 14px; color: var(--muted); }
.sekcja--ciemna .oferta-cta .nota,
.kontakt .oferta-cta .nota { color: var(--na-ciemnym-cichy); }

/* --- karty sezonowe / duze kafle ze zdjeciem -------------------------------- */
.sezon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
.sezon-karta { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; box-shadow: var(--cien); }
.sezon-karta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
/* ⚠️ Welon MUSI siegac wyzej i byc mocniejszy: zdjecia bawialni sa bardzo jasne,
   a akapit stoi w polowie wysokosci karty. Przy welonie od 35% i kryciu .85
   tekst lezal praktycznie na bialym zdjeciu. */
/* ⚠️ Welon NIE MOZE zaczynac sie od `transparent`. Po podmianie zdjec na jasniejsze
   (pionowy `bawialnia.webp` - drewno i biala lawka w gornej polowie) napis karty
   „Strefa zabawy" mial 1,85:1, czyli byl praktycznie niewidoczny. Zmierzone
   pikselowo w audycie 17.08. Gradient startuje teraz od realnego przycienienia. */
.sezon-karta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 16, 8, .30) 0%, rgba(28, 16, 8, .62) 42%, rgba(28, 16, 8, .92) 100%); }
.sezon-karta .c { position: relative; z-index: 2; color: #fff; padding: 30px; }
.sezon-karta .tag { display: inline-block; background: var(--akcent-ciemny); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.sezon-karta h3 { color: #fff; font-size: 28px; }
.sezon-karta p { color: #eaddcb; font-size: 15px; margin-top: 8px; max-width: 90%; }
.sezon-karta .wiecej { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; min-height: 44px; font-family: 'Nunito', sans-serif; font-size: 14.5px; font-weight: 700; color: #fff; }
.sezon-karta .wiecej::after { content: '>'; font-weight: 800; transition: transform .25s ease; }
@media (hover: hover) and (pointer: fine) {
  .sezon-karta:hover img { transform: scale(1.06); }
  .sezon-karta:hover .wiecej::after { transform: translateX(4px); }
}

/* --- galeria ---------------------------------------------------------------
   ZMIANA: oryginal ma `columns: 4` (murek) - kafle roznej wysokosci i dziury
   w dolnym rzedzie. Regula 6O i bramka „galeria: rowne kafle w rzedzie" wymagaja
   rownych kafli, wiec galeria idzie na FLEX ze STALA wysokoscia ramki.
   `flex: 1 1 300px` domyka ostatni rzad, row-gap dwa razy wiekszy niz column-gap. */
/* ⚠️ Siatka na GRID o stałej liczbie kolumn. Na flexie z `max-width` kafle nie
   rosły do końca rzędu i przy 6 sztukach zostawała pusta dziura (Maciek, 14.08).
   4 / 2 / 1 kolumny - liczba kafli (8 na głównej, 12 w galerii) dzieli się przez
   każdą z nich, więc żaden rząd nie zostaje niepełny. */
/* PASEK ZDJĘĆ POD HERO (Maciek 17.08.2026: „żeby zdjęcia były wyżej i się od nich
   rozpoczynały wszystkie podstrony"). Kwadrat, nie kafel 3:4 z galerii: cztery kafle 3:4
   maja 363 px wysokosci i odpychaja tresc w dol, kwadrat ma ok. 272 px i czyta sie jak
   PASEK, a nie druga galeria. Zdjecia sa te same co w galerii - kwadrat robi CSS,
   wiec folder img/ nie rosnie ani o bajt. */
/* ⚠️ Dolny odstęp MUSI byc realny, nie 4 px. Zmierzone 17.08: miedzy dolna krawedzia
   zdjec a KRAWEDZIA TLA nastepnej sekcji bylo 4 px (2 px na telefonie), a na stronach
   z `sekcja--sand` ta krawedz jest widoczna - zdjecia kleily sie do niej. Do TRESCI
   bylo 108 px i wygladalo dobrze, wiec problemem byla wlasnie krawedz tla. */
.sekcja--pas { padding-block: 40px 60px; }
.galeria--pas { gap: 16px 14px; margin-top: 26px; }
.galeria--pas .g-item { aspect-ratio: 1 / 1; }
.sekcja--pas .lead { margin-bottom: 0; }
/* ⚠️ Pasek trzyma CZTERY kolumny znacznie dłużej niż galeria. Przy dwóch kolumnach na 900 px
   kafel ma 414 px, więc sam pasek robi się 850 px wysoki i znowu odpycha treść w dół -
   dokładnie to, czego mieliśmy uniknąć (zmierzone 17.08). Podwójna klasa daje wyższą
   specyficzność niż `.galeria` w media query niżej, więc kolejność reguł nie ma znaczenia. */
@media (max-width: 900px) { .galeria.galeria--pas { grid-template-columns: repeat(4, 1fr); gap: 12px 10px; } }
@media (max-width: 640px) { .galeria.galeria--pas { grid-template-columns: repeat(2, 1fr); gap: 14px 12px; }
  .sekcja--pas { padding-block: 28px 40px; } }
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; margin-top: 52px; }
@media (max-width: 900px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
/* ⚠️ NA TELEFONIE ZOSTAJA DWIE KOLUMNY. Przy jednej kolumnie galeria czterdziestu kafli
   ma 22 650 px wysokosci (zmierzone przy 390 px) - to przewijanie bez konca. Dwie kolumny
   skracaja ja o polowe, kafel ma wtedy ok. 160 px, a peiny kadr i tak otwiera lightbox.
   40 dzieli sie przez 2, wiec zaden rzad nie zostaje niepelny. */
@media (max-width: 400px) { .galeria { gap: 14px 10px; } }
/* Kafle w PIONIE: wszystkie zdjecia od klienta sa pionowe (telefon), a poziomy
   kafel obcinal je w poprzek - glowy i gora kadru wypadaly poza ramke. */
.g-item {
  min-width: 0; aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden; cursor: pointer; position: relative;
  box-shadow: 0 12px 30px -22px rgba(28, 16, 8, .5);
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.g-item::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--akcent) 0%, transparent); transition: background .3s; }
@media (hover: hover) and (pointer: fine) {
  .g-item:hover img { transform: scale(1.05); }
  .g-item:hover::after { background: color-mix(in srgb, var(--akcent) 14%, transparent); }
}

/* --- karty informacyjne (dobrze wiedziec) ---------------------------------- */
.karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.karta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; gap: 16px; align-items: flex-start; }
.karta .ico { flex: none; width: 48px; height: 48px; border-radius: 13px; background: color-mix(in srgb, var(--akcent) 13%, transparent); display: grid; place-items: center; }
.karta .ico svg { width: 24px; height: 24px; color: var(--akcent-ciemny); }
.karta .tyt { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.karta p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* --- karty ze zdjeciem (okolica / realizacje) ------------------------------ */
.foto-karty { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 52px; }
.f-karta { border-radius: var(--radius); overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: 0 14px 34px -26px rgba(28, 16, 8, .5); }
.f-karta .ph { height: 200px; overflow: hidden; }
.f-karta .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.f-karta .cc { padding: 18px 20px; }
.f-karta .tyt { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 16.5px; }
.f-karta p { color: var(--muted); font-size: 14px; margin-top: 4px; }
@media (hover: hover) and (pointer: fine) { .f-karta:hover .ph img { transform: scale(1.06); } }

/* --- kontakt (ciemny) ------------------------------------------------------ */
.kontakt { background: var(--ciemny); color: #f4ebdb; }
.kontakt .eyebrow { color: #ffb59c; }
.kontakt h2 { color: #fff; }
/* `stretch` + `align-self: start` na formularzu: wysokosc rzedu wyznacza wyzsza
   z kolumn, a lewa moze sie do niej rozciagnac. Dzieki temu zdjecie dobiera
   wysokosc do formularza zamiast wystawac pod niego. */
.k-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; margin-top: 48px; align-items: stretch; }
.k-info .row { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); align-items: flex-start; }
.k-info .row:last-of-type { border-bottom: 0; }
.k-info .ico { flex: none; width: 42px; height: 42px; border-radius: 11px; background: color-mix(in srgb, var(--akcent) 18%, transparent); display: grid; place-items: center; }
.k-info .ico svg { width: 20px; height: 20px; color: #ffb59c; }
.k-info .lbl { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #fff; font-weight: 700; }
.k-info .val { color: #fff; font-size: 16.5px; font-weight: 600; margin-top: 1px; }
.k-info .val a { overflow-wrap: normal; word-break: normal; }
.k-info .val a:hover { color: #ffcdb9; }
.k-info .val span { display: block; font-weight: 500; color: var(--na-ciemnym-cichy); font-size: 14.5px; }
/* Zdjecie dociaga kolumne do wysokosci formularza - wzor despe-debki. */
.k-foto { flex: 1 1 auto; margin-top: 22px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.k-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
form.k-form { background: var(--card); color: var(--ink); border-radius: 20px; padding: 32px; box-shadow: var(--cien);
  align-self: start; }
form.k-form h3, form.k-form h2 { font-size: 24px; margin: 0; color: var(--ink); }
/* ⛔ color KONIECZNY: sekcja kontaktu jest ciemna i .kontakt h2 daje biel - a formularz
   to biala karta. Po awansie h3->h2 naglowek byl bialy na bialym (1,02:1). */
form.k-form p.f-sub { color: var(--muted); font-size: 14.5px; margin: 6px 0 20px; }
.field { margin-bottom: 15px; }
label { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--akcent-ciemny); font-weight: 700; margin-bottom: 6px; }
input, textarea, select {
  width: 100%; padding: 13px 15px; border: 1.5px solid #9A8D7A; background: #fbf7f0;
  font: 16px 'Nunito', sans-serif;   /* 16px blokuje auto-zoom na iOS */
  color: var(--ink); border-radius: 11px; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 18%, transparent); }
.form-msg { display: none; margin-top: 14px; font-size: 14.5px; color: var(--ink); background: #f4ece0; border: 1px solid var(--akcent); padding: 13px 15px; border-radius: 11px; }
.form-msg b { color: var(--akcent-ciemny); }
.form-msg.jest { display: block; }   /* ⚠️ BEZ TEGO KOMUNIKATY MILCZA: skrypty pokazuja je klasa `jest`, a `.form-msg` ma display:none. */
.f-rodo { margin-top: 16px; font-size: 13.5px; line-height: 1.6; color: #9B3C1C; }
.f-rodo a { color: #9B3C1C; font-weight: 700; text-decoration: underline; }

/* --- stopka ----------------------------------------------------------------
   ZMIANA: cztery kolumny zamiast trzech z oryginalu - regula 6P i bramka
   `_audyt-stopka.mjs` wymagaja `marka | oferta | godziny | kontakt`. */
footer.ft { background: var(--ciemny-stopka); color: var(--na-ciemnym-cichy); padding: 60px 0 26px; }
/* Piec kolumn od 14.08 (doszla „Formalnosci"). Na sredniej szerokosci laduja sie
   w dwa rzedy, zeby linki nie zrobily sie waskie na jedno slowo. */
/* Cztery kolumny od 14.08: kontakt i social wrocily POD LOGO, do pierwszej kolumny,
   zamiast stac osobno na koncu (uwaga Macka - dane firmy maja byc przy marce). */
.ft-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 40px); }
@media (max-width: 1180px) { .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ft .flogo { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.ft .flogo img { height: 52px; width: auto; }
.ft .flogo .nazwa { font-family: 'Bree Serif', serif; font-size: 21px; color: #fff; }
.ft p.opis { font-size: 14.5px; max-width: 340px; }
.ft h5 { color: var(--akcent-jasny); font-family: 'Nunito', sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.ft a:not(.btn) { display: block; padding: 4px 0; font-size: 14.5px; transition: color .2s; }
.ft a:hover { color: var(--akcent-jasny); }
/* Pozycja stopki BEZ odnosnika - demo jest jednostronicowe, ale stopka pokazuje
   pelna mape serwisu. Napis, nie martwy link: martwy link wyglada na zepsuty. */
.ft .ft-poz { display: block; padding: 4px 0; font-size: 14.5px; color: var(--na-ciemnym-cichy); }
.ft .godz { font-size: 14.5px; padding: 4px 0; }
.ft .godz b { color: var(--akcent-jasny); }
.ft .soc { display: flex; gap: 12px; margin-top: 6px; }
.ft .soc a { width: 44px; height: 44px; border-radius: 11px; background: rgba(255, 255, 255, .07); display: grid; place-items: center; padding: 0; }
.ft .soc a:hover { background: var(--akcent); }
.ft .soc svg { width: 19px; height: 19px; color: #fff; }
.ft-copy { margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, .09); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--na-ciemnym-cichy); }
.ft-copy a { color: var(--akcent-jasny); display: inline; }
.nw { white-space: nowrap; }   /* nazwy z myslnikiem: PART-WEB, e-mail, e-book */
/* Podpis w stopce ma stac w JEDNEJ linii („Realizacja: PART-WEB", jak w Despe).
   Linki w stopce sa blokowe, wiec mimo white-space:nowrap sam link schodzil nizej. */
.ft-copy .nw { display: inline-flex; align-items: baseline; gap: 5px; }
.ft-copy .nw a { display: inline; padding: 0; }

/* --- lightbox --------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(28, 16, 8, .92); display: none; align-items: center; justify-content: center; padding: 30px; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.lb-btn { position: absolute; background: rgba(255, 255, 255, .12); border: 0; color: #fff; width: 52px; height: 52px; border-radius: 50%; font-size: 24px; cursor: pointer; display: grid; place-items: center; transition: background .2s; }
.lb-btn:hover { background: var(--akcent); }
.lb-close { top: 22px; right: 22px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* --- skip link -------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--akcent-ciemny); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 15px; }
.skip-link:focus { left: 0; }

/* ============================================================================
   RESPONSYWNOSC
   ============================================================================ */
/* Menu: przy 8-9 pozycjach hamburger wchodzi juz na tablecie/waskim desktopie. */
/* ⚠️ Prog hamburgera podniesiony z 1080 na 1240 px: pelne menu (znak + nazwa
   z podtytulem + 7 linkow + przycisk) potrzebuje ~1250 px. Miedzy 1080 a 1240
   etykiety lamaly sie w dwoch wierszach. */
@media (max-width: 1130px) {
  .nav-links {
    position: fixed; inset: 74px 0 auto 0; background: var(--bg);
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: 0; overflow: hidden; transition: max-height .38s ease;
    border-bottom: 1px solid var(--line); box-shadow: var(--cien);
  }
  /* ⚠️⚠️ MENU MUSI SIE PRZEWIJAC. Sztywne 640 px + `overflow: hidden` przycinaly tresc
     po rozwinieciu grupy „Oferta", a palec przewijal STRONE W TLE.
     Dokladna wysokosc ustawia `app.js` z `visualViewport` (patrz naglowek generatora);
     te dwie wartosci to zapas na wypadek braku JS - `dvh` tam, gdzie jest wspierane. */
  .nav-links.open {
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links a.link { padding: 16px 26px; border-bottom: 1px solid var(--line); }
  /* przycisk wraca z absolutu do rozwijanego menu */
  .nav-links { padding-right: 0; justify-content: flex-start; }
  .nav-links .btn { position: static; transform: none; margin: 16px 26px; }
  .nav-toggle { display: block; }
}
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .b-card.duza { grid-column: span 2; grid-row: span 1; }
  .b-card.szeroka { grid-column: span 2; }
  .karty, .foto-karty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
}
@media (max-width: 860px) {
  section { padding: 74px 0; }
  .hist-grid, .cennik-wrap, .oferta-grid, .sezon-grid, .k-grid, .ft-grid { grid-template-columns: 1fr; gap: 34px; }
  .hist-photos { max-width: 520px; margin-inline: auto; }
  .cennik-obok { order: -1; }
  .ft-copy { flex-direction: column; }
  /* cele dotyku: linki stopki, telefon w topbarze i dane kontaktowe mialy ~25 px */
  .ft a:not(.btn) { padding: 11px 0; }
  .topbar a { display: inline-block; padding: 12px 6px; }
  .nav-toggle { width: 46px; height: 46px; }
  .k-info .val a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .ft-copy a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Na waskim ekranie blok tresci hero siega srodka kadru i wchodzi w jasne
     partie zdjecia - welon musi byc mocniejszy. To czytelnosc, nie kosmetyka. */
  .hero-bg::after {
    background: linear-gradient(180deg, rgba(28, 16, 8, .42) 0%, rgba(28, 16, 8, .34) 24%, rgba(28, 16, 8, .74) 56%, rgba(28, 16, 8, .93) 100%);
  }
}
@media (max-width: 640px) {
  /* Na telefonie 74 px odstepu sekcji czyta sie jak dziura - bramka
     „sekcje bez nadmiarowej pustki" oblewa od 70 px w gore. */
  section { padding: 62px 0; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .karty, .foto-karty { grid-template-columns: 1fr; }
  .oferta-foto { grid-template-columns: 1fr 1fr; }
  .pas-usluga { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 22px; }
  .pas-usluga .btn { width: 100%; }
  .topbar .wrap { gap: 8px 14px; font-size: 12px; justify-content: center; }
  .tb-chowaj { display: none; }          /* na waskim ekranie zostaja godziny i telefon */
  .tb-konto { margin-left: 0; width: 100%; justify-content: center; }
  .tb-konto .tb-btn { min-height: 44px; padding: 10px 16px; }   /* prog dotyku */
  /* Pasek chipow: pelna szerokosc ekranu + snap + wygaszenie zamiast ostrego ciecia. */
  .hero-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity;
    margin-inline: -26px; padding-inline: 26px; scroll-padding-inline: 26px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 52px), transparent);
  }
  .hero-chips[data-koniec] { mask-image: none; -webkit-mask-image: none; }
  .hero-chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; }
}


/* ============================================================================
   HOVER NA WIERSZACH (07.08.2026)
   Zasada Macka: KAZDY powtarzalny blok reaguje na najechanie, nie tylko kafle.
   Dotyczy wierszy z ikona, pozycji cennika i wierszy kontaktu.
   Zapytanie (hover: hover) and (pointer: fine) jest obowiazkowe - bez niego
   na telefonie stan hover zostaje przyklejony po dotknieciu.
   ============================================================================ */
.oferta-lista li, .wys-lista li, .cen-poz, .k-info .row, .korzysc, .badge {
  transition: background-color .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1), border-color .24s ease;
  border-radius: 12px;
}
.oferta-lista li, .wys-lista li, .cen-poz, .k-info .row { padding-inline: 12px; margin-inline: -12px; }
.oferta-lista .ico, .wys-lista .ico, .k-info .ico, .korzysc svg {
  transition: background-color .24s ease, color .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  /* wiersze na ciemnych pasmach - rozjasniamy podklad */
  .sekcja--ciemna .oferta-lista li:hover,
  .kontakt .k-info .row:hover {
    background-color: rgba(255, 255, 255, .07);
    transform: translateX(4px);
  }
  .sekcja--ciemna .oferta-lista li:hover .ico,
  .kontakt .k-info .row:hover .ico { transform: scale(1.08); }

  /* wiersze na jasnym tle - przyciemniamy podklad */
  .wys-lista li:hover, .cen-poz:hover, .korzysc:hover {
    background-color: var(--sand);
    transform: translateX(4px);
  }
  .wys-lista li:hover .ico { background: var(--akcent-ciemny); }
  .wys-lista li:hover .ico svg { color: #fff; }

  /* male plakietki - sam delikatny unos */
  .badge:hover { transform: translateY(-3px); border-color: var(--akcent); }
}

@media (prefers-reduced-motion: reduce) {
  .oferta-lista li, .wys-lista li, .cen-poz, .k-info .row, .korzysc, .badge,
  .oferta-lista .ico, .wys-lista .ico, .k-info .ico { transition: none; }
}


/* ---------------------------------------------------------------------------
   Pas CTA ze zdjeciem w tle
   Zdjecie na pelna szerokosc ma NIESC tresc, a nie stac samo jako dekoracja.
   Welon jest czarny, nie w kolorze palety - dziala tak samo pod kazdym kadrem.
   --------------------------------------------------------------------------- */
.pas-cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(84px, 11vw, 148px) 0;
  background: var(--ciemny);   /* kolor zapasowy, gdy zdjecie nie wejdzie */
}
.pc-tlo { position: absolute; inset: 0; z-index: -1; }
.pc-tlo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-tlo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, var(--pc-welon-gora, .74)) 0%,
    rgba(0, 0, 0, var(--pc-welon-srodek, .62)) 48%,
    rgba(0, 0, 0, var(--pc-welon-dol, .82)) 100%);
}
.pas-cta h2 { color: #fff; max-width: 30ch; margin: 0 auto 18px; text-wrap: balance; }
.pas-cta h2 em { font-style: normal; color: var(--akcent-jasny); }
.pas-cta .pc-txt { color: rgba(255, 255, 255, .9); max-width: 56ch; margin: 0 auto 34px; text-wrap: pretty; }
.pc-akcje { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
/* ⚠️ .btn-obrys ma CIEMNY tekst - na kazdym ciemnym tle trzeba go odwrocic,
   inaczej znika (zmierzone 1,18:1 w rozpisce konfiguratora). Dopisuj tu kolejne
   ciemne konteksty zamiast klonowac regule. */
.pas-cta .btn-obrys,
.pl-akcje .btn-obrys,
.ks-akcje .btn-obrys { background: rgba(0, 0, 0, .3); color: #fff; border-color: rgba(255, 255, 255, .6); }

@media (hover: hover) and (pointer: fine) {
  .pas-cta .btn-obrys:hover { background: #fff; color: var(--ink); border-color: #fff; }
}
@media (max-width: 600px) {
  .pas-cta { padding: 68px 0; }
  .pas-cta h2 { max-width: none; }
  /* na telefonie przyciski jeden pod drugim i ROWNEJ szerokosci -
     rozne szerokosci wysrodkowane w kolumnie czytaja sie jak blad skladu */
  .pc-akcje { flex-direction: column; align-items: stretch; max-width: 300px; margin-inline: auto; }
}

/* ---------------------------------------------------------------------------
   Logo tekstowe - sygnatura z nazwy (klient nie ma pliku logo)
   --------------------------------------------------------------------------- */
.nav-logo--tekst { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.sygn { font: 400 26px/1.05 'Bree Serif', serif; color: var(--ink); letter-spacing: .01em; white-space: nowrap; }
.sygn em { font-style: normal; color: var(--akcent-ciemny); }
.sygn-sub { font: 700 10.5px/1 'Nunito', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.flogo--tekst { display: flex; flex-direction: column; gap: 4px; }
.ft .sygn { color: #fff; }
.ft .sygn em { color: var(--akcent-jasny); }
.ft .sygn-sub { color: rgba(255, 255, 255, .95); }

/* ---------------------------------------------------------------------------
   Planer urodzin - sedno makiety
   --------------------------------------------------------------------------- */
.planer { display: grid; grid-template-columns: 1.25fr .95fr; gap: 26px; margin-top: 52px; align-items: start; }
.pl-kroki { display: grid; gap: 14px; }
.pl-krok {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px;
  transition: border-color .24s ease, transform .24s cubic-bezier(.16, 1, .3, 1), box-shadow .24s ease;
}
.pl-nr {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--akcent) 16%, transparent);
  color: var(--akcent-ciemny); font: 700 15px/34px 'Nunito', sans-serif; text-align: center;
}
.pl-tresc { flex: 1; }
.pl-tresc h3 { font: 400 20px/1.2 'Bree Serif', serif; margin-bottom: 12px; }
.pl-pigulki { display: flex; flex-wrap: wrap; gap: 9px; }
.pig {
  cursor: pointer; border: 1.5px solid var(--line); background: transparent;
  border-radius: 999px; padding: 11px 16px; min-height: 44px;   /* prog dotyku */
  font: 700 13.5px/1.2 'Nunito', sans-serif; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.pig small { font-weight: 600; color: var(--muted); }
.pig.aktywna { background: var(--ciemny); border-color: var(--ciemny); color: #fff; }
.pig.aktywna small { color: rgba(255, 255, 255, .65); }
.pig.wylaczona { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.pl-suwak { display: flex; align-items: center; gap: 18px; }
/* Tor suwaka rysowany recznie: natywny accent-color w Chrome zostawia szary ogonek
   toru ZA kciukiem nawet na maksimum - wygladalo, jakby dalo sie ciagnac dalej niz 15.
   --pct nadpisuje planer.js przy kazdym ruchu; na max wypelnienie i kciuk dobijaja do konca. */
.pl-suwak input[type="range"] {
  flex: 1; min-height: 28px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
  --pct: 54.5%;
}
.pl-suwak input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--akcent) var(--pct), var(--line) var(--pct));
}
.pl-suwak input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; margin-top: -7px;
  background: var(--akcent); border: 3px solid var(--card);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.pl-suwak input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
.pl-suwak input[type="range"]::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--akcent); }
.pl-suwak input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--akcent); border: 3px solid var(--card);
  box-shadow: 0 1px 5px rgba(0, 0, 0, .35);
}
.pl-suwak input[type="range"]:focus-visible { outline: 3px solid var(--akcent-ciemny); outline-offset: 4px; border-radius: 999px; }
.pl-suwak output { font: 700 17px/1 'Nunito', sans-serif; color: var(--akcent-ciemny); min-width: 92px; text-align: right; }
.pl-podsumowanie {
  position: sticky; top: calc(var(--topsum) + 16px);
  background: var(--ciemny); color: #fff; border-radius: var(--radius);
  padding: 30px 30px 26px; box-shadow: var(--cien);
}
.pl-podsumowanie .eyebrow { background: rgba(255, 255, 255, .1); color: var(--akcent-jasny); }
.pl-zdanie { font: 400 22px/1.45 'Bree Serif', serif; margin: 16px 0 10px; }
/* ⚠️ Kroki kreatora stoja na BIALYCH kartach, a podsumowanie na ciemnej - wiec
   domyslnie ciemny tekst, jasny tylko w podsumowaniu. Wczesniej bylo odwrotnie:
   nota pod suwakiem byla biala na bialym, czyli nie bylo jej wcale. */
.pl-nota { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.pl-podsumowanie .pl-nota { color: rgba(255, 255, 255, .82); }
.pl-akcje { display: grid; gap: 10px; }

@media (hover: hover) and (pointer: fine) {
  .pl-krok:hover { border-color: var(--akcent); transform: translateY(-3px); box-shadow: var(--cien); }
  .pig:not(.aktywna):not(.wylaczona):hover { border-color: var(--akcent); color: var(--akcent-ciemny); transform: translateY(-2px); }
  .pl-akcje .btn-obrys:hover,
  .ks-akcje .btn-obrys:hover { background: #fff; color: var(--ink); border-color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .pl-krok, .pig { transition: none; } }
@media (max-width: 900px) {
  .planer { grid-template-columns: 1fr; }
  .pl-podsumowanie { position: static; }
}

.pas-cta { --pc-welon-gora: .78; --pc-welon-srodek: .72; --pc-welon-dol: .86; }


/* ---------------------------------------------------------------------------
   Kafle .karta - reakcja na najechanie (kazdy powtarzalny blok reaguje)
   --------------------------------------------------------------------------- */
.karta { transition: transform .28s cubic-bezier(.16, 1, .3, 1), box-shadow .28s ease, border-color .28s ease; }
.karta .ico, .karta .ico svg { transition: background-color .24s ease, color .24s ease; }
@media (hover: hover) and (pointer: fine) {
  .karta:hover { transform: translateY(-5px); border-color: var(--akcent); box-shadow: var(--cien); }
  .karta:hover .ico { background: var(--akcent-ciemny); }
  .karta:hover .ico svg { color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .karta { transition: none; } }


/* ============================================================================
   ROZBUDOWA NA SERWIS WIELOSTRONICOWY (13.08.2026, po akceptacji klienta).
   Style dla: naglowka podstrony, pakietow urodzinowych, FAQ, formularza rezerwacji,
   panelu rodzica i dokumentu prawnego.
   ========================================================================== */

/* --- naglowek podstrony + okruszki ---------------------------------------- */
/* ⚠️ Naglowek podstrony NIE potrzebuje odstepu na paski:  jest STICKY, a nie fixed,
   wiec zajmuje miejsce w ukladzie. Pierwsza wersja dodawala tu 
   i na telefonie robila 245 px pustki nad naglowkiem. */
.pod-naglowek { background: var(--bg); padding: 44px 0 8px; }
.okruszki { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }
.okruszki a { color: var(--akcent-ciemny); font-weight: 700; }
.okruszki .sep { opacity: .5; }
.pod-naglowek h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.01em; }
.pod-naglowek h1 em { font-style: normal; color: var(--akcent-ciemny); }
.lead-p { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 68ch; line-height: 1.65; }
.lead-p--nota { font-size: 15.5px; margin-top: 12px; }
.lead-p b { color: var(--ink); }

/* --- pakiety urodzinowe ---------------------------------------------------- */
.pakiety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 46px; }
.pak {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1), border-color .28s ease, box-shadow .28s ease;
}
.pak-glowa { display: flex; flex-direction: column; gap: 3px; }
.pak-nazwa { font-family: 'Bree Serif', serif; font-size: 26px; color: var(--ink); }
.pak-pod { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--akcent-ciemny); }
.pak-opis { color: var(--muted); font-size: 15px; }
.pak .ticks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; flex: 1 1 auto; }
.pak .ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; font-weight: 600; }
.pak .ticks svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--zielony); }
.pak-cena { font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; }
.pak-cena b { color: var(--akcent-ciemny); }
.pak .btn { width: 100%; justify-content: center; }
/* Dwa przyciski pod karta pakietu: wybor pakietu i telefon jednym kliknieciem.
   Ikona sluchawki wchodzi z CSS, zeby nie powtarzac SVG w kazdej karcie. */
/* Dwa przyciski pod karta pakietu, JEDEN POD DRUGIM - obok siebie etykieta
   „Wybierz pakiet Rodzinne" lamala sie na dwie linie w waskiej kolumnie. */
.pak-akcje { display: grid; gap: 9px; margin-top: 4px; }
.pak-akcje .btn { width: 100%; }
/* ⚠️ Ikona sluchawki idzie INLINE w markupie, nie maska CSS: maska odwolywala sie
   do zmiennej, ktorej finalnie nie bylo w :root, i zamiast ikony byl bialy kwadrat. */
.btn-tel { background: var(--ciemny); border-color: var(--ciemny); color: #fff; gap: 9px; }
.btn-tel svg { width: 17px; height: 17px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn-tel:hover { background: var(--akcent); border-color: var(--akcent); }
}
@media (hover: hover) and (pointer: fine) {
  .pak:hover { transform: translateY(-5px); border-color: var(--akcent); box-shadow: var(--cien); }
}
@media (prefers-reduced-motion: reduce) { .pak { transition: none; } }
@media (max-width: 900px) { .pakiety { grid-template-columns: 1fr; } }

/* --- FAQ ------------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: 12px; max-width: 900px; margin: 0 auto; }
.faq-poz { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-poz summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative;
  font-weight: 700; font-size: 16.5px; min-height: var(--tap); display: flex; align-items: center;
}
.faq-poz summary::-webkit-details-marker { display: none; }
.faq-poz summary::after {
  content: ''; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--akcent-ciemny); border-bottom: 2px solid var(--akcent-ciemny);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.faq-poz[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-poz[open] { border-color: color-mix(in srgb, var(--akcent) 42%, transparent); }
.faq-tresc { padding: 0 20px 20px; color: var(--muted); line-height: 1.7; }
.faq-poz summary:focus-visible { outline: 3px solid var(--akcent-ciemny); outline-offset: -3px; }

/* --- formularz rezerwacji --------------------------------------------------- */
.rez-karta {
  max-width: 980px; margin: 46px auto 0; background: var(--card); border: 1px solid var(--line);
  border-radius: 20px; padding: clamp(22px, 3.6vw, 38px); box-shadow: var(--cien);
}
.rez-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.rez-siatka > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 720px) { .rez-siatka { grid-template-columns: 1fr; } }
/* Przyciski formularza i nota POD nimi - wysrodkowane. To ten sam uklad, o ktory
   Maciek prosi przy kazdym bloku zakonczonym akcja (patrz `oferta-cta--srodek`). */
.rez-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; justify-content: center; }
.rez-nota { margin-top: 14px; font-size: 14px; color: var(--muted);
  text-align: center; max-width: 68ch; margin-inline: auto; }
.rez-ostrzezenie {
  margin-top: 8px; font-size: 14.5px; font-weight: 700; color: #fff;
  background: var(--akcent-ciemny); border-radius: 10px; padding: 9px 13px;
}
/* ⚠️ Karta rezerwacji stoi na CIEMNYM pasie - tekst musi miec wlasny kolor, inaczej
   dziedziczy jasny kolor sekcji i bialy napis siada na kremowej karcie (1,1:1). */
.sekcja--ciemna .rez-karta { color: var(--ink); }
.sekcja--ciemna .rez-karta label { color: var(--muted); }
.lead--jasny h2 { color: #fff; }
.lead--jasny p { color: rgba(255, 255, 255, .88); }
.lead--jasny .eyebrow { color: var(--akcent-jasny); background: rgba(255, 255, 255, .1); }
.f-sub { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.nota-godz { color: var(--na-ciemnym-cichy); }

/* --- panel rodzica: logowanie i rejestracja -------------------------------- */
.log-dwie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
@media (max-width: 900px) { .log-dwie { grid-template-columns: 1fr; } }
.log-karta { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--cien); }
.log-karta h2 { font-size: 26px; }
.log-sub { color: var(--muted); font-size: 14.5px; margin: 8px 0 18px; }
.log-blad { margin-top: 14px; font-size: 14.5px; font-weight: 700; color: #fff; background: var(--akcent-ciemny); border-radius: 10px; padding: 10px 14px; }
.konto-demo {
  margin-top: 16px; width: 100%; cursor: pointer; text-align: left; font: inherit;
  background: var(--sand); border: 1.5px dashed var(--akcent); border-radius: 12px;
  padding: 12px 15px; min-height: var(--tap); display: flex; flex-direction: column; gap: 2px; color: var(--ink);
}
.konto-demo span { font-size: 13.5px; color: var(--muted); }
.konto-demo:hover { border-style: solid; }

/* --- panel rodzica: widok po zalogowaniu ----------------------------------- */
.panel-gora { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.panel-kto { display: flex; gap: 13px; align-items: center; }
.panel-kto b { display: block; font-size: 17px; }
.panel-kto span span { font-size: 14px; color: var(--muted); }
.panel-awatar {
  width: 48px; height: 48px; border-radius: 50%; background: var(--akcent-ciemny); color: #fff;
  display: grid; place-items: center; font-family: 'Bree Serif', serif; font-size: 21px; flex: none;
}
.panel-zakladki { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.pz-btn {
  cursor: pointer; font: 700 14.5px 'Nunito', sans-serif; padding: 11px 20px; min-height: var(--tap);
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
}
.pz-btn[aria-selected="true"] { background: var(--ciemny); border-color: var(--ciemny); color: #fff; }
.panel-sekcja-w { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 32px); }
.panel-h2 { font-size: 24px; }
.panel-lead { color: var(--muted); font-size: 15px; margin: 8px 0 20px; }
.panel-pusto { color: var(--muted); font-size: 15px; margin-top: 14px; }
.tabela-otoczka { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; min-width: 520px; }
.tabela th, .tabela td { text-align: left; padding: 13px 12px; border-bottom: 1px solid var(--line); font-size: 15px; }
.tabela th { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.godz-mala { color: var(--muted); font-size: 13.5px; }
.status { display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 11px; border-radius: 999px; }
.st-ok { background: color-mix(in srgb, var(--zielony) 18%, transparent); color: #3F5230; }
.st-czeka { background: color-mix(in srgb, var(--akcent) 20%, transparent); color: var(--akcent-ciemny); }
.st-min { background: rgba(0, 0, 0, .09); color: var(--muted); }
.rez-karta--panel { margin-top: 0; box-shadow: none; border: 0; padding: 0; max-width: none; }
.lista-dzieci { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.lista-dzieci li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--sand); border-radius: 12px; padding: 13px 16px; font-size: 15.5px; }
.dz-uwagi { color: var(--muted); font-size: 14px; }
.dz-usun { margin-left: auto; cursor: pointer; font: 700 13.5px 'Nunito', sans-serif; background: none; border: 0; color: var(--akcent-ciemny); text-decoration: underline; min-height: 32px; }
.dz-pusto { color: var(--muted); }

/* --- dokument prawny -------------------------------------------------------- */
.dokument { padding: 40px 0 84px; }
.dok-wrap { max-width: 880px; }
.dok-sekcja { margin-top: 34px; }
.dok-sekcja h2 { font-size: 23px; display: flex; gap: 12px; align-items: baseline; }
/* ⚠️ --akcent na kremie to 3,44:1 - za malo dla 19 px bez pogrubienia.
   Numer sekcji dostaje ten sam odcien co inne male akcenty na jasnym tle. */
.dok-nr { font-family: 'Bree Serif', serif; color: #7F3F22; font-size: 19px; }
.dok-sekcja p { color: var(--muted); line-height: 1.75; margin-top: 10px; }
.dok-sekcja p b { color: var(--ink); }


/* --- poprawki po bramce QA (13.08.2026) ------------------------------------ */

/* Cztery kafle w rzedzie. `.karty` ma trzy kolumny, wiec czwarty kafel zostawal
   sam w drugim rzedzie („siatki bez dziury w ostatnim rzedzie"). */
/* ⚠️ Bylo: cztery kolumny. Przy czterech kaflach w rzedzie kolumna tekstu miala
   ~200 px i kazde zdanie lamalo sie co dwa slowa - wygladalo to postrzepione
   (uwaga Maćka 13.08). Dwa kafle na rzad daja tekstowi ~450 px i rowne wiersze. */
.karty--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.karty--4 .karta { padding: 28px 30px; gap: 18px; align-items: flex-start; }
.karty--4 .karta .tyt { font-size: 17.5px; }
.karty--4 .karta p { font-size: 15px; margin-top: 6px; line-height: 1.65; }
@media (max-width: 680px) { .karty--4 { grid-template-columns: 1fr; } }

/* Nota pod suwakiem kleila sie do niego (5 px) - bramka „tekst ma odstep od bloku
   nad soba" wymaga co najmniej 8 px. */
.pl-tresc .pl-nota { margin-top: 14px; }

/* Naglowek podstrony ma odstep liczony od wysokosci paskow (--topsum). Na telefonie
   paski lamia sie na wiecej wierszy i odstep robil sie 293 px, czyli dziura. */
@media (max-width: 860px) { .pod-naglowek { padding-top: 30px; } }
@media (max-width: 640px) { .pod-naglowek { padding-top: 24px; padding-bottom: 4px; } }

/* Cennik: jedna szeroka karta z wierszami zamiast siatki dwukolumnowej. */
.cennik-lista { max-width: 900px; margin: 46px auto 0; }
/* nota pod karta cennika kleila sie do niej (0 px) */
.cennik-lista + .cennik-nota { margin-top: 18px; }
.faq + .cennik-nota { margin-top: 22px; }

/* Zgoda RODO jako ETYKIETA z checkboxem: kwadracik i tekst w jednym wierszu, do lewej. */
label.f-rodo {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  text-transform: none; letter-spacing: 0; margin-top: 20px; cursor: pointer;
}
label.f-rodo input[type="checkbox"] {
  width: 21px; height: 21px; margin: 2px 0 0; flex: none; cursor: pointer;
  accent-color: var(--akcent-ciemny);
}
label.f-rodo span { flex: 1 1 auto; }


/* --- MATERIAŁY OD KLIENTA (13.08.2026): logo, pakiety z cenami, tematy ------- */

/* Znak marki: plik logo-znak.png jest DOCIETY po obrysie tarczy i ma przezroczyste
   naroza (skrypt _kz-logo-znak.py) - zadnego object-fit ani border-radius.
   ⚠️ Poprzednia wersja robila z .nav-logo--tekst FLEX ROW bez grupowania tekstu,
   wiec nazwa i podtytul stawaly OBOK siebie w jednej linii. Teraz tekst siedzi
   w kolumnie .marka, a znak stoi obok niej. */
.nav-logo .znak, .flogo .znak { width: 48px; height: 48px; flex: none; }
.nav-logo--tekst, .flogo--tekst { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.marka { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 480px) {
  .nav-logo .znak { width: 40px; height: 40px; }
  .sygn { font-size: 22px; }
}

/* Pakiet: kto sie miesci + dwa wiersze ceny (dni robocze / weekend) */
.pak-kto {
  font-size: 13.5px; font-weight: 700; color: var(--akcent-ciemny);
  background: color-mix(in srgb, var(--akcent) 12%, transparent);
  border-radius: 999px; padding: 7px 13px; align-self: flex-start;
}
.pak-ceny { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.pak-cena-rzad { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--muted); }
.pak-cena-rzad b { font-family: 'Bree Serif', serif; font-size: 23px; color: var(--akcent-ciemny); white-space: nowrap; }

/* Zasady wspolne - jedna karta pod pakietami */
.zasady-karta {
  max-width: 900px; margin: 34px auto 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 30px);
}
.zasady-karta h3 { font-size: 20px; margin-bottom: 14px; }
.zasady-karta .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.zasady-karta .ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; color: var(--muted); }
.zasady-karta .ticks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--zielony); }
.zasady-karta .ticks b { color: var(--ink); }

/* Tematy urodzin - pigulki, ktore nic nie robia poza informowaniem */
.tematy { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px; }
/* nota pod pigulkami tematow kleila sie do nich (0 px) */
.tematy + .cennik-nota { margin-top: 22px; }
.temat {
  font-weight: 700; font-size: 15.5px; padding: 11px 20px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
}

/* Wyliczenie orientacyjne w planerze */
.pl-cena { margin-top: 12px; font-family: 'Bree Serif', serif; font-size: 22px; color: var(--akcent-jasny); }
.pl-cena small { display: block; font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--na-ciemnym-cichy); margin-top: 4px; }


/* --- HERO PODSTRONY ZE ZDJECIEM (wzor: dziadkowizna / alpaki-niechorze) -----
   Kazda podstrona otwiera sie kadrem na cala szerokosc: zdjecie + welon,
   na nim okruszki, H1 i lead. Zastepuje plaski .pod-naglowek.
   ⚠️ Welon liczony pod kontrast >=10:1 dla H1 - po kazdej zmianie zmierz
   `_mp-kontrast.mjs`, nie oceniaj na oko. */
.pod-hero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: clamp(340px, 44vh, 500px);
}
.pod-hero .ph-tlo { position: absolute; inset: 0; z-index: 0; }
.pod-hero .ph-tlo img { width: 100%; height: 100%; object-fit: cover; }
.pod-hero .ph-tlo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28, 16, 8, .30) 0%, rgba(28, 16, 8, .52) 100%),
    linear-gradient(90deg, rgba(28, 16, 8, .78) 0%, rgba(28, 16, 8, .55) 52%, rgba(28, 16, 8, .34) 100%);
}
.pod-hero .wrap { position: relative; z-index: 2; padding-block: 88px 62px; }
.pod-hero .okruszki { color: rgba(255, 255, 255, .82); }
.pod-hero .okruszki a { color: var(--akcent-jasny); }
.pod-hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -.01em; color: #fff; }
.pod-hero h1 em { font-style: normal; color: var(--akcent-jasny); }
.pod-hero .lead-p { color: rgba(255, 255, 255, .93); }
.pod-hero .lead-p b { color: #fff; }
.pod-hero .lead-p--nota { color: rgba(255, 255, 255, .85); }
.pod-hero .lead-p--nota b { color: #fff; }
@media (max-width: 640px) {
  .pod-hero { min-height: 320px; }
  .pod-hero .wrap { padding-block: 64px 46px; }
}


/* --- KONFIGURATOR IMPREZY (panel rodzica) ----------------------------------
   Uklad jak w kreatorze urodzin: kroki po lewej, lepka rozpiska po prawej.
   ⚠️ Kroki stoja na BIALYCH kartach - kolory tekstu domyslnie ciemne. Jasne warianty
      tylko w `.konf-suma`, ktora jedyna jest ciemna. */
.konf { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; margin-top: 26px; }
.konf-kroki { display: grid; gap: 16px; }
.konf-krok {
  display: flex; gap: 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 26px;
}
.konf-nr {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--akcent) 15%, transparent);
  color: var(--akcent-ciemny); font: 700 15px/34px 'Nunito', sans-serif; text-align: center;
}
.konf-tresc { flex: 1; min-width: 0; }
.konf-tresc h3 { font-family: 'Bree Serif', serif; font-size: 20px; }
.konf-pod { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.konf-nota { font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.konf-pola { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

/* --- kafle bazy: trzy pakiety z cennika + wariant wlasny --------------------- */
.kb-siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.kb-kafel {
  display: flex; flex-direction: column; gap: 12px; text-align: left; cursor: pointer;
  background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 18px 18px 16px;
  font-family: 'Nunito', sans-serif; transition: border-color .2s, background .2s, transform .2s;
}
.kb-kafel[aria-pressed="true"] { border-color: var(--akcent); background: var(--card); }
.kb-glowa { display: block; }
.kb-glowa b { display: block; font-family: 'Bree Serif', serif; font-size: 19px; color: var(--ink); }
.kb-pod { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.kb-cena b { font-family: 'Bree Serif', serif; font-size: 22px; color: var(--akcent-ciemny); }
.kb-cena small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.kb-punkty { list-style: none; display: grid; gap: 5px; }
.kb-punkty li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.kb-punkty li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--akcent); opacity: .55; }
.kb-reszta { font-style: italic; }
.kb-kafel--wlasny { border-style: dashed; }
@media (hover: hover) and (pointer: fine) {
  .kb-kafel:hover { border-color: var(--akcent); transform: translateY(-2px); }
}

/* --- liczniki gosci --------------------------------------------------------- */
/* ⚠️ Wlasny `display` w klasie BIJE atrybut `hidden` - licznik doroslych pokazywal sie
   przy kazdym pakiecie, mimo ze JS ustawial hidden. Jedna regula zalatwia to wszedzie. */
[hidden] { display: none !important; }
.kg-siatka { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; }
.kg-licznik { display: grid; gap: 8px; }
.kg-lbl { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kg-info { font-size: 13px; color: var(--muted); }
.kg-info--plus { color: var(--akcent-ciemny); font-weight: 700; }
.km-ile { display: inline-flex; align-items: center; gap: 8px; }
.km-ile button {
  /* ⛔ 44 px to PROG DOTYKU, nie estetyka - przy 34 px z odstepem 4 px
     rodzic ustawiajacy liczbe porcji trafial w sasiedni przycisk. */
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font: 700 18px/1 'Nunito', sans-serif; transition: background .2s, border-color .2s;
}
.km-ile .km-licznik { min-width: 40px; text-align: center; font: 700 17px/1 'Nunito', sans-serif; color: var(--ink); }
.km-ile--duzy button { width: 44px; height: 44px; font-size: 20px; }
.km-ile--duzy .km-licznik { min-width: 54px; font-size: 21px; }
@media (hover: hover) and (pointer: fine) {
  .km-ile button:hover { background: var(--card); border-color: var(--akcent); }
}

/* --- pigulki tematu i czasu -------------------------------------------------- */
.kt-pigulki { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.kt-pig {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; cursor: pointer;
  padding: 9px 17px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line);
  font: 600 14.5px 'Nunito', sans-serif; color: var(--ink); transition: background .2s, border-color .2s;
}
.kt-pig[aria-pressed="true"] { background: var(--ciemny); border-color: var(--ciemny); color: #fff; }
.kt-plus { font-size: 13px; color: var(--muted); font-weight: 700; }
.kt-pig[aria-pressed="true"] .kt-plus { color: var(--akcent-jasny); }
@media (hover: hover) and (pointer: fine) {
  .kt-pig:hover { border-color: var(--akcent); }
}

/* --- moduly (dodatki) -------------------------------------------------------- */
.km-grupy { display: grid; gap: 22px; margin-top: 18px; }
.km-tytul { font: 700 13px 'Nunito', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #7F3F22; }
.km-lista { list-style: none; display: grid; gap: 2px; margin-top: 10px; }
.km-poz {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: 12px; border: 1px solid transparent; transition: background .2s, border-color .2s;
}
.km-poz--wybrana { background: var(--bg); border-color: var(--line); }
/* ⚠️ Globalna regula `label` robi z etykiet WERSALIKI w kolorze akcentu (12 px) -
   to dobre dla podpisow nad polami, ale nazwa dodatku ma byc zdaniem, nie krzykiem.
   Dlatego zerujemy tu caly ten zestaw. */
.km-etykieta { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 200px;
  cursor: pointer; min-height: 30px; margin-bottom: 0;
  text-transform: none; letter-spacing: normal; font-size: 14.5px; font-weight: 400; }
.km-etykieta input { width: 20px; height: 20px; flex: none; accent-color: var(--akcent); cursor: pointer; }
.km-nazwa { font-size: 14.5px; color: var(--ink); line-height: 1.4; }
.km-cena { margin-left: auto; text-align: right; white-space: nowrap; }
.km-cena b { font-size: 15px; color: var(--akcent-ciemny); }
.km-cena small { display: block; font-size: 12px; color: var(--muted); }
.km-wycena { font-size: 13px; font-weight: 700; color: var(--muted); font-style: italic; }
.km-poz--zablokowana { opacity: .55; }
.km-poz--zablokowana .km-etykieta { cursor: not-allowed; }
.km-tylko { flex-basis: 100%; font-size: 12.5px; color: var(--akcent-ciemny); font-weight: 700; }
.km-tylko:empty { display: none; }

/* --- rozpiska (jedyny ciemny blok konfiguratora) ------------------------------ */
.konf-suma {
  position: sticky; top: calc(var(--topsum) + 16px);
  background: var(--ciemny); color: #fff; border-radius: var(--radius);
  padding: 26px 26px 22px; box-shadow: var(--cien);
}
.konf-suma .eyebrow { background: rgba(255, 255, 255, .1); color: var(--akcent-jasny); }
.ks-zdanie { font: 400 18px/1.45 'Bree Serif', serif; margin: 14px 0 4px; color: #fff; }
.ks-lista { list-style: none; display: grid; gap: 2px; margin: 14px 0 0; }
.ks-lista li {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px;
}
.ks-lista li span { color: var(--na-ciemnym-cichy); }
.ks-lista li b { color: #fff; white-space: nowrap; font-weight: 700; }
.ks-lista .ks-wycena b { color: var(--akcent-jasny); font-style: italic; font-weight: 600; }
.ks-razem { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 16px; }
.ks-razem span { font-size: 14px; color: var(--na-ciemnym-cichy); }
.ks-razem b { font-family: 'Bree Serif', serif; font-size: 26px; color: var(--akcent-jasny); text-align: right; }
/* Przy pakiecie „po swojemu” w miejscu kwoty stoi ZDANIE („dodatki 820 zl + wycena”),
   a nie liczba - w 26 px szeryfowym lamalo sie na trzy linie. */
.ks-razem--tekst { flex-direction: column; align-items: flex-start; gap: 4px; }
.ks-razem--tekst b { font-family: 'Nunito', sans-serif; font-size: 18px; font-weight: 800; text-align: left; }
.ks-nota { font-size: 13px; color: var(--na-ciemnym-cichy); margin-top: 10px; }
.ks-akcje { display: grid; gap: 10px; margin-top: 18px; }
/* ⛔ NIE nadpisuj tu koloru na jasny: `.form-msg` ma WLASNE kremowe tlo (#f4ece0),
   wiec jasny tekst dawal 1,07:1 i komunikat znikal. --ink = 12,27:1. */
.konf-suma .form-msg { color: var(--ink); font-size: 15px; }

/* --- kotwice logowania i rejestracji z paska gornego -------------------------- */
.kotwica { display: block; height: 0; scroll-margin-top: calc(var(--topsum) + 20px); }
.log-karta--wskazana { border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 22%, transparent); }

@media (max-width: 1080px) {
  .konf { grid-template-columns: minmax(0, 1fr); }
  .konf-suma { position: static; }
}
@media (max-width: 700px) {
  .kb-siatka, .konf-pola { grid-template-columns: minmax(0, 1fr); }
  .konf-krok { padding: 20px 18px; gap: 14px; }
  .km-cena { margin-left: 0; text-align: left; }
  .km-poz { gap: 8px; }
}

/* --- RYTM KOLOROW TEKSTU (ustalenie z 13.08) --------------------------------
   Trzy tony, przypisane do ROLI, nie dobierane na oko:
     • BIEL (#fff / --na-ciemnym)      - wartosci i tresc NA CIEMNYM
     • PRAWIE BIEL (--na-ciemnym-cichy)- akapity i podpisy NA CIEMNYM
     • JASNY BEZ (--akcent-jasny)      - etykiety, naglowki kolumn i akcenty NA CIEMNYM
     • BRAZ (--akcent-ciemny / --muted)- WYLACZNIE na jasnym tle
   ⚠️ Beż tylko przy tekscie POGRUBIONYM. Przy cienkich krojach 12-14 px wygladzanie
      miesza go z ciemnym tlem i wychodzi braz - to samo zgloszenie wracalo trzy razy.
   ⛔ Braz na ciemnym tle nie istnieje. Nigdy. */

/* --- MAPA DOJAZDU (sekcja „Gdzie nas znalezc" w „O nas") ---------------------
   Duzy kadr, te same zaokraglenia i cien co karty. Ramka bez obramowania,
   bo Google rysuje wlasna. `loading="lazy"` - mapa jest nisko na stronie,
   nie ma powodu zaciagac jej przy pierwszym malowaniu. */
.mapa {
  margin-top: 34px; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--cien); background: var(--sand);
  height: clamp(340px, 48vh, 560px);
}
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) {
  .mapa { height: 320px; margin-top: 26px; }
}

/* --- KARTY KONTAKTOWE (wzor: despe-debki.pl/kontakt) -------------------------
   Kazda dana to OSOBNA karta: ikona w kwadracie, nad wartoscia mala etykieta,
   pod nia dopisek. Wczesniej byly to gole elementy liniowe bez stylow i skleily
   sie w jeden ciag („TELEFON730 808 082zapisy..."). */
.k-karty { display: grid; gap: 12px; align-content: start; }
.kk {
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 18px 20px; transition: background .25s, border-color .25s;
}
.kk-ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  background: color-mix(in srgb, var(--akcent) 26%, transparent);
  display: grid; place-items: center; color: var(--akcent-jasny);
}
.kk-ico svg { width: 21px; height: 21px; }
.kk-tresc { display: grid; gap: 3px; min-width: 0; }
/* Etykieta: jasny bez - grube wersaliki, wiec czyta sie dobrze (rytm trzech tonow). */
.kk-lbl { font: 700 12px 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--akcent-jasny); }
.kk-wart { font: 400 18px/1.35 'Bree Serif', serif; color: #fff; overflow-wrap: anywhere; }
a.kk-wart { transition: color .2s; }
.kk-dod { font-size: 13.5px; color: var(--na-ciemnym-cichy); }
.kk-soc { display: flex; gap: 9px; margin: 4px 0 2px; }
.kk-soc a {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .09); color: #fff; transition: background .25s, transform .25s;
}
.kk-soc svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  .kk:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }
  a.kk-wart:hover { color: var(--akcent-jasny); }
  .kk-soc a:hover { background: var(--akcent); transform: translateY(-2px); }
}
.k-karty { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* ⚠️ `flex-basis: 0` + `min-height` odbieraja zdjeciu WLASNA wysokosc w rachunku kolumny.
   Bez tego obrazek 1200x1500 narzucal wysokosc calego rzedu i wystawal ~700 px pod
   formularz - `flex: 1 1 auto` tego nie naprawia, bo liczy sie od naturalnego rozmiaru. */
img.k-foto {
  flex: 1 1 0; min-height: 190px; height: 0; width: 100%; object-fit: cover;
  margin-top: 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
}
@media (max-width: 900px) {
  /* Po zlozeniu kolumn nie ma juz wysokosci do wypelnienia - wtedy staly kadr. */
  img.k-foto { flex: none; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 700px) {
  .kk { padding: 16px; gap: 13px; }
  .kk-wart { font-size: 16.5px; }
}


/* --- PANEL BAWIALNI (strona administratora) ---------------------------------
   Ten sam jezyk wizualny co panel rodzica: jasne karty na piaskowym tle,
   ciemne akcenty tylko na plakietkach statusu. */
.log-karta--sam { max-width: 520px; margin-inline: auto; }

.ab-liczby { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 8px; }
.ab-kafel {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; display: grid; gap: 4px;
}
.ab-kafel b { font-family: 'Bree Serif', serif; font-size: 30px; color: var(--akcent-ciemny); line-height: 1; }
.ab-kafel span { font-size: 13px; color: var(--muted); line-height: 1.35; }

.ab-filtry { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }

.ab-lista { display: grid; gap: 12px; }
.ab-karta {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line);
  border-radius: 14px; padding: 18px 22px; display: grid; gap: 12px;
  transition: box-shadow .2s, border-color .2s;
}
.st-ok-ramka { border-left-color: var(--zielony); }
.st-czeka-ramka { border-left-color: var(--akcent); }
.st-min-ramka { border-left-color: var(--line); }
.st-nie-ramka { border-left-color: #9B4A3B; }
.ab-glowa { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.ab-data { font-family: 'Bree Serif', serif; font-size: 19px; color: var(--ink); }
.ab-godz { margin-left: 9px; font-size: 14.5px; color: var(--muted); }
.ab-tresc { display: grid; gap: 5px; }
.ab-kto { font-size: 15px; color: var(--ink); }
.ab-tel { color: var(--akcent-ciemny); font-weight: 700; }
.ab-brak { color: var(--muted); font-style: italic; }
.ab-pakiet { font-size: 15px; color: var(--muted); }
.ab-pakiet b { color: var(--akcent-ciemny); }
.ab-uwagi {
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
  background: var(--bg); border-radius: 10px; padding: 10px 13px;
}
.ab-akcje { display: flex; flex-wrap: wrap; gap: 9px; }
.ab-mini { font-size: 13.5px; padding: 11px 18px; min-height: var(--tap); }
.status.st-nie { background: rgba(155, 74, 59, .14); color: #9B4A3B; }
@media (hover: hover) and (pointer: fine) {
  .ab-karta:hover { box-shadow: var(--cien); border-color: var(--akcent); }
}

/* --- kalendarz ------------------------------------------------------------- */
.kal-gora { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 22px 0 16px; }
.kal-gora b { font-family: 'Bree Serif', serif; font-size: 21px; min-width: 210px; text-align: center; }
.kal-nawi {
  width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 22px; line-height: 1;
}
.kal-dni, .kal-siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kal-dni { margin-bottom: 8px; }
.kal-dni span { text-align: center; font: 700 12px 'Nunito', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kal-pusty { min-height: 62px; }
.kal-kom {
  position: relative; min-height: 62px; cursor: pointer; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-family: 'Nunito', sans-serif; transition: border-color .2s, background .2s;
}
.kal-nr { font-size: 15px; font-weight: 700; color: var(--ink); }
.kal-ile {
  font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--akcent); color: #fff;
}
.kal-ok { background: color-mix(in srgb, var(--zielony) 16%, var(--card)); border-color: var(--zielony); }
.kal-ok .kal-ile { background: var(--zielony); }
.kal-czeka { background: color-mix(in srgb, var(--akcent) 12%, var(--card)); border-color: var(--akcent); }
.kal-ndz .kal-nr { color: var(--muted); }
.kal-dzis { outline: 2px solid var(--akcent-ciemny); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .kal-kom:hover, .kal-nawi:hover { border-color: var(--akcent-ciemny); }
}
.kal-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.kal-legenda span { display: inline-flex; align-items: center; gap: 8px; }
.kr { width: 13px; height: 13px; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.kr-ok { background: color-mix(in srgb, var(--zielony) 30%, var(--card)); border-color: var(--zielony); }
.kr-czeka { background: color-mix(in srgb, var(--akcent) 22%, var(--card)); border-color: var(--akcent); }
.kr-zamk { background: var(--sand); }
.kal-dzien {
  margin-top: 20px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px;
}
.kal-dzien h3 { font-family: 'Bree Serif', serif; font-size: 19px; margin-bottom: 10px; }
.kd-poz { font-size: 14.5px; color: var(--ink); padding: 7px 0; border-bottom: 1px solid var(--line); }
.kd-poz:last-child { border-bottom: 0; }
.kd-wolne { font-size: 14.5px; color: var(--muted); }

/* --- edytor cennika -------------------------------------------------------- */
.cennik-edytor {
  display: grid; gap: 2px; margin-top: 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
}
.ce-poz {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 15px 22px; border-bottom: 1px solid var(--line);
}
.ce-poz:last-child { border-bottom: 0; }
.ce-poz label { margin-bottom: 0; text-transform: none; letter-spacing: normal; color: var(--ink); font-weight: 400; font-size: 15px; }
.ce-nazwa { display: block; font-weight: 600; }
.ce-pod { display: block; font-size: 13px; color: var(--muted); }
.ce-pole { display: inline-flex; align-items: center; gap: 8px; }
.ce-pole input { width: 150px; text-align: right; }
.ce-zl { font-family: 'Bree Serif', serif; font-size: 18px; color: var(--akcent-ciemny); }

@media (max-width: 900px) {
  .ab-liczby { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .kal-dni, .kal-siatka { gap: 5px; }
  .kal-kom { min-height: 52px; padding: 6px; }
  .kal-gora b { min-width: 150px; font-size: 18px; }
  .ce-poz { padding: 14px 16px; }
  .ce-pole input { width: 120px; }
}

/* Kwota wstawiona z panelu bawialni - odrozniamy ja delikatnie od cen z cennika
   pakietow, ktore stoja w kodzie na stale. */
.v-z-panelu { color: var(--zielony); }
.cennik-zrodlo { display: block; margin-top: 4px; font-style: italic; }

/* Drugie pudelko pod formularzem: dane do DRUGIEGO panelu. Nie jest przyciskiem,
   tylko linkiem - te dane nie zadzialaja w formularzu obok i trzeba to powiedziec
   wprost, bo Maciek probowal zalogowac sie nimi u rodzica. */
.konto-demo--admin { display: grid; gap: 3px; text-align: left; margin-top: 10px; }
.konto-demo--admin small { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }


/* --- KARTA ZGLOSZENIA JAKO BLOK ZWIJANY -------------------------------------
   Zwiniete zgloszenie pokazuje TO, co potrzebne do decyzji: termin, kto, pakiet,
   liczba dzieci, kwota, status. Rozwiniete dokłada telefon i pelna rozpiske
   z konfiguratora (bywa dluga na trzy linie).
   ⚠️ `summary` ma domyslny marker listy - trzeba go zdjac w DWOCH miejscach
      (`list-style` i `::-webkit-details-marker`), inaczej Safari zostawia trojkat. */
details.ab-karta { padding: 0; }
details.ab-karta > .ab-glowa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; cursor: pointer; list-style: none;
  padding: 16px 22px; border-radius: 12px;
  transition: background .2s;
}
details.ab-karta > .ab-glowa::-webkit-details-marker { display: none; }
.ab-skrot { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.ab-kto-min { font-size: 15px; font-weight: 700; color: var(--ink); }
.ab-pak-min { font-size: 14.5px; color: var(--muted); }
.ab-pak-min b { color: var(--akcent-ciemny); }

/* Strzalka zwijania - po prawej, obraca sie po otwarciu. */
details.ab-karta > .ab-glowa::after {
  content: ''; flex: none; width: 11px; height: 11px; margin-left: 2px;
  border-right: 2px solid var(--akcent-ciemny); border-bottom: 2px solid var(--akcent-ciemny);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s ease;
}
details.ab-karta[open] > .ab-glowa::after { transform: rotate(-135deg) translate(-3px, -3px); }

details.ab-karta > .ab-tresc { padding: 4px 22px 0; }
details.ab-karta > .ab-akcje { padding: 14px 22px 18px; }
.ab-uwagi--brak { font-style: italic; }

@media (hover: hover) and (pointer: fine) {
  details.ab-karta > .ab-glowa:hover { background: color-mix(in srgb, var(--akcent) 6%, var(--card)); }
}
@media (max-width: 700px) {
  details.ab-karta > .ab-glowa { padding: 14px 16px; }
  details.ab-karta > .ab-tresc { padding: 4px 16px 0; }
  details.ab-karta > .ab-akcje { padding: 12px 16px 16px; }
}


/* --- ZGODY COOKIES: panel na podstronie i pasek na dole ---------------------- */
.ck-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 26px 26px; margin-top: 26px;
}
.ck-poz {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.ck-opis { flex: 1; min-width: 260px; }
.ck-opis h3 { font-family: 'Bree Serif', serif; font-size: 19px; }
.ck-opis p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 5px; }
.ck-stale { font-size: 13px; font-weight: 700; color: var(--zielony); white-space: nowrap; }

/* Przelacznik: ukryty checkbox + narysowany suwak. Cel dotyku ma pelne 44 px. */
.ck-przel { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; min-height: 44px; margin-bottom: 0;
  text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 700; color: var(--ink); }
.ck-przel input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-suwak {
  position: relative; flex: none; width: 54px; height: 30px; border-radius: 999px;
  background: var(--sand); border: 1px solid var(--line); transition: background .22s, border-color .22s;
}
.ck-suwak::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  transition: transform .22s ease;
}
.ck-przel input:checked + .ck-suwak { background: var(--akcent); border-color: var(--akcent); }
.ck-przel input:checked + .ck-suwak::after { transform: translateX(24px); }
.ck-przel input:focus-visible + .ck-suwak { outline: 3px solid var(--akcent-ciemny); outline-offset: 3px; }

.ck-pasek {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: var(--ciemny); color: var(--na-ciemnym-cichy);
  border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--cien);
  max-width: 1100px; margin-inline: auto;
}
.ck-pasek p { font-size: 14px; line-height: 1.55; max-width: 62ch; }
.ck-pasek a { color: var(--akcent-jasny); font-weight: 700; }
.ck-pasek-akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.ck-pasek .btn-obrys { background: rgba(0, 0, 0, .3); color: #fff; border-color: rgba(255, 255, 255, .6); }

/* --- NEWSLETTER -------------------------------------------------------------- */
.nl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; margin-top: 30px; }
.nl-lista { margin-top: 20px; display: grid; gap: 12px; }
.nl-form { margin: 0; }

/* --- BLOG -------------------------------------------------------------------- */
.bl-siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 46px; }
.bl-karta {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s;
}
.bl-foto { aspect-ratio: 3 / 2; overflow: hidden; }
.bl-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.bl-tresc { padding: 22px 24px 24px; display: grid; gap: 8px; align-content: start; }
.bl-tag {
  justify-self: start; font: 700 11.5px 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: #7F3F22; background: color-mix(in srgb, var(--akcent) 13%, transparent);
  padding: 5px 12px; border-radius: 999px;
}
.bl-tresc h3 { font-family: 'Bree Serif', serif; font-size: 20px; line-height: 1.3; }
.bl-tresc p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.bl-stan {
  margin-top: 6px; font-size: 12.5px; font-style: italic; color: var(--akcent-ciemny);
  border-top: 1px dashed var(--line); padding-top: 10px;
}

/* ===================== BLOG: wyrozniony wpis, filtry, artykul =====================
   Uklad z despe-debki.pl/blog przelozony na jasna palete Kawy i Zabawy. */

/* metryczka „Kategoria · 5 min" - zastapila plakietke „propozycja tematu" */
.bl-meta {
  font: 800 11.5px 'Nunito', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--akcent-ciemny);
}
.bl-wiecej { margin-top: 4px; font-weight: 800; font-size: 14px; color: var(--akcent-ciemny); }
.bl-karta:hover .bl-wiecej { text-decoration: underline; text-underline-offset: 3px; }

/* WPIS WYROZNIONY - zdjecie obok tresci, na telefonie jedna kolumna */
.bl-wyroz {
  display: grid; grid-template-columns: 1.05fr 1fr; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
/* ⚠️ Zdjecie MUSI byc wyjete z toku (position:absolute), inaczej blok rosnie do wysokosci
   kadru. `height:100%` na obrazku w kontenerze bez ustalonej wysokosci nie dziala - obrazek
   wraca do wlasnych proporcji i pionowy kadr rozciagal wyrozniony wpis na ~700 px.
   Teraz o wysokosci decyduje kolumna z tekstem, a blok jest PODLUZNYM prostokatem
   (jak na despe-debki.pl/blog). */
.bl-wyroz-foto { position: relative; min-height: 360px; overflow: hidden; }
.bl-wyroz-foto img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.bl-wyroz-tresc { padding: 40px 38px; display: grid; gap: 12px; align-content: center; }
.bl-wyroz-tresc h2 { font-family: 'Bree Serif', serif; font-size: clamp(24px, 3vw, 31px); line-height: 1.2; }
.bl-wyroz-tresc p { color: var(--muted); line-height: 1.65; }
.bl-plakietka {
  justify-self: start; font: 800 11px 'Nunito', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  background: var(--akcent); color: #fff; padding: 5px 13px; border-radius: 999px;
}
@media (hover: hover) and (pointer: fine) {
  .bl-wyroz:hover { box-shadow: var(--cien); transform: translateY(-3px); border-color: var(--akcent); }
  .bl-wyroz:hover .bl-wyroz-foto img { transform: scale(1.05); }
}
@media (max-width: 860px) {
  .bl-wyroz { grid-template-columns: 1fr; }
  .bl-wyroz-foto { min-height: 220px; }
  .bl-wyroz-tresc { padding: 28px 24px; }
}

/* FILTRY KATEGORII - pigulki nad siatka */
.bl-filtry { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bl-filtr {
  font: 700 13.5px 'Nunito', sans-serif; color: var(--ink); background: transparent;
  border: 1px solid var(--line-mocna, rgba(0, 0, 0, .22)); padding: 9px 18px;
  border-radius: 999px; cursor: pointer; transition: background .2s, border-color .2s, color .2s;
  /* ⛔ prog dotyku 44 px; klasa wspolna dla bloga i galerii - jedna zmiana, dwie strony */
  min-height: 44px;
}
.bl-filtr.aktywny { background: var(--akcent); border-color: var(--akcent); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .bl-filtr:hover { border-color: var(--akcent); }
  .bl-filtr.aktywny:hover { background: var(--akcent-ciemny); border-color: var(--akcent-ciemny); }
}
.bl-pusto { text-align: center; color: var(--muted); margin-top: 34px; }

/* ARTYKUL - waska kolumna czytania, bo dlugi tekst na pelnej szerokosci sie nie czyta */
.wrap--waski { max-width: 760px; }
.artykul p { font-size: 17px; line-height: 1.75; color: var(--ink); margin-bottom: 20px; }
.artykul h2 {
  font-family: 'Bree Serif', serif; font-size: clamp(21px, 2.6vw, 26px); line-height: 1.3;
  margin: 34px 0 14px;
}
.art-lista { margin: 0 0 22px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.art-lista li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.6; }
.art-lista li::before {
  content: ''; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--akcent);
}
.art-stopka {
  margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
/* metryczka w naglowku wpisu stoi na ZDJECIU - stad jasny kolor zamiast akcentu */
.pod-hero--wpis .bl-meta--hero { margin-top: 14px; color: var(--akcent-jasny); }
@media (hover: hover) and (pointer: fine) {
  .bl-karta:hover { box-shadow: var(--cien); transform: translateY(-3px); }
  .bl-karta:hover .bl-foto img { transform: scale(1.06); }
}

/* --- WPIS DO KALENDARZA ------------------------------------------------------ */
.kalw {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px; margin-top: 30px;
}
.kalw .field { margin-top: 14px; }
.kalw [aria-disabled="true"] { opacity: .55; pointer-events: none; }
.kalw-info {
  margin-top: 26px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 28px;
}
.kalw-info h3 { font-family: 'Bree Serif', serif; font-size: 21px; }
.kalw-info p { font-size: 15px; color: var(--muted); line-height: 1.7; margin-top: 12px; }
.kalw-info p b { color: var(--ink); }

@media (max-width: 900px) {
  .nl-grid, .bl-siatka { grid-template-columns: 1fr; }
  .nl-grid { gap: 30px; }
}
@media (max-width: 600px) {
  .ck-pasek { left: 10px; right: 10px; bottom: 10px; padding: 16px; }
  .ck-pasek-akcje .btn { flex: 1; }
  .kalw, .kalw-info { padding: 20px 18px; }
}

/* --- ZAKLADKA „KALENDARZ GOOGLE" w panelu bawialni ---------------------------
   Dwa kafle rozdzielaja to, co DZIALA TERAZ, od tego, co wymaga zaplecza.
   Ten podzial jest tu najwazniejszy - bez niego klient uslyszalby „mamy integracje". */
.gk-stan { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.gk-kafel { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.gk-kafel--dziala { border-color: var(--zielony); }
.gk-kafel h3 { font-family: 'Bree Serif', serif; font-size: 19px; margin-top: 10px; }
.gk-kafel p { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.gk-plakietka {
  display: inline-block; font: 700 11.5px 'Nunito', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--zielony) 18%, transparent); color: #3F5230;
}
.gk-plakietka--czeka { background: color-mix(in srgb, var(--akcent) 16%, transparent); color: #7E3A2D; }
.gk-kroki { margin-top: 22px; display: grid; gap: 12px; padding-left: 22px; }
.gk-kroki li { font-size: 15px; color: var(--muted); line-height: 1.65; }
.gk-kroki li b { color: var(--ink); }
.gk-atrapa { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.gk-atrapa h3 { font-family: 'Bree Serif', serif; font-size: 19px; }
.gk-pole {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; margin-top: 14px;
}
.gk-pole small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.gk-nieaktywne { font-size: 13.5px; font-style: italic; color: var(--muted); }
.gk-atrapa .btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .gk-stan { grid-template-columns: 1fr; } }

/* Dwa odstepy zlapane przez bramke 14.08:
   1. w siatce newslettera naglowek stoi PO etykiecie bez otoczki `.lead`,
      wiec nie dziedziczyl jej marginesu (bylo 1 px);
   2. nota po karcie cennika - regula istniala tylko dla `.cennik-lista`,
      a na podstronie platnosci sasiadem jest `.cennik-karta` (bylo 5 px). */
.nl-grid h2 { margin-top: 14px; }
.nl-grid .eyebrow + h2 { margin-top: 16px; }
.cennik-karta + .cennik-nota { margin-top: 24px; }

/* Blok kontaktowy pod opisem marki w stopce. */
.ft-kontakt { margin-top: 18px; display: grid; gap: 2px; }
.ft-kontakt a, .ft-kontakt .ft-poz { padding: 3px 0; }
.ft-grid .soc { margin-top: 14px; }

/* --- PRAWA STREFA NAGLOWKA: konto + rezerwacja telefoniczna ------------------
   Konto przeniesione z paska gornego do glownego naglowka (uwaga Macka 14.08). */
/* Konto rodzica dosuniete DO PRAWEJ KRAWEDZI naglowka (klient 14.08.2026) -
   wczesniej nachodzilo na ostatnie pozycje menu. */
.nav-prawa { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; }
.nav-prawa .tb-konto { margin-left: 0; }
.nav-prawa .tb-btn { color: var(--akcent-ciemny); border-color: rgba(0, 0, 0, .22); min-height: 38px; }
.nav-prawa .tb-btn--ramka { background: var(--akcent-jasny); border-color: var(--akcent-jasny); color: var(--ciemny); }
.nav-cta { padding-inline: 20px; }
@media (hover: hover) and (pointer: fine) {
  .nav-prawa .tb-btn:hover { background: var(--sand); border-color: var(--akcent); }
  .nav-prawa .tb-btn--ramka:hover { background: var(--akcent); border-color: var(--akcent); color: #fff; }
}
@media (max-width: 1130px) {
  /* Trzy przyciski po prawej + osiem linkow nie mieszcza sie razem - wczesniej
     chowamy nawigacje pod hamburger, a konto zostaje widoczne. */
  .nav-prawa { position: static; transform: none; }
}

/* --- TRYB GOSCIA W PANELU ----------------------------------------------------
   Konfigurator dziala bez zakladania konta. Zakladki „Moje rezerwacje" i „Dane dzieci"
   chowamy, bo bez konta nie maja czego pokazac. */
.tryb-goscia [data-sekcja-btn="rezerwacje"],
.tryb-goscia [data-sekcja-btn="dzieci"] { display: none; }
.tryb-goscia .panel-awatar { background: var(--sand); color: var(--akcent-ciemny); }
.konto-demo--gosc {
  display: grid; gap: 3px; text-align: left; margin-top: 10px;
  border-style: solid; border-color: var(--akcent);
}
.konto-demo--gosc small { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }

/* --- KONTO W NAGLOWKU: TRZY UKLADY --------------------------------------------
   1) powyzej 1560 px  - pelne menu w srodku, po prawej Rejestracja/Logowanie/Zadzwon;
   2) 901-1560 px      - menu chowa sie pod hamburger, trzy przyciski zostaja przy nim;
   3) do 900 px        - na pasku zostaje samo „Zadzwon" + hamburger, a konto wchodzi
                         do rozwijanego menu (trzy przyciski + hamburger nie mieszcza sie
                         na telefonie - sprawdzone na 390 px).
   Blok konta jest w DWOCH miejscach naraz, dlatego app.js podmienia go po klasie
   `.js-konto`, a nie po id - inaczej po zalogowaniu tylko jedna kopia mowilaby prawde. */
.nav-konto-mobil { display: none; }

@media (max-width: 1130px) {
  .nav-prawa { margin-left: auto; }   /* przyciski przy hamburgerze, nie na srodku */
}

@media (max-width: 1130px) {
  /* Stara regula ustawiala ten blok absolutnie przy prawej krawedzi - a hamburger
     stoi w tym samym miejscu, wiec przycisk telefonu go NAKRYWAL (klikniecie szlo
     w telefon zamiast w menu). Wracamy do zwyklego ukladu w wierszu. */
  .nav-prawa { position: static; transform: none; margin-left: auto; margin-right: 6px; }
  .nav-prawa .tb-konto { display: none; }
  .nav-konto-mobil {
    display: flex; gap: 10px; padding: 16px 26px;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap; align-items: center; justify-content: center;
  }
  /* „Panel rodzica" lamal sie na dwie linie, gdy w wierszu byly trzy elementy.
     Zostaly dwa przyciski, ale `nowrap` zostaje - napisy maja sie nie lamac. */
  .nav-konto-mobil .tb-btn { white-space: nowrap; }
  /* Bazowy `.tb-btn` jest pisany pod CIEMNY pasek (bialy tekst, biala ramka). W rozwijanym
     menu tlo jest kremowe, wiec bez tego bloku „Rejestracja" znika - bialy na kremowym.
     Kolory bierzemy te same, co przyciski konta w naglowku ponizej 900 px. */
  .nav-konto-mobil .tb-btn {
    flex: 1 1 0; justify-content: center; min-height: 44px;
    color: var(--akcent-ciemny); border-color: rgba(0, 0, 0, .28); background: transparent;
  }
  .nav-konto-mobil .tb-btn--ramka {
    background: var(--akcent-jasny); border-color: var(--akcent-jasny); color: var(--ciemny);
  }
}

@media (max-width: 480px) {
  /* Na waskim ekranie zostaje sama sluchawka: pelna etykieta razem z logo i hamburgerem
     nie miesci sie w 390 px. Nazwa dla czytnikow ekranu siedzi w aria-label linku. */
  .nav-cta .nw { display: none; }
  .nav-cta { padding-inline: 14px; }
}

/* --- panel bawialni: reczna zmiana statusu ---------------------------------
   Przyciski obok to skroty do najczestszej decyzji; ta lista pozwala ustawic
   KAZDY status, takze cofnac pomylke. Stoi w tym samym rzedzie co przyciski,
   ale odsunieta na prawo - to narzedzie, nie glowna akcja. */
.ab-zmien { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.ab-zmien-lbl {
  font: 700 12px 'Nunito', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ab-status-sel {
  /* ⛔⛔ NIE SCHODZ PONIZEJ 16 px. Pole formularza mniejsze niz 16 px
     sprawia, ze Safari na iPhonie samo przyblizy strone przy dotknieciu i juz
     z tego nie wroci. To bylo jedyne takie pole w calym serwisie. */
  font: 600 16px 'Nunito', sans-serif; color: var(--ink);
  background: var(--card); border: 1.5px solid #9A8D7A; border-radius: 999px;
  padding: 11px 14px; min-height: 44px; cursor: pointer;
}
.ab-status-sel:focus-visible { outline: 2px solid var(--akcent-ciemny); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .ab-status-sel:hover { border-color: var(--akcent); }
}
@media (max-width: 700px) {
  /* Na telefonie lista schodzi pod przyciski i bierze cala szerokosc -
     inaczej `margin-left:auto` sciska ja do nieklikalnego paska. */
  .ab-zmien { margin-left: 0; width: 100%; justify-content: space-between; }
  .ab-status-sel { flex: 1; }
}

/* --- panel bawialni: plakietka statusu w STALEJ kolumnie -------------------
   ⚠️ `.ab-glowa` ma `justify-content: space-between`, a elementow jest TRZY:
      skrot, plakietka i strzalka (`summary::after` tez liczy sie jako element
      elastyczny). Srodkowy element ladowal wiec na srodku wolnej przestrzeni,
      czyli jego pozycja zalezala od dlugosci opisu obok - „Zakończona"
      i „Potwierdzona" staly w innych miejscach (uwaga Macka 14.08).
   Plakietka dostaje `margin-left: auto` i STALA szerokosc, wiec wszystkie cztery
   statusy maja te same krawedzie, niezaleznie od tresci wiersza. */
.ab-glowa .status {
  margin-left: auto;
  min-width: 178px;          /* miesci najdluzszy status: „Czeka na potwierdzenie" */
  text-align: center;
}
@media (max-width: 720px) {
  /* Na telefonie wiersz i tak sie lamie - stala szerokosc zrobilaby z plakietki
     pasek przez pol ekranu. */
  .ab-glowa .status { margin-left: 0; min-width: 0; }
}

/* ============================================================================
   PANEL RODZICA - LOGOWANIE: e-mail albo telefon, plus konta zewnetrzne
   ============================================================================ */

/* Przelacznik sposobu logowania. Dwa przyciski, nie <select> - jeden ruch zamiast
   trzech, i od razu widac, ze sa tylko dwie mozliwosci. */
.log-sposob {
  display: flex; gap: 6px; margin-bottom: 14px;
  background: var(--sand); border-radius: 999px; padding: 4px;
}
.log-sposob-btn {
  flex: 1; font: 700 14px 'Nunito', sans-serif; color: var(--muted);
  background: transparent; border: 0; border-radius: 999px; padding: 10px 12px;
  min-height: 44px; cursor: pointer; transition: background .2s, color .2s;
}
.log-sposob-btn.aktywny { background: var(--card); color: var(--ink); box-shadow: var(--cien); }
.log-sposob-btn:focus-visible { outline: 2px solid var(--akcent-ciemny); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .log-sposob-btn:not(.aktywny):hover { color: var(--akcent-ciemny); }
}

/* Pole hasla z przyciskiem „Pokaż" - rodzic na telefonie wpisuje haslo w ciemno
   i najczestszy powod nieudanego logowania to literowka, nie zle haslo. */
.field--haslo { position: relative; }
.field--haslo input { padding-right: 82px; }
.poka-haslo {
  position: absolute; right: 8px; bottom: 7px;
  font: 700 13px 'Nunito', sans-serif; color: var(--akcent-ciemny);
  background: none; border: 0; padding: 8px 10px; min-height: 40px; cursor: pointer;
}
.poka-haslo:focus-visible { outline: 2px solid var(--akcent-ciemny); outline-offset: 2px; }

/* Blad przy polu. `aria-invalid` ustawia JS, wiec obwodka i komunikat zawsze ida razem. */
.log-karta input[aria-invalid="true"] { border-color: #9B4A3B; background: #fdf3f0; }
.log-blad {
  margin-top: 12px; font-size: 14px; line-height: 1.55;
  color: #9B4A3B; background: rgba(155, 74, 59, .10);
  border-radius: 12px; padding: 11px 14px;
}

/* Konta zewnetrzne. Przyciski wstawia JS TYLKO gdy jest konfiguracja
   (`js/logowanie-config.js`) - bez niej ten blok zostaje pusty i ukryty. */
.log-spoleczne { display: grid; gap: 9px; margin-bottom: 6px; }
.log-spol {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 12px 18px;
  font: 700 14.5px 'Nunito', sans-serif; color: var(--ink);
  background: #fff; border: 1.5px solid #9A8D7A; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.log-spol[disabled] { opacity: .6; cursor: progress; }
.log-spol:focus-visible { outline: 2px solid var(--akcent-ciemny); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .log-spol:hover { border-color: var(--akcent); box-shadow: var(--cien); }
}
/* „albo" - kreska z napisem w srodku, bez dodatkowego znacznika w HTML */
.log-albo {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0; font-size: 13px; color: var(--muted);
}
.log-albo::before, .log-albo::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ROZWIJANA PRZY PRAWEJ KRAWĘDZI (18.08.2026). Grupa „Więcej" stoi na końcu rzędu, więc
   wyśrodkowana lista wychodziła poza ekran. Nad progiem hamburgera równamy ją do prawej. */
@media (min-width: 1024px) {
  .nav-links > .ma-grupa:last-of-type .ma-lista { left: auto; right: 0; transform: none; }
}

/* ODSTĘP W WĄSKIM PAŚMIE (18.08.2026) - patrz `.nav-links--waskie-pasmo` w generatorze. */
@media (min-width: 1131px) and (max-width: 1279px) {
  .nav-links { gap: 6px; }               /* .nav-links--waskie-pasmo */
  .nav-links > .link, .nav-links .ma-przycisk { font-size: 14.5px; }
}

/* RÓWNANIE PRZYCISKU GRUPY W MENU MOBILNYM (18.08.2026) - `.ma-przycisk--rowno`. */
@media (max-width: 1130px) {
  .nav-links .ma-przycisk { padding-left: 26px; padding-right: 26px; }  /* .ma-przycisk--rowno */
  .nav-links .ma-lista { padding-left: 42px; padding-right: 26px; }
}

/* Logo w naglowku = ten sam lockup co w stopce (znak + nazwa + podpis).
   ⚠️ Podpis jest tu MNIEJSZY niz w stopce (9px/.08em zamiast 10,5px/.14em) i to jest
   ZMIERZONA decyzja, nie estetyczna: przy rozmiarze ze stopki logo rosnie z 241 do 293 px
   i przy 1131 px menu wchodzi na przyciski konta o 25 px. Przy 9px/.08em logo ma 243 px,
   luz zostaje 23 px, a prog hamburgera 1130 px jest nietkniety.
   ⛔ Nie podnos tego rozmiaru bez ponownego pomiaru `scripts/_kz-logo-pomiar.mjs`. */
.nav-logo .marka { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-logo .sygn-sub { font-size: 9px; letter-spacing: .08em; }

/* ── Lista z „ptaszkami" - REGULA BAZOWA (19.08.2026) ─────────────────────────────
   ⛔ Do tej pory `.ticks` mial tylko wersje zawezone (`.pak .ticks svg`,
   `.zasady-karta .ticks svg`). Poza tymi kontenerami ikona nie dostawala rozmiaru
   i rozdymala sie do szerokosci bloku - zmierzone 708x708 px na kawiarni, newsletterze
   i strefie zabawy. Zawezone reguly maja wyzsza specyficznosc, wiec dalej wygrywaja
   tam, gdzie istnieja; ta baza tylko lapie wszystkie pozostale uzycia.
   ⛔ Nie kasuj tej reguly przy porzadkach - bez niej ikony wracaja do 708 px. */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; }
.ticks svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--zielony); }

/* ── Dwa pasy CTA jeden pod drugim (19.08.2026) ───────────────────────────────────
   Maciek: „te dwa połączone długie bloki powinny być od siebie w odstępach sekcji".
   Dwa pelnoszerokie, ciemne pasy stykajace sie krawedziami czytaly sie jak jeden
   nieskonczony blok. Rozdzielamy je tlem strony i przycinamy wewnetrzny oddech,
   zeby para nie urosla o wysokosc calego ekranu. */
.pas-cta + .pas-cta { margin-top: 96px; }
.pas-cta + .pas-cta,
.pas-cta:has(+ .pas-cta) { padding-block: 112px; }

/* ⚠️ Na telefonie te dwie reguly maja WYZSZA specyficznosc niz mobilne
   `.pas-cta { padding: 68px 0 }` z @media 600px, wiec bez tego bloku zostawialy
   112 px oddechu na 390 px - bramka „sekcje bez nadmiarowej pustki" to zlapala. */
@media (max-width: 600px) {
  .pas-cta + .pas-cta,
  .pas-cta:has(+ .pas-cta) { padding-block: 68px; }
  .pas-cta + .pas-cta { margin-top: 48px; }
}

/* ── Sekcja dwukolumnowa „tekst | zdjecie" (skill styl-partweb, 6F) ───────────────
   Zasada: obraz jest ROWNORZEDNYM bohaterem, nie znaczkiem obok akapitu.
   Proporcje zmierzone i przyjete 30.07.2026: kolumny 1.18fr/1fr, obraz 5:4,
   udzial obrazu w sekcji ~51%. `--rev` przenosi szeroka kolumne na PRAWO. */
.feature { display: grid; grid-template-columns: 1.18fr 1fr; gap: clamp(26px, 4.5vw, 56px); align-items: center; }
.feature--rev { grid-template-columns: 1fr 1.18fr; }
.feature .shot img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center;
  min-height: clamp(300px, 34vw, 470px); display: block;
  border-radius: 20px; box-shadow: 0 24px 60px -28px rgba(var(--cien-hover-rgb), .55);
}
.feature .fe-tekst h2 { margin-top: 14px; }
.feature .fe-tekst > p { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.feature .fe-tekst .ticks { margin-top: 22px; }
.fe-akcje { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 900px) {
  .feature, .feature--rev { grid-template-columns: 1fr; }
  .feature .shot { order: -1; }          /* na telefonie zdjecie NAD tekstem */
  .feature .shot img { min-height: 240px; }
}
@media (max-width: 600px) { .fe-akcje .btn { width: 100%; justify-content: center; } }

/* Nota pod akcjami w sekcji dwukolumnowej - drobny dopisek, nie drugi akapit. */
.fe-nota { margin-top: 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Kategorie zgod cookies awansowaly z h3 na h2 (struktura naglowkow) -
   rozmiar zostaje wizualnie ten sam, zeby uklad sie nie rozjechal. */
.ck-h { font-size: 21px; margin: 0 0 6px; }

/* Telefon pod kciukiem na telefonie: topbar z numerem odjezdza przy scrollu (sticky
   jest tylko naglowek), wiec przewijajacy cennik rodzic tracil numer z oczu.
   Widoczny WYLACZNIE ponizej progu hamburgera (1130 px) - na desktopie numer
   caly czas wisi w topbarze. Touch-target 44 px. */
.nav-tel { display: none; align-items: center; justify-content: center; flex: none;
  /* flex:none KONIECZNE - .nav-inner to flex i na 390 px shrink zgniatal przycisk do szerokosci SVG (21 px) */
  width: 44px; height: 44px; border-radius: 50%; color: var(--akcent-ciemny); }
.nav-tel svg { width: 21px; height: 21px; }
.nav-tel:active { background: var(--sand); }
@media (max-width: 1130px) { .nav-tel { display: inline-flex; } }

/* Blok "Z naszego bloga" na podstronach oferty: dwie karty obok siebie,
   te same karty co na blog.html (kopiowane przez _kz-konwersja-konce.py). */
.z-bloga .bl-siatka--wpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 40px; }
@media (max-width: 860px) { .z-bloga .bl-siatka--wpis { grid-template-columns: 1fr; } }

/* Obrysowy przycisk na CIEMNYCH pasach sekcji - regula .btn-obrys byla pisana pod
   pas-cta; w .sekcja--ciemna dawala 1,18:1 (ciemny tekst na ciemnym tle).
   Zlapane bramka przy dodawaniu CTA "Zobacz cennik zajec" (19.08.2026). */
.sekcja--ciemna .btn-obrys { color: #fff; border-color: rgba(255, 255, 255, .55); }
.sekcja--ciemna .btn-obrys:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* Karta-ODNOSNIK (sekcja "Zanim wejdziecie" na strefie zabawy): kazda zasada prowadzi
   tam, gdzie temat ma ciag dalszy. Hover dziedziczy z .karta (uniesienie + akcent);
   tu tylko odklejamy wyglad linku i dodajemy stopke ze strzalka. */
.karta--link { text-decoration: none; color: inherit; }
.karta-dalej {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--akcent-ciemny);
}
.karta-dalej span { transition: transform .22s ease; }
/* nota pod siatka kart klejila sie do ostatniego rzedu (5 px; bramka: min 6) */
#zasady-strefy .cennik-nota { margin-top: 26px; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .karta--link:hover .karta-dalej span { transform: translateX(4px); }
}

/* Nota klienta (20.08.2026) przy godzinach otwarcia - godziny bywaja zmieniane pod
   zajecia i wydarzenia. Wystepuje na CIEMNYCH tlach (stopka, sekcja kontaktu).
   ⏳ Link do kalendarza dojdzie, gdy klient poda adres - jedna linia. */
.godz-nota { margin-top: 10px; font-size: 12.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); max-width: 30ch; }



/* === MENU MOBILNE - BLOKADA TLA 24.08.2026 === */
/* ⛔ NIE ustawiaj `position: fixed` na `body` - naglowek jest `position: sticky`
   i wyjechalby poza ekran. `overflow` zatrzymuje dokument, `touch-action` gest palca,
   a panel menu odzyskuje wlasne przewijanie w pionie. */
html.menu-otwarte, html.menu-otwarte body { overflow: hidden; overscroll-behavior: none; }
html.menu-otwarte body { touch-action: none; }
html.menu-otwarte .nav-links { touch-action: pan-y; }
/* === KONIEC bloku MENU MOBILNE === */



/* === DOTYK MOBILNY 24.08.2026 === */
/* ZASLONA POD OTWARTYM MENU - `z-index: 79` siada pod panelem (`.nav-links` ma 80+),
   ale nad trescia strony, wiec dotkniecie „obok" nie dochodzi do linkow ani do paska
   zgody na ciasteczka. */
.menu-zaslona {
  position: fixed; inset: 0; z-index: 79; background: rgba(28, 16, 8, .42);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s;
  -webkit-tap-highlight-color: transparent;
}
html.menu-otwarte .menu-zaslona { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .menu-zaslona { transition: none; } }

/* LIGHTBOX - ta sama mechanika co menu (patrz blok MENU MOBILNE wyzej).
   ⛔ Samo `body { overflow: hidden }` na iOS nie zatrzymuje dokumentu. */
html.lb-otwarty, html.lb-otwarty body { overflow: hidden; overscroll-behavior: none; }
html.lb-otwarty body { touch-action: none; }
html.lb-otwarty .lb { touch-action: pan-y; }
/* === KONIEC bloku DOTYK MOBILNY === */



/* === PANEL NA TELEFONIE 24.08.2026 === */
/* --- 1. KONFIGURATOR: karty musza sie MIESCIC w kolumnie ---------------------
   Twarde `min-width: 200px` na `.km-etykieta` ustalalo min-content CALEJ kolumny
   na 316 px przy dostepnych 296 px, wiec wszystkie siedem krokow wychodzilo poza
   panel. Wlasciwym lekarstwem jest `min-width: 0` na `.km-etykieta` - reszta to
   zabezpieczenie pietro nizej i uklad. Rozpisane w naglowku generatora. */
@media (max-width: 700px) {
  /* tor siatki moze zejsc ponizej min-content dziecka */
  .konf-kroki { grid-template-columns: minmax(0, 1fr); }
  /* dzieci siatki i flexa maja domyslnie `min-width: auto` - to samo w sobie blokuje kurczenie */
  .konf-krok, .konf-tresc, .km-poz { min-width: 0; }
  /* ⚡ TO JEST WLASCIWE LEKARSTWO - sprawdzone kontrfaktycznie (patrz naglowek).
     ⛔ `flex-basis` MUSI byc 0, nie `auto` ani `100%`. Przy `auto` baza rowna sie
     szerokosci tekstu, wiec przy lamaniu wierszy flexa nazwa wypycha cene do NASTEPNEJ
     linii; przy `100%` robi to zawsze. Wlasciciel zglosil to wprost: „ceny powinny byc
     przy tekscie". Baza 0 pozwala nazwie kurczyc sie i dzielic linie z cena. */
  /* ⛔ CEL DOTYKU (zmierzone 25.08.2026 na 375 px): 5 z 10 etykiet mialo 30-41 px
     przy progu 44. To ETYKIETA jest celem - sam `input.km-chk` ma 20 px, ale klikniecie
     w etykiete przelacza pole (sprawdzone kontrfaktycznie). Bez `min-height` wiersz
     dodatku jest tak wysoki, jak jego tekst - krotka nazwa = malutki cel.
     ⚠️ Dwa progi liczy sie RAZEM: 16 px na tekst (pola wyzej) i 44 px na pudelko. */
  .km-etykieta { min-width: 0; flex: 1 1 0; min-height: 44px; display: flex; align-items: center; gap: 9px; }
  /* Cena wraca na PRAWO w linii nazwy - blok `@media (max-width: 700px)` wyzej
     spycha ja na lewo (`margin-left: 0; text-align: left`), co przy bazie 0 dawaloby
     cene przyklejona do nazwy. */
  .km-cena { margin-left: auto; text-align: right; min-width: 0; }
  /* ⚠️ WIERSZE Z LICZNIKIEM: licznik ma 144 px (trzy cele dotyku po 44 px + przerwy),
     a wiersz ma do dyspozycji 212 px, wiec licznik i cena NIE ZMIESZCZA sie obok siebie.
     Zamieniamy kolejnosc: cena idzie do linii nazwy, licznik schodzi pod spod.
     ZMIERZONE: wszystkie szesc wierszy ma cene przy nazwie, a wysokosci spadaja
     (Gofrofrytki 162 -> 124 px, Tosty 173 -> 157 px). */
  .km-poz:has(.km-ile) .km-cena { order: 2; }
  .km-poz:has(.km-ile) .km-ile { order: 3; margin-left: 0; }
  /* Numer kroku NAD trescia, nie obok. Kolumna numeru (ramka 1 + padding 18 + kolko 34
     + przerwa 14 = 67 px) zjadala jedna piata karty TYLKO z lewej strony, wiec tresc
     stala krzywo: 67 px odstepu z lewej, 19 px z prawej - to wlasnie widac na zrzutach
     wlasciciela. ZMIERZONE po zmianie: 19 px z obu stron, a tresc rosnie z 222 na 270 px. */
  .konf-krok { display: grid; grid-template-columns: 1fr; gap: 12px; }
  /* ⛔⛔ POLA DATY I GODZINY NA iOS. Safari nadaje natywnym kontrolkom `date` i `time`
     WLASNA, wieksza szerokosc wewnetrzna niz Chrome - a `.field` jako element siatki ma
     domyslnie `min-width: auto`, wiec nie moze zejsc ponizej niej i pole wychodzi poza
     karte kroku. ⚠️ TEGO NIE DA SIE ODTWORZYC W CHROME: tam `min-content` pola daty to
     176 px i miesci sie w karcie 278 px, wiec pomiar lokalny pokazuje „wszystko OK",
     a na iPhonie pole wystaje. Zglosil to wlasciciel ze zrzutu. */
  .field, .konf-pola > * { min-width: 0; }
  input, textarea, select { max-width: 100%; }
  input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; }
  /* `.wrap` (26+26) i panel (20+20) zjadaly 92 z 390 px szerokosci ekranu */
  .panel-sekcja-w { padding-left: 14px; padding-right: 14px; }
}

/* --- 2. AKTYWNA ZAKLADKA PANELU ----------------------------------------------
   `panel.html` uzywa `aria-pressed` (po swiadomej zmianie w `_kz-audyt-c-a11y.py`),
   a `panel-bawialni.html` nadal `role="tab"` + `aria-selected`. Arkusz ma rozumiec
   OBA stany, inaczej w jednym z paneli aktywna pigulka wyglada jak nieaktywna. */
.pz-btn[aria-selected="true"], .pz-btn[aria-pressed="true"] {
  background: var(--ciemny); border-color: var(--ciemny); color: #fff;
}

/* --- 3. TABELE JAKO KARTY NA TELEFONIE ---------------------------------------
   `.tabela { min-width: 520px }` przy 308 px widocznego pola chowalo 41% szerokosci,
   a iOS nie rysuje paskow przewijania - rodzic nie wiedzial, ze cokolwiek tam jest.
   Ponizej 700 px wiersz staje sie kartka, a komorka para „etykieta: wartosc". */
@media (max-width: 700px) {
  .tabela-otoczka { overflow-x: visible; }
  .tabela { min-width: 0; display: block; }
  /* Naglowek zostaje dla czytnikow ekranu, znika dla oka - kanoniczne „sr-only".
     ⚠️ `display: none` odebraloby go takze czytnikom, a wtedy komorki karty stracilyby
     powiazanie z kolumna. Prostokaty `<th>` moga po tym wyjsciu wygladac na szersze niz
     tabela - to artefakt elementu wyjetego z ukladu i przycietego, nie przepelnienie. */
  .tabela thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; padding: 0; margin: -1px; border: 0;
  }
  .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela tr {
    border: 1px solid var(--line); border-radius: 14px; background: var(--card);
    padding: 4px 14px; margin-bottom: 12px;
  }
  .tabela tr:last-child { margin-bottom: 0; }
  .tabela td {
    border-bottom: 0; padding: 10px 0; font-size: 15px;
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  }
  .tabela td + td { border-top: 1px solid var(--line); }
  .tabela td::before {
    content: attr(data-etykieta); flex: none;
    font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); font-weight: 700;
  }
  .tabela td:not([data-etykieta])::before { content: none; }
}
/* === KONIEC bloku PANEL NA TELEFONIE === */



/* === PULAPKA NA BOTY 25.08.2026 === */
/* ⚠️ NIE `display: none` - czesc botow pomija pola ukryte w ten sposob, a wtedy
   pulapka nie lapie nikogo. Chowamy poza ekranem, zachowujac pole w formularzu. */
.pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* === KONIEC bloku PULAPKA === */



/* --- KARTA NAD KONFIGURATOREM (25.08.2026) ---------------------------------
   Naglowek panelu i zakladki zamkniete w JEDNYM boxie. Wartosci sa te same,
   co w `.panel-sekcja-w` - spojnosc jest tu projektem, obcy styl w tym miejscu
   czytalby sie jak wstawka z innej strony.
   ⛔ Tekst drugorzedny na tej karcie to `--muted` (7,3:1 na kremie), NIGDY
      `--na-ciemnym-cichy`. Karta jest JASNA. Ta sama pomylka odebrala czytelnosc
      komunikatowi w `.konf-suma` - zmierzone 1,07:1. */
.panel-karta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 18px 44px -30px rgba(28, 16, 8, .5);
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 3vw, 28px);
  margin-bottom: 20px;
}
.panel-karta .panel-gora { margin-bottom: 0; padding-bottom: clamp(14px, 2vw, 18px); }
.panel-karta .panel-zakladki {
  margin-bottom: 0;
  padding-top: clamp(14px, 2vw, 18px);
  border-top: 1px solid var(--line);
}
/* Jedyny ozdobnik: pierscien w kolorze akcentu wokol znaku trybu goscia.
   Na jasnym tle akcent niesie sie sam - nie trzeba go podbijac tlem. */
.tryb-goscia .panel-awatar { box-shadow: 0 0 0 4px rgba(192, 112, 77, .13); }

/* ⛔ DWA przyciski musza siedziec w JEDNYM kontenerze. `.panel-gora` to
   `space-between`, a trzy elementy flex rozjezdzaja uklad (lekcja z 14.08.2026). */
.panel-akcje { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  /* Na telefonie rzad przyciskow bierze cala szerokosc i dzieli sie po polowie -
     inaczej „Zarejestruj sie" spada pod „Zaloguj sie" i karta rosnie o dwa rzedy. */
  .panel-karta .panel-gora { flex-direction: column; align-items: stretch; }
  .panel-akcje { width: 100%; }
  .panel-akcje .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
@media (max-width: 480px) {
  /* ⛔ ZMIERZONE na 375 px: przy podziale po polowie przycisk ma 138 px, a napis
     „Zarejestruj się" nie miesci sie w jednej linii - zawijal sie na DWIE i przycisk
     rosl do 70 px. Ponizej 480 px kazdy bierze wlasny wiersz: jedna linia, 50 px,
     cel dotyku na cala szerokosc karty. */
  .panel-akcje { flex-direction: column; }
  .panel-akcje .btn { width: 100%; }
}
/* === KONIEC KARTY NAD KONFIGURATOREM === */

/* === MOBILE 24.08.2026: telefon w naglowku + tlo plotna === */
/* ⛔ TLO PLOTNA. `html` bez wlasnego tla oddaje plotnu tlo `body` (kremowe), wiec przy
   odbiciu przewijania na iOS pod ciemna stopka swiecil kremowy pas. Ciemne tlo `html`
   zlewa sie ze stopka na dole i z gornym paskiem na gorze.
   `body` musi miec `min-height: 100vh`, inaczej na krotkiej podstronie ciemne plotno
   wyszloby spod kremowej tresci. */
html { background-color: #232B25; }
body { min-height: 100vh; }

/* TELEFON W PRZYKLEJONYM NAGLOWKU - ikona RAZEM z napisem.
   Sam znak sluchawki nie mowi, co robi przycisk, a gorny pasek z napisem „Zadzwoń"
   odjezdza przy przewijaniu. */
.nav-tel { width: auto; min-width: 44px; padding: 0 10px; gap: 6px; border-radius: 100px;
           font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.nav-tel svg { width: 19px; height: 19px; }
.nt-napis { display: inline; }

/* ⚠️⚠️ NA 375 px NIE BYLO MIEJSCA na pelny lockup + napis + hamburger. ZMIERZONE:
   pas naglowka ma do dyspozycji 287 px na tresc (375 minus 52 px marginesow i 36 px przerw),
   a samo logo zajmowalo 235, telefon z napisem 110, hamburger 41 - razem 386. Brakowalo 99 px.
   Dlatego na telefonie lockup schodzi do samej nazwy w mniejszym stopniu pisma, a marginesy
   i przerwy sie zwezaja. Podpis „bawialnia & kawiarnia · Pelplin" mial na telefonie 9 px
   i byl na granicy czytelnosci - w stopce zostaje w pelnej postaci. */
@media (max-width: 640px) {
  header .wrap { padding-left: 14px; padding-right: 14px; gap: 10px; }
  .nav-logo .sygn { font-size: 17.5px; }
  .nav-logo .sygn-sub { display: none; }
  .nav-logo .znak { width: 36px; height: 36px; }

  /* GORNY PASEK - jeden rzad zamiast trzech. Pigulka „Zadzwoń" schodzi z paska, bo ta sama
     akcja stoi juz w przyklejonym naglowku i jest pod reka przez caly czas przewijania,
     a nie tylko na samej gorze strony. */
  .topbar .tb-tel { display: none; }
  .topbar .wrap { min-height: 44px; padding-block: 2px; }
}

/* Ponizej 340 px (starsze, bardzo waskie telefony) zostaje sama ikona - kolo dotykowe
   nadal ma 44 px, wiec przycisk sie nie kurczy ponizej progu dotyku. */
@media (max-width: 340px) {
  .nav-tel { width: 44px; min-width: 44px; padding: 0; }
  .nt-napis { display: none; }
}
/* === KONIEC bloku MOBILE 24.08.2026 === */