/* Meriggiare — Szkoła Języka Włoskiego
   Arkusz stylów strony. Kolory, fonty i odstępy ustawia blok TOKENY na początku.
   Instrukcja przeniesienia do WordPressa: README.md */

/* ==========================================================================
   TOKENY — paleta wyłącznie z logo: dwa róże i szarości
   ========================================================================== */
:root{
  --rozowy:       #da1c5c;   /* filiżanka i banner z logo — kolor akcji */
  --rozowy-ciemny:#a5124a;
  --roz-pudrowy:  #e888a8;   /* chmurki z logo — akcent miękki */
  --rozowy-jasny: #fbe6ed;   /* tła plakietek */
  --szary-logo:   #d0d0d0;   /* napis MERIGGIARE */
  --plama:        #f0f0f0;   /* plama w tle logo */

  --tlo:      #f8f7f6;
  --karta:    #ffffff;
  --ciemny:   #3a3a3a;   /* ciemna ramka w stopce */
  --atrament: #34382e;   /* kolor nagłówków i tekstu z poprzedniej strony */
  --tekst:    #55565a;
  --szary:    #86888c;
  --linia:    #e6e4e3;

  --font: "Plus Jakarta Sans", -apple-system, system-ui, "Segoe UI", Arial, sans-serif;

  --fs-h1: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.9vw, 2.5rem);
  --fs-h3: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);

  --kontener: 1160px;
  --margines: clamp(20px, 4vw, 40px);
  --sekcja-y: clamp(34px, 4vw, 62px);

  --r-karta: 18px;
  --r-duzy:  24px;
  --r-btn:   10px;
}

/* ==========================================================================
   BAZA
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;
  overflow-x:clip}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.65;
  color:var(--tekst);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 .85em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--rozowy);outline-offset:3px}

h1,h2,h3,h4{margin:0 0 .42em;color:var(--atrament);letter-spacing:-.03em;line-height:1.15;font-weight:800}
h1{font-size:var(--fs-h1);text-wrap:balance}
h2{font-size:var(--fs-h2);text-wrap:balance}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.02em;line-height:1.35}
h4{font-size:.9375rem;font-weight:700;letter-spacing:-.01em}

/* ==========================================================================
   KLOCKI
   ========================================================================== */
