/* =========================================================================
   Przedszkole — system wizualny szablonu
   Wszystkie kolory mają policzony kontrast (patrz _przedszkole/paleta.py).
   Progi: tekst 4.5:1, duży tekst 3:1, elementy nietekstowe 3:1.
   ========================================================================= */

:root{
  /* — kolory marki — */
  --pd-granat:#10395E;          /* 11,87:1 na bieli — nagłówki, stopka */
  --pd-granat-ciemny:#0B2742;   /* 15,18:1 */
  --pd-granat-jasny:#1D5A8F;    /*  7,21:1 — odnośniki */

  /* — rodziny kolorów przedszkolnych —
     każda ma trzy warianty:
       -m  mocny  : plamy i elementy dekoracyjne
       -t  tekst  : napisy na bieli, min. 4,5:1
       -b  tło    : jasny odcień pod ciemny tekst, min. 15:1        */
  --pd-slonce-m:#F5A524;  --pd-slonce-t:#8A5200;  --pd-slonce-b:#FFF4DC;
  --pd-malina-m:#E0457B;  --pd-malina-t:#B01050;  --pd-malina-b:#FFECF3;
  --pd-trawa-m:#4CAF50;   --pd-trawa-t:#1F6B33;   --pd-trawa-b:#E8F7E9;
  --pd-laguna-m:#00A5B5;  --pd-laguna-t:#00707C;  --pd-laguna-b:#E0F7F9;
  --pd-borowka-m:#7C5BD6; --pd-borowka-t:#5A34C0; --pd-borowka-b:#F0EAFF;
  --pd-mandarynka-m:#FF7043; --pd-mandarynka-t:#C43D14; --pd-mandarynka-b:#FFEDE7;

  --pd-koral:#B4342B;           /*  6,06:1 — błędy, pola wymagane */

  /* — treść — */
  --pd-tekst:#1A1C1E;           /* 17,09:1 */
  --pd-tekst-2:#4A4F54;         /*  8,28:1 */
  --pd-tlo:#FFFFFF;
  --pd-tlo-2:#F4F6F8;
  --pd-linia:#C9D0D6;           /* separatory dekoracyjne */
  --pd-linia-mocna:#767F87;     /*  4,07:1 — obramowania pól i przycisków */

  /* — typografia — */
  --pd-skala:1;
  --pd-podstawa:calc(18px * var(--pd-skala));
  --pd-font:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* — rytm — */
  --pd-odstep:clamp(1.8rem,4.5vw,3.4rem);
  --pd-promien:16px;
  --pd-promien-duzy:26px;
  --pd-max:1180px;
  --pd-cel:44px;
}

/* — tryb wysokiego kontrastu: czerń, biel i żółć, zero półtonów — */
[data-pd-tryb-kontrast="tak"]{
  --pd-granat:#000; --pd-granat-ciemny:#000; --pd-granat-jasny:#000; --pd-koral:#000;
  --pd-tekst:#000; --pd-tekst-2:#000; --pd-tlo:#FFF; --pd-tlo-2:#FFF;
  --pd-linia:#000; --pd-linia-mocna:#000;
  --pd-slonce-m:#FFEB3B; --pd-slonce-t:#000; --pd-slonce-b:#FFF;
  --pd-malina-m:#000; --pd-malina-t:#000; --pd-malina-b:#FFF;
  --pd-trawa-m:#000; --pd-trawa-t:#000; --pd-trawa-b:#FFF;
  --pd-laguna-m:#000; --pd-laguna-t:#000; --pd-laguna-b:#FFF;
  --pd-borowka-m:#000; --pd-borowka-t:#000; --pd-borowka-b:#FFF;
  --pd-mandarynka-m:#000; --pd-mandarynka-t:#000; --pd-mandarynka-b:#FFF;
}
[data-pd-tryb-kontrast="tak"] img:not([src*=".svg"]){filter:grayscale(1) contrast(1.25)}
[data-pd-tryb-kontrast="tak"] *{box-shadow:none!important}
[data-pd-tryb-kontrast="tak"] .pd-karta,[data-pd-tryb-kontrast="tak"] .pd-kafel,
[data-pd-tryb-kontrast="tak"] .pd-pole input,[data-pd-tryb-kontrast="tak"] .pd-pole textarea{border-width:2px}

