/* Przedszkolinek Tarnów - paleta wyprowadzona wprost z logo:
   ciemna zieleń czapki skrzata, jasna zieleń kołnierza, cielisty odcień
   twarzy i przygaszony róż obwódki. Róż z logo (#AB7E93) jest za słaby na
   tekst, więc do napisów i przycisków idzie nasycony wariant tej samej
   rodziny; jasny zostaje do tła i akcentów. */
:root {
  --las: #2F6A4A;
  --las-ciemny: #24513A;
  --listek: #A8D858;
  --listek-cichy: #EAF5D6;
  --brzoskwinia: #CFE8B4;    /* cieply akcent tez zielony */
  --brzoskwinia-cicha: #EEF7E4;
  --roz: #3E7D3A;            /* akcent - zielen zamiast rozu */
  --roz-cichy: #E7F3E1;      /* jasne tlo akcentu */
  --krem: #FAFDF6;
  --krem-cieply: #F1F8E9;
  --tusz: #1F2A21;          /* atrament z zielonym podbiciem */
  --cichy: #5B6A57;         /* tekst pomocniczy w zieleni */
  --wlos: #DCE9CE;
  --naglowki: 'Baloo 2', 'Trebuchet MS', sans-serif;
  --tekst: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* Sticky pasek ma ~79 px - bez zapasu kotwice chowaly poczatek sekcji pod nim. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--krem); color: var(--tusz);
  font-family: var(--tekst); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--naglowki); font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -.005em; }
h1 { font-size: clamp(34px, 5.4vw, 58px); }
h2 { font-size: clamp(26px, 3.6vw, 40px); }
h3 { font-size: clamp(19px, 2vw, 22px); }
h1 em, h2 em { font-style: normal; color: var(--roz); }
p { margin: 0 0 14px; }
h2 + p, h2 + .hero__lid { margin-top: 18px; }
p:last-child { margin-bottom: 0; }

.strona { width: min(1180px, 100% - 40px); margin-inline: auto; }
@media (max-width: 560px) { .strona { width: min(1180px, 100% - 28px); } }

.nadtytul {
  font-family: var(--tekst); font-weight: 700; font-size: 12.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--las);
  margin-bottom: 10px;
}
.nadtytul--jasny { color: rgba(255, 255, 255, .82); }