.kontener{width:100%;max-width:var(--kontener);margin-inline:auto;padding-inline:var(--margines)}
.sekcja{padding-block:var(--sekcja-y);position:relative;background:var(--plama)}
.sekcja--jasna{background:var(--karta)}
.sekcja--ciemna{background:var(--ciemny);color:rgba(255,255,255,.72)}
.sekcja--ciemna h2,.sekcja--ciemna h3,.sekcja--ciemna h4{color:#fff}
.sekcja--roz{background:#f1a6bb url(../img/bg-box-light.jpg) center center;
  color:#4a3038}
.sekcja--roz .naglowek-sekcji p{color:#5c3b46}
.sekcja--roz .zasada p{color:#4a3038}

.naglowek-sekcji{max-width:650px;margin:0 auto clamp(20px,2.4vw,30px);text-align:center}
.naglowek-sekcji p{color:var(--szary);font-size:.9375rem}
.sekcja--ciemna .naglowek-sekcji p{color:rgba(255,255,255,.65)}

.siatka{display:grid;gap:15px}
@media (min-width:700px){.kol-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.kol-3{grid-template-columns:repeat(3,1fr)}.kol-4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:700px) and (max-width:939px){.kol-3,.kol-4{grid-template-columns:repeat(2,1fr)}}

.karta{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r-karta);padding:21px}
.sekcja--jasna .karta{background:var(--tlo)}
.sekcja--ciemna .karta{background:#22282b;border-color:rgba(255,255,255,.1)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 24px;border:1px solid transparent;border-radius:var(--r-btn);
  font-family:var(--font);font-size:.875rem;font-weight:700;line-height:1.2;cursor:pointer;
  letter-spacing:-.01em;white-space:nowrap;
  transition:background-color .18s,color .18s,border-color .18s,transform .18s}
.btn:hover{transform:translateY(-1px)}
.btn-rozowy{background:var(--rozowy);border-color:var(--rozowy);color:#fff}
.btn-rozowy:hover{background:var(--rozowy-ciemny);border-color:var(--rozowy-ciemny)}
.btn-ciemny{background:var(--atrament);border-color:var(--atrament);color:#fff}
.btn-ciemny:hover{background:#000}
.btn-obrys{background:transparent;border-color:var(--linia);color:var(--atrament)}
.btn-obrys:hover{border-color:var(--atrament)}
.btn-bialy{background:#fff;border-color:#fff;color:var(--atrament)}
.btn-maly{padding:12px 22px;font-size:.9375rem}
.grupa-btn{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grupa-btn--srodek{justify-content:center}

/* link ze strzałką — skrót do pozostałych usług */
.skrot{font-size:.875rem;font-weight:700;color:var(--rozowy);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.skrot:hover{color:var(--rozowy-ciemny);text-decoration-thickness:2px}

/* --------------------------------------------------------------------------
   PLACEHOLDERY ZDJĘĆ — podmiana: <div class="foto"> na
   <img class="media" src="plik.jpg" alt="opis">
   -------------------------------------------------------------------------- */
.foto,.media{width:100%;border-radius:var(--r-duzy)}
.media{height:100%;object-fit:cover}
.foto{display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  background:var(--plama);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.6) 0 11px,transparent 11px 22px);
  border:1px dashed #c4c4c4;color:#8d8d8d;font-size:.75rem;font-weight:600;line-height:1.5}
.foto--4x3{aspect-ratio:4/3}
.foto--3x2{aspect-ratio:3/2}
.foto--1x1{aspect-ratio:1/1}
.foto--4x5{aspect-ratio:4/5}

/* ==========================================================================
   HEADER
   ========================================================================== */
/* Belka „pływająca”: na górze strony jest przezroczysta i wysoka,
   po przewinięciu kurczy się, bieleje i kładzie cień. Logo maleje i wystaje
   spod belki — stąd ujemny margines dolny. */
.naglowek{position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.naglowek.przyklejony{background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom-color:rgba(230,228,227,.85);box-shadow:0 2px 16px rgba(25,30,33,.06)}
.naglowek .kontener{display:flex;align-items:center;gap:22px;min-height:86px;
  transition:min-height .25s ease}
.naglowek.przyklejony .kontener{min-height:70px}
.logo{display:block;flex-shrink:0;transition:margin-bottom .25s ease}
/* max-width:none jest konieczne: reset ma img{max-width:100%}, a przy ciasnej
   belce kolumna z logo potrafi się przez to zapaść do zerowej szerokości */
.logo svg,.logo img{height:88px;width:auto;max-width:none;flex:0 0 auto;
  display:block;transition:height .25s ease}
.naglowek.przyklejony .logo svg,.naglowek.przyklejony .logo img{height:78px}
.naglowek.przyklejony .logo{margin-bottom:-24px}
.stopka .logo svg,.stopka .logo img{height:120px}

.menu{margin-left:auto}
.menu ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;align-items:center}
.menu a{font-size:1rem;font-weight:600;color:var(--atrament);white-space:nowrap}
.menu a:hover{color:var(--rozowy)}
.menu a.wyrozniony{color:var(--rozowy)}
.akcje{display:flex;align-items:center;gap:12px;flex-shrink:0}

.przelacznik{display:none;margin-left:auto;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--atrament)}
.przelacznik span{display:block;width:22px;height:2px;margin:6px auto;background:currentColor;transition:.25s}
.przelacznik[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.przelacznik[aria-expanded="true"] span:nth-child(2){opacity:0}
.przelacznik[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
/* --- ikonki widoczne na stałe w wersji mobilnej -------------------------- */
.akcje-mobil{display:none;align-items:center;gap:4px}
.ikona-m{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  color:var(--atrament);transition:background-color .18s,color .18s}
.ikona-m svg{height:21px;width:auto;max-width:26px}
.ikona-m-ig{color:var(--rozowy)}
.ikona-m:hover,.ikona-m:active{background:var(--rozowy-jasny);color:var(--rozowy)}

/* --- menu wysuwane od lewej (tak jak na poprzedniej wersji strony) -------- */
.zaslona{position:fixed;inset:0;z-index:110;background:rgba(52,56,46,.45);
  opacity:0;transition:opacity .3s ease}
.zaslona.widoczna{opacity:1}

@media (max-width:1040px){
  .przelacznik{display:block;margin-left:6px;position:relative;z-index:130}
  .akcje{display:none}
  .akcje-mobil{display:flex;margin-left:auto}

  .naglowek{z-index:140}

  /* logo, ikonki i „hamburger" muszą zostać nad wysuniętym panelem */
  .naglowek .logo,.akcje-mobil{position:relative;z-index:130}
  /* UWAGA: żadnego backdrop-filter na .naglowek w tej szerokości —
     tworzy on blok zawierający dla position:fixed i psuje wysuwane menu,
     które jest jego potomkiem. Zamiast rozmycia zwykłe, kryjące tło. */
  .naglowek.przyklejony{backdrop-filter:none;background:#fff}
  body.menu-otwarte .naglowek{background:#fff;
    border-bottom-color:rgba(230,228,227,.85)}
  body.menu-otwarte .naglowek .logo{opacity:0;pointer-events:none}
  body.menu-otwarte{overflow:hidden}

  .menu{position:fixed;top:0;left:0;bottom:0;margin:0;
    width:min(78vw,340px);max-width:100%;
    background:#fff;z-index:120;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:calc(84px + env(safe-area-inset-top,0px)) 0 30px;
    box-shadow:6px 0 34px rgba(25,30,33,.18);
    transform:translateX(-100%);transition:transform .3s ease;
    display:block;visibility:hidden}
  .menu.otwarte{transform:none;visibility:visible}
  .menu:before{content:"Menu";display:block;text-align:center;
    padding:14px 24px 18px;color:var(--szary);font-size:1.0625rem;letter-spacing:-.01em}
  .menu ul{flex-direction:column;gap:0;align-items:stretch}
  .menu li{border-bottom:1px solid var(--linia)}
  .menu li:first-child{border-top:1px solid var(--linia)}
  .menu a{display:block;padding:15px 26px;font-size:1rem;white-space:normal}
  .menu a:hover,.menu a:active{background:var(--rozowy-jasny);color:var(--rozowy)}

  /* przy otwartym menu strzałka „na górę" tylko przeszkadza */
  body.menu-otwarte .do-gory{opacity:0;visibility:hidden}
}
@media (max-width:1040px) and (prefers-reduced-motion:reduce){
  .menu{transition:none}
  .zaslona{transition:none}
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-block:clamp(22px,2.6vw,40px) clamp(28px,3.2vw,48px);
  position:relative;z-index:1}
.hero-siatka{display:grid;gap:36px;align-items:center}
@media (min-width:940px){.hero-siatka{grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,68px)}}
.hero p.wstep{font-size:1.05rem;color:var(--tekst);max-width:46ch;margin-bottom:20px}
.hero-dol{display:flex;flex-direction:column;gap:13px;align-items:flex-start}

/* ==========================================================================
   PASEK FAKTÓW
   ========================================================================== */
.fakty{display:grid;gap:2px;background:var(--linia);border-radius:var(--r-karta);overflow:hidden}
@media (min-width:760px){.fakty{grid-template-columns:repeat(4,1fr)}}
.fakt{background:var(--karta);padding:17px 16px;text-align:center}
.fakt .co{font-size:.9375rem;font-weight:700;color:var(--atrament);margin-bottom:3px}
.fakt .pod{font-size:.75rem;color:var(--szary)}

/* ==========================================================================
   USŁUGA GŁÓWNA
   ========================================================================== */
.glowna{display:grid;gap:30px}
@media (min-width:940px){.glowna{grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}}
.lista-ptaszki{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.lista-ptaszki li{display:flex;align-items:flex-start;gap:11px;font-size:.9375rem}
.lista-ptaszki i{width:20px;height:20px;border-radius:50%;background:var(--roz-pudrowy);flex-shrink:0;
  display:grid;place-items:center;margin-top:2px}
.lista-ptaszki svg{width:11px;height:11px;color:#fff}

/* dwie usługi główne obok siebie — karty równej wysokości */
.rowne{align-items:stretch}
.karta.glowna{display:flex;flex-direction:column}
.karta.glowna h3{font-size:1.15rem;margin-bottom:10px}
.karta.glowna .lista-ptaszki{margin:14px 0 18px}
.karta.glowna .lista-ptaszki li{font-size:.875rem}

/* --- jeden wzór dla wszystkich cen na stronie ---
   wiersz: co dostajesz | cena jednostkowa | razem (wyrównane do prawej) */
.etykieta-pakiety{font-size:.75rem;font-weight:700;color:var(--szary);
  letter-spacing:.02em;margin:0 0 6px}
.karta.glowna .etykieta-pakiety{margin-top:auto}
.pakiety{display:grid;gap:0;border-top:1px solid var(--linia)}
.pakiet{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--linia)}
.pakiet .ile{font-size:.875rem;font-weight:600;color:var(--atrament)}
.pakiet .za{grid-column:1;font-size:.75rem;color:var(--szary)}
.pakiet .cena{grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:1.125rem;font-weight:800;color:var(--atrament);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pakiet.polecany{box-shadow:inset 3px 0 0 var(--rozowy);padding-left:12px}
.pakiet.polecany .cena{color:var(--rozowy)}

.karta.glowna .przed-cta{margin:14px 0 10px;font-size:.8125rem;color:var(--szary);line-height:1.5}
.karta.glowna .btn{margin-top:0;align-self:flex-start}

/* pasek ceny dla pojedynczej usługi (pary, kursy grupowe) */
.para-karta{margin-top:15px;display:flex;flex-wrap:wrap;gap:14px 28px;
  align-items:center;justify-content:space-between}
.para-karta h3{margin-bottom:6px}
.para-karta p{font-size:.875rem;margin:0}
.para-karta .cena,.usluga .cena{font-size:1.125rem;font-weight:800;color:var(--atrament);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.para-karta .cena small,.usluga .cena small{display:block;font-size:.75rem;font-weight:500;
  color:var(--szary);letter-spacing:0;margin-top:3px;white-space:normal}
.uwaga-terminy{margin-top:14px;text-align:center;font-size:.75rem;color:var(--szary)}

/* wolne terminy — pigułki z dniem i godziną */
.terminy{margin-top:16px;padding:16px 18px;background:var(--rozowy-jasny);border-radius:var(--r-karta)}
.terminy h4{font-size:.8125rem;margin:0 0 10px;color:var(--atrament)}
.terminy-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.terminy-lista li{background:var(--karta);border:1px solid rgba(218,28,92,.25);border-radius:999px;
  padding:7px 14px;font-size:.8125rem;font-weight:600;color:var(--atrament)}
.terminy-uwaga{margin:10px 0 0;font-size:.75rem;color:var(--szary);line-height:1.5}
.terminy--grupowe{background:var(--karta);border:1px solid var(--linia)}

/* kursy grupowe — oferta poboczna, pod indywidualnymi i w parach */
.grupowe-blok{margin-top:26px;padding-top:22px;border-top:1px solid var(--linia)}
.grupowe-naglowek{margin-bottom:16px}
.grupowe-naglowek h3{font-size:1.25rem;margin-bottom:6px}
.grupowe-naglowek p{font-size:.875rem;color:var(--szary);margin:0}
.grupowe-blok .usluga{background:var(--tlo)}
/* ==========================================================================
   PORÓWNANIE EGZAMINÓW
   ========================================================================== */
.egzamin h3{font-size:1.3rem;margin-bottom:4px}
.egzamin .dla-kogo{font-weight:700;color:var(--atrament)}
.egzamin p{font-size:.875rem}

/* ==========================================================================
   POZOSTAŁE USŁUGI
   ========================================================================== */
.usluga{display:flex;flex-direction:column;height:100%}
.usluga .cena{margin-top:auto;padding-top:12px;border-top:1px solid var(--linia)}
.usluga .dane{list-style:none;margin:12px 0 16px;padding:0;
  display:flex;flex-wrap:wrap;gap:7px}
.usluga .dane li{background:var(--tlo);border:1px solid var(--linia);border-radius:999px;
  padding:6px 12px;font-size:.75rem;font-weight:600;color:var(--atrament)}
.usluga .dane li:last-child{flex-basis:100%;background:transparent;border:0;border-radius:0;
  padding:6px 0 0;font-size:.8125rem;font-weight:400;color:var(--tekst);line-height:1.55}
.usluga .dane b{font-weight:600}
.usluga .cena{font-size:1.25rem;font-weight:800;color:var(--atrament);letter-spacing:-.03em;margin-top:auto}
.usluga .cena small{display:block;font-size:.75rem;font-weight:500;color:var(--szary);letter-spacing:0;margin-top:3px}

/* ==========================================================================
   JAK PRACUJĘ
   ========================================================================== */
.zasada{border-top:2px solid var(--roz-pudrowy);padding-top:13px}
.zasada p{font-size:.875rem;margin:8px 0 0}

/* ==========================================================================
   ŚCIEŻKA 1-2-3
   ========================================================================== */
.krok{position:relative}
.krok .nr{display:grid;place-items:center;width:86px;height:62px;border-radius:0;
  background:url(../img/bubble.svg) no-repeat center center;background-size:contain;
  font-size:1.6rem;font-weight:800;color:var(--rozowy);
  margin:-8px 0 10px -12px;padding-bottom:6px}
.krok p{font-size:.875rem}
.krok .koszt{display:inline-block;margin-top:12px;font-size:.8125rem;font-weight:700;color:var(--atrament)}

/* ==========================================================================
   O MNIE
   ========================================================================== */
.o-mnie{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.o-mnie{grid-template-columns:.8fr 1.2fr;gap:52px}}

/* dyplomy i certyfikaty — czytelna lista zamiast drobnego druku */
.dyplomy{list-style:none;margin:22px 0 0;padding:0;
  border:1px solid var(--linia);border-radius:var(--r-karta);background:var(--karta);overflow:hidden}
.dyplomy li{position:relative;margin:0;padding:13px 18px 13px 46px;
  font-size:.875rem;line-height:1.5;color:var(--atrament)}
.dyplomy li+li{border-top:1px solid var(--linia)}
.dyplomy li::before{content:"";position:absolute;left:18px;top:15px;width:15px;height:15px;
  border-radius:3px 3px 6px 3px;background:var(--roz-pudrowy);
  box-shadow:inset -3px -3px 0 rgba(255,255,255,.55)}
.dyplomy li::after{content:"";position:absolute;left:23px;top:22px;width:5px;height:9px;
  border-radius:0 0 2px 2px;background:var(--rozowy)}
@media (max-width:520px){
  .dyplomy li{padding:12px 14px 12px 40px}
  .dyplomy li::before{left:14px}
  .dyplomy li::after{left:19px}
}
/* ==========================================================================
   OPINIE
   ========================================================================== */
.opinia{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r-karta);padding:21px;
  break-inside:avoid;margin-bottom:15px}
.opinia p{font-size:.875rem;margin-bottom:16px}
.opinia .kto{font-size:.8125rem;font-weight:700;color:var(--atrament)}
.opinie-kolumny{columns:1;column-gap:20px}
@media (min-width:760px){.opinie-kolumny{columns:2}}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:760px;margin-inline:auto;background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-karta);padding:6px 26px}
.faq-poz{border-bottom:1px solid var(--linia)}
.faq-poz:last-child{border-bottom:0}
.faq-poz summary{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 0;cursor:pointer;list-style:none;font-size:.9375rem;font-weight:700;color:var(--atrament)}
.faq-poz summary::-webkit-details-marker{display:none}
.faq-poz summary:hover{color:var(--rozowy)}
.faq-ikona{position:relative;flex:0 0 auto;width:16px;height:16px}
.faq-ikona::before,.faq-ikona::after{content:"";position:absolute;inset:50% auto auto 50%;
  background:var(--rozowy);transform:translate(-50%,-50%)}
.faq-ikona::before{width:14px;height:2px}
.faq-ikona::after{width:2px;height:14px;transition:opacity .2s}
.faq-poz[open] .faq-ikona::after{opacity:0}
.faq-odp{padding:0 34px 16px 0;font-size:.9375rem}
.faq-odp ul{margin:0 0 1em;padding-left:20px;display:grid;gap:8px}
.faq-odp li{padding-left:2px}
.faq-odp li::marker{color:var(--roz-pudrowy)}
.faq-odp b{color:var(--atrament)}
.faq-odp em{color:var(--atrament);font-style:italic}

/* ==========================================================================
   FORMULARZ
   ========================================================================== */
.formularz{max-width:720px;margin-inline:auto;background:var(--karta);border:1px solid var(--linia);
  border-radius:var(--r-duzy);padding:clamp(20px,2.6vw,30px)}
.pole{margin-bottom:12px}
.pole label{display:block;font-size:.8125rem;font-weight:700;color:var(--atrament);margin-bottom:7px}
.pole input,.pole select,.pole textarea{width:100%;padding:13px 15px;font:inherit;font-size:.875rem;
  border:1px solid var(--linia);border-radius:var(--r-btn);background:var(--tlo);color:var(--atrament)}
.pole textarea{min-height:110px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{outline:none;border-color:var(--rozowy);background:#fff}
.pola-2{display:grid;gap:14px}
@media (min-width:620px){.pola-2{grid-template-columns:1fr 1fr}}
.radia{display:flex;flex-wrap:wrap;gap:10px}
.radia label{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--linia);
  border-radius:999px;font-size:.8125rem;font-weight:600;cursor:pointer;margin:0;background:var(--tlo)}
.radia input{width:auto;padding:0}

/* ===== oferta w minimalnej formie: nazwa, podtytuł, cena „od" ===== */
.oferta-min{border-top:1px solid var(--linia)}
.poz{display:grid;gap:6px 32px;padding:22px 0;border-bottom:1px solid var(--linia);align-items:start}
@media (min-width:760px){.poz{grid-template-columns:1fr auto}}
.poz-tekst{max-width:62ch}
.poz h3{font-size:1.0625rem;margin:0 0 6px;letter-spacing:-.02em}
.poz p{font-size:.9375rem;color:var(--tekst);margin:0}
.poz-cena{text-align:left;white-space:nowrap}
@media (min-width:760px){.poz-cena{text-align:right;padding-top:2px}}
.poz-cena b{display:block;font-size:1.125rem;font-weight:800;color:var(--atrament);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.poz-cena span{font-size:.75rem;color:var(--szary)}
/* zdanie i przycisk jako jedna para: zdanie prowadzi, przycisk odpowiada */
.oferta-stopka{margin-top:clamp(22px,2.6vw,30px);display:flex;flex-wrap:wrap;
  gap:14px 30px;align-items:center;justify-content:space-between}
.oferta-stopka .przed-cta{margin:0;max-width:44ch;
  font-size:1.0625rem;font-weight:600;color:var(--atrament);line-height:1.45;letter-spacing:-.01em}
@media (max-width:620px){
  .oferta-stopka{gap:16px}
  .oferta-stopka .przed-cta{font-size:1rem}
  .oferta-stopka .btn{width:100%}
}

/* sześć grup docelowych — tylko nagłówek i krótki opis */
.grupy-docelowe{display:grid;gap:14px}
@media (min-width:640px){.grupy-docelowe{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grupy-docelowe{grid-template-columns:repeat(3,1fr)}}
.grupa-docelowa h3{font-size:1rem;margin-bottom:8px;line-height:1.35}
.grupa-docelowa p{font-size:.875rem;color:var(--tekst);margin:0}

/* ===== rozwijane szczegóły pod każdą pozycją oferty ===== */
.poz-szczegoly{margin-top:10px}
/* przełącznik: słowo + strzałka, żeby było widać, że to sterowanie, a nie tekst */
.poz-szczegoly>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  padding:4px 0;font-size:.8125rem;font-weight:700;color:var(--rozowy)}
.poz-szczegoly>summary::-webkit-details-marker{display:none}
.poz-szczegoly>summary::before{content:"rozwiń"}
.poz-szczegoly>summary::after{content:"";width:6px;height:6px;margin-top:-3px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s}
.poz-szczegoly[open]>summary::before{content:"zwiń"}
.poz-szczegoly[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.poz-szczegoly>summary:hover{color:var(--rozowy-ciemny)}

/* szczegóły zajmują całą szerokość wiersza — więcej miejsca na opis */
.poz>.poz-szczegoly{grid-column:1 / -1;margin-top:2px}
.poz-opis .poz-zdanie{margin:0 0 12px!important}
.poz-dluzszy{font-size:.9rem;margin:0 0 14px;line-height:1.55}
.poz-punkty-naglowek{margin:2px 0 8px;font-size:.8125rem;font-weight:600;color:var(--atrament)}
.poz-punkty{list-style:none;margin:0;padding:0;display:grid;gap:8px}
@media (min-width:1000px){.poz-punkty{grid-template-columns:1fr 1fr;gap:8px 28px}}
.poz-punkty li{position:relative;padding-left:18px;font-size:.9rem;color:var(--tekst);line-height:1.5}
.poz-punkty li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--roz-pudrowy)}
/* panel: białe pole odcięte od podtytułu i od następnej pozycji */
.poz-panel{margin-top:12px;padding:20px 22px 22px;background:var(--karta);
  border:1px solid var(--linia);border-radius:14px;display:grid;gap:18px 36px}
@media (min-width:860px){.poz-panel{grid-template-columns:minmax(0,1.7fr) minmax(230px,1fr)}}
.poz-zdanie{margin:0 0 16px!important;font-size:.9375rem;font-weight:500;
  color:var(--atrament);line-height:1.5}

/* fakty: mała szara etykieta, wyraźna wartość */
.poz-fakty{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;
  margin:0;padding:16px 0 0;border-top:1px solid var(--linia)}
@media (max-width:560px){.poz-fakty{grid-template-columns:1fr;gap:12px}}
@media (min-width:860px){.poz-fakty{grid-template-columns:1fr;gap:14px;align-content:start;
  border-top:0;padding:2px 0 0 26px;border-left:1px solid var(--linia)}}
.poz-fakty dt{font-size:.75rem;font-weight:400;color:var(--szary);margin:0 0 3px}
.poz-fakty dd{margin:0;font-size:.9375rem;font-weight:600;color:var(--atrament);line-height:1.4}
@media (prefers-reduced-motion:reduce){.poz-szczegoly>summary::after{transition:none}}
/* ==========================================================================
   WIDGET REZERWACJI — makieta kalendarza rozmowy wstępnej
   ========================================================================== */
.kalendarz{max-width:820px;margin-inline:auto;background:var(--karta);
  border:1px solid var(--linia);border-radius:var(--r-duzy);padding:clamp(18px,2.4vw,28px)}
.kal-siatka{display:grid;gap:24px}
@media (min-width:720px){.kal-siatka{grid-template-columns:1.15fr .85fr;gap:30px}}

.kal-pasek{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.kal-pasek strong{font-size:.9375rem;color:var(--atrament);text-transform:none}
.kal-strzalka{width:32px;height:32px;border-radius:50%;border:1px solid var(--linia);
  background:var(--karta);color:var(--atrament);font-size:1rem;line-height:1;cursor:pointer}
.kal-strzalka:hover{border-color:var(--atrament)}
.kal-naglowki,.kal-dni{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kal-naglowki{margin-bottom:6px}
.kal-naglowki span{text-align:center;font-size:.6875rem;font-weight:700;color:var(--szary)}
.kal-dni button{aspect-ratio:1/1;border:0;border-radius:9px;background:transparent;cursor:default;
  font-family:var(--font);font-size:.8125rem;font-weight:600;color:var(--szary);
  font-variant-numeric:tabular-nums}
.kal-dni button.wolny{background:var(--rozowy-jasny);color:var(--atrament);cursor:pointer}
.kal-dni button.wolny:hover{background:var(--roz-pudrowy)}
.kal-dni button.wybrany{background:var(--rozowy);color:#fff}
.kal-dni button.pusty{visibility:hidden}
.kal-legenda{display:flex;align-items:center;gap:7px;margin:12px 0 0;font-size:.6875rem;color:var(--szary)}
.kal-legenda i{width:11px;height:11px;border-radius:3px;background:var(--rozowy-jasny);flex-shrink:0}

.kal-godziny{display:flex;flex-direction:column}
@media (min-width:720px){.kal-godziny{border-left:1px solid var(--linia);padding-left:30px}}
.kal-godziny h4{font-size:.8125rem;margin:0 0 4px}
.kal-wybrany-dzien{font-size:.8125rem;color:var(--szary);margin:0 0 14px}
.kal-lista{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.kal-lista button{border:1px solid rgba(218,28,92,.3);background:var(--karta);border-radius:999px;
  padding:9px 16px;font-family:var(--font);font-size:.8125rem;font-weight:600;
  color:var(--atrament);cursor:pointer;font-variant-numeric:tabular-nums}
.kal-lista button:hover{border-color:var(--rozowy)}
.kal-lista button.wybrana{background:var(--rozowy);border-color:var(--rozowy);color:#fff}
.kal-lista .brak{font-size:.8125rem;color:var(--szary)}
.kal-btn{margin-top:auto;align-self:flex-start;opacity:.45;pointer-events:none}
.kal-btn.gotowy{opacity:1;pointer-events:auto}
.kal-info{margin:12px 0 0;font-size:.75rem;color:var(--szary);line-height:1.5}
/* ==========================================================================
   STOPKA
   ========================================================================== */
.stopka{background:var(--ciemny);color:rgba(255,255,255,.6);font-size:.875rem}
.stopka-glowna{display:grid;gap:26px;padding-block:clamp(30px,3.4vw,48px)}
@media (min-width:860px){.stopka-glowna{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}}
.stopka .logo{margin-bottom:16px}
.stopka-opis{max-width:34ch;line-height:1.7}
.stopka-kol h4{color:#fff;margin-bottom:16px}
.stopka-kol ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stopka a:hover{color:#fff}
.stopka-dol{border-top:1px solid rgba(255,255,255,.12);padding-block:20px;font-size:.75rem;
  display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;justify-content:space-between}
.stopka-dol p{margin:0}
.spolecznosci{display:flex;gap:9px}
.spolecznosci a{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  display:grid;place-items:center}
.spolecznosci a:hover{background:rgba(255,255,255,.12);color:#fff}
.spolecznosci svg{width:15px;height:15px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms !important}}


/* ==========================================================================
   SZYBKI KONTAKT W NAGŁÓWKU
   Telefon i e-mail rozwijają się w lewo po kliknięciu ikony.
   Numer telefonu jest najpierw zasłonięty plakietką „pokaż numer”.
   ========================================================================== */
.kontakt-szybki{display:flex;align-items:center;gap:4px}
.ks{display:flex;align-items:center}

.ks-ikona{
  flex:0 0 auto;width:38px;height:38px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--atrament);cursor:pointer;
  display:grid;place-items:center;transition:background-color .18s,color .18s}
.ks-ikona:hover{background:var(--rozowy-jasny);color:var(--rozowy)}
.ks-ikona svg{height:23px;width:auto;max-width:29px}
.ks[data-otwarty="tak"] .ks-ikona{background:var(--rozowy-jasny);color:var(--rozowy)}

.ks-panel{
  max-width:0;overflow:hidden;visibility:hidden;white-space:nowrap;
  transition:max-width .28s ease}
.ks[data-otwarty="tak"] .ks-panel{max-width:300px;visibility:visible}

.ks-tresc{display:inline-flex;align-items:center;gap:8px;padding:0 10px 0 9px}
.ks-czesc,.ks-tel .ks-pelny{
  font-size:1rem;font-weight:800;color:var(--rozowy);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.ks-tel .ks-pelny:hover{color:var(--rozowy-ciemny)}
.ks-mail .ks-pelny{font-size:.9375rem;font-weight:700;color:var(--atrament)}
.ks-mail .ks-pelny:hover{color:var(--rozowy)}

.ks-odslon{
  font-family:var(--font);font-size:.75rem;font-weight:600;color:var(--tekst);
  background:var(--plama);border:1px solid var(--linia);border-radius:6px;
  padding:4px 10px;cursor:pointer;letter-spacing:0;line-height:1.2}
.ks-odslon:hover{border-color:var(--atrament);color:var(--atrament)}

/* stan zasłonięty / odsłonięty */
.ks .ks-pelny{display:none}
.ks[data-pelny="tak"] .ks-pelny{display:inline}
.ks[data-pelny="tak"] .ks-czesc,
.ks[data-pelny="tak"] .ks-odslon{display:none}

.ikona-ig{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;color:var(--rozowy);
  display:grid;place-items:center;transition:background-color .18s}
.ikona-ig:hover{background:var(--rozowy-jasny)}
.ikona-ig svg{width:24px;height:24px}

/* wszystkie elementy paska równej wysokości: ikony i przycisk po 38 px */
.akcje>.btn{height:38px;padding-block:0}

/* pozycje widoczne tylko w menu mobilnym */

/* --- układ nagłówka: logo po lewej, po prawej dwa rzędy --- */
@media (min-width:1041px){
  /* stan górny: dwa rzędy po prawej, logo na całą wysokość belki */
  .naglowek .kontener{
    display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
    align-items:center;column-gap:24px;row-gap:2px;padding-block:8px;min-height:0}
  .logo{grid-column:1;grid-row:1 / span 2;align-self:center;display:flex;align-items:center}
  .logo svg,.logo img{height:150px}
  .akcje{grid-column:3;grid-row:1;justify-self:end}
  /* w stanie górnym menu zajmuje całą szerokość po prawej od logo */
  .menu{grid-column:2 / span 2;grid-row:2;justify-self:end;margin-left:0}

  /* stan po przewinięciu: wszystko w jednym rzędzie, logo mniejsze i wystaje pod belkę */
  /* Po przewinięciu belka niższa, logo mniejsze i wystaje pod spód.
     Układ nadal dwurzędowy — w jeden rząd zwija się dopiero od 1240 px,
     bo logo + menu + przyciski potrzebują razem około 1140 px. */
  .naglowek.przyklejony .kontener{padding-block:6px;row-gap:0}
  .naglowek.przyklejony .logo{margin-bottom:-26px}
  .naglowek.przyklejony .logo svg,.naglowek.przyklejony .logo img{height:112px}
  .naglowek.przyklejony .menu ul{gap:20px}
}

@media (min-width:1240px){
  /* dość miejsca, żeby po przewinięciu zmieścić wszystko w jednej linii */
  .naglowek.przyklejony .kontener{grid-template-rows:auto;padding-block:10px;column-gap:16px}
  .naglowek.przyklejony .logo{grid-row:1;margin-bottom:-40px}
  .naglowek.przyklejony .logo svg,.naglowek.przyklejony .logo img{height:98px}
  .naglowek.przyklejony .menu{grid-column:2;grid-row:1;justify-self:end}
  .naglowek.przyklejony .menu ul{gap:16px}
  .naglowek.przyklejony .menu a{font-size:.9375rem}
  .naglowek.przyklejony .akcje{grid-column:3;grid-row:1;gap:4px}
  .naglowek.przyklejony .ks-ikona{width:36px;height:36px}
  .naglowek.przyklejony .ks-ikona svg{height:20px;max-width:25px}
  .naglowek.przyklejony .ikona-ig{width:36px;height:36px}
  .naglowek.przyklejony .ikona-ig svg{width:21px;height:21px}
  .naglowek.przyklejony .btn-maly{padding:10px 17px;font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){.ks-panel{transition:none}}


/* ==========================================================================
   OPINIE Z GOOGLE
   Sekcja startuje z opiniami wpisanymi ręcznie. Jeśli funkcja /api/opinie
   odpowie, skrypt podmienia je na najnowsze opinie z wizytówki Google.
   Gdy nie odpowie — zostaje to, co jest w kodzie. Strona nigdy nie jest pusta.
   ========================================================================== */
.opinia-gwiazdki{display:block;margin-bottom:10px;font-size:.9375rem;line-height:1;
  color:var(--rozowy);letter-spacing:.08em}
.opinia-stopka{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.opinia-kiedy{font-size:.75rem;color:var(--szary)}
.opinia-link{font-size:.75rem;color:var(--szary);text-decoration:underline;
  text-underline-offset:3px}
.opinia-link:hover{color:var(--rozowy)}
.opinie-zrodlo{margin:20px 0 0;text-align:center;font-size:.8125rem;color:var(--szary)}
.opinie-zrodlo a{color:var(--rozowy);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.opinie-zrodlo a:hover{color:var(--rozowy-ciemny)}
.opinie-zrodlo b{color:var(--atrament)}


/* ==========================================================================
   STOPKA — ciemna ramka „Masz pytanie”, pasek praw autorskich, strzałka w górę
   Wzorowana na poprzedniej wersji strony. Kropkowana faktura, chmurki i fala
   są rysowane w CSS/SVG, więc nie wymagają żadnych plików graficznych.
   ========================================================================== */
.stopka{background:#f0f0f0 url(../img/bg-footer.png) no-repeat center bottom;
  color:var(--tekst);font-size:.875rem;
  padding-top:clamp(40px,6vw,86px);position:relative;overflow:hidden}

/* --- ciemna ramka --- */
.pytanie{position:relative;z-index:2;
  background:#3a3a3a url(../img/bg-box-dark.jpg) no-repeat center center;
  border-radius:4px;
  box-shadow:0 11px 39px 0 rgba(0,0,0,.35);
  display:grid;gap:26px;
  padding:clamp(24px,3vw,40px) clamp(22px,4vw,70px);
  color:hsla(0,0%,100%,.82)}
@media (min-width:860px){
  .pytanie{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:30px;align-items:stretch;min-height:300px}
}
.pytanie h2{color:#fff;font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);
  letter-spacing:-.03em;margin:0}
.pytanie-podtytul{color:#fff;font-weight:700;
  font-size:clamp(1.05rem,.9rem + .6vw,1.5rem);letter-spacing:-.02em;margin:6px 0 0}
.pytanie-firma{margin:clamp(20px,3.2vw,44px) 0 0;font-size:.9375rem;color:#fff}

.pytanie-kontakt{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;gap:18px}
@media (min-width:860px){
  .pytanie-kontakt{align-items:flex-end;text-align:right;
    justify-content:flex-end;gap:clamp(14px,2.2vw,26px)}
}
.pytanie-logo{display:block;flex-shrink:0}
.pytanie-logo img{width:auto;height:clamp(120px,13vw,178px);max-width:none;display:block}
@media (min-width:860px){
  /* Logo wyjęte z układu i wyśrodkowane w pionie na całej ramce — inaczej
     ciągnęłyby je w dół telefon i e-mail, które są pod nim w tej samej kolumnie.
     .pytanie-kontakt musi tu być static, żeby „52%" liczyło się od ramki,
     a nie od prawej kolumny. */
  .pytanie-kontakt{position:static}
  .pytanie-logo{position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);margin:0}
}

.pytanie-dane{display:grid;gap:clamp(14px,2.2vw,26px)}
.pytanie-tel{display:flex;align-items:center;gap:12px;margin:0;
  font-size:clamp(1.4rem,1rem + 1.4vw,2.05rem);color:#fff;font-weight:400;
  font-variant-numeric:tabular-nums}
.pytanie-tel svg{height:1em;width:auto;flex:0 0 auto;color:#fff}
.tel-etykieta{font-size:.72em}
.tel-blok{display:inline-flex;align-items:center;gap:.4em}
.tel-blok .tel-pelny{display:none;color:#fff}
.tel-blok[data-tel="tak"] .tel-pelny{display:inline}
.tel-blok[data-tel="tak"] .tel-czesc,
.tel-blok[data-tel="tak"] .tel-odslon{display:none}
.tel-odslon{font-family:var(--font);font-size:.5em;font-weight:400;
  color:hsla(0,0%,100%,.9);background:hsla(0,0%,100%,.2);
  border:0;border-radius:3px;padding:.25em .5em;cursor:pointer;
  position:relative;top:-.15em;letter-spacing:0}
.tel-odslon:hover{background:hsla(0,0%,100%,.32)}
.pytanie-mail{margin:0;font-size:clamp(.95rem,.85rem + .3vw,1.2rem)}
.pytanie-mail a{color:#fff}
.pytanie-mail a:hover{color:#ea598a}

.chmurka{position:absolute;pointer-events:none;display:none;
  background:url(../img/cloud.png) no-repeat center center;background-size:contain;
  aspect-ratio:121/70}
@media (min-width:860px){
  .chmurka{display:block}
  .chmurka-1{width:8.5%;min-width:92px;top:30%;right:34%}
  .chmurka-2{width:9.5%;min-width:102px;top:27%;right:9%}
}

/* --- wersja mobilna ciemnej ramki -----------------------------------------
   Bez logo, z jedną dużą chmurką po prawej, pełnym numerem telefonu i
   e-mailem wyrównanym pod napisem „tel.:" — tak jak na poprzedniej wersji
   strony. Numer nie jest tu zasłaniany: na telefonie chodzi o to, żeby
   dotknąć i zadzwonić, a nie żeby chronić numer przed robotami. */
@media (max-width:859px){
  .pytanie{padding:clamp(26px,7vw,40px) clamp(22px,6vw,34px);gap:0}
  .pytanie-logo{display:none}

  /* Chmurka wchodzi tu w zwykły układ (position:static) jako osobny wiersz
     siatki między tekstem a kontaktem. Ustawiona bezwzględnie musiałaby
     zgadywać wysokość ramki i wchodziła na nazwę szkoły. */
  .chmurka{display:none}
  .chmurka-2{display:block;position:static;grid-row:2;justify-self:end;
    width:27%;min-width:140px;max-width:210px;
    margin:clamp(12px,3.5vw,22px) 3% clamp(16px,4.5vw,30px) 0}
  .pytanie-tresc{grid-row:1}
  .pytanie-kontakt{grid-row:3;margin-top:0}
  .pytanie-dane{gap:8px}
  .pytanie-tel{font-size:clamp(1.15rem,.9rem + 1.4vw,1.5rem);gap:10px}
  .pytanie-mail{font-size:clamp(.9rem,.78rem + .5vw,1.2rem);
    padding-left:calc(1em + 10px)}

  /* pełny numer od razu — bez chipa „pokaż numer" */
  .tel-blok .tel-pelny{display:inline}
  .tel-blok .tel-czesc,.tel-blok .tel-odslon{display:none}
}


/* --- pasek praw autorskich --- */
.stopka-dol{margin-top:clamp(28px,4vw,52px);position:relative;z-index:5}
.stopka-dol .kontener{border-top:1px solid var(--linia);
  padding-block:clamp(18px,2.4vw,30px);
  display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:center;justify-content:space-between}
.stopka-prawa{margin:0;font-size:.875rem;color:#6d6d6d}
.stopka-linki{display:flex;flex-wrap:wrap;align-items:center}
.stopka-linki a{position:relative;font-size:.875rem;color:#6d6d6d;
  margin-right:18px;text-decoration:none}
.stopka-linki a:after{content:"";position:absolute;right:-9px;top:3px;
  width:1px;height:13px;background:#ddd}
.stopka-linki a:last-child{margin-right:0}
.stopka-linki a:last-child:after{display:none}
.stopka-linki a:hover{color:var(--rozowy)}

/* --- strzałka „na górę” --- */
.do-gory{position:fixed;right:clamp(14px,3vw,50px);bottom:clamp(14px,3vw,38px);
  z-index:999;width:60px;height:60px;padding:0;border:0;border-radius:50%;
  background:var(--rozowy-jasny);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,background-color .2s ease,visibility .25s}
.do-gory.widoczna{opacity:1;visibility:visible;transform:none}
.do-gory:hover{background:var(--roz-pudrowy)}
.do-gory:before{content:"";position:absolute;inset:0;margin:auto;
  width:15px;height:15px;margin-top:22px;
  border:4px solid var(--rozowy);border-bottom:0;border-right:0;
  transform:rotate(45deg);border-radius:2px}
.do-gory:hover:before{border-color:#fff}
@media (max-width:520px){.do-gory{width:48px;height:48px}
  .do-gory:before{width:12px;height:12px;margin-top:18px;border-width:3px}}
@media (prefers-reduced-motion:reduce){.do-gory{transition:none}}


/* ==========================================================================
   GRAFIKI Z POPRZEDNIEJ WERSJI STRONY
   Pliki: img/bg-top.jpg, separator-1/2/3.png, bg-box-light.jpg, bg-box-dark.jpg,
   bg-footer.png, cloud.png, bubble.svg, appointment.png — własność Katarzyny Brol.
   Fale działają tylko wtedy, gdy sekcja nad nimi i pod nimi ma kolor #fff / #f0f0f0.
   ========================================================================== */

/* różowo-szara grafika u samej góry strony */
.tlo-gora{position:absolute;top:0;left:0;width:100%;aspect-ratio:1920/660;
  max-height:520px;
  background:url(../img/bg-top.jpg) no-repeat center top;background-size:100% 100%;
  z-index:0;pointer-events:none}

/* fale rozdzielające sekcje */
.separator{width:100%;background-repeat:no-repeat;background-size:100% 100%;
  position:relative;z-index:1}
.separator-1{aspect-ratio:1920/211;background-image:url(../img/separator-1.png)}
.separator-2{aspect-ratio:1920/238;background-image:url(../img/separator-2.png)}
.separator-3{aspect-ratio:1920/218;background-image:url(../img/separator-3.png)}

/* pasek z Koloseum i krzywą wieżą nad kalendarzem */
.pasek-wlochy{max-width:820px;margin:0 auto;height:clamp(110px,15vw,190px);
  border-radius:var(--r-duzy) var(--r-duzy) 0 0;
  background:url(../img/appointment.png) no-repeat center bottom;background-size:cover}
.pasek-wlochy + .kalendarz{border-radius:0 0 var(--r-duzy) var(--r-duzy);margin-top:0}

@media (max-width:700px){
  /* na wąskim ekranie fala byłaby paskiem kilku pikseli — zamiast tego
     przycinamy ją po bokach, żeby rysunek pozostał czytelny */
  .separator{aspect-ratio:auto;height:68px;background-size:auto 100%;
    background-position:center center}
}


/* --- okienko wyboru poczty / kopiowania numeru --------------------------- */
.kontakt-wybor{position:fixed;z-index:400;min-width:236px;max-width:290px;
  background:#fff;border:1px solid var(--linia);border-radius:14px;
  box-shadow:0 14px 40px rgba(25,30,33,.16);padding:10px;font-size:.875rem}
.kw-tytul{margin:0 0 8px;padding:2px 10px 8px;border-bottom:1px solid var(--linia);
  color:var(--szary);font-size:.75rem;overflow-wrap:anywhere}
.kw-opcje{display:grid;gap:2px}
.kontakt-wybor a,.kontakt-wybor button{display:block;width:100%;padding:9px 10px;
  border:0;border-radius:9px;background:none;font:inherit;font-weight:600;
  color:var(--atrament);text-align:left;text-decoration:none;cursor:pointer}
.kontakt-wybor a:hover,.kontakt-wybor button:hover{background:var(--rozowy-jasny);color:var(--rozowy)}
.kw-ok{color:var(--rozowy)}
.kontakt-wybor.kw-dol{left:12px;right:12px;bottom:12px;top:auto;
  min-width:0;max-width:none;border-radius:16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
.kontakt-wybor.kw-dol a,.kontakt-wybor.kw-dol button{padding:13px 12px;font-size:.9375rem}

.kw-tytul-duzy{font-size:1.25rem;font-weight:800;color:var(--atrament);
  letter-spacing:-.01em;user-select:all;-webkit-user-select:all}
.kw-uwaga{margin:8px 0 0;padding:8px 10px 2px;border-top:1px solid var(--linia);
  color:var(--szary);font-size:.75rem;line-height:1.5}

/* --- większe logo wystaje pod belkę, tak jak na poprzedniej wersji strony --- */
@media (min-width:1041px){
  .naglowek .logo{margin-bottom:0}
}

/* --- zdjęcia w miejscach po ramkach zastępczych --------------------------- */
.media--4x3{aspect-ratio:4/3;height:auto;object-fit:cover}
.media--4x5{aspect-ratio:4/5;height:auto;object-fit:cover}
.media--1x1{aspect-ratio:1/1;height:auto;object-fit:cover}

/* ==========================================================================
   Rezerwacja — harmonogram terminów Google (zastępuje makietę kalendarza)
   ========================================================================== */
.rezerwacja{max-width:820px;margin-inline:auto;background:var(--karta);
  border:1px solid var(--linia);border-radius:var(--r-duzy);padding:clamp(18px,2.4vw,28px)}
.pasek-wlochy + .rezerwacja{border-radius:0 0 var(--r-duzy) var(--r-duzy);margin-top:0}
.rez-start{text-align:center;padding:clamp(8px,2vw,20px) 0}
.rez-start h3{margin:0 0 8px}
.rez-start p{margin:0 auto 18px;max-width:52ch}
.rez-info{margin:14px auto 0!important;font-size:.8125rem;color:var(--szary);line-height:1.5;max-width:60ch;text-align:center}
.rez-info a,.rez-zapas a{color:var(--rozowy);font-weight:700;text-decoration:underline}
.rez-ramka iframe{display:block;width:100%;height:720px;border:0;border-radius:calc(var(--r-duzy) - 6px);background:#fff}
@media (max-width:600px){.rez-ramka iframe{height:920px}}
.rez-zapas{margin:16px 0 0;text-align:center;font-size:.875rem}
.rez-start button:focus-visible{outline:3px solid var(--atrament);outline-offset:3px}
.rezerwacja [hidden]{display:none!important}