/* — podkreślanie wszystkich odnośników na życzenie — */
[data-pd-tryb-podkreslenia="tak"] a{text-decoration:underline!important;text-underline-offset:3px}

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

html{
  color-scheme:light;
  -webkit-text-size-adjust:100%;   /* nie blokujemy powiększania — patrz WCAG 1.4.4 */
}

body.pd-strona{
  margin:0;
  background:var(--pd-tlo);
  color:var(--pd-tekst);
  font-family:var(--pd-font);
  font-size:var(--pd-podstawa);
  line-height:1.7;               /* WCAG 1.4.12 — min. 1,5 */
  letter-spacing:.01em;
  overflow-x:hidden;
}

/* =========================================================================
   Pominięcie nawigacji
   ========================================================================= */
.pd-pomin{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--pd-slonce-m);color:var(--pd-granat-ciemny);
  font-weight:700;padding:14px 22px;text-decoration:none;
  border:3px solid var(--pd-granat-ciemny);border-radius:0 0 var(--pd-promien) 0;
}
.pd-pomin:focus{left:0}

/* treść dla czytników ekranu — niewidoczna, ale odczytywana */
.pd-czytnik{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.pd-czytnik-focus:focus{
  position:static!important;width:auto;height:auto;margin:0;clip:auto;clip-path:none;
}

/* =========================================================================
   Widoczny fokus — jedna reguła dla całej strony
   ========================================================================= */
:focus-visible{
  outline:3px solid var(--pd-granat);
  outline-offset:3px;
  border-radius:3px;
}
[data-pd-tryb-kontrast="tak"] :focus-visible{outline-width:4px;outline-color:#000}
.pd-ciemne :focus-visible{outline-color:var(--pd-slonce-m)}

/* =========================================================================
   Pasek ułatwień
   ========================================================================= */
.pd-pasek{background:var(--pd-granat-ciemny);color:#fff;font-size:.82rem}
.pd-pasek__srodek{
  max-width:var(--pd-max);margin-inline:auto;padding:6px 20px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.pd-pasek__etykieta{opacity:.9}
.pd-pasek__grupa{display:flex;gap:4px}
.pd-pasek__link{color:#fff;margin-left:auto;text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
.pd-pasek__link:hover{color:var(--pd-slonce-m)}

.pd-przycisk{
  min-width:var(--pd-cel);min-height:36px;
  background:transparent;color:#fff;border:2px solid #fff;border-radius:6px;
  font:inherit;font-weight:700;cursor:pointer;padding:4px 10px;line-height:1;
}
.pd-przycisk--sredni{font-size:1.15em}
.pd-przycisk--duzy{font-size:1.35em}
.pd-przycisk--opis{font-weight:400;font-size:.95em;padding:6px 12px}
.pd-przycisk:hover{background:#fff;color:var(--pd-granat-ciemny)}
.pd-przycisk[aria-pressed="true"]{background:var(--pd-slonce-m);border-color:var(--pd-slonce-m);color:var(--pd-granat-ciemny)}

/* skala tekstu ustawiana paskiem */
[data-pd-skala="1"]{--pd-skala:1.15}
[data-pd-skala="2"]{--pd-skala:1.3}

/* =========================================================================
   Typografia
   ========================================================================= */
h1,h2,h3,h4{color:var(--pd-granat);line-height:1.25;margin:0 0 .5em;text-wrap:balance;font-weight:800}
h1{font-size:clamp(1.9rem,4.5vw,2.75rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-top:1.2em}
h3{font-size:clamp(1.2rem,2.2vw,1.45rem);margin-top:1em}
h4{font-size:1.1rem}
p,li{max-width:70ch}                 /* długość wiersza wpływa na czytelność */
p{margin:0 0 1em}
a{color:var(--pd-granat-jasny);text-underline-offset:3px}
a:hover{color:var(--pd-granat-ciemny)}
main a:not(.pd-btn):not(.pd-kafel):not(.pd-karta__link){text-decoration:underline}
strong,b{font-weight:700}
ul,ol{padding-left:1.4em}
li{margin-bottom:.4em}
img{max-width:100%;height:auto}
:target{scroll-margin-top:1.5rem}

/* =========================================================================
   Układ
   ========================================================================= */
.pd-kontener{max-width:var(--pd-max);margin-inline:auto;padding-inline:20px}
.pd-sekcja{padding-block:var(--pd-odstep)}
.pd-sekcja--tlo{background:var(--pd-tlo-2)}
.pd-sekcja--ciemna{background:var(--pd-granat);color:#fff}
.pd-sekcja--ciemna h2,.pd-sekcja--ciemna h3{color:#fff}
.pd-sekcja--ciemna p{color:#E8EDF2}

/* =========================================================================
   Nagłówek strony i menu
   ========================================================================= */
.pd-naglowek{background:var(--pd-tlo);border-bottom:4px solid var(--pd-slonce-m)}
.pd-naglowek__srodek{
  max-width:var(--pd-max);margin-inline:auto;padding:14px 20px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.pd-logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--pd-granat)}
.pd-logo__znak{width:52px;height:52px;flex:none}
.pd-logo__nazwa{font-weight:800;font-size:1.02rem;line-height:1.3;max-width:30ch}
.pd-logo__dopisek{display:block;font-weight:400;font-size:.82rem;color:var(--pd-tekst-2)}
.pd-naglowek__kontakt{margin-left:auto;text-align:right;font-size:.92rem;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.pd-naglowek__kontakt a{font-weight:700;text-decoration:none;display:inline-block;padding:6px 0}

.pd-menu{background:var(--pd-granat)}
.pd-menu__srodek{max-width:var(--pd-max);margin-inline:auto;padding-inline:20px}
.pd-menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.pd-menu li{margin:0;max-width:none}
.pd-menu a{
  display:block;color:#fff;text-decoration:none;font-weight:700;
  padding:15px 18px;min-height:var(--pd-cel);
  border-bottom:4px solid transparent;
}
.pd-menu a:hover{background:var(--pd-granat-ciemny);color:var(--pd-slonce-m)}
.pd-menu a[aria-current="page"]{border-bottom-color:var(--pd-slonce-m);background:var(--pd-granat-ciemny)}
.pd-menu__przelacznik{display:none}

/* =========================================================================
   Okruszki
   ========================================================================= */
.pd-okruszki{background:var(--pd-tlo-2);font-size:.88rem}
.pd-okruszki ol{
  max-width:var(--pd-max);margin-inline:auto;padding:10px 20px;
  list-style:none;display:flex;flex-wrap:wrap;gap:6px;
}
.pd-okruszki li{margin:0;max-width:none}
.pd-okruszki li+li::before{content:"›";margin-right:6px;color:var(--pd-tekst-2)}
.pd-okruszki a{color:var(--pd-tekst-2)}

/* =========================================================================
   Nagłówek treści i przyciski
   ========================================================================= */
.pd-hero{background:var(--pd-tlo-2);padding-block:var(--pd-odstep)}
.pd-hero__uklad{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.pd-hero p.pd-lead{font-size:1.12rem;color:var(--pd-tekst-2);max-width:56ch}
.pd-hero img{border-radius:var(--pd-promien);width:100%}

.pd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--pd-cel);padding:13px 24px;
  background:var(--pd-slonce-m);color:var(--pd-granat-ciemny);
  border:3px solid var(--pd-granat-ciemny);border-radius:var(--pd-promien);
  font-weight:800;text-decoration:none;cursor:pointer;font-size:1rem;
}
.pd-btn:hover{background:var(--pd-granat-ciemny);color:#fff}
.pd-btn--obrys{background:transparent;color:var(--pd-granat-ciemny)}
.pd-btn--obrys:hover{background:var(--pd-granat-ciemny);color:#fff}
.pd-przyciski{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.4em}

/* =========================================================================
   Kafelki „Informacje dla rodziców”
   ========================================================================= */
.pd-kafelki{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:1.5em}
.pd-kafel{
  display:flex;flex-direction:column;gap:8px;
  background:var(--pd-tlo);border:2px solid var(--pd-linia-mocna);
  border-left:8px solid var(--pd-slonce-m);border-radius:var(--pd-promien);
  padding:20px 22px;text-decoration:none;color:var(--pd-tekst);min-height:var(--pd-cel);
}
.pd-kafel:hover{border-color:var(--pd-granat);background:var(--pd-tlo-2)}
.pd-kafel__tytul{font-weight:800;color:var(--pd-granat);font-size:1.1rem}
.pd-kafel__opis{display:block;font-size:.95rem;color:var(--pd-tekst-2);margin:0}
.pd-kafel__strzalka{margin-top:auto;font-weight:700;color:var(--pd-granat-jasny)}

/* =========================================================================
   Karty i listy informacyjne
   ========================================================================= */
.pd-karty{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:1.5em}
.pd-karta{background:var(--pd-tlo);border:2px solid var(--pd-linia-mocna);border-radius:var(--pd-promien);padding:22px}
.pd-karta h3{margin-top:0}
.pd-karta p:last-child{margin-bottom:0}

.pd-lista-plusy{list-style:none;padding:0;margin:1em 0 0}
.pd-lista-plusy li{display:flex;gap:12px;margin-bottom:.9em;max-width:72ch}
.pd-lista-plusy li::before{
  content:"";flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--pd-slonce-m);border:2px solid var(--pd-granat-ciemny);margin-top:3px;
}

/* =========================================================================
   Tabele (kadra, harmonogramy)
   ========================================================================= */
.pd-tabela-opakowanie:focus-visible{outline:3px solid var(--pd-granat);outline-offset:2px}
.pd-tabela-opakowanie{overflow-x:auto;margin-top:1.5em;border:2px solid var(--pd-linia-mocna);border-radius:var(--pd-promien)}
table.pd-tabela{width:100%;border-collapse:collapse;font-size:.97rem;background:var(--pd-tlo)}
table.pd-tabela caption{
  text-align:left;padding:14px 16px;font-weight:800;color:var(--pd-granat);
  background:var(--pd-tlo-2);border-bottom:2px solid var(--pd-linia-mocna);
}
.pd-tabela th,.pd-tabela td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--pd-linia)}
.pd-tabela thead th{background:var(--pd-granat);color:#fff;font-weight:700}
.pd-tabela tbody tr:nth-child(even){background:var(--pd-tlo-2)}
.pd-tabela tbody th{font-weight:700;color:var(--pd-granat)}
.pd-tabela td p,.pd-tabela td li{max-width:none}

/* =========================================================================
   Rozwijane sekcje — natywne <details>, bez JS
   ========================================================================= */
.pd-rozwijane{border:2px solid var(--pd-linia-mocna);border-radius:var(--pd-promien);margin-bottom:12px;background:var(--pd-tlo)}
.pd-rozwijane>summary{
  cursor:pointer;list-style:none;padding:16px 52px 16px 20px;
  font-weight:700;color:var(--pd-granat);position:relative;min-height:var(--pd-cel);
}
.pd-rozwijane>summary::-webkit-details-marker{display:none}
.pd-rozwijane>summary::after{
  content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;
  border-right:3px solid var(--pd-granat);border-bottom:3px solid var(--pd-granat);
  transform:translateY(-70%) rotate(45deg);
}
.pd-rozwijane[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.pd-rozwijane[open]>summary{border-bottom:2px solid var(--pd-linia)}
.pd-rozwijane__tresc{padding:18px 20px}
.pd-rozwijane__tresc>:last-child{margin-bottom:0}

/* =========================================================================
   Formularz
   ========================================================================= */
.pd-formularz{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:760px}
.pd-pole{display:flex;flex-direction:column;gap:6px}
.pd-pole--szeroki{grid-column:1/-1}
.pd-pole label{font-weight:700;color:var(--pd-granat)}
.pd-pole .pd-wskazowka{font-size:.88rem;color:var(--pd-tekst-2);font-weight:400}
.pd-pole input,.pd-pole textarea,.pd-pole select{
  font:inherit;font-size:1rem;                 /* 16px+ — iOS nie przybliża ekranu */
  padding:12px 14px;min-height:var(--pd-cel);
  border:2px solid var(--pd-linia-mocna);border-radius:8px;background:var(--pd-tlo);color:var(--pd-tekst);
}
.pd-pole input:focus,.pd-pole textarea:focus{border-color:var(--pd-granat)}
.pd-pole textarea{min-height:130px;resize:vertical}
.pd-wymagane{color:var(--pd-koral);font-weight:800}
.pd-blad{color:var(--pd-koral);font-weight:700;display:flex;gap:8px;align-items:flex-start}
.pd-blad::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;background:var(--pd-koral);color:#fff;display:grid;place-items:center;font-size:.85rem}
.pd-pole--blad input,.pd-pole--blad textarea{border-color:var(--pd-koral);border-width:3px}

/* =========================================================================
   Odnośniki do plików
   ========================================================================= */
.pd-plik__format{color:var(--pd-tekst-2);font-weight:400;white-space:nowrap}
.pd-pliki{list-style:none;padding:0;margin-top:1.2em}
.pd-pliki li{margin-bottom:10px;max-width:72ch}
.pd-pliki a{
  display:flex;gap:12px;align-items:center;min-height:var(--pd-cel);
  padding:12px 16px;border:2px solid var(--pd-linia-mocna);border-radius:var(--pd-promien);
  background:var(--pd-tlo);text-decoration:none;
}
.pd-pliki a:hover{background:var(--pd-tlo-2);border-color:var(--pd-granat)}

/* =========================================================================
   Stopka
   ========================================================================= */
.pd-stopka{background:var(--pd-granat-ciemny);color:#fff;padding-block:var(--pd-odstep) 20px;margin-top:var(--pd-odstep)}
.pd-stopka a{color:#fff;overflow-wrap:break-word}
.pd-stopka p,.pd-stopka li{overflow-wrap:break-word}
.pd-stopka__kolumny{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:30px}
.pd-stopka h2{color:#fff;font-size:1.1rem;margin-bottom:.6em}
.pd-stopka ul{list-style:none;padding:0}
.pd-stopka li{margin-bottom:.5em}
.pd-stopka__dol{
  border-top:1px solid rgba(255,255,255,.3);margin-top:26px;padding-top:16px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.9rem;
}

/* =========================================================================
   Ramki na materiał do uzupełnienia (tylko w szablonie)
   ========================================================================= */
.pd-zastepnik{
  display:grid;place-items:center;text-align:center;gap:6px;
  min-height:220px;padding:20px;border:3px dashed var(--pd-linia-mocna);
  border-radius:var(--pd-promien);background:var(--pd-tlo-2);color:var(--pd-tekst-2);
}
.pd-zastepnik__etykieta{font-weight:800;color:var(--pd-slonce-t)}
.pd-zastepnik p{font-size:.92rem;margin:0;max-width:40ch}

/* =========================================================================
   Ruch — szanujemy ustawienie systemowe
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =========================================================================
   Telefon i tablet
   ========================================================================= */
@media (max-width:900px){
  .pd-hero__uklad{grid-template-columns:1fr}
  .pd-formularz{grid-template-columns:1fr}
  .pd-naglowek__kontakt{margin-left:0;text-align:left;width:100%}
  .pd-menu ul{flex-direction:column}
  .pd-menu a{border-bottom:1px solid rgba(255,255,255,.2);border-left:4px solid transparent}
  .pd-menu a[aria-current="page"]{border-left-color:var(--pd-slonce-m);border-bottom-color:rgba(255,255,255,.2)}
  .pd-menu__przelacznik{
    display:flex;align-items:center;gap:10px;width:100%;
    background:var(--pd-granat);color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.2);
    font:inherit;font-weight:700;padding:14px 20px;min-height:var(--pd-cel);cursor:pointer;
  }
  /* Lista zwinięta jest już w CSS, a nie dopiero przez skrypt — inaczej menu
     pokazuje się na moment i chowa, co przy wolnym łączu daje skok układu (CLS). */
  /* wyższa specyficzność niż „.pd-menu ul”, które ustawia display:flex */
  .pd-menu .pd-menu__lista{display:none}
  .pd-menu .pd-menu__lista.pd-otwarte{display:flex}
}
@media (max-width:900px){
  /* na telefonie każdy przycisk paska musi spełniać minimalny cel dotykowy */
  .pd-przycisk{min-height:var(--pd-cel);padding:10px 14px}
  .pd-pasek{font-size:.95rem}
  .pd-pasek__link{min-height:var(--pd-cel);display:flex;align-items:center}
  .pd-naglowek__kontakt{line-height:1}
  .pd-naglowek__kontakt a{min-height:var(--pd-cel);display:flex;align-items:center}
  .pd-naglowek__kontakt br{display:none}
  .pd-stopka li a{display:inline-block;padding-block:8px}
}
@media (max-width:560px){
  .pd-pasek__srodek{font-size:.95em}
  .pd-pasek__link{margin-left:0;width:100%}
  .pd-logo__nazwa{font-size:.95rem}
}

/* =========================================================================
   Druk
   ========================================================================= */
@media print{
  .pd-pasek,.pd-menu,.pd-pomin,.pd-okruszki,.pd-przyciski{display:none}
  body.pd-strona{font-size:11pt;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}

/* =========================================================================
   Telefon — cele dotykowe w nagłówku (WCAG 2.2, kryterium 2.5.8)
   ========================================================================= */
@media (max-width:900px){
  .pd-naglowek__kontakt{line-height:1.2}
  .pd-naglowek__kontakt br{display:none}
  .pd-naglowek__kontakt a{
    display:flex;align-items:center;
    min-height:var(--pd-cel);padding-block:10px;
  }
}

/* =========================================================================
   KOLOR — rodziny przypisywane kaflom, kartom i sekcjom
   Zasada: kolorowy pasek i tło są DEKORACJĄ. Funkcjonalne obramowanie
   i tekst zawsze biorą kolor o potwierdzonym kontraście.
   ========================================================================= */
.pd-kolor0{--k-m:var(--pd-slonce-m);    --k-t:var(--pd-slonce-t);    --k-b:var(--pd-slonce-b)}
.pd-kolor1{--k-m:var(--pd-laguna-m);    --k-t:var(--pd-laguna-t);    --k-b:var(--pd-laguna-b)}
.pd-kolor2{--k-m:var(--pd-malina-m);    --k-t:var(--pd-malina-t);    --k-b:var(--pd-malina-b)}
.pd-kolor3{--k-m:var(--pd-trawa-m);     --k-t:var(--pd-trawa-t);     --k-b:var(--pd-trawa-b)}
.pd-kolor4{--k-m:var(--pd-borowka-m);   --k-t:var(--pd-borowka-t);   --k-b:var(--pd-borowka-b)}
.pd-kolor5{--k-m:var(--pd-mandarynka-m);--k-t:var(--pd-mandarynka-t);--k-b:var(--pd-mandarynka-b)}

/* kafelki — kolorowa głowa, biała treść, ciemne obramowanie */
.pd-kafel{
  border-radius:var(--pd-promien-duzy);
  border:2px solid var(--pd-linia-mocna);
  border-left-width:2px;
  padding:0;overflow:hidden;background:var(--pd-tlo);
}
.pd-kafel::before{
  content:"";display:block;height:12px;background:var(--k-m,var(--pd-slonce-m));
}
.pd-kafel>*{padding-inline:22px}
.pd-kafel>*:first-of-type{padding-top:18px}
.pd-kafel>*:last-child{padding-bottom:20px}
.pd-kafel__tytul{color:var(--k-t,var(--pd-granat));font-size:1.15rem}
.pd-kafel:hover{border-color:var(--k-t,var(--pd-granat));background:var(--k-b,var(--pd-tlo-2))}
.pd-kafel__strzalka{color:var(--k-t,var(--pd-granat-jasny))}

/* ikona w kafelku — koło w kolorze rodziny */
.pd-kafel__ikona{
  width:56px;height:56px;border-radius:50%;
  background:var(--k-b,var(--pd-tlo-2));border:3px solid var(--k-m,var(--pd-slonce-m));
  display:grid;place-items:center;font-size:26px;margin-bottom:10px;padding:0!important;
}

/* karty w kolorach */
.pd-karta{border-radius:var(--pd-promien-duzy);border:2px solid var(--pd-linia-mocna);overflow:hidden}
.pd-karta--kolor0{--k-m:var(--pd-slonce-m);    --k-t:var(--pd-slonce-t);    --k-b:var(--pd-slonce-b)}
.pd-karta--kolor1{--k-m:var(--pd-laguna-m);    --k-t:var(--pd-laguna-t);    --k-b:var(--pd-laguna-b)}
.pd-karta--kolor2{--k-m:var(--pd-malina-m);    --k-t:var(--pd-malina-t);    --k-b:var(--pd-malina-b)}
.pd-karta--kolor3{--k-m:var(--pd-trawa-m);     --k-t:var(--pd-trawa-t);     --k-b:var(--pd-trawa-b)}
.pd-karta--kolor4{--k-m:var(--pd-borowka-m);   --k-t:var(--pd-borowka-t);   --k-b:var(--pd-borowka-b)}
.pd-karta--kolor5{--k-m:var(--pd-mandarynka-m);--k-t:var(--pd-mandarynka-t);--k-b:var(--pd-mandarynka-b)}
.pd-karta[class*="--kolor"]{background:var(--k-b)}
.pd-karta[class*="--kolor"] h2,.pd-karta[class*="--kolor"] h3{color:var(--k-t)}
.pd-karta[class*="--kolor"] p,.pd-karta[class*="--kolor"] li{color:var(--pd-tekst)}

/* sekcje w jasnych odcieniach */
.pd-sekcja--slonce{background:var(--pd-slonce-b)}
.pd-sekcja--laguna{background:var(--pd-laguna-b)}
.pd-sekcja--malina{background:var(--pd-malina-b)}
.pd-sekcja--trawa{background:var(--pd-trawa-b)}
.pd-sekcja--borowka{background:var(--pd-borowka-b)}

/* nagłówki sekcji z kolorowym podkreśleniem */
.pd-sekcja .pd-kontener>h2::after,.pd-naglowek-ozdobny::after{
  content:"";display:block;width:76px;height:7px;border-radius:4px;
  background:linear-gradient(90deg,var(--pd-slonce-m) 0 25%,var(--pd-malina-m) 25% 50%,
             var(--pd-laguna-m) 50% 75%,var(--pd-trawa-m) 75% 100%);
  margin-top:12px;
}

/* zdjęcia — zaokrąglone, z kolorową ramką */
.pd-foto{border-radius:var(--pd-promien-duzy);overflow:hidden;border:4px solid var(--k-m,var(--pd-slonce-m));background:var(--pd-tlo-2)}
.pd-foto img{display:block;width:100%;height:100%;object-fit:cover}
.pd-galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:1.6em}
.pd-galeria figure{margin:0}
.pd-galeria img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--pd-promien-duzy);border:4px solid var(--k-m,var(--pd-slonce-m))}
.pd-galeria figcaption{font-size:.92rem;color:var(--pd-tekst-2);margin-top:8px;max-width:none}
.pd-galeria>*:nth-child(6n+1){--k-m:var(--pd-slonce-m)}
.pd-galeria>*:nth-child(6n+2){--k-m:var(--pd-laguna-m)}
.pd-galeria>*:nth-child(6n+3){--k-m:var(--pd-malina-m)}
.pd-galeria>*:nth-child(6n+4){--k-m:var(--pd-trawa-m)}
.pd-galeria>*:nth-child(6n+5){--k-m:var(--pd-borowka-m)}
.pd-galeria>*:nth-child(6n+6){--k-m:var(--pd-mandarynka-m)}

/* hero z kolorowym tłem i falą */
.pd-hero{background:linear-gradient(180deg,var(--pd-laguna-b) 0%,var(--pd-tlo) 100%);position:relative}
.pd-hero img{border-radius:var(--pd-promien-duzy);border:5px solid var(--pd-slonce-m)}
.pd-fala{display:block;width:100%;height:42px;color:var(--pd-tlo)}

/* lista zalet — kolorowe znaczniki */
.pd-lista-plusy li::before{background:var(--pd-slonce-m);border-color:var(--pd-granat-ciemny)}
.pd-lista-plusy li:nth-child(6n+2)::before{background:var(--pd-laguna-m)}
.pd-lista-plusy li:nth-child(6n+3)::before{background:var(--pd-malina-m)}
.pd-lista-plusy li:nth-child(6n+4)::before{background:var(--pd-trawa-m)}
.pd-lista-plusy li:nth-child(6n+5)::before{background:var(--pd-borowka-m)}
.pd-lista-plusy li:nth-child(6n+6)::before{background:var(--pd-mandarynka-m)}

/* grupy przedszkolne — kolorowe plakietki zamiast suchej tabeli */
.pd-grupy{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:14px;margin-top:1.6em}
.pd-grupa{
  border:2px solid var(--pd-linia-mocna);border-radius:var(--pd-promien-duzy);
  background:var(--k-b);padding:20px;text-align:center;
}
.pd-grupa__nazwa{display:block;font-weight:800;font-size:1.15rem;color:var(--k-t)}
.pd-grupa__wiek{display:block;font-size:.95rem;color:var(--pd-tekst)}
.pd-grupa__znak{font-size:34px;line-height:1;display:block;margin-bottom:6px}

/* przyciski — bardziej okrągłe */
.pd-btn{border-radius:999px;padding:14px 28px}
.pd-kafel,.pd-karta,.pd-tabela-opakowanie,.pd-rozwijane,.pd-kontakt-box{border-radius:var(--pd-promien-duzy)}
.pd-artykul__foto,.pd-karta__foto{border-radius:var(--pd-promien-duzy);width:100%;height:auto}
.pd-karta--kolor0 .pd-karta__foto,.pd-karta[class*="--kolor"] .pd-karta__foto{border-radius:0;margin:-22px -22px 14px;width:calc(100% + 44px);max-width:none}
.pd-data{font-size:.9rem;color:var(--pd-tekst-2);margin-bottom:.3em}
.pd-karty--wpisy .pd-karta h2{font-size:1.15rem;margin-top:0}
.pd-karty--wpisy .pd-karta h2 a{text-decoration:none;color:var(--k-t,var(--pd-granat))}
.pd-karty--wpisy .pd-karta h2 a:hover{text-decoration:underline}

/* stopka — kolorowy pasek na górze */
.pd-stopka{border-top:10px solid transparent;
  border-image:linear-gradient(90deg,var(--pd-slonce-m),var(--pd-malina-m),var(--pd-laguna-m),var(--pd-trawa-m),var(--pd-borowka-m),var(--pd-mandarynka-m)) 1}
.pd-naglowek{border-bottom:none}
.pd-menu{border-top:6px solid transparent;
  border-image:linear-gradient(90deg,var(--pd-slonce-m),var(--pd-malina-m),var(--pd-laguna-m),var(--pd-trawa-m),var(--pd-borowka-m),var(--pd-mandarynka-m)) 1}

@media (max-width:620px){
  .pd-galeria{grid-template-columns:1fr 1fr;gap:12px}
  .pd-grupy{grid-template-columns:1fr 1fr}
}

/* =========================================================================
   Wielkość celów — listy odnośników poza zdaniem (WCAG 2.2, kryt. 2.5.8)
   Dotyczy stopki, okruszków i list plików; odnośniki w zdaniu są wyłączone
   z tego wymagania i zostają bez zmian.
   ========================================================================= */
.pd-stopka li a,.pd-stopka p a{display:inline-block;padding-block:7px;min-height:24px}
.pd-okruszki a,.pd-okruszki span{display:inline-block;padding-block:5px;min-height:24px}
.pd-pasek__link{min-height:28px;display:inline-flex;align-items:center}

/* Bez JavaScriptu menu musi zostać rozwinięte, a przycisk schowany —
   inaczej strona byłaby nie do przejścia. */
.pd-bez-js .pd-menu .pd-menu__lista{display:flex!important}
.pd-bez-js .pd-menu__przelacznik{display:none!important}