.zaslepka {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--roz); background: var(--roz-cichy);
  border: 1px dashed rgba(192, 86, 127, .5); border-radius: 999px; padding: 6px 14px;
}
.zaslepka::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--roz); }
.zaslepka--jasna { color: #FFFFFF; background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); }
.zaslepka--jasna::before { background: #FFFFFF; }
.puste { color: var(--cichy); font-style: italic; }

/* --- Pasek demo i naglowek ------------------------------------------------ */
.pasek-demo {
  background: var(--brzoskwinia-cicha); color: var(--cichy);
  font-size: 13.5px; text-align: center; padding: 9px 18px;
  border-bottom: 1px solid var(--wlos);
}
.pasek-demo strong { color: var(--tusz); }

/* Pasek w ciemnej zieleni marki. Wszystkie napisy schodza na biel,
   a przycisk telefonu odwraca sie na jasny, zeby zostal najmocniejszym
   punktem paska. */
.gora {
  position: sticky; top: 0; z-index: 50;
  background: var(--las-ciemny);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.gora .znak__nazwa { color: #FFFFFF; }
.gora .znak__pod { color: rgba(255, 255, 255, .72); }
.gora .menu a { color: rgba(255, 255, 255, .92); }
.gora .menu a:hover { border-bottom-color: var(--listek); color: #FFFFFF; }
.gora .strona { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.znak { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.znak img { width: 54px; height: 54px; border-radius: 50%; flex: none; }
.znak__nazwa { display: block; font-family: var(--naglowki); font-size: 20px; color: var(--las); line-height: 1.1; }
.znak__pod { display: block; font-size: 12px; color: var(--cichy); }

.menu { display: flex; align-items: center; gap: 22px; }
.menu a { text-decoration: none; font-weight: 600; font-size: 15.5px; color: var(--tusz); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.menu a:hover { border-bottom-color: var(--listek); }
.menu a.ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: var(--listek-cichy); color: var(--las);
}
.menu a.ikona svg { width: 18px; height: 18px; }
.menu a.ikona:hover { background: var(--las); color: #FFFFFF; }
.menu a.menu__tel {
  display: inline-flex; align-items: center; gap: 9px; border: 0;
  background: var(--listek); color: var(--las-ciemny); border-radius: 999px; padding: 11px 20px;
}
.menu a.menu__tel svg { width: 17px; height: 17px; flex: none; }
.menu a.menu__tel:hover { background: #CFE8B4; }

.menu-przycisk { display: none; }
@media (max-width: 1019px) {
  .menu-przycisk {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    background: none; border: 1px solid var(--wlos); border-radius: 12px; cursor: pointer;
  }
  .menu-przycisk span, .menu-przycisk::before, .menu-przycisk::after {
    content: ""; display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--tusz);
  }
  .menu-przycisk span { margin: 4px 0; }
  .menu {
    position: absolute; left: 0; right: 0; top: 100%; width: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--krem); border-bottom: 1px solid var(--wlos);
    padding: 8px 20px 18px; display: none;
  }
  .menu[data-otwarte] { display: flex; }
  .menu a { padding: 13px 0; border-bottom: 1px solid var(--wlos); }
  .menu a.ikona { margin: 14px auto 0; }
  .menu a.menu__tel { justify-content: center; margin-top: 12px; border-bottom: 0; }
}

/* --- Przyciski ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--tekst); font-weight: 700; font-size: 16px; text-decoration: none;
  border-radius: 999px; padding: 14px 26px; border: 2px solid transparent;
  transition: transform .16s ease, background .16s ease, color .16s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn--pelny { background: var(--roz); color: #FFFFFF; }
.btn--pelny:hover { background: #2F6A4A; }
.btn--pusty { background: #FFFFFF; color: var(--las); border-color: var(--las); }
.btn--pusty:hover { background: var(--las); color: #FFFFFF; }

/* --- Fale miedzy sekcjami -------------------------------------------------- */
/* Miekkie przejscia zamiast prostych krawedzi - to one nadaja stronie
   przedszkolny charakter, a nie kolorowe ramki wokol wszystkiego. */
.fala { position: absolute; left: 0; width: 100%; height: clamp(40px, 5vw, 80px); display: block; }
/* Fala zawsze niesie kolor sekcji SASIEDNIEJ, nie wlasnej - dzieki temu
   wyglada, jakby jedno tlo wlewalo sie w drugie. Pierwsza wersja miala
   `--krem-cieply` na tle brzoskwiniowym, czyli dwa niemal identyczne
   odcienie, i fala byla po prostu niewidoczna. */
.fala--dol { bottom: -1px; fill: var(--krem); }
.fala--gora { top: -1px; fill: var(--krem); }
.fala--zielona { fill: var(--krem); }

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; background: var(--brzoskwinia-cicha); padding: clamp(40px, 6vw, 76px) 0 clamp(70px, 9vw, 120px); }
.hero__uklad { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .hero__uklad { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.hero__lid { font-size: clamp(17px, 2vw, 19.5px); color: var(--cichy); max-width: 42ch; margin-top: 16px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero__drobne { margin-top: 18px; font-size: 14.5px; color: var(--cichy); }
.hero__kadr { position: relative; }
.hero__kadr > img:first-child { border-radius: 28px; box-shadow: 0 22px 50px rgba(47, 106, 74, .16); }
.hero__znak {
  position: absolute; right: -6px; bottom: -18px; width: clamp(84px, 12vw, 116px); height: auto;
  border-radius: 50%; border: 5px solid var(--krem); box-shadow: 0 10px 26px rgba(47, 106, 74, .18);
}
@media (max-width: 899px) { .hero__cta .btn { flex: 1 1 auto; } }

/* --- Sekcje --------------------------------------------------------------- */
.sekcja { position: relative; padding: clamp(56px, 8vw, 100px) 0; }
.sekcja--krem { background: var(--krem-cieply); }
.sekcja--zielona { background: var(--las); color: #FFFFFF; }
.sekcja--zielona h2 { color: #FFFFFF; }
.sekcja--zielona h2 em { color: var(--listek); }
.glowa { max-width: 44ch; margin-bottom: clamp(30px, 4vw, 46px); }
.glowa--srodek { margin-inline: auto; text-align: center; }

.o-nas { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 900px) { .o-nas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.o-nas p { color: var(--cichy); }
.fakty { list-style: none; margin: 0; padding: 22px 24px; background: var(--listek-cichy); border-radius: 22px; display: grid; gap: 2px; }
.fakty li { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(47, 106, 74, .14); }
.fakty li:last-child { border-bottom: 0; }
.fakty__co { font-size: 14px; color: var(--las); font-weight: 700; }
.fakty__ile { font-size: 15.5px; }

.kaciki { display: grid; gap: clamp(18px, 2.4vw, 26px); }
@media (min-width: 620px) { .kaciki { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kaciki { grid-template-columns: repeat(4, 1fr); } }
.kacik { background: #FFFFFF; border-radius: 24px; padding: 16px 16px 22px; box-shadow: 0 12px 30px rgba(47, 106, 74, .08); }
.kacik__kadr { border-radius: 18px; overflow: hidden; margin-bottom: 16px; }
.kacik__kadr img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.kacik h3 { margin-bottom: 8px; color: var(--las); }
.kacik p { font-size: 15px; color: var(--cichy); }

/* --- Hymn ----------------------------------------------------------------- */
/* Hymn na rozmytej zieleni. Zdjecie idzie pod gradientem marki, wiec
   zostaje faktura swiatla, a tekst ma rowne, ciemne podloze. */
.hymn {
  position: relative; color: #FFFFFF;
  padding: clamp(56px, 8vw, 100px) 0;
  background-image:
    linear-gradient(135deg, rgba(47, 106, 74, .88) 0%, rgba(36, 81, 58, .93) 100%),
    url('images/tlo-hymn.jpg');
  background-size: cover, cover;
  background-position: center, center;
}
.hymn__uklad { display: grid; gap: clamp(28px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .hymn__uklad { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hymn h2 { color: #FFFFFF; }
.hymn h2 em { color: var(--listek); }
.hymn p { color: rgba(255, 255, 255, .86); }
.hymn__kadr img { border-radius: 28px; box-shadow: 0 22px 50px rgba(0, 0, 0, .22); }
.hymn__drobne { margin-top: 16px; font-size: 14px; color: rgba(255, 255, 255, .66); }

.odtwarzacz {
  display: flex; align-items: center; gap: 16px; margin-top: 26px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 20px; padding: 18px 20px;
}
.odtwarzacz__ikona {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none;
  border-radius: 50%; background: var(--listek); color: var(--las-ciemny);
}
.odtwarzacz__ikona svg { width: 24px; height: 24px; }
.odtwarzacz__tytul { font-family: var(--naglowki); font-size: 18px; margin: 0 0 6px; color: #FFFFFF; }
.odtwarzacz__stan { margin: 0; }
.odtwarzacz__audio { width: 100%; margin-top: 18px; }

/* --- Pytania -------------------------------------------------------------- */
.pytania { display: grid; gap: 12px; max-width: 820px; }
.pytania details { background: #FFFFFF; border: 1px solid var(--wlos); border-radius: 18px; padding: 4px 20px; }
.pytania summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700;
  font-size: 16.5px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.pytania summary::-webkit-details-marker { display: none; }
.pytania summary::after {
  content: ""; width: 11px; height: 11px; flex: none;
  border-right: 2.5px solid var(--las); border-bottom: 2.5px solid var(--las);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.pytania details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.pytania details p { padding-bottom: 18px; color: var(--cichy); font-size: 15.5px; }

/* --- Kontakt -------------------------------------------------------------- */
.kontakt { display: grid; gap: clamp(24px, 3vw, 40px); align-items: stretch; }
@media (min-width: 900px) { .kontakt { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.kanaly { display: grid; align-content: start; border-top: 1px solid rgba(255, 255, 255, .22); }
.kanaly a, .kanaly div {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); text-decoration: none;
}
.kanaly span:first-child { font-size: 13.5px; color: rgba(255, 255, 255, .7); }
.kanaly span:last-child { font-weight: 700; text-align: right; }
.kanaly a:hover span:last-child { color: var(--listek); }
.sekcja--zielona .puste { color: rgba(255, 255, 255, .62); }
.mapa-kafel { border: 1px solid rgba(255, 255, 255, .28); border-radius: 24px; overflow: hidden; min-height: 260px; }
.mapa { width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

/* --- Stopka --------------------------------------------------------------- */
.dol { background: var(--las-ciemny); color: rgba(255, 255, 255, .68); font-size: 14px; padding: 24px 0; }
.dol .strona { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* =========================================================================
   RUNDA 2 — hero na pelnym zdjeciu, tla sekcji, wycinanki
   ========================================================================= */

/* Hero: fotografia na calej powierzchni, tekst na przyciemnieniu od dolu.
   Kadr z dziecmi biegnacymi korytarzem ma jasna gore, wiec welon idzie
   od dolu i nie zabiera swiatla ze zdjecia. */
.hero--foto { position: relative; overflow: hidden; }
.hero--foto .hero__tlo {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('images/f-hero.webp');
  background-size: cover; background-position: center 34%;
}
.hero--foto .hero__tlo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(760px 300px at 50% 42%, rgba(255,255,255,.9), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.42) 46%, rgba(255,255,255,.9) 100%);
}
.hero--foto .strona { position: relative; z-index: 1; }
.hero--foto .hero__uklad { display: block; }
.hero--foto .hero__tresc { max-width: 760px; margin-inline: auto; text-align: center; }
.hero--foto .hero__cta { justify-content: center; }
.hero--foto h1 { margin-bottom: 26px; }

/* Tlo fotograficzne sekcji - zdjecie pod welonem w kolorze sekcji. */
.sekcja--foto { position: relative; }
.sekcja--foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
  background-image: var(--foto); background-size: cover; background-position: center;
  opacity: .16;
}
.sekcja--foto > * { position: relative; z-index: 1; }
.sekcja--foto-jasna::after { opacity: .42; }

/* Wycinanki: dziecko na zielonym kole jako akcent przy naglowku. */
/* Wycinanki sa wieksze i celowo wychodza poza obrys sekcji - dzieki temu
   granica miedzy pasami przestaje byc prosta kreska. Ujemny margines
   gorny wyciaga figurke nad krawedz, a sekcja nie moze jej przycinac. */
/* Wycinanki siedza w rogach kadru, nie w kolumnie tresci. Dlatego wychodza
   z siatki i sa kotwiczone do krawedzi sekcji - stad position: absolute
   i sekcje bez przycinania zawartosci. */
.wycinanka {
  display: block; width: clamp(150px, 22vw, 300px); height: auto;
  margin: 0; position: relative; z-index: 2;
}
.sekcja { position: relative; }
/* Dlonie w prawym gornym rogu sekcji, wyniesione nad jej krawedz, zeby
   nie wchodzily na tabelke z danymi po prawej stronie kolumny. */
.wycinanka--dlonie {
  position: absolute; right: 0; top: -150px; z-index: 3;
  width: clamp(190px, 24vw, 340px);
  pointer-events: none;
}
@media (max-width: 1000px) { .wycinanka--dlonie { display: none; } }
@media (max-width: 760px) { .hero--foto .hero__tlo { background-image: url('images/f-hero-sm.webp'); } }
.wycinanka--rakieta { margin: 0 auto -20px 0; }
@media (max-width: 760px) { .wycinanka { display: none; } }

/* Roz marki na jasnym zdjeciu hero dawal 2,1:1, czyli ponizej progu nawet
   dla duzego pisma. W samym hero schodzi na ciemniejszy odcien tej samej
   barwy - 5,4:1, a roznica jest ledwo zauwazalna obok kremowego tla. */
/* Zielen na jasnym hero: 5,1:1, czyli powyzej progu takze dla malego
   pisma, a odcien trzyma sie palety marki. */
.hero--foto h1 em { color: #2C6B3F; }

/* =========================================================================
   RUNDA 3 — naglowek hero nizej i wiekszy, tlo kacikow w zblizeniu
   ========================================================================= */

/* Twarze dzieci sa w gornej polowie kadru, wiec tekst schodzi nizej.
   Rozjasnienie pod napisem zjezdza razem z nim. */
.hero--foto .hero__tresc { padding-top: clamp(90px, 15vw, 210px); }
.hero--foto h1 { font-size: clamp(44px, 6.6vw, 88px); }
.hero--foto .hero__tlo::after {
  background:
    radial-gradient(1280px 380px at 50% 66%, rgba(255,255,255,.93), rgba(255,255,255,.72) 46%, rgba(255,255,255,.2) 78%, rgba(255,255,255,0) 92%),
    linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.3) 40%, rgba(255,255,255,.92) 100%);
}

/* Zdjecie w tle kacikow w zblizeniu - rozmyta zielen czyta sie lepiej
   powiekszona niz wpasowana w cala szerokosc. */
.sekcja--foto-duza::after { background-size: 160%; background-position: center 30%; }

/* Wycinanka w lewym dolnym rogu sekcji. Sekcja dostaje zapas u dolu, zeby
   figurka miescila sie w calosci - przy bottom:0 i overflow:hidden byla
   scinana przez krawedz i czytala sie jak przypadkowy fragment. */
.sekcja--foto { overflow: visible; }
/* Zapas u dolu tylko w sekcji z wycinanka - na podstronie oferty ta
   sama kotwica #zajecia zostawiala przez to ogromna dziure. */
.sekcja--rakieta { padding-bottom: clamp(180px, 25vw, 380px); }
/* Rakieta w lewym dolnym rogu. Sekcja dostaje zapas u dolu mniej wiecej
   rowny wysokosci figurki, zeby nie wchodzila na kafelki. */
.wycinanka--rog {
  position: absolute; left: 0; bottom: 0; top: auto; z-index: 3;
  width: clamp(180px, 22vw, 320px); height: auto; margin: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .wycinanka--rog { display: none; }
  .sekcja--rakieta { padding-bottom: clamp(40px, 8vw, 64px); }
}

/* Zdjecie w tle pytan bywa w tym miejscu srednio jasne. Zielony akcent
   dawal na najciemniejszym punkcie 1,7:1, wiec naglowek dostaje pod spodem
   miekkie rozjasnienie, a sam akcent schodzi na ciemniejsza zielen.
   Po zmianie: naglowek 8,6:1, akcent 5,2:1. */
/* Rozjasnienie jest tlem samego bloku naglowka, nie warstwa pod nim.
   Pseudoelement z ujemnym z-index chowal sie pod fotografia sekcji, bo ta
   lezy na wlasnej warstwie i nie ma nad soba wspolnego kontekstu. */
#pytania .glowa {
  position: relative;
  padding: 22px 20px 18px; margin: -22px 0 8px;
  border-radius: 26px;
  background: radial-gradient(78% 120% at 20% 50%, rgba(255,255,255,.94), rgba(255,255,255,0) 76%);
}
/* Ujemne marginesy boczne dopiero tam, gdzie kontener ma zapas - na waskim
   ekranie wypychaly blok poza kadr i strona dostawala poziomy suwak. */
@media (min-width: 760px) {
  #pytania .glowa { padding: 26px 40px 22px; margin: -26px -40px 8px; }
}
#pytania h2 em, #ogloszenia h2 em { color: var(--las-ciemny); }

/* =========================================================================
   RUNDA 6 — ogloszenia, wydarzenia, rekrutacja, pliki do pobrania
   ========================================================================= */

.glowa--srodek { text-align: center; }
.glowa--srodek .nadtytul { justify-content: center; }

/* --- Ogloszenia ----------------------------------------------------------- */
.ogloszenia {
  display: grid; gap: 18px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ogloszenie {
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 24px; padding: 26px 24px 28px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ogloszenie:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31, 42, 33, .1); }
.ogloszenie__kiedy {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--las);
}
.ogloszenie h3 { margin: 0 0 8px; font-size: 20px; }
.ogloszenie p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cichy); }
.ogloszenia__stopka { margin: 28px 0 0; text-align: center; }

/* --- Podglowek podstrony -------------------------------------------------- */
.podglowek {
  position: relative; background: var(--las-ciemny); color: #FFFFFF;
  padding: clamp(44px, 6vw, 84px) 0 clamp(38px, 5vw, 68px);
}
.podglowek--foto { background-image: var(--foto); background-size: cover; background-position: center 40%; }
.podglowek--foto::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(36, 81, 58, .93) 0%, rgba(36, 81, 58, .8) 52%, rgba(36, 81, 58, .5) 100%);
}
.podglowek .strona { position: relative; z-index: 1; }
.podglowek h1 { color: #FFFFFF; font-size: clamp(32px, 4.4vw, 56px); margin: 0 0 16px; }
.podglowek h1 em { font-style: normal; color: var(--listek); }
.podglowek .nadtytul { color: rgba(255, 255, 255, .82); }
.podglowek__lid { max-width: 58ch; margin: 0; color: rgba(255, 255, 255, .88); }
.podglowek__wroc { margin: 22px 0 0; font-size: 14px; }
.podglowek__wroc a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

/* --- Wydarzenia ----------------------------------------------------------- */
.wydarzenia { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wydarzenie {
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 24px; padding: 26px 24px 28px;
}
.wydarzenie__kiedy {
  margin: 0 0 10px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--las);
}
.wydarzenie h3 { margin: 0 0 8px; font-size: 20px; }
.wydarzenie p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cichy); }

/* --- Kroki rekrutacji ----------------------------------------------------- */
.kroki { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 14px; }
.krok {
  display: flex; gap: 18px; align-items: flex-start;
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 22px; padding: 22px 24px;
}
.krok__nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--listek); color: var(--las-ciemny);
  font-family: var(--naglowki); font-size: 18px;
}
.krok h3 { margin: 0 0 5px; font-size: 19px; }
.krok p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cichy); }

/* --- Pliki do pobrania ---------------------------------------------------- */
.pliki { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plik {
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 22px; padding: 24px 22px 22px;
}
.plik__ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 14px; background: var(--listek-cichy); color: var(--las);
}
.plik__ikona svg { width: 22px; height: 22px; }
.plik h3 { margin: 0 0 7px; font-size: 18px; }
.plik p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--cichy); }
/* Stan zamiast odnosnika: swiadomie nie podpinamy pustego href, bo klikniecie
   prowadziloby do bledu 404. */
.plik__stan {
  margin-top: auto; align-self: flex-start;
  padding: 7px 14px; border-radius: 999px;
  background: var(--listek-cichy); color: var(--las);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* --- Notka pod trescia ---------------------------------------------------- */
.notka {
  margin-top: 32px; padding: 26px 28px;
  background: var(--listek-cichy); border-radius: 24px;
}
.notka p { margin: 0; color: var(--tusz); }
.notka__cta { margin-top: 16px !important; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 620px) {
  .krok { padding: 18px 18px; gap: 14px; }
  .notka { padding: 20px 20px; }
}

/* Naglowek ogloszen lezy na zdjeciu sali, wiec dostaje takie samo miekkie
   rozjasnienie jak naglowek pytan. Wersja wysrodkowana, bo blok jest
   na srodku kolumny. */
#ogloszenia .glowa {
  position: relative;
  padding: 20px 18px 16px; margin: -20px auto 6px; max-width: 640px;
  border-radius: 26px;
  background: radial-gradient(72% 120% at 50% 50%, rgba(255,255,255,.94), rgba(255,255,255,0) 76%);
}


/* =========================================================================
   RUNDA 7 — galeria, kadra, opinie, podstrona Oferta
   ========================================================================= */

/* Rozwiniete menu mobilne mialo kremowe tlo, a linki od rundy z ciemnym
   paskiem sa biale (.gora .menu a wygrywa specyficznoscia). Bialy tekst na
   kremie to 1,05:1, czyli napisy praktycznie znikaly. Panel schodzi na ten
   sam ciemny zielony co pasek, wiec biel wraca na swoje miejsce: 11,8:1. */
@media (max-width: 1019px) {
  .gora .menu { background: var(--las-ciemny); border-bottom-color: rgba(255, 255, 255, .16); }
  .gora .menu a { border-bottom-color: rgba(255, 255, 255, .14); }
  .gora .menu a.ikona { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
  .gora .menu a.menu__tel { color: var(--las-ciemny); }
}

/* Biezaca podstrona w menu. */
.menu a.teraz { border-bottom-color: var(--listek); }
.gora .menu a.teraz { color: #FFFFFF; }

.o-nas__cta { margin-top: 20px; }
.drobne { margin-top: 22px; font-size: 14.5px; color: var(--cichy); }
.cichy { color: var(--cichy); font-style: italic; }

/* --- Galeria sal ---------------------------------------------------------- */
/* Zdjecia z galerii przedszkola maja 458x206 px. Kafelek dostaje dokladnie
   te proporcje i nie rosnie ponad natywna szerokosc, zeby bitmapa nie byla
   powiekszana - stad ograniczenie kolumn zamiast rozciagania na cala szerokosc. */
.galeria {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.zdjecie {
  margin: 0; background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(47, 106, 74, .07);
}
.zdjecie img { width: 100%; aspect-ratio: 458 / 206; object-fit: cover; }
.zdjecie figcaption {
  padding: 12px 16px 14px; font-size: 14px; font-weight: 600; color: var(--las);
}

/* --- Kadra ---------------------------------------------------------------- */
.kadra-grupa { margin-bottom: 30px; }
.kadra-grupa:last-child { margin-bottom: 0; }
.kadra-grupa__tytul {
  font-family: var(--tekst); font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--las);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--wlos);
}
.kadra {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.osoba {
  display: flex; align-items: center; gap: 14px;
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 18px; padding: 14px 16px;
}
.osoba__inicjaly {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--listek-cichy); color: var(--las-ciemny);
  font-family: var(--naglowki); font-size: 17px; letter-spacing: .02em;
}
.osoba__opis { display: block; min-width: 0; }
.osoba__imie { display: block; font-family: var(--naglowki); font-size: 17.5px; line-height: 1.2; }
.osoba__stopien { font-family: var(--tekst); font-size: 12.5px; font-weight: 700; color: var(--cichy); }
.osoba__rola { display: block; font-size: 13.5px; line-height: 1.45; color: var(--cichy); margin-top: 2px; }

/* --- Opinie --------------------------------------------------------------- */
/* Zloto z palety dawalo 2,1:1 na bieli, czyli ponizej progu 3:1 dla grafiki
   niosacej tresc. Ciemniejszy bursztyn: 3,4:1 na bieli i 3,2:1 na kremie. */
.gwiazdki { display: inline-flex; gap: 2px; color: #B8800A; vertical-align: middle; }
.gwiazdki svg { width: 16px; height: 16px; display: block; }
.ocena {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin: 0 0 30px; text-align: center;
}
.ocena__liczba { font-family: var(--naglowki); font-size: 34px; line-height: 1; color: var(--las-ciemny); }
.ocena .gwiazdki svg { width: 20px; height: 20px; }
.ocena__zrodlo { font-size: 14.5px; color: var(--cichy); flex-basis: 100%; }
.ocena__zrodlo a { color: var(--las); }

.opinie { display: grid; gap: 18px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.opinia {
  display: flex; flex-direction: column;
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 24px; padding: 24px 24px 20px;
}
.opinia__gora { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.opinia__inicjal {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--listek-cichy); color: var(--las-ciemny);
  font-family: var(--naglowki); font-size: 19px;
}
.opinia__autor { margin: 0 0 3px; font-family: var(--naglowki); font-size: 17.5px; line-height: 1.2; }
.opinia__tresc { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--tusz); }
.opinia__data { margin: auto 0 0; font-size: 12.5px; color: var(--cichy); }

/* =========================================================================
   Podstrona Oferta
   ========================================================================= */

.list { max-width: 68ch; }
.list p { font-size: 17.5px; }
.list__podpis {
  margin-top: 22px; font-family: var(--naglowki); font-size: 22px; color: var(--las);
}

.oferta-siatka { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.oferta-karta {
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 24px; padding: 26px 24px 28px;
}
.oferta-karta h3 { margin: 0 0 9px; font-size: 20px; }
.oferta-karta p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--cichy); }
.notka--wyroz { background: var(--brzoskwinia-cicha); border: 1px solid var(--wlos); }

/* --- Udogodnienia --------------------------------------------------------- */
.udogodnienia {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.udogodnienia li {
  display: flex; align-items: center; gap: 13px;
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 999px; padding: 10px 20px 10px 10px;
  font-size: 15px; font-weight: 600;
}
.udogodnienie__ikona {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--listek-cichy); color: var(--las);
}
.udogodnienie__ikona svg { width: 20px; height: 20px; }

/* --- Plan dnia ------------------------------------------------------------ */
.plan-dnia { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan-dnia li {
  display: flex; gap: 20px; align-items: baseline;
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 20px; padding: 18px 22px;
}
.plan-dnia__godzina {
  flex: none; width: 116px;
  font-family: var(--naglowki); font-size: 16.5px; color: var(--las-ciemny);
  font-variant-numeric: tabular-nums;
}
.plan-dnia h3 { margin: 0; font-size: 18px; }
.plan-dnia p { margin: 4px 0 0; font-size: 14.5px; color: var(--cichy); }
@media (max-width: 520px) {
  .plan-dnia li { flex-direction: column; gap: 4px; align-items: stretch; }
  .plan-dnia__godzina { width: auto; }
}

/* --- Zajecia dodatkowe ---------------------------------------------------- */
.zajecia { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.zajecie {
  background: #FFFFFF; border: 1px solid var(--wlos);
  border-radius: 22px; padding: 24px 22px 26px;
}
.zajecie h3 { margin: 0 0 8px; font-size: 19px; }
.zajecie p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--cichy); }
/* Angielski jest codziennie we wszystkich grupach, wiec nie ginie w siatce. */
.zajecie--mocne { background: var(--listek-cichy); border-color: var(--brzoskwinia); }

/* --- Rekrutacja ----------------------------------------------------------- */
.rekrutacja-lid { max-width: 66ch; margin-bottom: 28px; font-size: 17.5px; }
/* Jasna zielen etykiety na zieleni --las dawala 3,85:1, czyli ponizej progu
   dla pisma 12 px. Na --las-ciemny ta sama zielen ma 5,46:1. */
.promocja {
  background: var(--las-ciemny); color: #FFFFFF;
  border-radius: 26px; padding: 28px 30px; margin-bottom: 34px;
}
.promocja__etykieta {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--listek);
}
.promocja__tresc { margin: 0; font-family: var(--naglowki); font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; }
.promocja__tresc strong { color: var(--listek); font-weight: inherit; }
.promocja__drobne { margin: 12px 0 0; font-size: 14.5px; color: rgba(255, 255, 255, .84); }

.rekrutacja__srodtytul {
  font-size: clamp(21px, 2.6vw, 26px); margin: 0 0 18px;
}
.powody { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
.powody li { position: relative; padding-left: 30px; font-size: 15.5px; }
.powody li::before {
  content: ""; position: absolute; left: 4px; top: .55em;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--listek); box-shadow: 0 0 0 4px var(--listek-cichy);
}
.rekrutacja__puenta {
  max-width: 62ch; margin: 0 0 40px; padding-left: 20px;
  border-left: 4px solid var(--listek);
  font-family: var(--naglowki); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.4; color: var(--las-ciemny);
}

.karta-zapisu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  background: #FFFFFF; border: 2px solid var(--las);
  border-radius: 26px; padding: 26px 28px; margin-bottom: 26px;
}
.karta-zapisu > div { flex: 1 1 320px; }
.karta-zapisu h3 { margin: 0 0 6px; font-size: 21px; }
.karta-zapisu p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cichy); }

/* --- Tabelka z danymi ----------------------------------------------------- */
.tabelka {
  display: grid; max-width: 780px; border: 1px solid var(--wlos); border-radius: 22px;
  overflow: hidden; background: #FFFFFF; margin-bottom: 8px;
}
.tabelka__rzad {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: space-between; align-items: baseline;
  padding: 15px 22px; border-bottom: 1px solid var(--wlos);
}
.tabelka__rzad:last-child { border-bottom: 0; }
.tabelka__rzad > span:first-child { font-weight: 700; color: var(--las-ciemny); }
.tabelka__rzad > span:last-child { color: var(--cichy); text-align: right; }

.ewidencja { max-width: 70ch; margin-inline: auto; text-align: center; color: rgba(255, 255, 255, .9); }
.ewidencja a { color: #FFFFFF; }

/* --- Odnosnik na kafelku pliku -------------------------------------------- */
.plik__link {
  margin-top: auto; align-self: flex-start;
  padding: 10px 18px; border-radius: 999px;
  background: var(--roz); color: #FFFFFF; text-decoration: none;
  font-size: 14px; font-weight: 700;
}
.plik__link:hover { background: var(--las-ciemny); }

/* Odnosnik w karcie ogloszenia - tekst karty jest przygaszony, wiec link
   musi sie od niego odciac kolorem i podkresleniem. */
.ogloszenie p a { color: var(--las); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding-block: 6px; }


/* =========================================================================
   RUNDA 8 — ogloszenia pod O nas, dziecko w dolnym rogu sekcji
   ========================================================================= */

/* Dziecko z pomalowanymi dlonmi przenosi sie z gornej krawedzi sekcji O nas
   na jej prawy dolny rog i wystaje w dol, na sekcje ogloszen. Sekcja dostaje
   zapas u dolu, zeby figurka nie wchodzila na tabelke z faktami. */
/* Dziecko stoi przy dolnej krawedzi sekcji O nas i chowa sie ZA sekcja
   ogloszen - wyglada zza jej tla, zamiast lezec na wierzchu. Ujemny
   z-index wsuwa je pod tlo nastepnej sekcji, a przy okazji chowa plaska
   krawedz wycinanki, wiec maska nie jest juz potrzebna. Sekcja O nas nie
   ma wlasnego tla, wiec figurka pozostaje w niej widoczna. */
.wycinanka--dlonie {
  top: auto; bottom: -26px; z-index: -1;
  width: clamp(250px, 28vw, 430px);
}
@media (min-width: 1001px) {
  #o-nas { padding-bottom: clamp(150px, 16vw, 240px); }
}

/* Odnosnik do wizytowki w przedszkolowo.pl stoi w tej samej liscie co
   telefon i Facebook, wiec dziedziczy ich wyglad. */


/* =========================================================================
   RUNDA 9 — fale bez paska, plaskie ogloszenia, ikonki zajec
   ========================================================================= */

/* Fala u GORY sekcji jest wypelniona kolorem sasiada, wiec nad zdjeciem
   rysowala plaski pasek w miejsce fotografii. Wszystkie przejscia ze
   zdjecia ida teraz fala u DOLU sekcji ze zdjeciem: nad krzywa zostaje
   wlasne tlo sekcji, czyli zdjecie, a pod nia kolor sekcji nastepnej. */
/* .sekcja--foto > * ustawia position: relative z ta sama specyficznoscia co
   .fala, ale stoi nizej w arkuszu - fala w sekcji ze zdjeciem wypadala z
   pozycjonowania absolutnego i ladowala w toku jako 68-pikselowy pasek nad
   nastepna sekcja. Stad ta regula, o jeden stopien mocniejsza. */
.sekcja .fala, .hero .fala { position: absolute; z-index: 2; }

.fala--dol.fala--do-kremu { fill: var(--krem-cieply); }
.fala--dol.fala--do-zieleni { fill: var(--las); }


/* Przycisk telefonu: sluchawka i numer zamiast slowa "Zadzwon". */
.btn--tel { gap: 10px; }
.btn--tel svg { width: 17px; height: 17px; flex: none; }

/* Ikonki przy zajeciach dodatkowych. */
.zajecie__ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 14px; background: var(--listek-cichy); color: var(--las);
}
.zajecie__ikona svg { width: 22px; height: 22px; }
.zajecie--mocne .zajecie__ikona { background: #FFFFFF; }

/* Hymn: zdjecie szlo pod welonem o kryciu .88-.93, wiec bokeh w ogole nie
   byl widoczny. Welon schodzi nizej, a zeby biale pismo trzymalo kontrast,
   dochodzi drugi, ciemniejszy gradient od dolu pod kolumna z tekstem. */
.hymn {
  background-image:
    linear-gradient(100deg, rgba(36, 81, 58, .90) 0%, rgba(36, 81, 58, .74) 42%, rgba(47, 106, 74, .30) 78%, rgba(47, 106, 74, .18) 100%),
    url('images/tlo-hymn.jpg');
}


/* =========================================================================
   RUNDA 10 — wysrodkowany hymn, rowne kafelki opinii
   ========================================================================= */

#ogloszenia { background: var(--krem); }

/* Sekcja hymnu stracila kafelek ze zdjeciem, wiec kolumna z tekstem stala
   samotnie po lewej. Teraz siedzi na srodku, a welon nad zdjeciem jest
   symetryczny: najciemniej pod tekstem, jasniej przy krawedziach, gdzie
   widac bokeh. */
.hymn {
  background-image:
    radial-gradient(118% 128% at 50% 50%, rgba(36, 81, 58, .94) 0%, rgba(36, 81, 58, .88) 46%, rgba(47, 106, 74, .56) 78%, rgba(47, 106, 74, .34) 100%),
    url('images/tlo-hymn.jpg');
}
.hymn__uklad { justify-items: center; }
@media (min-width: 900px) { .hymn__uklad { grid-template-columns: minmax(0, 780px); justify-content: center; } }
.hymn__tresc { text-align: center; }
.hymn__tresc p { margin-inline: auto; max-width: 62ch; }
.hymn .odtwarzacz { justify-content: center; text-align: left; max-width: 420px; margin-inline: auto; }

/* Kafelki opinii maja teraz jednakowa wysokosc w rzedzie - data i tak jest
   dosunieta do dolu, wiec rozne dlugosci tekstu nie rozjezdzaja siatki. */
.opinie { align-items: stretch; }

/* Zielen marki na jasnych fragmentach zdjecia hero schodzila do 1,5:1.
   Ciemniejszy odcien tej samej rodziny wraca powyzej progu. */
.hero--foto h1 em { color: #24513A; }
/* Bialy tekst z kryciem .66 na zdjeciu dawal 3,3:1, czyli ponizej progu
   dla malego pisma. */
.hymn__drobne { color: rgba(255, 255, 255, .82); }


/* =========================================================================
   RUNDA 11 — zajecia na stronie glownej, szklane kafelki oferty
   ========================================================================= */

.zajecia__stopka { margin: 30px 0 0; text-align: center; }
#zajecia .zajecie { border-color: rgba(47, 106, 74, .16); }
@media (min-width: 1000px) { #zajecia .zajecia { grid-template-columns: repeat(5, 1fr); } }

.list--srodek { max-width: 70ch; margin-inline: auto; text-align: center; }
.list--srodek .list__podpis { text-align: center; }
.notka--srodek { text-align: center; }
.notka--srodek .notka__cta { justify-content: center; }

/* --- Szklane kafelki oferty ---------------------------------------------- */
/* Efekt szkla potrzebuje faktury pod spodem, inaczej rozmycie nie ma czego
   rozmywac. Sekcja dostaje wiec miekkie zdjecie w tle, a kafelki polprze-
   zroczysta biel z rozmyciem. Krycie .74 dobrane pomiarem kontrastu -
   ponizej tej wartosci przygaszony tekst schodzil pod prog. */
.sekcja--szklo .oferta-karta {
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 18px 40px rgba(47, 106, 74, .12), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.sekcja--szklo .notka--wyroz {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
          backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .8);
}
.oferta-karta__ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  border-radius: 14px; background: var(--listek-cichy); color: var(--las);
}
.oferta-karta__ikona svg { width: 23px; height: 23px; }

/* --- Plan dnia w mniejszych kafelkach ------------------------------------ */
.plan-dnia { gap: 9px; }
.plan-dnia li { padding: 12px 18px; border-radius: 16px; gap: 16px; }
.plan-dnia__godzina { width: 104px; font-size: 15px; }
.plan-dnia h3 { font-size: 16px; }
.plan-dnia p { margin-top: 2px; font-size: 13.5px; }

/* Angielski nie jest juz wyrozniony kolorem. */
.zajecie--mocne { background: #FFFFFF; border-color: var(--wlos); }
.zajecie--mocne .zajecie__ikona { background: var(--listek-cichy); }

/* Naglowek "Dziewiec rzeczy, na ktorych" nie miescil sie w domyslnych 44ch
   kolumny naglowka i lamal sie na trzy wersy zamiast dwoch. */
.sekcja--szklo .glowa { max-width: 660px; }


/* =========================================================================
   RUNDA 12 — telefon w menu bez numeru
   ========================================================================= */

/* Numer zniknal z paska, wiec przycisk przestaje byc pastylka z napisem
   i staje sie kolkiem takim samym jak Facebook obok. Sam numer nadal jest
   dostepny: siedzi w aria-label i w atrybucie title. */
.menu a.menu__tel {
  width: 40px; height: 40px; padding: 0; flex: none;
  justify-content: center; border-radius: 50%;
}
.menu a.menu__tel svg { width: 18px; height: 18px; }
@media (max-width: 1019px) {
  .menu a.menu__tel { margin: 12px auto 0; }
}


/* =========================================================================
   RUNDA 13 — menu zwiniete do hamburgera, panel wysuwany z boku
   ========================================================================= */

/* Autorska regula display na .menu bije regule przegladarki dla [hidden],
   wiec brak skryptu musi byc obsluzony jawnie. */
.menu[hidden], .zaslona[hidden] { display: none; }

.gora__akcje { display: flex; align-items: center; gap: 10px; }
.gora .ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #FFFFFF; text-decoration: none;
}
.gora .ikona svg { width: 18px; height: 18px; }
.gora .ikona:hover { background: rgba(255, 255, 255, .28); }
.gora .ikona--tel { background: var(--listek); color: var(--las-ciemny); }
.gora .ikona--tel:hover { background: #CFE8B4; }

/* Hamburger jest teraz jedynym sposobem na menu, wiec pokazuje sie na
   kazdej szerokosci. */
.menu-przycisk {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  padding: 0; cursor: pointer; color: #FFFFFF;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
}
.menu-przycisk svg { width: 21px; height: 21px; display: block; }
.menu-przycisk:hover { background: rgba(255, 255, 255, .22); }

.zaslona {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(31, 42, 33, .55);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.zaslona[data-otwarte] { opacity: 1; visibility: visible; }

.menu {
  /* left: auto jest konieczne - stara regula menu mobilnego ustawiala
     left: 0, a przy zadanej szerokosci lewa krawedz wygrywa z prawa
     i panel dokowal sie po zlej stronie. */
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; z-index: 90;
  width: min(340px, 86vw);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 74px 26px 30px;
  background: var(--las-ciemny); color: #FFFFFF;
  box-shadow: -24px 0 60px rgba(31, 42, 33, .3);
  overflow-y: auto;
  transform: translateX(100%); visibility: hidden;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
}
.menu[data-otwarte] { transform: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .menu, .zaslona { transition: none; } }

.menu__zamknij {
  position: absolute; top: 18px; right: 18px;
  display: grid; place-items: center; width: 40px; height: 40px;
  padding: 0; cursor: pointer; color: #FFFFFF;
  background: rgba(255, 255, 255, .12); border: 0; border-radius: 50%;
}
.menu__zamknij svg { width: 18px; height: 18px; }
.menu__zamknij:hover { background: rgba(255, 255, 255, .24); }

.menu__grupa {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--listek);
}
.menu__lista { display: flex; flex-direction: column; margin-bottom: 24px; }

.menu a {
  display: block; padding: 10px 0;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92); text-decoration: none;
  font-family: var(--naglowki); font-size: 18.5px; font-weight: 500;
}
.menu__lista a:last-child { border-bottom: 0; }
.menu a:hover { color: #FFFFFF; }
.menu a.teraz { color: var(--listek); }

.menu a.menu__cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 20px; border: 0; border-radius: 999px;
  background: var(--listek); color: var(--las-ciemny);
  font-family: var(--tekst); font-size: 16px; font-weight: 700;
}
.menu a.menu__cta:hover { background: #CFE8B4; color: var(--las-ciemny); }
.menu a.menu__cta svg { width: 18px; height: 18px; flex: none; }


/* Ikonki na kafelkach oferty na srodku. */
.oferta-karta__ikona { margin-inline: auto; }

/* Plan dnia byl rozciagniety na cala szerokosc kolumny, przez co godzina
   i nazwa posilku stały po dwoch koncach pustego pasa. */
.plan-dnia { max-width: 720px; }
.drobne { max-width: 720px; }

/* Cala rekrutacja w jednej, wezszej kolumnie - szerokosc tabelki z danymi
   wyznacza miare dla krokow, karty zapisu i notek. */
#rekrutacja .strona > * { max-width: 780px; }
#rekrutacja .tabelka { max-width: 780px; }
.rekrutacja-lid { font-size: 17.5px; margin-bottom: 26px; }
.powody--dwie { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 26px; }

/* Panel jest kontenerem, nie kontrolka - obwodka fokusu na nim nic nie
   wnosi. Odnosniki w srodku zachowuja swoja, ale tylko przy nawigacji
   klawiatura. */
.menu:focus { outline: none; }
.menu a:focus-visible, .menu__zamknij:focus-visible, .menu-przycisk:focus-visible {
  outline: 2px solid var(--listek); outline-offset: 3px;
}


/* =========================================================================
   RUNDA 14 — rakieta wyzej, rekrutacja na srodku
   ========================================================================= */

/* Figurka stala nisko, oddzielona od kafelkow pustym pasem. Teraz siedzi
   blizej tresci i wystaje w dol na sekcje galerii. Dolna krawedz wycinanki
   jest plaska, wiec rozpuszcza sie maska - tak samo jak przy dloniach. */
.sekcja--rakieta { padding-bottom: clamp(60px, 8vw, 120px); }
.wycinanka--rog {
  bottom: -80px;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0) 99%);
          mask-image: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0) 99%);
}
@media (max-width: 900px) { .sekcja--rakieta { padding-bottom: clamp(40px, 8vw, 64px); } }

/* Rekrutacja: kolumna na srodku kadru, naglowek i wstep wysrodkowane,
   wnetrza kafelkow zostaja do lewej, bo tak sie je czyta. */
.sekcja--srodek .strona > * { margin-inline: auto; }
.sekcja--srodek .glowa,
.sekcja--srodek .rekrutacja-lid,
.sekcja--srodek .rekrutacja__srodtytul,
.sekcja--srodek .promocja { text-align: center; }
.sekcja--srodek .rekrutacja__puenta {
  border-left: 0; border-top: 3px solid var(--listek);
  padding: 18px 0 0; text-align: center;
}
.sekcja--srodek .karta-zapisu { justify-content: center; }


/* =========================================================================
   RUNDA 12 — poprawki po mailu od przedszkola (hymn, dzien otwarty, kadra)
   ========================================================================= */

/* Nagranie hymnu doszlo, wiec zamiast plakietki "do wgrania" jest zwykly
   podpis. Musi byc wyraznie mniejszy od tytulu utworu. */
.odtwarzacz__stan { font-size: 14px; color: rgba(255, 255, 255, .78); }

/* Natywny pasek <audio> ustawiamy w tej samej osi co kafelek nad nim. */
.hymn .odtwarzacz__audio { max-width: 420px; margin-inline: auto; display: block; }

/* Linki w kartach wydarzen - tak samo jak w ogloszeniach, tekst karty jest
   przygaszony i sam kolor by ich nie wyroznil. */
.wydarzenie p a { color: var(--las); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding-block: 6px; }

/* Trzy karty zapisu jedna pod druga - srodkowa i dolna nie potrzebuja juz
   takiego odstepu jak pojedynczy blok. */
.karta-zapisu + .karta-zapisu { margin-top: -6px; }


/* =========================================================================
   RUNDA 15 — przebudowa podstron: fala i skroty w podglowku, os czasu
   wydarzen, pliki rozdzielone na "zalatw online" i "do pobrania"
   ========================================================================= */

/* Podglowek konczy sie fala jak sekcje na glownej - podstrony przestaja
   zaczynac sie od prostej krechy. Fala niesie kolor tresci pod spodem. */
.podglowek--fala { padding-bottom: clamp(84px, 11vw, 150px); }
.podglowek .fala { position: absolute; z-index: 2; }

/* Skroty pod lidem podglowka: jedno spojrzenie i wiadomo, co jest na
   stronie, jeden klik i jestes we wlasciwej sekcji. */
.skroty { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.skroty a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .38);
  color: #FFFFFF; text-decoration: none; font-size: 14.5px; font-weight: 700;
  transition: background .16s ease, color .16s ease;
}
.skroty a:hover { background: rgba(255, 255, 255, .26); }
.skroty a.skroty__wyroz { background: var(--listek); border-color: var(--listek); color: var(--las-ciemny); }
.skroty a.skroty__wyroz:hover { background: #CFE8B4; }

/* Przycisk w kolorze listka - na ciemnej zieleni pelna zielen .btn--pelny
   ginie, a listek jest najjasniejszym punktem palety. */
.btn--listek { background: var(--listek); color: var(--las-ciemny); }
.btn--listek:hover { background: #CFE8B4; }

/* --- Wyrozniony baner najblizszego wydarzenia ----------------------------- */
.wydarzenie--wyroz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  max-width: 780px; margin: 0 auto clamp(40px, 6vw, 64px);
  background: var(--las-ciemny); color: #FFFFFF;
  border: 0; border-radius: 26px; padding: 30px 32px;
}
.wydarzenie--wyroz > div { flex: 1 1 320px; }
.wydarzenie--wyroz .wydarzenie__kiedy { color: var(--listek); }
.wydarzenie--wyroz h3 { color: #FFFFFF; font-size: clamp(22px, 2.6vw, 26px); }
.wydarzenie--wyroz p { color: rgba(255, 255, 255, .86); }
.wydarzenie--wyroz .btn { flex: none; }
@media (max-width: 620px) {
  .wydarzenie--wyroz { padding: 24px 22px; }
  .wydarzenie--wyroz .btn { flex: 1 1 auto; }
}

/* --- Os czasu roku przedszkolnego ----------------------------------------- */
/* Wydarzenia ida po kolei wzdluz linii, kazde z kolkiem i ikonka - kalendarz
   czyta sie z gory na dol jak rok, a nie jak przypadkowa siatka kart. */
.os { position: relative; list-style: none; max-width: 780px; margin: 0 auto; padding: 0; display: grid; gap: 16px; }
.os::before {
  content: ""; position: absolute; left: 27px; top: 16px; bottom: 16px;
  width: 3px; border-radius: 3px; background: var(--brzoskwinia);
}
.os li { position: relative; display: flex; gap: 18px; align-items: flex-start; }
.os__znaczek {
  position: relative; z-index: 1; flex: none; margin-top: 6px;
  display: grid; place-items: center; width: 57px; height: 57px;
  border-radius: 50%; background: var(--listek-cichy); color: var(--las);
  border: 3px solid var(--krem); box-shadow: 0 0 0 1px var(--wlos);
}
.os__znaczek svg { width: 27px; height: 27px; }
.os .wydarzenie { flex: 1; min-width: 0; }
@media (max-width: 560px) {
  .os { gap: 14px; }
  .os::before { left: 22px; }
  .os li { gap: 13px; }
  .os__znaczek { width: 47px; height: 47px; }
  .os__znaczek svg { width: 22px; height: 22px; }
  .os .wydarzenie { padding: 20px 18px 22px; }
}

/* --- Pliki: zalatw online vs. do pobrania --------------------------------- */
.zalatw { max-width: 780px; margin-inline: auto; }
/* Kolumna dokumentow jest krotka - na pelnej szerokosci karty rosly do
   monstrualnych pustych plansz. */
.pliki { max-width: 980px; margin-inline: auto; }
/* Plakietka stanu bez wielkiego krzyku - dokument jest w przedszkolu,
   na stronie pojawi sie wkrotce. */
.plik__stan { background: var(--brzoskwinia-cicha); color: var(--cichy); letter-spacing: .06em; }

/* Link w karcie atutow - jak w ogloszeniach i wydarzeniach. */
.oferta-karta p a { color: var(--las); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; padding-block: 6px; }


/* =========================================================================
   RUNDA 16 — widoczne menu na desktopie, kafelki podstron pod hero
   ========================================================================= */

/* Na szerokim ekranie glowne podstrony leza w pasku na wierzchu - hamburger
   zostaje dla telefonu i dla pelnej listy kotwic. Chowanie calej nawigacji
   za hamburgerem na desktopie to byla najwieksza bariera odkrywalnosci. */
.gora__linki { display: none; }
@media (min-width: 1020px) {
  .gora__linki { display: flex; align-items: center; gap: 24px; margin-right: 10px; }
  .gora__linki a {
    color: rgba(255, 255, 255, .92); text-decoration: none;
    font-weight: 700; font-size: 15.5px; padding: 6px 1px;
    border-bottom: 2px solid transparent;
    transition: color .16s ease, border-color .16s ease;
  }
  .gora__linki a:hover { color: #FFFFFF; border-bottom-color: var(--listek); }
  .gora__linki a.teraz { color: var(--listek); border-bottom-color: var(--listek); }
}

/* Kafelki podstron wjezdzaja od dolu na fale hero - trzy drzwi do reszty
   serwisu widoczne bez scrollowania i bez otwierania menu. */
.kafelki { position: relative; z-index: 3; }
.kafelki .strona { margin-top: clamp(-58px, -4.5vw, -18px); }
.kafelki__siatka { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px) { .kafelki__siatka { grid-template-columns: 1fr; gap: 10px; } }
.kafelek {
  display: flex; align-items: center; gap: 15px;
  background: #FFFFFF; border: 1px solid var(--wlos); border-radius: 20px;
  padding: 17px 20px; text-decoration: none;
  box-shadow: 0 16px 36px rgba(47, 106, 74, .13);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kafelek:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(47, 106, 74, .18); }
.kafelek__ikona {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--listek-cichy); color: var(--las);
}
.kafelek__ikona svg { width: 23px; height: 23px; }
.kafelek__tekst { min-width: 0; }
.kafelek__tekst strong { display: block; font-family: var(--naglowki); font-weight: 500; font-size: 18.5px; line-height: 1.2; color: var(--tusz); }
.kafelek__tekst span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--cichy); margin-top: 2px; }
.kafelek__strzalka { margin-left: auto; flex: none; color: var(--las); font-size: 20px; font-weight: 700; transition: transform .2s ease; }
.kafelek:hover .kafelek__strzalka { transform: translateX(4px); }


/* =========================================================================
   RUNDA 17 — pasek wg wzorca Shiva (logo na srodku), kafelek "Zapisz
   dziecko", bursztynowy drugi akcent, hover kart, focus, nowa stopka
   ========================================================================= */

/* Drugi, cieply akcent. Bursztyn juz byl w gwiazdkach opinii - teraz
   dostaje tokeny i wystepuje w malych dawkach: daty/miesiace i kropki.
   #8A6508 to wariant do pisma (4,9:1 na bieli), #EBBE5C do pisma na
   ciemnej zieleni (ok. 7:1), #B8800A zostaje do grafiki. */
:root {
  --bursztyn: #B8800A;
  --bursztyn-tekst: #8A6508;
  --bursztyn-jasny: #EBBE5C;
}

/* --- Pasek: napis po lewej, logo na srodku, akcje po prawej -------------- */
/* Wzorzec z dema shiva-dance-studio: powiekszone logo siedzi na osi paska
   i wystaje pod jego dolna krawedz. Poziome linki wypadly - nawigacja to
   menu rozwijane, wiec .gora__linki z rundy 16 zostaje w pliku jako martwe. */
.gora__linki { display: none !important; }
.gora .strona { justify-content: space-between; padding: 15px 0; }
.znak { margin-right: 0; }
.gora__logo { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); z-index: 5; display: block; border-radius: 50%; }
.gora__logo img {
  display: block; width: clamp(58px, 7vw, 94px); height: auto;
  border-radius: 50%; border: 4px solid var(--krem);
  box-shadow: 0 10px 26px rgba(31, 42, 33, .3);
}
.gora .strona { position: relative; }

/* Telefon wraca jako pigulka z widocznym numerem. */
.gora a.gora__tel {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 10px 18px; border-radius: 999px; text-decoration: none;
  background: var(--listek); color: var(--las-ciemny);
  font-weight: 700; font-size: 15.5px; white-space: nowrap;
}
.gora a.gora__tel svg { width: 17px; height: 17px; flex: none; }
.gora a.gora__tel:hover { background: #CFE8B4; }
@media (max-width: 759px) {
  .gora a.gora__tel { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .gora a.gora__tel span { display: none; }
}
/* Na waskim ekranie napis ustepuje miejsca logo na srodku. */
@media (max-width: 559px) {
  .gora .ikona--fb { display: none; }
  .znak__nazwa { font-size: 17px; }
  .znak__pod { display: none; }
}

/* --- Kafelki: czwarty, wyrozniony "Zapisz dziecko" ------------------------ */
.kafelki__siatka { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .kafelki__siatka { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px) { .kafelki__siatka { grid-template-columns: 1fr; } }
.kafelek--wyroz { background: var(--las-ciemny); border-color: var(--las-ciemny); }
.kafelek--wyroz .kafelek__tekst strong { color: #FFFFFF; }
.kafelek--wyroz .kafelek__tekst span { color: rgba(255, 255, 255, .76); }
.kafelek--wyroz .kafelek__ikona { background: rgba(255, 255, 255, .15); color: var(--listek); }
.kafelek--wyroz .kafelek__strzalka { color: var(--listek); }

/* --- Bursztyn w malych dawkach ------------------------------------------- */
.wydarzenie__kiedy, .ogloszenie__kiedy { color: var(--bursztyn-tekst); }
.wydarzenie--wyroz .wydarzenie__kiedy { color: var(--bursztyn-jasny); }
.promocja__etykieta { color: var(--bursztyn-jasny); }
.powody li::before { background: var(--bursztyn); box-shadow: 0 0 0 4px #F6ECD4; }

/* --- Jednolity hover kart -------------------------------------------------- */
.zajecie, .oferta-karta, .plik, .kacik, .wydarzenie {
  transition: transform .25s ease, box-shadow .25s ease;
}
.zajecie:hover, .oferta-karta:hover, .plik:hover, .kacik:hover, .wydarzenie:hover {
  transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31, 42, 33, .1);
}
@media (prefers-reduced-motion: reduce) {
  .zajecie, .oferta-karta, .plik, .kacik, .wydarzenie, .kafelek, .ogloszenie { transition: none; }
  .zajecie:hover, .oferta-karta:hover, .plik:hover, .kacik:hover, .wydarzenie:hover, .kafelek:hover, .ogloszenie:hover { transform: none; }
}

/* --- Widoczny focus dla klawiatury ---------------------------------------- */
:focus-visible { outline: 3px solid var(--roz); outline-offset: 3px; }
.gora :focus-visible, .podglowek :focus-visible, .dol :focus-visible,
.hymn :focus-visible, .promocja :focus-visible, .wydarzenie--wyroz :focus-visible,
.kafelek--wyroz:focus-visible, .menu :focus-visible {
  outline-color: var(--listek);
}

/* --- Stopka z nawigacja i pelnymi danymi ---------------------------------- */
.dol { padding: 36px 0 22px; }
.dol__uklad {
  display: flex; flex-wrap: wrap; gap: 22px 44px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: 20px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.dol__nazwa { font-family: var(--naglowki); font-size: 19px; color: #FFFFFF; margin: 0 0 7px; }
.dol__nap p { margin: 0; line-height: 1.7; }
.dol a { color: rgba(255, 255, 255, .85); text-underline-offset: 3px; }
.dol a:hover { color: var(--listek); }
.dol__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 600; }
.dol__nav a { text-decoration: none; }
.dol__drobne {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  font-size: 13.5px; color: rgba(255, 255, 255, .55);
}


/* =========================================================================
   RUNDA 18 — wieksze logo, listy w kartach zamiast sciany tekstu,
   zdjecia glownej mniej wyblakle
   ========================================================================= */

/* Logo ma byc gwiazda paska - rosnie i smielej wystaje pod krawedz. */
.gora__logo { top: 8px; }
.gora__logo img { width: clamp(76px, 9.5vw, 130px); border-width: 5px; }

/* Hero: welon bielil zdjecie niemal do zera. Rozjasnienie zostaje tylko
   pod naglowkiem (radial) i przy dolnej krawedzi (zejscie w fale), reszta
   kadru odzyskuje kolory. Naglowek to pismo 44-88 px, wiec prog 3:1 -
   pod tekstem krycie .86 trzyma go z duzym zapasem. */
.hero--foto .hero__tlo::after {
  background:
    radial-gradient(1280px 400px at 50% 66%, rgba(255,255,255,.86), rgba(255,255,255,.58) 46%, rgba(255,255,255,.1) 78%, rgba(255,255,255,0) 92%),
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,.9) 100%);
}
/* Fotografie w tlach sekcji tez byly ledwo widoczne. */
.sekcja--foto::after { opacity: .22; }
.sekcja--foto-jasna::after { opacity: .52; }

/* Listy do rodzicow: zamiast wysrodkowanej lawy tekstu - kartka listu.
   Tekst wraca do lewej (tak sie czyta dlugie akapity), pierwszy akapit
   dostaje inicjal, podpis zostaje na srodku jak odreczny. */
.list--srodek {
  max-width: 780px; text-align: left;
  background: #FFFFFF; border: 1px solid var(--wlos); border-radius: 28px;
  padding: clamp(26px, 4.5vw, 46px) clamp(20px, 5vw, 56px) clamp(24px, 4vw, 40px);
  box-shadow: 0 16px 38px rgba(47, 106, 74, .08);
}
.list--srodek .glowa--srodek { margin-bottom: clamp(20px, 3vw, 30px); }
.list p { line-height: 1.75; }
.list--srodek .glowa + p::first-letter {
  font-family: var(--naglowki); font-weight: 500; color: var(--las);
  font-size: 3.1em; line-height: .85; float: left; padding: 4px 10px 0 0;
}
.list--srodek .list__podpis { text-align: center; margin-top: 28px; }

/* O nas na glownej: pierwszy akapit jako lead, zeby blok mial rytm.
   (p:first-of-type odpada - pierwszym <p> w kolumnie jest nadtytul.) */
.o-nas h2 + p { font-size: 19px; color: var(--tusz); }


/* =========================================================================
   RUNDA 19 — zdjecia jeszcze smielej, lzejsze karty
   ========================================================================= */

/* Hero: gorna czesc kadru zupelnie bez welonu, rozjasnienie tylko tam,
   gdzie lezy naglowek i zejscie w fale. */
.hero--foto .hero__tlo::after {
  background:
    radial-gradient(1280px 400px at 50% 66%, rgba(255,255,255,.84), rgba(255,255,255,.54) 46%, rgba(255,255,255,.06) 78%, rgba(255,255,255,0) 92%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.9) 100%);
}
.sekcja--foto::after { opacity: .26; }
.sekcja--foto-jasna::after { opacity: .6; }

/* Podglowki podstron: prawa polowa kadru odzyskuje zdjecie, tekst siedzi
   po lewej na wciaz ciemnej zieleni. */
.podglowek--foto::before {
  background: linear-gradient(100deg, rgba(36, 81, 58, .92) 0%, rgba(36, 81, 58, .72) 48%, rgba(36, 81, 58, .28) 100%);
}

/* Krotsze opisy = mniejsze karty; odrobine mniej wypelnienia, zeby siatki
   nie wygladaly jak plansze. */
.zajecie { padding: 22px 20px 22px; }
.oferta-karta { padding: 24px 22px 24px; }


/* =========================================================================
   RUNDA 20 — ogloszenia na zielonej masce zamiast wyblaklej bieli
   ========================================================================= */

/* Ten sam zabieg co na podglowkach podstron i w sekcji hymnu: zdjecie
   w pelnym kryciu pod zielonym welonem, napisy schodza na biel. Welon
   najciemniejszy na srodku, pod naglowkiem i kartami. */
.sekcja--maska {
  background-image:
    radial-gradient(120% 135% at 50% 50%, rgba(36, 81, 58, .93) 0%, rgba(36, 81, 58, .86) 46%, rgba(47, 106, 74, .62) 80%, rgba(47, 106, 74, .46) 100%),
    var(--foto);
  background-size: cover, cover;
  background-position: center, center;
  color: #FFFFFF;
}
.sekcja--maska h2 { color: #FFFFFF; }
.sekcja--maska .nadtytul { color: var(--listek); }
/* Runda 10 ustawila `#ogloszenia { background: var(--krem) }` - skrot
   zeruje background-image, a ID wygrywa z klasa. Dlatego obraz musi wrocic
   TUTAJ, pozniejsza regula na samym #ogloszenia. */
#ogloszenia {
  background-color: var(--las-ciemny);
  background-image:
    radial-gradient(120% 135% at 50% 50%, rgba(36, 81, 58, .93) 0%, rgba(36, 81, 58, .86) 46%, rgba(47, 106, 74, .62) 80%, rgba(47, 106, 74, .46) 100%),
    var(--foto);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
#ogloszenia .glowa { background: none; }
#ogloszenia h2 em { color: var(--listek); }
/* Sekcja z maska dziedziczy biale pismo - karty ogloszen sa biale, wiec ich
   tytuly znikaly. Karta wraca do atramentu (poprawka 09.10.2026). */
.sekcja--maska .ogloszenie { color: var(--tusz); }

/* Dziecko z dlonmi mieszka teraz w sekcji HYMNU (prawy dolny rog).
   z-index wraca na auto: figurka maluje sie NAD tlem hymnu (jest jego
   dzieckiem), a sekcja opinii - pozniejsza w drzewie, z wlasnym kremowym
   tlem - przykrywa jej dolne 84 px, wiec kant zdjecia nigdy nie wychodzi.
   Jasnozielone kolo badge'a gra na ciemnej zieleni hymnu. */
.wycinanka--dlonie {
  z-index: auto;
  right: 14px;
  bottom: -84px;
  width: clamp(300px, 28vw, 460px);
}
/* O nas nie potrzebuje juz zapasu na figurke. */
@media (min-width: 1001px) {
  #o-nas { padding-bottom: clamp(56px, 8vw, 100px); }
}

/* Figurka przeniesiona do OPINII (ostatnia decyzja Any): sekcja dostaje
   zapas u dolu, zeby dziecko nie wchodzilo na karty, a pytania - kryjace
   tlo pod polprzezroczysta fotografia, inaczej dol figurki przebijalby
   przez welon .52 jak duch. */
@media (min-width: 1001px) {
  #opinie { padding-bottom: clamp(150px, 15vw, 230px); }
}
#pytania { background-color: var(--krem); }

/* =========================================================================
   RUNDA 21 — prawdziwe zdjecia od przedszkola: hero z tablica, galeria
   ========================================================================= */

/* Hero: zdjecie tablicy z nazwa przedszkola (od klientki). Napis na tablicy
   lezy w dolnej czesci kadru, wiec naglowek idzie do gory, a rozjasnienie
   siedzi tylko pod nim - tablica zostaje w pelnym kolorze. */
.hero--foto .hero__tlo {
  background-image: url('images/hero-tablica.webp');
  background-position: center 62%;
}
.hero--foto .hero__tresc { padding-top: clamp(30px, 4vw, 56px); padding-bottom: clamp(190px, 22vw, 330px); }
.hero--foto .hero__tlo::after {
  background:
    radial-gradient(1100px 300px at 50% 16%, rgba(255,255,255,.86), rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 86%, rgba(255,255,255,.5) 100%);
}
@media (max-width: 760px) {
  /* Na telefonie tablica musi wejsc cala, wiec zdjecie idzie na pelna
     szerokosc i siada na dole, a nad nim zostaje jasne tlo pod naglowek. */
  .hero--foto .hero__tlo {
    background-image: url('images/hero-tablica-sm.webp');
    background-size: 100% auto; background-repeat: no-repeat;
    background-position: center calc(100% - 34px);
    background-color: #E9ECEA;
  }
  .hero--foto .hero__tlo::after {
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
  }
  .hero--foto .hero__tresc { padding-top: 18px; padding-bottom: clamp(230px, 66vw, 330px); }
}

/* Galeria "Z zycia przedszkola": zdjecia od klientki sa pionowe, wiec
   kafelki dostaja wlasne proporcje 4:5 zamiast panoramy sal. */
.galeria__tytul {
  font-family: var(--naglowki); font-weight: 500; color: var(--las);
  font-size: clamp(24px, 2.6vw, 32px); margin: clamp(40px, 5vw, 60px) 0 20px;
}
.galeria--zycie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px) { .galeria--zycie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.zdjecie--pion img { aspect-ratio: 4 / 5; }
.zdjecie--pion figcaption { font-size: 14px; }
@media (max-width: 560px) { .zdjecie--pion figcaption { font-size: 13px; padding: 10px 12px 12px; } }

/* Sal jest teraz piec (zdjecie z tablica poszlo do hero), wiec jeden kafelek
   rozciaga sie na dwie kolumny i siatka nie zostawia dziury. */
@media (min-width: 900px) {
  .galeria--sale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .galeria--sale .zdjecie:last-child { grid-column: span 2; }
  .galeria--sale .zdjecie:last-child img { aspect-ratio: 932 / 206; }
}
@media (min-width: 560px) and (max-width: 899px) {
  .galeria--sale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria--sale .zdjecie:first-child { grid-column: span 2; }
  .galeria--sale .zdjecie:first-child img { aspect-ratio: 932 / 206; }
}

/* =========================================================================
   RUNDA 22 — mniejsze kafelki galerii, telefon
   ========================================================================= */

/* Z zycia: kwadraty zamiast 4:5, podpis na zdjeciu pod ciemnym przejsciem -
   kafelki sa nizsze i rowne, niezaleznie od dlugosci podpisu. */
.galeria--zycie { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.galeria--zycie .zdjecie:nth-child(1), .galeria--zycie .zdjecie:nth-child(6) { grid-column: span 2; }
.zdjecie--pion { position: relative; }
.zdjecie--pion img { aspect-ratio: 1 / 1; height: 100%; }
.galeria--zycie .zdjecie:nth-child(1) img, .galeria--zycie .zdjecie:nth-child(6) img { aspect-ratio: auto; }
.zdjecie--pion figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 14px 12px; color: #FFFFFF; font-size: 13.5px; line-height: 1.3;
  background: linear-gradient(180deg, rgba(20, 46, 33, 0) 0%, rgba(20, 46, 33, .78) 100%);
}
@media (max-width: 899px) {
  .galeria--zycie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .galeria--zycie .zdjecie:nth-child(1), .galeria--zycie .zdjecie:nth-child(6) { grid-column: auto; }
  .galeria--zycie .zdjecie:nth-child(1) img, .galeria--zycie .zdjecie:nth-child(6) img { aspect-ratio: 1 / 1; }
  .zdjecie--pion figcaption { font-size: 12.5px; padding: 28px 10px 9px; }
  .galeria--zycie .zdjecie { border-radius: 16px; }
}

/* Sale na telefonie: zamiast pieciu panoram jedna pod druga - pierwsza
   szeroka, reszta parami. */
@media (max-width: 559px) {
  .galeria--sale { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .galeria--sale .zdjecie:first-child { grid-column: span 2; }
  .galeria--sale .zdjecie:not(:first-child) img { aspect-ratio: 4 / 3; }
  .galeria--sale .zdjecie { border-radius: 16px; }
}
/* Desktop: stala wysokosc rzedu, inaczej szerokie kafelki rozpychaly rzad
   do naturalnej wysokosci zdjecia. */
@media (min-width: 900px) {
  .galeria--zycie { grid-auto-rows: clamp(200px, 19vw, 260px); }
  .galeria--zycie .zdjecie img { aspect-ratio: auto; height: 100%; }
}

/* ===== CMS (panel klientki, 09.10.2026) =================================== */
/* Zdjecie osoby w kadrze zamiast inicjalow - ten sam krazek, troche wiekszy. */
.osoba__inicjaly--foto { width: 56px; height: 56px; padding: 0; overflow: hidden; background: var(--listek-cichy); }
.osoba__inicjaly--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pasek komunikatu wlaczany z panelu (urlop, zamkniecie, pilna informacja). */
.cms-pasek { background: var(--las-ciemny); color: #FFFFFF; font-size: 15px; line-height: 1.5; padding: 10px 0; text-align: center; }
.cms-pasek .strona { padding-block: 0; }
.cms-pasek a { color: var(--listek); font-weight: 700; }
.cms-pasek p { margin: 0; }
/* Odpowiedz w pytaniach siedzi w opakowaniu, zeby panel mogl ja podmienic w calosci. */
.pytania__odp > p:first-child { margin-top: 0; }
.plik__link[hidden], [data-cms-pusty][hidden] { display: none !important; }

/* =========================================================================
   RUNDA 23 (16.10.2026) - telefon, lejek, karuzele, galeria w rzedach
   ========================================================================= */

/* --- Hero: jedno zdanie "po co" i glowna akcja nad zgieciem ------------- */
.hero--foto h1 { margin-bottom: 14px; }
.hero--foto .hero__lid {
  margin: 0 auto; max-width: 46ch; color: #263628; font-weight: 600;
  font-size: clamp(16.5px, 1.7vw, 19.5px); line-height: 1.55;
}
.hero--foto .hero__cta { margin-top: 22px; }
.hero__hymn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-weight: 700; font-size: 15px; color: var(--las-ciemny);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  padding: 6px 4px;
}
.hero__hymn svg { width: 18px; height: 18px; flex: none; }
.hero__hymn:hover { color: var(--roz); }
@media (min-width: 761px) {
  /* rozjasnienie siega teraz do przyciskow i linku do hymnu */
  .hero--foto .hero__tlo::after {
    background:
      radial-gradient(1150px 440px at 50% 22%, rgba(255,255,255,.9), rgba(255,255,255,.64) 50%, rgba(255,255,255,0) 84%),
      linear-gradient(180deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 86%, rgba(255,255,255,.5) 100%);
  }
}
@media (max-width: 760px) {
  .hero--foto h1 { font-size: clamp(40px, 11vw, 52px); }
  .hero--foto .hero__cta { flex-direction: column; gap: 10px; }
  .hero--foto .hero__cta .btn { width: 100%; }
  .hero--foto .hero__tresc { padding-bottom: clamp(220px, 62vw, 320px); }
}

/* --- Kafelki na telefonie: 2x2 zamiast czterech pasow jeden pod drugim --- */
@media (max-width: 699px) {
  .kafelki__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kafelek { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 10px 15px; }
  .kafelek__strzalka { display: none; }
  .kafelek__tekst strong { font-size: 17px; }
  .kafelek__tekst span { font-size: 12.5px; }
}

/* --- Naglowki sekcji zawsze na srodku (wczesniej czesc z lewej, czesc
       na srodku i na telefonie wygladalo to przypadkowo) --------------------- */
.glowa { margin-inline: auto; text-align: center; }
.galeria__tytul { text-align: center; }
.kadra-grupa__tytul { text-align: center; }
#pytania .glowa {
  margin: -22px auto 8px;
  background: radial-gradient(70% 120% at 50% 50%, rgba(255,255,255,.94), rgba(255,255,255,0) 78%);
}
@media (min-width: 760px) { #pytania .glowa { margin: -26px auto 8px; } }
@media (max-width: 899px) {
  .o-nas > div:first-child > .nadtytul,
  .o-nas h2, .o-nas__cta { text-align: center; }
  .o-nas h2 + p { text-align: center; }
}

/* --- Karuzele (js/uklad.js dokleja kropki i strzalki) ------------------- */
:root { --rynna: 20px; }
@media (max-width: 560px) { :root { --rynna: 14px; } }
.karuzela__licznik { min-width: 64px; text-align: center; font-weight: 700; font-size: 14px; color: var(--las); font-variant-numeric: tabular-nums; }
.sekcja--maska .karuzela__licznik { color: #FFFFFF; }
.karuzela__ster { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.karuzela__ster[hidden] { display: none; }
.karuzela__strzalka {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; border: 1.5px solid var(--wlos); background: #FFFFFF; color: var(--las);
  cursor: pointer; transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.karuzela__strzalka svg { width: 18px; height: 18px; }
.karuzela__strzalka:hover:not(:disabled) { background: var(--las); color: #FFFFFF; border-color: var(--las); }
.karuzela__strzalka:disabled { opacity: .35; cursor: default; }
.karuzela__kropki { display: flex; flex-wrap: wrap; justify-content: center; max-width: 62%; }
.karuzela__kropka {
  width: 22px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.karuzela__kropka::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: rgba(47, 106, 74, .26); transition: width .2s ease, background .2s ease;
}
.karuzela__kropka[aria-current="true"]::before { width: 20px; background: var(--las); }
.sekcja--maska .karuzela__strzalka { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: #FFFFFF; }
.sekcja--maska .karuzela__kropka::before { background: rgba(255, 255, 255, .38); }
.sekcja--maska .karuzela__kropka[aria-current="true"]::before { background: var(--listek); }
[data-karuzela]:focus-visible { outline-offset: 6px; }

@media (max-width: 699px) {
  [data-karuzela] {
    display: flex !important; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* karuzela wychodzi do krawedzi ekranu, a pierwsza karta stoi w linii tresci */
    margin-inline: calc(-1 * var(--rynna)); padding: 8px var(--rynna) 12px;
    scroll-padding-inline: var(--rynna);
  }
  [data-karuzela]::-webkit-scrollbar { display: none; }
  [data-karuzela] > * { flex: 0 0 84%; min-width: 0; scroll-snap-align: start; }
  [data-karuzela] > *:hover { transform: none; box-shadow: none; }
  .zajecia[data-karuzela] > * { flex-basis: 70%; }
  .kadra[data-karuzela] > * { flex-basis: 64%; }
  .opinie[data-karuzela] > * { flex-basis: 88%; }
  .ogloszenia[data-karuzela] { margin-top: 22px; }

  /* osoba w karuzeli: zdjecie albo inicjaly na gorze, wszystko na srodku */
  .kadra[data-karuzela] > .osoba { flex-direction: column; text-align: center; gap: 10px; padding: 20px 14px 18px; }
  .kadra[data-karuzela] .osoba__inicjaly { width: 60px; height: 60px; font-size: 20px; }
  .kadra-grupa { margin-bottom: 22px; }
  .kadra-grupa .karuzela__ster { margin-top: 8px; }
}
/* Opinie przewijaja sie tez na komputerze, kiedy jest ich wiecej niz trzy. */
@media (min-width: 700px) {
  [data-karuzela="zawsze"] {
    display: flex !important; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 6px 2px 12px; margin: -6px -2px 0;
  }
  [data-karuzela="zawsze"]::-webkit-scrollbar { display: none; }
  [data-karuzela="zawsze"] > * { flex: 0 0 calc((100% - 18px) / 2); min-width: 0; scroll-snap-align: start; }
}
@media (min-width: 1000px) {
  [data-karuzela="zawsze"] > * { flex-basis: calc((100% - 36px) / 3); }
}

/* --- Galerie w rownych rzedach ----------------------------------------- */
/* js/uklad.js liczy wymiary kazdego kafelka: rzedy maja rowna wysokosc
   i zawsze wypelniaja cala szerokosc, ile by zdjec nie bylo. Do czasu
   przeliczenia (albo bez JS) zostaje dotychczasowa siatka. */
.galeria.galeria--rzedy { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 899px) { .galeria.galeria--rzedy { gap: 8px; } }
.galeria--rzedy > .zdjecie { flex: none; grid-column: auto !important; margin: 0; position: relative; cursor: zoom-in; }
.galeria--rzedy > .zdjecie img {
  width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover;
  transition: transform .5s ease;
}
.galeria--rzedy > .zdjecie:hover img { transform: scale(1.035); }
@media (max-width: 899px) { .galeria--rzedy > .zdjecie { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .galeria--rzedy > .zdjecie img { transition: none; } }

/* --- Podglad zdjecia ------------------------------------------------------ */
.lupa {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 56px 16px 24px;
  background: rgba(14, 30, 21, .94);
}
.lupa[hidden] { display: none; }
.lupa__kadr { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; }
.lupa__kadr img { max-width: min(1200px, 92vw); max-height: calc(100vh - 150px); width: auto; height: auto; border-radius: 14px; }
.lupa__kadr figcaption { display: flex; gap: 16px; align-items: baseline; color: rgba(255, 255, 255, .9); font-size: 15px; text-align: center; }
.lupa__licznik { color: rgba(255, 255, 255, .55); font-size: 13px; font-variant-numeric: tabular-nums; }
.lupa__zamknij, .lupa__strzalka {
  position: absolute; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: #FFFFFF;
}
.lupa__zamknij:hover, .lupa__strzalka:hover { background: rgba(255, 255, 255, .26); }
.lupa__zamknij svg, .lupa__strzalka svg { width: 22px; height: 22px; }
.lupa__zamknij { top: 14px; right: 14px; }
.lupa__strzalka { top: 50%; transform: translateY(-50%); }
.lupa__strzalka--l { left: 14px; }
.lupa__strzalka--p { right: 14px; }
@media (max-width: 699px) {
  .lupa__strzalka { top: auto; bottom: 18px; transform: none; }
  .lupa__strzalka--l { left: calc(50% - 58px); }
  .lupa__strzalka--p { right: calc(50% - 58px); }
  .lupa { padding-bottom: 84px; }
}

/* --- Pytania w dwoch kolumnach ------------------------------------------ */
@media (min-width: 900px) {
  .pytania { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 18px; }
}

/* --- Kontakt: przyciski pod danymi --------------------------------------- */
.kontakt__lewa { display: grid; align-content: start; }
.kontakt__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.btn--jasny { background: rgba(255, 255, 255, .1); color: #FFFFFF; border-color: rgba(255, 255, 255, .55); }
.btn--jasny:hover { background: #FFFFFF; color: var(--las-ciemny); }
@media (max-width: 699px) {
  .kontakt__cta .btn { flex: 1 1 0; padding-inline: 14px; }
  .kanaly span:first-child { flex: none; }
}

/* --- Rakieta nie wchodzi juz na karty zajec ------------------------------ */
@media (min-width: 901px) {
  .wycinanka--rog { width: clamp(160px, 17vw, 250px); }
  .sekcja--rakieta { padding-bottom: clamp(110px, 11vw, 150px); }
}

/* --- Oferta na telefonie ------------------------------------------------- */
@media (max-width: 699px) {
  .udogodnienia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .udogodnienia li {
    flex-direction: column; text-align: center; justify-content: center; gap: 8px;
    border-radius: 18px; padding: 14px 10px; font-size: 14px; line-height: 1.3;
  }
  /* tabelka: nazwa nad wartoscia, oba do lewej (wczesniej czesc wartosci
     szla do prawej, czesc lamala sie pod spod i rzad wygladal krzywo) */
  .tabelka__rzad { display: block; padding: 13px 18px; }
  .tabelka__rzad > span { display: block; }
  .tabelka__rzad > span:last-child { text-align: left; margin-top: 2px; }
  .oferta-siatka[data-karuzela] > * { flex-basis: 82%; }
}

/* --- Stopka: na telefonie na srodku, podpis Taro Media ------------------- */
@media (max-width: 699px) {
  .dol .dol__uklad { flex-direction: column; align-items: center; text-align: center; }
  .dol .dol__nav { justify-content: center; }
  .dol .dol__drobne { flex-direction: column; align-items: center; gap: 4px; text-align: center; }
}
.tworcy-wiersz { margin: 18px 0 0; padding: 14px 0 0; text-align: center; max-width: none; width: 100%; border-top: 1px solid rgba(255, 255, 255, .1); }
.tworcy { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .62); font-size: 13.5px; text-decoration: none; }
.tworcy img { width: 24px; height: auto; display: block; opacity: .85; transition: opacity .2s; }
.tworcy b { font-weight: 700; color: rgba(255, 255, 255, .88); }
.tworcy:hover { color: #FFFFFF; }
.tworcy:hover img { opacity: 1; }

/* --- Karty bez dziur: niepelny ostatni rzad staje na srodku --------------- */
/* Klientka dopisuje karty w panelu, wiec ich liczba nie zawsze dzieli sie
   przez liczbe kolumn. Zamiast pustych pol po prawej - wysrodkowany rzad. */
@media (min-width: 700px) {
  .zajecia, .kadra, .oferta-siatka { display: flex; flex-wrap: wrap; justify-content: center; }
  .zajecia > *, .oferta-siatka > * { flex: 0 1 calc((100% - 16px) / 2); min-width: 0; }
  .kadra > * { flex: 0 1 calc((100% - 12px) / 2); min-width: 0; }
}
@media (min-width: 1000px) {
  .zajecia > * { flex-basis: calc((100% - 32px) / 3); }
  #zajecia .zajecia > * { flex-basis: calc((100% - 64px) / 5); }
  .oferta-siatka > * { flex-basis: calc((100% - 36px) / 3); }
  .kadra > * { flex-basis: calc((100% - 36px) / 4); }
}

/* Nieparzysta liczba udogodnien: ostatnie na cala szerokosc, bez dziury obok. */
@media (max-width: 699px) { .udogodnienia li:last-child:nth-child(odd) { grid-column: span 2; } }

/* =========================================================================
   RUNDA 23b (16.10.2026) - karty w karuzeli na srodku, miekkie hero
   ========================================================================= */

/* Na telefonie biezaca karta stoi zawsze na srodku ekranu, a strzalka
   przesuwa na srodek nastepna. Kontener ma szerokosc ekranu, wiec boczny
   zapas = (ekran - karta) / 2 pozwala wysrodkowac tez pierwsza i ostatnia. */
@media (max-width: 699px) {
  [data-karuzela] {
    --k: 82vw;
    padding-inline: calc((100vw - var(--k)) / 2);
    scroll-padding-inline: 0;
  }
  [data-karuzela] > *,
  .zajecia[data-karuzela] > *,
  .kadra[data-karuzela] > *,
  .opinie[data-karuzela] > *,
  .oferta-siatka[data-karuzela] > * { flex: 0 0 var(--k); scroll-snap-align: center; }
  .zajecia[data-karuzela] { --k: 74vw; }
  .kadra[data-karuzela] { --k: 68vw; }
  .opinie[data-karuzela] { --k: 86vw; }
  .oferta-siatka[data-karuzela] { --k: 80vw; }
  /* srodek karty w osi ekranu: tresc kart tez na srodku */
  [data-karuzela] .zajecie, [data-karuzela] .oferta-karta { text-align: center; }
  [data-karuzela] .zajecie__ikona, [data-karuzela] .oferta-karta__ikona { margin-inline: auto; }
}

/* Hero na telefonie: zdjecie tablicy nie urywa sie juz prosta krawedzia.
   Gora i dol rozplywaja sie maska, a nad zdjeciem lezy miekki "mesh"
   z zieleni logo, wiec napis i zdjecie sa jednym tlem. Obraz idzie przez
   background-image: inherit, zeby zdjecie podmienione w panelu (inline
   style na .hero__tlo) tez dostalo to samo przejscie. */
@media (max-width: 760px) {
  .hero--foto {
    background:
      radial-gradient(110% 48% at 8% 6%, rgba(168, 216, 88, .34), rgba(168, 216, 88, 0) 62%),
      radial-gradient(80% 42% at 100% 26%, rgba(47, 106, 74, .14), rgba(47, 106, 74, 0) 66%),
      radial-gradient(120% 46% at 50% 62%, rgba(207, 232, 180, .7), rgba(207, 232, 180, 0) 72%),
      #F3F8EE;
  }
  .hero--foto .hero__tlo { background-size: 0 0 !important; background-color: transparent; }
  .hero--foto .hero__tlo::after { background: none; }
  .hero--foto .hero__tlo::before {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: 14px; height: calc(100vw * 789 / 1200);
    background-image: inherit; background-repeat: no-repeat;
    background-size: cover; background-position: center bottom;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 16%, #000 36%, #000 91%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .5) 16%, #000 36%, #000 91%, transparent 100%);
  }
}

/* Strona 404 */
.strona-404 { padding-block: clamp(70px, 12vw, 140px); }
.strona-404 h1 { font-size: clamp(34px, 5vw, 52px); }
.strona-404__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 26px 0 0; }

/* =========================================================================
   RUNDA 24 (16.10.2026) - menu w panelu, cienie w karuzelach, pytania,
   data dnia otwartego w osobnej linii
   ========================================================================= */

/* --- Menu: cztery duze pozycje, kotwice jako pigulki, akcje na dole ------ */
.menu { width: min(370px, 90vw); padding: 16px 18px 22px; }
.menu__gora { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.menu__gora img { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--krem); flex: none; }
.menu__marka { font-family: var(--naglowki); font-size: 19px; line-height: 1.15; color: #FFFFFF; }
.menu__marka small { display: block; font-family: var(--tekst); font-size: 12px; color: rgba(255, 255, 255, .66); margin-top: 2px; }
.menu .menu__zamknij { position: static; margin-left: auto; flex: none; }

.menu__glowne { display: grid; gap: 8px; margin-bottom: 22px; }
.menu .menu__glowne a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .07); color: #FFFFFF;
  font-family: var(--naglowki); font-size: 18px; font-weight: 500;
  transition: background .18s ease, transform .18s ease;
}
.menu .menu__glowne a:hover { background: rgba(255, 255, 255, .14); }
.menu__ik {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--listek);
}
.menu__ik svg { width: 20px; height: 20px; }
.menu .menu__glowne a.teraz { background: var(--listek); color: var(--las-ciemny); }
.menu .menu__glowne a.teraz .menu__ik { background: rgba(36, 81, 58, .14); color: var(--las-ciemny); }

.menu .menu__grupa { margin: 0 0 10px; }
.menu__chipy { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.menu .menu__chipy a {
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px;
  font-family: var(--tekst); font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .92);
}
.menu .menu__chipy a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); }

.menu__dol { margin-top: auto; display: grid; gap: 10px; padding-top: 6px; }
.menu .menu__dol a.menu__cta { margin-top: 0; width: 100%; }
.menu a.menu__cta--jasny { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, .5); }
.menu a.menu__cta--jasny:hover { background: #FFFFFF; color: var(--las-ciemny); }

/* pozycje wjezdzaja po kolei przy otwarciu */
.menu__glowne a, .menu__chipy, .menu__dol { opacity: 0; transform: translateX(16px); transition: opacity .3s ease, transform .3s ease, background .18s ease; }
.menu[data-otwarte] .menu__glowne a, .menu[data-otwarte] .menu__chipy, .menu[data-otwarte] .menu__dol { opacity: 1; transform: none; }
.menu[data-otwarte] .menu__glowne a:nth-child(1) { transition-delay: .06s; }
.menu[data-otwarte] .menu__glowne a:nth-child(2) { transition-delay: .1s; }
.menu[data-otwarte] .menu__glowne a:nth-child(3) { transition-delay: .14s; }
.menu[data-otwarte] .menu__glowne a:nth-child(4) { transition-delay: .18s; }
.menu[data-otwarte] .menu__chipy { transition-delay: .22s; }
.menu[data-otwarte] .menu__dol { transition-delay: .26s; }
@media (prefers-reduced-motion: reduce) {
  .menu__glowne a, .menu__chipy, .menu__dol { opacity: 1; transform: none; transition: none; }
}

/* --- Karuzele: cien kart nie ucina sie juz prosta krawedzia ------------ */
/* overflow-x: auto przycina tez w pionie, wiec dolny zapas musi zmiescic
   caly cien; ujemny margines oddaje to miejsce sekcji. */
@media (max-width: 699px) {
  [data-karuzela] { padding-top: 16px; padding-bottom: 40px; margin-top: -8px; margin-bottom: -28px; }
  [data-karuzela] > * { box-shadow: 0 10px 22px rgba(31, 42, 33, .08); }
  .sekcja--szklo [data-karuzela] > * { box-shadow: 0 10px 24px rgba(31, 42, 33, .07); }
  .karuzela__ster { position: relative; z-index: 1; }
}

/* --- Dzien otwarty: data w osobnej, wiekszej linii ----------------------- */
.wydarzenie__kiedy strong {
  display: block; margin-top: 4px;
  font-size: 1.35em; letter-spacing: .04em; font-weight: 700;
}

/* --- Pytania: miekkie rozwijanie (js/uklad.js animuje wysokosc) --------- */
.pytania details { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pytania details[open] { border-color: var(--brzoskwinia); box-shadow: 0 12px 30px rgba(47, 106, 74, .1); }
.pytania summary { transition: color .2s ease; }
.pytania summary:hover { color: var(--las); }
.pytania summary::after { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.pytania__odp { overflow: hidden; }
.pytania details.zamyka summary::after { transform: rotate(45deg) translateY(-3px); }
.pytania details.zamyka { border-color: var(--wlos); box-shadow: none; }

/* =========================================================================
   RUNDA 25 (16.10.2026) - os wydarzen, dokumenty w karuzeli
   ========================================================================= */

/* Os: ikonka na srodku wysokosci kafelka, a linia biegnie od srodka
   pierwszej do srodka ostatniej ikonki (kazdy wiersz rysuje swoj odcinek
   i domyka przerwe miedzy wierszami). */
.os::before { display: none; }
.os li { align-items: center; }
.os__znaczek { margin-top: 0; }
.os li::before {
  content: ""; position: absolute; left: 27px; top: 0; bottom: -16px;
  width: 3px; background: var(--brzoskwinia);
}
.os li:first-child::before { top: 50%; }
.os li:last-child::before { bottom: 50%; }
@media (max-width: 560px) {
  .os li::before { left: 22px; bottom: -14px; }
  .os li:last-child::before { bottom: 50%; }
}

/* Dokumenty: wszystko na srodku kafelka. */
.plik { align-items: center; text-align: center; }
.plik__ikona { margin-inline: auto; }
.plik__link, .plik__stan { align-self: center; }

/* Karuzela "zawsze" (opinie, dokumenty): kiedy karty mieszcza sie bez
   przewijania, stoja na srodku; auto-marginesy znikaja same, gdy jest
   ich wiecej i trzeba przewijac. */
@media (min-width: 700px) {
  [data-karuzela="zawsze"] > :first-child { margin-left: auto; }
  [data-karuzela="zawsze"] > :last-child { margin-right: auto; }
  .pliki[data-karuzela] { max-width: 980px; margin-inline: auto; }
}

/* Hamburger: stara regula (runda 1) dorysowywala ::before/::after jako dwie
   kreski nad i pod ikonka SVG - przycisk wygladal na 5 linii. Kreski precz,
   przycisk ma ten sam rozmiar i ksztalt co kolko telefonu obok. */
.menu-przycisk::before, .menu-przycisk::after { content: none; display: none; }
.gora .menu-przycisk { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); }
.gora .menu-przycisk:hover { background: rgba(255, 255, 255, .26); }
.gora .menu-przycisk svg { width: 20px; height: 20px; }

/* =========================================================================
   RUNDA 27 (16.10.2026) - baner cookies, mapa za zgoda, polityka prywatnosci
   ========================================================================= */

/* --- Baner cookies: plywajaca karta u dolu, nie zaslania calego ekranu --- */
.zgoda {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 150;
  display: flex; justify-content: center; pointer-events: none;
}
.zgoda[hidden] { display: none; }
.zgoda__box {
  pointer-events: auto; width: min(720px, 100%);
  background: #FFFFFF; color: var(--tusz);
  border: 1px solid var(--wlos); border-radius: 24px;
  padding: 20px 22px 18px;
  box-shadow: 0 24px 60px rgba(31, 42, 33, .22);
  animation: zgodaWjazd .4s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes zgodaWjazd { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zgoda__box { animation: none; } }
.zgoda__tytul { margin: 0 0 6px; font-family: var(--naglowki); font-size: 20px; color: var(--las-ciemny); }
.zgoda__tekst { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--cichy); }
.zgoda__tekst a { color: var(--las); font-weight: 700; }
.zgoda__opcje { display: grid; gap: 10px; margin: 0 0 16px; }
.zgoda__opcja { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--cichy); cursor: pointer; }
.zgoda__opcja input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--las); flex: none; }
.zgoda__opcja b { display: block; color: var(--tusz); }
.zgoda__akcje { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.zgoda__akcje .btn { padding: 11px 20px; font-size: 15px; }
.zgoda__link {
  background: none; border: 0; padding: 8px 6px; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 700; color: var(--las);
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .zgoda { left: 10px; right: 10px; bottom: 10px; }
  .zgoda__box { padding: 18px 16px 16px; border-radius: 20px; }
  .zgoda__akcje .btn { flex: 1 1 100%; }
  .zgoda__link { margin-inline: auto; }
}

/* --- Mapa za zgoda: zaslepka w kolorach sekcji kontaktu ----------------- */
.mapa-zgoda {
  min-height: 260px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 28px 22px; text-align: center; color: #FFFFFF;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(168, 216, 88, .18), rgba(168, 216, 88, 0) 70%),
    rgba(255, 255, 255, .05);
}
.mapa-zgoda > svg { width: 42px; height: 42px; color: var(--listek); }
.mapa-zgoda p { margin: 0; color: rgba(255, 255, 255, .86); }
.mapa-zgoda p b { display: block; font-family: var(--naglowki); font-weight: 500; font-size: 21px; color: #FFFFFF; }
.mapa-zgoda .mapa-zgoda__drobne { max-width: 34ch; font-size: 13px; color: rgba(255, 255, 255, .66); }
.mapa-zgoda__drobne a { color: var(--listek); }
.mapa-zgoda--wczytana { padding: 0; display: block; background: none; }
.mapa-zgoda--wczytana .mapa { min-height: 320px; }

/* --- Stopka: linki prawne ------------------------------------------------ */
.dol__prawne { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, .55); max-width: none; width: 100%; }
.dol__prawne a { color: rgba(255, 255, 255, .8); text-underline-offset: 3px; }
.dol__prawne a:hover { color: var(--listek); }
.dol__prawne + .tworcy-wiersz { margin-top: 10px; }

/* --- Polityka prywatnosci ------------------------------------------------ */
.polityka-sekcja { padding-top: clamp(70px, 9vw, 110px); }
.polityka {
  max-width: 780px; margin: 0 auto;
  background: #FFFFFF; border: 1px solid var(--wlos); border-radius: 28px;
  padding: clamp(26px, 4.5vw, 52px) clamp(20px, 5vw, 60px);
  box-shadow: 0 16px 38px rgba(47, 106, 74, .08);
}
.polityka h1 { font-size: clamp(30px, 4.4vw, 44px); margin-bottom: 14px; }
.polityka h1 em { font-style: normal; color: var(--roz); }
.polityka__lid { font-size: 17px; color: var(--cichy); }
.polityka h2 { font-size: clamp(21px, 2.4vw, 25px); margin: 34px 0 10px; color: var(--las-ciemny); scroll-margin-top: 110px; }
.polityka h3 { font-size: 18px; margin: 18px 0 6px; }
.polityka p, .polityka li { font-size: 15.5px; line-height: 1.7; }
.polityka ul { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.polityka a { color: var(--las); font-weight: 600; }
.polityka__wroc { margin-top: 34px; text-align: center; }
.polityka__wroc a { font-weight: 700; }
/* atrybut hidden musi wygrac z display: grid/inline-flex przyciskow i opcji */
.zgoda [hidden] { display: none !important; }

/* Bez podpisu wykonawcy (16.10): linki prawne sa ostatnim wierszem stopki. */
.dol__prawne { padding-bottom: 4px; }