/* ==========================================================================
   Zaczarowany Zamek – style strony
   Kierunek: pastelowe królestwo + kredkowa baśń (projekt na tablicy „D · Karta stylu”).
   Mobile-first: style bazowe dotyczą telefonów, media queries rozszerzają układ.
   ========================================================================== */

/* Kolory, kroje i kształty – zmiana wyglądu zaczyna się od tej sekcji. */
:root {
    --purple: #6b3fa0;        /* przyciski, linki */
    --plum: #3e2161;          /* nagłówki, stopka */
    --lavender: #cdbdf5;      /* dekoracje, cienie */
    --lavender-50: #f1eafd;   /* tło sekcji powitalnej */
    --peach: #ff9f87;         /* ciepły akcent */
    --peach-50: #ffe9e2;
    --mint: #8fd8bd;          /* chłodny akcent */
    --mint-50: #e3f6ee;
    --sun: #ffd56b;           /* gwiazdki, nagłówki w stopce */
    --danger: #b00020;        /* komunikaty o błędach */
    --ink: #2b1f3a;           /* tekst i kontury */
    --muted: #5b4d6b;         /* tekst pomocniczy */
    --paper: #fffaf5;         /* tło strony */
    --white: #fff;

    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Baloo 2", "Nunito", system-ui, sans-serif;
    --font-hand: "Patrick Hand", "Comic Sans MS", cursive;   /* tylko krótkie akcenty */

    /* „Odręcznie” zaokrąglone rogi – dwa warianty, żeby sąsiednie elementy nie były identyczne. */
    --sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;
    --sketch-alt: 15px 225px 15px 255px / 255px 15px 225px 15px;
    --outline: 3px solid var(--ink);

    --container: 72rem;
    --content: 46rem;
}

/* --- Podstawy ------------------------------------------------------------ */

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

a,
button,
label {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Kolumna na całą wysokość okna: przy krótkiej treści stopka i tak stoi na dole ekranu. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper);
}

main {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}

/* Treść strony sięga aż do stopki – na krótkich stronach (np. formularz hasła galerii) rysunki w marginesach
   mają miejsce i nie urywają się w połowie. */
main > * {
    width: 100%;
}

main > .page {
    flex: 1 0 auto;
}

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

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    color: var(--plum);
}

/* Tytuł strony z podkreśleniem kredką. */
h1 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
    text-wrap: balance;   /* linie o podobnej długości zamiast jednego słowa w ostatniej linii */
}

/* Podkreślenie kredką tytułu (filtr underline). „clone” rysuje osobną kreskę pod każdą linią.
   Baloo 2 ma głęboki zapas pod literami: linia bazowa leży ok. 0,52em nad dołem pola tekstu, a ogonki
   liter (y, g) sięgają 0,2em pod nią. Kreska stoi więc tuż przy dole pola – zaraz pod literami, a nie
   pod całym zapasem, gdzie przy kilku liniach (telefon) wchodziła na następną linię. */
.scribble {
    background: url("../img/doodles/underline.c82ebde9cdbc.svg") no-repeat left bottom 0.02em / 100% 0.35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Kreska pod linią potrzebuje trochę miejsca, zanim zacznie się następna linia tytułu. */
h1:has(.scribble) {
    line-height: 1.3;
}

h2 {
    font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
}

h3 {
    font-size: 1.375rem;
    font-weight: 700;
}

a {
    color: var(--purple);
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--plum);
}

:focus-visible {
    outline: 3px dashed var(--purple);
    outline-offset: 3px;
}

time {
    display: block;
    color: var(--muted);
    font-family: var(--font-hand);
    font-size: 1.2rem;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 50;   /* nad nagłówkiem i otwartym menu */
    padding: 0.5rem 1rem;
    background: var(--white);
    border: var(--outline);
}

.skip-link:focus {
    top: 1rem;
}

.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1rem;
}

.page {
    padding-block: 2.5rem 4rem;
}

/* Kolumna tekstu: ograniczona szerokość (wygodna długość linii), wyśrodkowana na szerokich ekranach. */
.content {
    max-width: var(--content);
    margin-inline: auto;
}

.lead {
    max-width: var(--content);
    font-size: 1.1875rem;
    color: var(--muted);
}

/* Akapity najwyżej ok. 70 znaków w linii – dłuższe czyta się trudniej. Kolumna (--content) jest szersza
   ze względu na tabele i kartki kalendarza. */
.rich-text p,
.rich-text li,
.lead {
    /* W Nunito „ch” (szerokość zera) jest węższe od przeciętnej litery: 62ch to ok. 80 znaków. */
    max-width: 62ch;
}

/* Długie adresy (np. linki do e-rekrutacji) łamią się zamiast wypychać stronę poza ekran
   przy wąskim ekranie albo powiększonym tekście (WCAG 1.4.10). */
.rich-text a {
    overflow-wrap: anywhere;
}

/* Bez pojedynczego słowa w ostatniej linii akapitu. */
p,
li {
    text-wrap: pretty;
}

h2,
h3 {
    text-wrap: balance;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Rysunki z templates/includes/doodles.html. */
.doodle {
    display: inline-block;
    flex-shrink: 0;
    overflow: visible;
}

/* --- Nagłówek i menu ------------------------------------------------------ */

.site-header {
    padding-bottom: 12px;
    background: var(--paper) url("../img/doodles/zigzag.2aa380c232fd.svg") repeat-x left bottom / 24px 12px;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block: 0.75rem;
}

.site-name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-heading);
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1;
    color: var(--plum);
    text-decoration: none;
}

.site-name__mark {
    width: 2.75rem;
    height: 2.75rem;
}

.nav-toggle {
    padding: 0.4rem 1rem;
    font: inherit;
    font-weight: 800;
    color: var(--plum);
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 3px 3px 0 var(--lavender);
    cursor: pointer;
}

.site-nav {
    flex-basis: 100%;
}

.site-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Na telefonie linia między pozycjami jest na elemencie listy, a link ma szerokość tekstu –
   dzięki temu odręczne kółko bieżącej pozycji obejmuje tylko jej nazwę. */
.site-nav li {
    border-top: 2px dashed var(--lavender);
}

.site-nav a {
    display: block;
    width: fit-content;
    padding: 0.625rem 0.875rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--purple);
}

/* Bieżąca strona obrysowana odręcznym kółkiem. */
.site-nav a[aria-current="page"] {
    color: var(--plum);
    background: url("../img/doodles/scribble-circle.cd7522183332.svg") no-repeat center / 100% 100%;
}

/* Przycisk menu działa tylko z JavaScriptem (klasa .js na <html>, ustawiana w <head>).
   Bez JS przycisku nie ma, a menu jest zawsze rozwinięte. */
.nav-toggle {
    display: none;
}

.js .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* Ikona przycisku menu: trzy kreski, po otwarciu krzyżyk. */
.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
    display: block;
    width: 1.15rem;
    height: 2.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.2s, background-color 0.2s;
}

.nav-toggle__icon {
    position: relative;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
    background-color: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
    transform: translateY(-6px) rotate(-45deg);
}

.js .nav-toggle[aria-expanded="false"] + .site-nav {
    display: none;
}

@media (min-width: 52rem) {
    .js .nav-toggle {
        display: none;
    }

    .site-nav,
    .js .nav-toggle[aria-expanded="false"] + .site-nav {
        display: block;
        flex-basis: auto;
    }

    .site-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .site-nav li {
        border-top: 0;
    }

    .site-nav a {
        padding: 0.375rem 0.875rem;
    }
}

/* --- Podmenu --------------------------------------------------------------- */

/* Atrybut hidden zawsze ukrywa element, także gdy CSS nadaje mu inny display. */
[hidden] {
    display: none !important;
}

/* Bez JavaScriptu grupa to link do jej strony z rozwiniętym podmenu – przycisk i „Wszystko w dziale” są niepotrzebne. */
.site-nav__toggle,
.site-nav__overview {
    display: none;
}

.site-nav__toggle {
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 0.875rem;
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
}

.site-nav__toggle:hover {
    color: var(--purple);
}

/* Strzałka ▾ obracająca się po rozwinięciu. */
.site-nav__toggle::after {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s;
}

.site-nav__toggle[aria-expanded="true"]::after {
    transform: translateY(15%) rotate(-135deg);
}

/* Grupa zawierająca bieżącą stronę – odręczne kółko jak przy zwykłej pozycji menu. */
.site-nav__group.is-active > .site-nav__toggle,
.site-nav__group.is-active > .site-nav__group-link {
    color: var(--plum);
    background: url("../img/doodles/scribble-circle.cd7522183332.svg") no-repeat center / 100% 100%;
}

/* Na telefonie podmenu jest wcięte pod nazwą grupy. */
.site-nav .site-nav__submenu {
    margin: 0;
    padding: 0 0 0.5rem 1.25rem;
    list-style: none;
}

.site-nav .site-nav__submenu li {
    border-top: 0;
}

@media (min-width: 52rem) {
    .site-nav__group {
        position: relative;
    }

    /* Na komputerze z JavaScriptem: przycisk zamiast linku, strona grupy jako pierwsza pozycja podmenu. */
    .js .site-nav__toggle {
        display: flex;
    }

    .js .site-nav__group-link {
        display: none;
    }

    .js .site-nav__overview {
        display: block;
        margin-bottom: 0.25rem;
        padding-bottom: 0.25rem;
        border-bottom: 2px dashed var(--lavender);
    }

    .site-nav__overview a {
        font-family: var(--font-hand);
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--purple);
    }

    .site-nav__toggle {
        padding: 0.375rem 0.875rem;
    }

    /* Na komputerze podmenu to rozwijana „karteczka” pod nazwą grupy. */
    .site-nav .site-nav__submenu {
        position: absolute;
        top: calc(100% + 0.25rem);
        left: 0;
        z-index: 20;
        display: none;
        min-width: 15rem;
        padding: 0.5rem;
        background: var(--white);
        border: var(--outline);
        border-radius: var(--sketch);
        box-shadow: 4px 4px 0 var(--lavender);
    }

    .site-nav .site-nav__submenu {
        max-width: min(22rem, 90vw);
    }

    .site-nav__submenu a {
        padding: 0.5rem 0.75rem;
    }

    .js .site-nav__toggle[aria-expanded="true"] + .site-nav__submenu {
        display: block;
    }

    /* Bez JavaScriptu podmenu pokazuje się po najechaniu lub przejściu klawiaturą. */
    html:not(.js) .site-nav__group:hover > .site-nav__submenu,
    html:not(.js) .site-nav__group:focus-within > .site-nav__submenu {
        display: block;
    }
}

/* --- Menu na telefonie ----------------------------------------------------- */

/* Na telefonie menu to „karteczka” wysuwana pod nagłówkiem nad treścią strony (strona pod nią jest
   przygaszona). Działy dużą czcionką, bez kresek między pozycjami. Otwarty dział z podstronami to jedna
   lawendowa karteczka: nazwa u góry, podstrony w środku jako białe „pigułki”. Bez JavaScriptu menu
   jest zwykłą rozwiniętą listą w nagłówku. */
@media (max-width: 51.99rem) {
    /* Nazwa i przycisk „Menu” zawsze w jednym rzędzie; menu pod nimi na całą szerokość. */
    .site-header__inner {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .site-nav {
        grid-column: 1 / -1;
    }

    .site-name {
        gap: 0.4rem;
        font-size: clamp(1.1rem, 0.55rem + 2.6vw, 1.35rem);
    }

    .site-name__mark {
        width: 2.1rem;
        height: 2.1rem;
    }

    .nav-toggle {
        min-height: 2.75rem;
        padding: 0.4rem 0.85rem;
    }

    .nav-toggle[aria-expanded="true"] {
        background: var(--lavender-50);
        box-shadow: 1px 1px 0 var(--lavender);
        transform: translate(2px, 2px);   /* przycisk „wciśnięty”, dopóki menu jest otwarte */
    }

    .site-nav {
        margin-top: 0.25rem;
        padding: 0.5rem;
        background: var(--white);
        border: var(--outline);
        border-radius: var(--sketch);
        box-shadow: 6px 6px 0 var(--lavender);
    }

    /* Z JavaScriptem karteczka leży nad treścią, zamiast ją przesuwać, i przewija się, gdy jest długa. */
    .js .site-nav {
        position: absolute;
        top: calc(100% - 0.25rem);
        left: 0;   /* w siatce liczone od krawędzi treści – równo z logo i przyciskiem */
        right: 0;
        z-index: 40;
        max-height: calc(100dvh - 6rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        animation: nav-drop 0.18s ease-out;
    }

    .js .site-header:has(.nav-toggle[aria-expanded="true"]) {
        position: relative;
        z-index: 40;
    }

    /* Przygaszona strona pod otwartym menu; dotknięcie jej zamyka menu (main.js). */
    .js body:has(.nav-toggle[aria-expanded="true"])::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgb(43 31 58 / 0.28);
        animation: nav-fade 0.18s ease-out;
    }

    .site-nav li,
    .site-nav .site-nav__submenu li {
        border-top: 0;
    }

    .site-nav > ul {
        display: grid;
        gap: 0.25rem;
    }

    /* Działy: cały wiersz do dotknięcia, nie tylko tekst. */
    .site-nav > ul > li > a,
    .js .site-nav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 3.25rem;
        margin: 0;
        padding: 0.625rem 1rem;
        font-family: var(--font-heading);
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.25;
        color: var(--plum);
        text-align: left;
        border-radius: 14px;
    }

    .site-nav > ul > li > a:hover,
    .js .site-nav__toggle:hover {
        color: var(--plum);
        background: var(--lavender-50);
    }

    .site-nav a[aria-current="page"],
    .site-nav__group.is-active > .site-nav__group-link,
    .site-nav__group.is-active > .site-nav__toggle {
        background: none;
    }

    /* Bieżąca strona: lawendowe tło i kropka kredką po prawej. */
    .site-nav > ul > li > a[aria-current="page"] {
        background: var(--lavender-50);
    }

    .site-nav > ul > li > a[aria-current="page"]::after {
        content: "";
        width: 0.6rem;
        height: 0.6rem;
        background: var(--peach);
        border: 2px solid var(--ink);
        border-radius: 50%;
    }

    /* Strzałka działu w kółeczku. */
    .js .site-nav__toggle::after {
        flex: none;
        width: 0.5em;
        height: 0.5em;
        margin-right: 0.35rem;
    }

    .js .site-nav__group-link {
        display: none;
    }

    .js .site-nav__overview {
        display: block;
    }

    .js .site-nav__toggle[aria-expanded="false"] + .site-nav__submenu {
        display: none;
    }

    /* Otwarty dział: przycisk i podstrony tworzą jedną lawendową karteczkę. */
    .js .site-nav__group:has(> .site-nav__toggle[aria-expanded="true"]) {
        background: var(--lavender-50);
        border-radius: 14px;
    }

    .js .site-nav__toggle[aria-expanded="true"] {
        background: none;
    }

    /* Podstrony: jedna biała karteczka z listą (cienka linia między pozycjami), nie osobne przyciski.
       „Wszystko w dziale” stoi nad nią, na lawendowym tle. */
    .site-nav .site-nav__submenu {
        display: block;
        margin: 0;
        padding: 0 0.5rem 0.625rem;
        border: 0;
    }

    .site-nav .site-nav__submenu li + li:not(.site-nav__overview + li) {
        border-top: 1.5px solid var(--lavender-50);
    }

    .site-nav .site-nav__submenu li:not(.site-nav__overview) {
        background: var(--white);
    }

    .site-nav .site-nav__overview + li {
        border-radius: 12px 12px 0 0;
    }

    .site-nav .site-nav__submenu li:last-child {
        border-radius: 0 0 12px 12px;
    }

    .site-nav .site-nav__overview + li:last-child {
        border-radius: 12px;
    }

    .site-nav .site-nav__submenu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: auto;
        min-height: 2.875rem;
        padding: 0.5rem 1rem;
        font-weight: 700;
        line-height: 1.35;
        color: var(--ink);
        border-radius: inherit;
    }

    .site-nav .site-nav__submenu a:hover {
        color: var(--purple);
    }

    .site-nav .site-nav__submenu a[aria-current="page"] {
        color: var(--plum);
        background: none;
    }

    .site-nav .site-nav__submenu li:not(.site-nav__overview) a[aria-current="page"]::after {
        content: "";
        flex: none;
        width: 0.6rem;
        height: 0.6rem;
        background: var(--peach);
        border: 2px solid var(--ink);
        border-radius: 50%;
    }

    /* „Wszystko w dziale” odręcznie, jak na komputerze – to przejście do strony działu, nie kolejna podstrona. */
    .site-nav .site-nav__overview a {
        font-family: var(--font-hand);
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--purple);
        background: none;
        justify-content: flex-start;
    }

    .site-nav .site-nav__overview a::after {
        content: "→";
        margin-left: 0.4rem;
        font-family: var(--font-body, inherit);
    }
}

@keyframes nav-drop {
    from { opacity: 0; transform: translateY(-0.5rem); }
}

@keyframes nav-fade {
    from { opacity: 0; }
}

/* --- Przyciski ----------------------------------------------------------- */

.button,
button[type="submit"] {
    display: inline-block;
    padding: 0.7rem 1.75rem;
    font: inherit;
    font-weight: 800;
    color: var(--white);
    background: var(--purple);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 4px 4px 0 var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.button:hover,
button[type="submit"]:hover {
    color: var(--white);
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 var(--ink);
}

.button:active,
button[type="submit"]:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--ink);
}

.button--secondary,
.button--secondary:hover {
    color: var(--plum);
    background: var(--white);
    border-radius: var(--sketch-alt);
    box-shadow: 4px 4px 0 var(--lavender);
}

/* --- Treść z edytora (RichText) ------------------------------------------ */

.rich-text > :first-child {
    margin-top: 0;
}

/* Śródtytuły z pociągnięciem zakreślacza. */
/* Zakreślacz pod śródtytułem. Treść H2 jest w span.marker (filtr „marked”), więc przy kilku liniach
   każda linia ma własne pociągnięcie, dokładnie na długość tekstu, bez wchodzenia na sąsiednią linię. */
.marker {
    /* Cienkie pociągnięcie przez dolną część liter, jak zakreślaczem – nie pod całym zapasem pod literami
       (linia bazowa Baloo 2 jest ok. 0,52em nad dołem pola), żeby przy kilku liniach nie zbliżało się
       do następnej. Przy kilku śródtytułach na stronie nie przytłacza tekstu. */
    background: url("../img/doodles/marker.0c12da799830.svg") no-repeat left 0 bottom 0.3em / 100% 0.36em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Więcej miejsca nad śródtytułem niż pod nim – śródtytuł należy do tekstu pod nim. */
.rich-text h2 {
    margin: 2.75rem 0 0.75rem;
}

.rich-text h3 {
    margin: 2rem 0 0.5rem;
}

.rich-text li + li {
    margin-top: 0.25rem;
}

/* Lista numerowana (np. kroki w rekrutacji): numery w kredkowych kółkach. */
.rich-text ol {
    padding-left: 0;
    list-style: none;
    counter-reset: step;
}

.rich-text ol > li {
    position: relative;
    min-height: 2.25rem;
    padding: 0.25rem 0 0.25rem 3rem;
    counter-increment: step;
}

.rich-text ol > li + li {
    margin-top: 0.5rem;
}

.rich-text ol > li::before {
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--plum);
    background: var(--lavender-50);
    border: var(--outline);
    border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
}

.rich-text ol > li:nth-child(3n + 2)::before { background: var(--mint-50); }
.rich-text ol > li:nth-child(3n + 3)::before { background: var(--peach-50); }

/* Ramka „Ważne” z edytora (website/wagtail_hooks.py). Kilka ramek pod rząd łączy się w jedną. */
.rich-text .important {
    position: relative;
    max-width: 68ch;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem 1rem 3.75rem;
    background: var(--peach-50);
    border: var(--outline);
    border-radius: var(--sketch-alt);
}

.rich-text .important::before {
    content: "!";
    position: absolute;
    top: 0.9rem;
    left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--plum);
    background: var(--sun);
    border: var(--outline);
    border-radius: 50%;
}

.rich-text .important + .important {
    margin-top: -1.5rem;
    padding-top: 0.25rem;
    border-top: 0;
    border-radius: 0 0 15px 255px / 0 0 225px 15px;
}

.rich-text .important:has(+ .important) {
    border-bottom: 0;
    border-radius: 15px 225px 0 0 / 255px 15px 0 0;
}

.rich-text .important + .important:has(+ .important) {
    border-radius: 0;
}

.rich-text .important + .important::before {
    content: none;
}

/* Tabela kryteriów (blok „Tabela kryteriów”). Na telefonie każde kryterium (<tbody>) to karta: u góry nazwa
   i punkty, pod kreską dokument, na dole rozwijana pełna treść. Od 40rem tabela w stylu planu dnia (.schedule):
   fioletowy nagłówek, kolumny rozdzielone przerywaną linią, pełna treść w wierszu na całą szerokość. */
.criteria {
    display: block;
    width: 100%;
    margin: 1.5rem 0 2rem;
    border-collapse: collapse;
}

.criteria__caption {
    display: block;
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    text-align: left;
    color: var(--plum);
}

.criteria__same {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted);
}

.criteria__head {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.criteria__item {
    display: block;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch-alt);
}

.criteria__item + .criteria__item {
    margin-top: 0.875rem;
}

.criteria__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 0 0.75rem;
}

.criteria__name {
    padding: 0.875rem 0 0.75rem 1rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    color: var(--ink);
}

.criteria__points {
    margin: 0.75rem 1rem 0 0;
    padding: 0.125rem 0.625rem;
    font-weight: 800;
    white-space: nowrap;
    color: var(--plum);
    background: var(--lavender-50);
    border-radius: 999px;
}

.criteria__document {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0.75rem 1rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--muted);
    border-top: 1px dashed var(--lavender);
}

.criteria__label {
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--plum);
}

.criteria__more,
.criteria__more td {
    display: block;
}

.criteria__more td {
    padding: 0 1rem 0.625rem;
}

/* „Pełna treść kryterium” – dyskretny przycisk ze strzałką pod nazwą kryterium (tylko z JavaScriptem; bez niego
   pełna treść jest widoczna od razu). Min. 24 px wysokości celu (WCAG 2.2, 2.5.8). */
.criteria__toggle {
    display: none;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.5rem;
    margin-top: 0.375rem;
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--muted);
    background: none;
    border: 0;
    cursor: pointer;
}

/* Zawsze w osobnej linii pod nazwą, nie doklejony do ostatniego słowa. */
.js .criteria__toggle {
    display: flex;
    width: fit-content;
}

.criteria__toggle::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.criteria__toggle[aria-expanded="true"]::before {
    transform: rotate(45deg);
}

.criteria__toggle:hover {
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.js .criteria__more:not(.is-open) {
    display: none;
}

.criteria__full {
    max-width: 68ch;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--muted);
}

/* Z JavaScriptem przycisk już mówi, co to za tekst. */
.js .criteria__full-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 40rem) {
    .criteria {
        display: table;
        table-layout: fixed;
        background: var(--white);
        border: var(--outline);
        border-radius: 18px;
        border-collapse: separate;   /* „collapse” nie pozwala zaokrąglić rogów tabeli */
        border-spacing: 0;
        box-shadow: 6px 6px 0 var(--lavender);
    }

    .criteria__caption {
        display: table-caption;
    }

    .criteria__head {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        white-space: normal;
    }

    .criteria__head th {
        padding: 0.6rem 1rem;
        font-family: var(--font-heading);
        font-size: 1.05rem;
        text-align: left;
        color: var(--white);
        background: var(--purple);
    }

    /* Rogi nagłówka zaokrąglone razem z tabelą (overflow: hidden ucinałby cień i rozwinięty tekst). */
    .criteria__head th:first-child {
        width: 38%;
        border-top-left-radius: 15px;
    }

    .criteria__head th:last-child {
        border-top-right-radius: 15px;
    }

    .criteria__head th + th {
        border-left: 2px solid rgb(255 255 255 / 0.35);
    }

    .criteria__head th:nth-child(3) {
        width: 6rem;
        text-align: center;
    }

    .criteria__item {
        display: table-row-group;
        background: none;
        border: 0;
        border-radius: 0;
    }

    .criteria__item + .criteria__item .criteria__row > * {
        border-top: 2px dashed var(--lavender);
    }

    .criteria__row {
        display: table-row;
    }

    .criteria__row > * {
        padding: 0.875rem 1rem;
        vertical-align: top;
    }

    /* Pionowa przerywana linia między kolumnami, jak w planie dnia. Rysowana tłem z odstępem od góry i dołu
       komórki: obramowanie stykałoby się z poziomą linią między kryteriami i tworzyło krzyżyk. */
    .criteria__row > * + * {
        background: repeating-linear-gradient(to bottom, var(--lavender) 0 6px, transparent 6px 11px)
            no-repeat left 0 top 0.75rem / 2px calc(100% - 1.5rem);
    }

    .criteria__document {
        border-top: 0;
    }

    .criteria__label,
    .criteria__unit {
        display: none;
    }

    .criteria__points {
        margin: 0;
        font-size: 1.125rem;
        font-variant-numeric: tabular-nums;
        text-align: center;
        border-radius: 0;
    }

    .criteria__more {
        display: table-row;
    }

    .criteria__more td {
        display: table-cell;
        padding: 0 1rem 0.75rem;
    }
}

/* Przycisk pod wstępem strony (np. do systemu rekrutacji). */
.page-action {
    margin: 1.5rem 0 2rem;
}

/* Strzałka „wychodzi poza stronę” przy przycisku z adresem zewnętrznym. */
.button__external {
    width: 0.8em;
    height: 0.8em;
    margin-left: 0.45em;
    vertical-align: -0.02em;
}

/* Spis „Na tej stronie” nad dłuższą treścią. */
.toc {
    margin: 1.5rem 0 2.5rem;
    padding: 1rem 1.5rem 1.25rem;
    background: var(--lavender-50);
    border: var(--outline);
    border-radius: var(--sketch);
}

.toc__title {
    margin: 0 0 0.375rem;
    font-family: var(--font-hand);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--purple);
}

.toc ol {
    margin: 0;
    padding-left: 1.25rem;
}

.toc li + li {
    margin-top: 0.25rem;
}

.toc a {
    font-weight: 700;
}

/* Tekst łatwy do czytania (EasyReadPage): większa czcionka, każde zdanie w osobnej linii, obrazek przy fragmencie. */
.easy-read section {
    scroll-margin-top: 1.5rem;
}

.easy-read__section {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1.25rem;
    align-items: start;
    margin: 2rem 0;
    font-size: 1.25rem;
    line-height: 1.6;
}

.easy-read__picture {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
}

.easy-read__section h3 {
    margin: 0 0 0.5rem;
}

.easy-read__section p {
    margin: 0 0 0.375rem;
    max-width: 50ch;
}

.easy-read__credit {
    font-size: 0.875rem;
    color: var(--muted);
}

/* Przy dużym tekście lub wąskim ekranie obrazek nad tekstem, nie obok. */
@media (max-width: 30rem) {
    .easy-read__section {
        grid-template-columns: 1fr;
    }
}

/* Kotwica ze spisu nie chowa śródtytułu pod krawędzią ekranu. */
.rich-text h2[id] {
    scroll-margin-top: 1.5rem;
}

/* --- Sekcja powitalna (strona główna) ------------------------------------ */

.hero {
    position: relative;
    /* Łąka szersza niż kolumna sceny nie może poszerzać strony. */
    overflow-x: clip;
    padding-bottom: 56px;
    /* Niebo nad zamkiem: od lawendy u góry do jaśniejszej przy łące. */
    background: linear-gradient(to bottom, #e7defb, var(--lavender-50) 70%);
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 56px;
    background: url("../img/doodles/wave-hero.2b4245aad760.svg") repeat-x left bottom / 640px 56px;
}

.hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3rem 3.5rem;
    padding-block: 2.5rem 1.5rem;
}

.hero__text {
    flex: 1 1 26rem;
    min-width: 0;
}

.hero__eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--font-hand);
    font-size: 1.6rem;
    color: var(--purple);
    transform: rotate(-2deg);
    transform-origin: left center;
}

.hero h1 {
    font-size: clamp(2.375rem, 1.4rem + 3vw, 3.25rem);
    /* Miejsce na kreskę kredką pod każdą zawiniętą linią (.scribble). */
    line-height: 1.22;
}

.hero .lead {
    max-width: 34em;
    font-size: 1.25rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* Scena: zamek na miętowej łące. Zbocza łąki schodzą pod falę sekcji (.hero::after jest rysowana na wierzchu). */
.hero__scene {
    position: relative;
    flex: 1 1 22rem;
    max-width: 32rem;
    margin-inline: auto;
    align-self: flex-end;
    /* Dół łąki chowa się pod falą: odstęp pod treścią sekcji + część wysokości fali. */
    margin-bottom: calc(-1.5rem - 34px);
}

.hero__castle {
    position: relative;
    z-index: 1;
    display: block;
    width: 78%;
    height: auto;
    margin-inline: auto;
    /* Krzaczki u podstawy zamku stoją na grzbiecie łąki. */
    margin-bottom: -14%;
}

.hero__hill {
    display: block;
    width: 130%;
    max-width: none;
    height: auto;
    margin-left: -15%;
}

/* Trawa przed podstawą zamku: przesunięcie liczone od szerokości sceny (procent marginesu), jak położenie zamku. */
.hero__grass {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 11%;
    width: 78%;
    height: auto;
    margin-top: 73.5%;
}

.hero__sky {
    position: absolute;
    height: auto;
}

.hero__sky--cloud { right: -6%; top: 8%; width: 7.5rem; }
.hero__sky--cloud-small { left: -2%; top: 24%; width: 4.5rem; opacity: 0.85; }
.hero__sky--sparkle { left: 12%; top: 2%; width: 1.9rem; }
.hero__sky--sparkle-small { right: 22%; top: 0; width: 1.2rem; }

/* Gdy zamek spada pod tekst (wąski ekran), krótki tekst belki staje na tej samej osi co zamek.
   Dłuższa treść niżej zostaje wyrównana do lewej – wyśrodkowane akapity czyta się gorzej. */
@media (max-width: 51.99rem) {
    .hero__text {
        text-align: center;
    }

    .hero__eyebrow {
        transform-origin: center;
    }

    .hero .lead {
        margin-inline: auto;
    }

    .hero__actions {
        justify-content: center;
    }
}

@media (max-width: 47.99rem) {
    .hero__scene {
        max-width: 22rem;
    }

    .hero__sky--cloud {
        right: 0;
        width: 5.5rem;
    }
}

/* Powitanie ze zdjęciem ogrodu: tekst i okrągłe zdjęcie obok siebie na szerokim ekranie, jedno pod drugim na telefonie. */
.welcome {
    display: grid;
    gap: 2.5rem;
    justify-content: center;
    align-items: center;
}

.welcome__text {
    max-width: var(--content);
}

.welcome__media {
    position: relative;
    width: min(100%, 23rem);
    margin-inline: auto;
}

.welcome__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border: 4px solid var(--ink);
    border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
    box-shadow: 8px 8px 0 var(--mint);
    transform: rotate(2deg);
}

.welcome__doodle {
    position: absolute;
    z-index: 1;
}

/* Bazgroły wokół zdjęcia jak dawniej w sekcji powitalnej: gwiazdki na lewo u góry, serce i spiralka po prawej,
   chmurka przy prawym dolnym brzegu. */
.welcome__doodle--star { left: -0.5rem; top: 0.5rem; width: 2.2rem; height: 2.2rem; transform: rotate(-12deg); }
.welcome__doodle--star-small { left: 2.25rem; top: -0.75rem; width: 1.4rem; height: 1.4rem; }
.welcome__doodle--heart { right: 1rem; top: -0.5rem; width: 2rem; height: 1.9rem; transform: rotate(14deg); }
.welcome__doodle--spiral { right: -1.25rem; top: 14%; width: 2.5rem; height: 2.5rem; }
.welcome__doodle--cloud { right: -2.1rem; bottom: 0.5rem; width: 6rem; height: 3.25rem; }

/* Na wąskich ekranach mniej bazgrołów, żeby nie wychodziły poza ekran. */
@media (max-width: 47.99rem) {
    .welcome__doodle--spiral,
    .welcome__doodle--cloud {
        display: none;
    }
}

/* Zygzak: zamek w belce stoi po prawej, więc zdjęcie idzie na lewo, a tekst na prawo – dwa okrągłe
   kształty nie piętrzą się w jednej kolumnie. W HTML tekst zostaje pierwszy (kolejność czytania). */
@media (min-width: 64rem) {
    .welcome {
        grid-template-columns: 23rem minmax(0, var(--content));
        gap: 4.5rem;
    }

    .welcome__media {
        order: -1;
    }
}

/* --- Sekcje i karty (aktualności, albumy) -------------------------------- */

.section {
    margin-top: 3.5rem;
}

.section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.section__header h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.section__header .doodle {
    width: 1.9rem;
    height: 1.9rem;
    transform: rotate(10deg);
}

.more-link {
    font-family: var(--font-hand);
    font-size: 1.5rem;
}

.card-grid {
    display: grid;
    gap: 2.5rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    margin: 2rem 0 0;
    padding: 0.75rem 0 0;
    list-style: none;
}

.card {
    --card-accent: var(--mint);
    --card-tint: var(--mint-50);
    --tape: rgb(205 189 245 / 0.75);

    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 6px 6px 0 var(--card-accent);
    transform: rotate(-1deg);
    transition: transform 0.2s;
}

.card:nth-child(3n + 2) {
    --card-accent: var(--peach);
    --card-tint: var(--peach-50);
    --tape: rgb(143 216 189 / 0.75);

    border-radius: var(--sketch-alt);
    transform: rotate(1deg);
}

.card:nth-child(3n + 3) {
    --card-accent: var(--lavender);
    --card-tint: var(--lavender-50);
    --tape: rgb(255 159 135 / 0.6);

    transform: rotate(-0.5deg);
}

.card:hover,
.card:focus-within {
    transform: rotate(0) translateY(-3px);
}

/* Kawałek taśmy klejącej, jakby karta była przyklejona do ściany. */
.card::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 5.5rem;
    height: 1.6rem;
    background: var(--tape);
    transform: translateX(-50%) rotate(-4deg);
}

.card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    background: var(--card-tint);
}

.card__body {
    padding: 0.875rem 0.5rem 0.5rem;
}

.card h2,
.card h3 {
    margin: 0 0 0.375rem;
    font-size: 1.4rem;
    font-weight: 700;
}

.card h2 a,
.card h3 a {
    color: inherit;
    text-decoration: none;
}

/* Cała karta klikalna, ale w HTML jest tylko jeden link (w tytule). */
.card h2 a::after,
.card h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.card time {
    display: inline-block;
    margin-bottom: 0.375rem;
    padding: 0 0.75rem;
    color: var(--ink);
    background: var(--card-tint);
    border-radius: 999px;
}

.card p {
    margin: 0;
    color: var(--muted);
}

/* --- Skróty „Dla rodziców” (strona główna) -------------------------------- */

/* Pod powitaniem. Na wąskich ekranach wszystko jedno pod drugim: nagłówek, kafelki, dzień wolny,
   jadłospis na dziś. */
.parents {
    display: grid;
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.parents:first-child {
    margin-top: 0;
}

.parents__title {
    margin: 0;
}

/* Na szerokich ekranach dwie kolumny: nagłówki w jednym rzędzie, a kafelki i kartka w drugim,
   rozciągnięte do tej samej wysokości – górne i dolne krawędzie się pokrywają. Kafelek jadłospisu
   zajmuje pod nimi całą szerokość. */
@media (min-width: 52rem) {
    .parents--split {
        grid-template-columns: minmax(0, 1fr) 15rem;
        grid-template-areas:
            "title label"
            "links leaf";
        column-gap: 2.5rem;
    }

    .parents--split .parents__title { grid-area: title; align-self: end; }
    .parents--split .parents__label { grid-area: label; align-self: end; }
    .parents--split .quick-links { grid-area: links; grid-auto-rows: 1fr; }
    .parents--split .day-off__leaf { grid-area: leaf; }
    /* Własny wiersz powstaje tylko wtedy, gdy kafelek jest – bez niego nie zostaje pusty odstęp. */
    .parents--split .menu-tile { grid-column: 1 / -1; }
}

.quick-links {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Na szerszych ekranach 2 × 2, żeby żaden kafelek nie został sam w rzędzie. Gdy dwa kafelki po 14rem się nie mieszczą
   (np. tekst powiększony do 200%), układ przechodzi w jedną kolumnę zamiast wychodzić poza ekran (WCAG 1.4.4). */
@media (min-width: 40rem) {
    .quick-links {
        grid-template-columns: repeat(auto-fit, minmax(max(14rem, calc(50% - 0.625rem)), 1fr));
    }
}

/* Kolor cienia kafelka wynika z jego rysunku (żółty zegar, brzoskwiniowy kalendarz…), a nie z miejsca na liście –
   po zmianie kolejności skrótów kolory zostają przy swoich stronach. Kształty rogów nadal się przeplatają. */
.quick-link { --link-accent: var(--lavender); }
.quick-link--clock { --link-accent: var(--sun); }
.quick-link--calendar { --link-accent: var(--peach); }
.quick-link--palette { --link-accent: var(--mint); }
.quick-link--camera { --link-accent: var(--lavender); }
.quick-links li:nth-child(2n) .quick-link { border-radius: var(--sketch-alt); }

/* Cały kafelek jest linkiem: rysunek po lewej, tytuł i krótki opis po prawej. */
.quick-link {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    column-gap: 0.875rem;
    align-items: center;
    align-content: center;   /* tytuł i opis razem, także gdy kafelek jest wyższy */
    height: 100%;
    padding: 0.875rem 1rem;
    color: var(--plum);
    text-decoration: none;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 4px 4px 0 var(--link-accent);
    transition: transform 0.2s, box-shadow 0.2s;
}

.quick-link:hover {
    color: var(--plum);
    transform: translate(-1px, -2px);
    box-shadow: 6px 6px 0 var(--link-accent);
}

.quick-link__icon {
    grid-row: span 2;
    width: 2.75rem;
    height: 2.75rem;
}

.quick-link__title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.quick-link__hint {
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.35;
}

/* Odręczny podpis nad kartką: „Najbliższy dzień wolny” albo „Teraz nieczynne”. */
.parents__label {
    margin: 0 0 -0.5rem;   /* bliżej kartki niż odstęp siatki */
    font-family: var(--font-hand);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--purple);
    transform: rotate(-2deg);
    transform-origin: left center;
}

/* Zwykła kartka z kalendarium. Na telefonie stoi na środku, razem z podpisem nad nią; na szerokim ekranie
   wypełnia wysokość komórki obok skrótów, a treść stoi na środku pod paskiem miesiąca. */
.day-off__leaf {
    display: grid;
    width: 100%;
    max-width: 15rem;
    justify-self: center;
    margin: 0;
    padding: 0.75rem 0 0;   /* miejsce na „kółeczka” kartki */
    list-style: none;
}

.day-off__leaf .calendar-leaf {
    padding-bottom: 1rem;
}

.day-off__leaf .calendar-leaf__month {
    margin-bottom: auto;
}

.day-off__leaf .calendar-leaf__kind {
    margin-bottom: auto;
}

@media (max-width: 51.99rem) {
    .parents__label {
        text-align: center;
        transform-origin: center;
    }
}

@media (min-width: 52rem) {
    .parents--split .day-off__leaf { justify-self: stretch; }
}

/* Szeroki kafelek „Jadłospis”: nagłówek jak w skrótach, pod nim posiłki na dziś w trzech kolumnach. */
.menu-tile {
    position: relative;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch-alt);
    box-shadow: 4px 4px 0 var(--peach);
}

.menu-tile__head {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 0.5rem 0.875rem;
    align-items: center;
}

.menu-tile__icon {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

.menu-tile__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
}

.menu-tile__when {
    margin: 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.35;
}

.menu-tile__more {
    grid-column: 1 / -1;
    font-weight: 700;
}

/* Cały kafelek prowadzi do jadłospisu, jak skróty „Dla rodziców” (link rozciągnięty na kafelek),
   i tak samo unosi się po najechaniu. */
.menu-tile__more::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.menu-tile {
    transition: transform 0.2s, box-shadow 0.2s;
}

.menu-tile:hover {
    transform: translate(-1px, -2px);
    box-shadow: 6px 6px 0 var(--peach);
}

.menu-tile:hover .menu-tile__icon {
    animation: wiggle 0.5s ease-in-out;
}

@media (min-width: 40rem) {
    .menu-tile__head {
        grid-template-columns: 2.75rem 1fr auto;
    }

    .menu-tile__more {
        grid-column: auto;
    }
}

.menu-tile__meals {
    display: grid;
    gap: 0.75rem 2rem;
    margin: 0.875rem 0 0;
    padding-top: 0.875rem;
    border-top: 2px dashed var(--lavender);
}

@media (min-width: 40rem) {
    .menu-tile__meals {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

.menu-tile__meals dt {
    font-family: var(--font-hand);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--purple);
}

.menu-tile__meals dd {
    margin: 0;
    font-weight: 700;
    line-height: 1.4;
    color: var(--plum);
}

/* --- „Dlaczego warto” (strona główna) ------------------------------------- */

/* Lista w dwóch kolumnach z kredkowym znaczkiem przy każdym punkcie – lżejsza niż osiem kart. */
.feature-grid {
    display: grid;
    column-gap: 3.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    border-bottom: 2px dashed var(--lavender);
}

.feature {
    --feature-tint: var(--mint-50);

    display: grid;
    grid-template-columns: 3.25rem 1fr;
    column-gap: 1.125rem;
    align-content: start;
    padding: 1.25rem 0;
    border-top: 2px dashed var(--lavender);
}

/* Co trzeci kolor (jak znaczki w szablonie), żeby w dwóch kolumnach kolory się mieszały. */
.feature:nth-child(3n + 2) { --feature-tint: var(--peach-50); }
.feature:nth-child(3n + 3) { --feature-tint: var(--lavender-50); }

.feature__mark {
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    background: var(--feature-tint);
    border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
}

/* Ikony to rysunki kredką (WebP z przezroczystym tłem) w static/img/icons. */
.feature__icon {
    width: 3rem;
    height: 3rem;
}

.feature h3 {
    margin: 0.25rem 0 0.25rem;
    font-size: 1.25rem;
}

.feature p {
    margin: 0;
    color: var(--muted);
}

/* Zaproszenie na końcu strony głównej. */
.closing {
    text-align: center;
}

.closing .hero__actions {
    justify-content: center;
    margin-top: 1rem;
}

/* --- Artykuł (aktualność) ------------------------------------------------- */

.article-image {
    margin-block: 1.5rem;
    border: var(--outline);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--lavender);
}

/* Odnośnik z aktualności do albumu w galerii za hasłem. */
.album-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--lavender-50);
    border: var(--outline);
    border-radius: var(--sketch-alt);
}

.album-link__icon {
    width: 2rem;
    height: 2rem;
}

.album-link p {
    flex: 1 1 16rem;
    margin: 0;
}

.empty-note {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    color: var(--muted);
    background: var(--lavender-50);
    border: 2px dashed var(--lavender);
    border-radius: 14px;
}

/* Przypomnienie w galerii, że zdjęcia są tylko do użytku prywatnego. */
.privacy-note {
    max-width: 68ch;
    margin: 2.5rem 0 0;
    padding: 0.75rem 1.25rem;
    color: var(--muted);
    border-left: 4px solid var(--lavender);
}

.privacy-note strong {
    color: var(--ink);
}

.back-link {
    margin-top: 2.5rem;
    font-family: var(--font-hand);
    font-size: 1.4rem;
}

/* --- Plan dnia (tabela) ---------------------------------------------------- */

.schedule {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;   /* „collapse” nie pozwala zaokrąglić rogów tabeli */
    border-spacing: 0;
    overflow: hidden;
    background: var(--white);
    border: var(--outline);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--lavender);
}

.schedule th,
.schedule td {
    padding: 0.6rem 1rem;
    text-align: left;
    vertical-align: top;
}

.schedule thead th {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--white);
    background: var(--purple);
}

.schedule__part th {
    padding-block: 0.5rem;
    font-family: var(--font-hand);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--plum);
    background: var(--lavender-50);
    border-top: 2px solid var(--ink);
}

.schedule tbody:nth-of-type(2) .schedule__part th { background: var(--mint-50); }
.schedule tbody:nth-of-type(3) .schedule__part th { background: var(--peach-50); }
.schedule tbody:nth-of-type(4) .schedule__part th { background: #fff4d1; }
.schedule tbody:nth-of-type(5) .schedule__part th { background: var(--lavender-50); }

/* Grupa pod nazwą zajęć (harmonogram zajęć dodatkowych). */
.schedule__groups {
    display: block;
    margin-top: 0.125rem;
    line-height: 1.9;
}

/* --- Grupy przedszkolne (zajęcia dodatkowe) -------------------------------- */

/* Każda grupa ma stały kolor, ten sam w tabeli i w wyborze grupy. */
.group-chip {
    --chip: var(--mint-50);
    --chip-line: var(--mint);

    display: inline-block;
    padding: 0 0.625rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--plum);
    background: var(--chip);
    border: 2px solid var(--chip-line);
    border-radius: 999px;
}

.group-chip--1 { --chip: var(--mint-50); --chip-line: var(--mint); }
.group-chip--2 { --chip: var(--peach-50); --chip-line: var(--peach); }
.group-chip--3 { --chip: var(--lavender-50); --chip-line: var(--lavender); }
.group-chip--0 { --chip: #fff4d6; --chip-line: var(--sun); }
.group-chip--all { --chip: var(--white); --chip-line: var(--ink); }

.group-filter {
    margin: 1.5rem 0 1.75rem;
    padding: 0;
    border: 0;
}

.group-filter legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--purple);
}

.group-filter__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

/* Wybór grupy jako duże „etykiety” (min. 44 px wysokości) – kółko radia zostaje dla czytelności. */
.group-filter .group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 1rem;
    cursor: pointer;
}

.group-filter input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--purple);
}

.group-filter .group-chip:has(:checked) {
    border-color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
}

.group-filter .group-chip:has(:focus-visible) {
    outline: 3px dashed var(--purple);
    outline-offset: 3px;
}

.group-filter input:focus-visible {
    outline: none;
}

.group-filter__status {
    min-height: 1.6em;
    margin: 0.625rem 0 0;
    color: var(--muted);
}


.schedule tbody tr + tr td {
    border-top: 2px dashed var(--lavender-50);
}

/* Pionowa linia między kolumną godzin a zajęciami. */
.schedule td + td {
    border-left: 2px dashed var(--lavender);
}

.schedule thead th + th {
    border-left: 2px solid rgb(255 255 255 / 0.35);
}

.schedule__time {
    width: 1%;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--purple);
    white-space: nowrap;
}

.schedule td {
    overflow-wrap: anywhere;
}

.schedule__time time {
    display: inline;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

.schedule-note {
    padding: 1.25rem 1.5rem;
    background: var(--lavender-50);
    border: var(--outline);
    border-radius: var(--sketch-alt);
}

/* --- Kalendarium (kartki z kalendarza) ------------------------------------ */

.calendar {
    display: grid;
    gap: 2rem 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    margin: 2rem 0;
    padding: 0.5rem 0 0;
    list-style: none;
}

.calendar-leaf {
    --leaf-band: var(--peach);
    --leaf-tint: var(--peach-50);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--white);
    border: var(--outline);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--lavender);
    transform: rotate(-1deg);
}

.calendar-leaf:nth-child(even) {
    transform: rotate(1deg);
}

.calendar-leaf--event {
    --leaf-band: var(--mint);
    --leaf-tint: var(--mint-50);
}

/* Święto ustawowe (dodawane automatycznie) – lawendowy pasek, żeby odróżniało się od wpisów przedszkola. */
.calendar-leaf--holiday {
    --leaf-band: var(--lavender);
    --leaf-tint: var(--lavender-50);
}

/* Okres (np. przerwa wakacyjna) zajmuje dwie kolumny, jeśli są dostępne. */
@media (min-width: 24rem) {
    .calendar-leaf--range {
        grid-column: span 2;
    }
}

/* Dwa „kółeczka” jak przy kalendarzu zrywanym. */
.calendar-leaf::before,
.calendar-leaf::after {
    content: "";
    position: absolute;
    top: -0.6rem;
    width: 0.6rem;
    height: 1.2rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 0.4rem;
}

.calendar-leaf::before { left: 30%; }
.calendar-leaf::after { right: 30%; }

.calendar-leaf__month {
    align-self: stretch;
    padding: 0.45rem 0.5rem 0.35rem;
    font-family: var(--font-hand);
    font-size: 1.25rem;
    line-height: 1.2;
    background: var(--leaf-band);
    border-bottom: var(--outline);
    border-radius: 11px 11px 0 0;
}

.calendar-leaf__day {
    display: block;
    margin-top: 0.6rem;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--plum);
}

.calendar-leaf__day--range {
    margin-top: 1rem;
    font-size: 2rem;
}

.calendar-leaf__day time {
    display: inline;
    font: inherit;
    color: inherit;
}

.calendar-leaf__weekday {
    color: var(--muted);
    font-size: 0.9375rem;
}

.calendar-leaf__title {
    margin: 0.6rem 0.75rem 0;
    line-height: 1.3;
}

.calendar-leaf__kind {
    margin: 0.5rem 0.375rem 1rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.875rem;
    line-height: 1.35;
    background: var(--leaf-tint);
    border-radius: 999px;
}

/* --- Jadłospis ------------------------------------------------------------ */

/* Tydzień odczytany z PDF-a: na komputerze pięć kolumn jak w oryginale, na telefonie jeden dzień
   z wyborem nad listą (main.js). */
.menu-week {
    margin-top: 2rem;
}

.menu-week__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 2rem;
    margin-bottom: 1.25rem;
}

/* Informacja, że pokazany tydzień już minął (np. w weekend, przed wgraniem nowego PDF). */
.menu-week__notice {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: #fff4d6;
    border: 2px dashed var(--sun);
    border-radius: var(--sketch-alt);
}

.menu-week__title {
    margin: 0;
    font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    text-wrap: balance;
}

.menu-week__size {
    font-size: 1.125rem;
    color: var(--muted);
}

.day-filter {
    margin-top: 0;
}

/* Pięć dni w jednym rzędzie: skrót dnia, pod nim data. Kółko radia jest ukryte (zostaje dostępne
   z klawiatury), wybrany dzień ma pełne fioletowe tło. */
.day-filter .group-filter__options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.375rem;
}

.day-filter .group-chip {
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-height: 3.25rem;
    padding: 0.25rem;
    line-height: 1.2;
    text-align: center;
}

.day-filter input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.day-filter .group-chip:has(:checked) {
    color: var(--white);
    background: var(--purple);
}

.day-filter__date {
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.menu-week__days {
    display: grid;
    gap: 1.25rem;
}

@media (max-width: 63.99rem) {
    .menu-week--one-day .menu-day:not(.is-selected) {
        display: none;
    }
}

/* Każdy dzień zajmuje wiersze wspólnej siatki (subgrid): nagłówek i kolejne posiłki stoją na tej
   samej wysokości we wszystkich kolumnach, jak w tabeli. */
@media (min-width: 64rem) {
    .menu-week__days {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0 1rem;
    }

    .menu-day {
        display: grid;
        grid-row: span var(--rows, 4);
        grid-template-rows: subgrid;
        align-content: start;
    }

    .day-filter {
        display: none;
    }
}

.menu-day {
    --day-accent: var(--mint);

    padding: 1rem 1rem 1.25rem;
    background: var(--white);
    border: var(--outline);
    border-radius: 14px;
    box-shadow: 4px 4px 0 var(--day-accent);
}

.menu-day:nth-child(5n + 2) { --day-accent: var(--peach); }
.menu-day:nth-child(5n + 3) { --day-accent: var(--sun); }
.menu-day:nth-child(5n + 4) { --day-accent: var(--lavender); }

.menu-day--today {
    --day-accent: var(--purple);
}

.menu-day__title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: 0;
    font-size: 1.3125rem;
}

/* Data zawsze w osobnej linii, plakietka „Dziś” zostaje obok nazwy dnia. */
.menu-day__title time {
    flex-basis: 100%;
    order: 1;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--muted);
}

.menu-day__today {
    padding: 0 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--white);
    background: var(--purple);
    border-radius: 999px;
}

.menu-meal {
    margin: 0.875rem 0 0.25rem;
    padding-top: 0.625rem;
    font-family: var(--font-hand);
    font-size: 1.3125rem;
    font-weight: 400;
    color: var(--purple);
    border-top: 2px dashed var(--lavender);
}

.menu-dishes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-dish {
    padding: 0.3125rem 0;
}

.menu-dish__name {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    color: var(--plum);
}

.menu-dish__allergens {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--muted);
}

/* „Składniki” rozwijane; min. 24 px wysokości celu (WCAG 2.2, 2.5.8). */
.menu-dish__ingredients summary {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--purple);
    cursor: pointer;
}

.menu-dish__ingredients p {
    margin: 0.125rem 0 0.25rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--muted);
}

.menu-dish__ingredients strong,
.menu-week__legend strong {
    font-weight: 800;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.menu-week__legend {
    margin: 1.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* Karta z plikiem: pasek z okresem i przyciskami, pod nim podgląd PDF na całą szerokość. */
.menu-sheet {
    margin-top: 2rem;
    overflow: hidden;
    background: var(--white);
    border: var(--outline);
    border-radius: 14px;
    box-shadow: 5px 5px 0 var(--mint);
}

.menu-sheet__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--mint-50);
}

.menu-sheet__title {
    margin: 0;
    font-size: 1.375rem;
    text-wrap: balance;
}

.menu-sheet__meta {
    margin: 0.125rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
}

.menu-sheet__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin: 0;
}

/* Na telefonie przyciski jeden pod drugim na całą szerokość karty. */
.menu-sheet__actions .button {
    flex: 1 1 auto;
    text-align: center;
}

/* Telefony i tablety zamiast PDF w ramce pokazują pustą ramkę albo tylko kawałek strony,
   więc tam zostają przyciski. Ramka z loading="lazy" i display: none nie pobiera pliku. */
.menu-sheet__frame {
    display: none;
}

@media (min-width: 48rem) and (pointer: fine) {
    .menu-sheet__frame {
        display: block;
        width: 100%;
        aspect-ratio: 297 / 220;   /* A4 poziomo + pasek narzędzi przeglądarki */
        border: 0;
        border-top: var(--outline);
    }
}

.menu-empty {
    margin-top: 1.5rem;
    color: var(--muted);
}

.menu-note {
    margin-top: 2rem;
}

/* --- Galeria -------------------------------------------------------------- */

.gallery-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(min(45%, 13rem), 1fr));
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.gallery-grid figure {
    margin: 0;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 3px solid var(--ink);
    border-radius: 12px;
    transform: rotate(-1deg);
    transition: transform 0.2s;
}

.gallery-grid li:nth-child(even) img {
    transform: rotate(1deg);
}

.gallery-grid a:hover img {
    transform: rotate(0) scale(1.02);
}

.gallery-grid figcaption {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* Znaczek na miniaturze GIF-a: miniatura stoi, animacja jest w podglądzie. */
.gallery-grid a {
    position: relative;
    display: block;
}

.gallery-grid__badge {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    padding: 0 0.5rem;
    font-family: var(--font-hand);
    font-size: 1.05rem;
    color: var(--ink);
    background: var(--sun);
    border: 2px solid var(--ink);
    border-radius: var(--sketch-alt);
}

/* Filmy: bez przycinania – pionowe nagrania z telefonu mieszczą się w ekranie z czarnymi pasami. */
.video-list {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.video {
    margin: 0;
}

.video video {
    display: block;
    width: 100%;
    max-height: 75vh;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    border: 3px solid var(--ink);
    border-radius: 12px;
}

.video figcaption {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    color: var(--muted);
}

/* Opis „co dzieje się w filmie” – pod podpisem, w zwykłym kolorze tekstu, bo to treść, nie metadane. */
.video__description {
    display: block;
    margin-top: 0.25rem;
    color: var(--ink);
}

.video__frame {
    position: relative;
}

/* Duży przycisk „Odtwórz” na środku filmu (dodaje go main.js). */
.video__play {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
}

.video__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--sun);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 4px 4px 0 var(--lavender);
    transform: translate(-50%, -50%) rotate(-3deg);
    transition: transform 0.2s;
}

/* Trójkąt „play”, lekko przesunięty w prawo – optycznie na środku koła. */
.video__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.6rem;
    height: 1.8rem;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    transform: translate(-35%, -50%);
}

.video__play:hover::before,
.video__play:focus-visible::before {
    transform: translate(-50%, -50%) rotate(0) scale(1.08);
}

.video__play:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 3px;
}

/* GIF w treści: przycisk zatrzymania pod obrazkiem. */
.animated-gif {
    margin: 0;
}

.animated-gif__toggle {
    margin-top: 0.75rem;
}

.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--white);
    background: rgb(43 31 58 / 0.94);
    overscroll-behavior: contain;
}

.lightbox::backdrop {
    background: rgb(0 0 0 / 0.6);
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    margin: 0;
    padding: 3.5rem 1rem 4.5rem;
}

.lightbox__figure img {
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.lightbox__figure figcaption:empty {
    display: none;
}

.lightbox button {
    position: absolute;
    padding: 0.5rem 1.1rem;
    font: inherit;
    font-weight: 800;
    color: var(--plum);
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 3px 3px 0 var(--lavender);
    cursor: pointer;
}

/* Przycisk „Zamknij” ma type="submit" – bez tego przejąłby wygląd zwykłych przycisków po najechaniu
   (biały napis na białym tle). */
.lightbox button:hover {
    color: var(--plum);
    background: var(--white);
}

.lightbox__close {
    top: 0.75rem;
    right: 0.75rem;
}

/* Pod GIF-em, w układzie podglądu – nie nachodzi na „Poprzednie”/„Następne” na wąskim ekranie. */
.lightbox .lightbox__motion {
    position: static;
    flex: none;
}

.lightbox__motion[hidden] {
    display: none;
}

.lightbox__position {
    position: absolute;
    top: 1rem;
    left: 1rem;
    margin: 0;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--sun);
}

.lightbox__prev {
    bottom: 1rem;
    left: 1rem;
}

.lightbox__next {
    bottom: 1rem;
    right: 1rem;
}

/* --- Stronicowanie i formularze ------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    font-family: var(--font-hand);
    font-size: 1.3rem;
}

.pagination .button {
    font-family: var(--font-body);
    font-size: 1rem;
}

.form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.form input[type="password"] {
    width: 100%;
    max-width: 20rem;
    margin-bottom: 1.25rem;
    padding: 0.625rem 0.875rem;
    font: inherit;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch-alt);
}

.form .errorlist {
    padding-left: 1.25rem;
    color: var(--danger);
}

.form__error {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--danger);
}

/* Formularz hasła na „karteczce”: pole i przycisk w jednym rzędzie, na wąskim ekranie jeden pod drugim. */
.password-card {
    max-width: 30rem;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 6px 6px 0 var(--lavender);
}

.password-card__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

.password-card__row input[type="password"] {
    flex: 1 1 12rem;
    margin-bottom: 0;
}

/* --- Dane kontaktowe ------------------------------------------------------ */

.contact-details {
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.contact-details address {
    font-style: normal;
}

.contact-details p {
    margin: 0 0 0.5rem;
}

.contact-details h2 {
    margin: 0 0 0.5rem;
    font-size: 1.375rem;
}

/* Na stronie kontaktu dane są na „karteczce”. */
.contact-details p,
.contact-details a {
    overflow-wrap: anywhere;
}

.contact-card__map {
    margin: 1rem 0 0;
}

.contact-card {
    margin-block: 1.5rem 2rem;
    padding: 1.5rem;
    background: var(--white);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 6px 6px 0 var(--mint);
}

/* --- Stopka --------------------------------------------------------------- */

.site-footer {
    position: relative;
    margin-top: 48px;
    padding-block: 1.5rem 9.5rem;
    color: var(--white);
    background: var(--plum) url("../img/doodles/footer-pattern.01db57d5703c.svg") no-repeat right 1rem bottom 0.75rem / 17rem auto;
}

/* Na telefonie wzorek mniejszy i w prawym dolnym rogu, żeby nie wchodził na tekst. */
@media (max-width: 47.99rem) {
    .site-footer {
        padding-bottom: 7rem;
        background-position: right 0.5rem bottom 0.5rem;
        background-size: 11rem auto;
    }
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: -47px 0 auto;
    height: 48px;
    background: url("../img/doodles/wave-footer.553cf623d9a7.svg") repeat-x left bottom / 640px 48px;
}

.site-footer a {
    color: var(--white);
}

.site-footer a:hover {
    color: var(--sun);
}

/* Fioletowa ramka fokusu ginie na ciemnym tle – tu jest żółta (kontrast ok. 9:1). */
.site-footer :focus-visible,
.lightbox :focus-visible {
    outline-color: var(--sun);
}

.site-footer h2 {
    font-family: var(--font-hand);
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--sun);
}

/* Trzy równe kolumny: dane kontaktowe, godziny otwarcia, informacje. */
.site-footer__grid {
    display: grid;
    gap: 1.5rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Kolumny bloku kontaktowego stają się bezpośrednio kolumnami siatki stopki. */
.site-footer .contact-details {
    display: contents;
}

.site-footer__links h2 {
    margin: 0 0 0.5rem;
}

.site-footer__links ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__copy {
    margin: 1.75rem 0 0;
    padding-top: 1rem;
    font-size: 0.875rem;
    color: #e3d9f7;
    border-top: 2px dashed rgb(255 255 255 / 0.2);
}

/* --- Strona błędu ---------------------------------------------------------- */

/* Zamek z numerem błędu „naklejonym” obok, a po prawej wyjaśnienie i przycisk. */
.error-page {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2rem 4rem;
    padding-block: 1.5rem 2rem;
}

/* Numer stoi nad zamkiem, przy prawej krawędzi – nie zasłania rysunku. */
.error-page__art {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: min(16rem, 70vw);
}

.error-page__castle {
    width: 100%;
    height: auto;
}

.error-page__code {
    order: -1;
    align-self: flex-end;
    margin: 0 -1rem 0.5rem 0;
    padding: 0.1rem 0.9rem;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--plum);
    background: var(--sun);
    border: var(--outline);
    border-radius: var(--sketch);
    box-shadow: 4px 4px 0 var(--lavender);
    transform: rotate(8deg);
}

.error-page__text {
    flex: 1 1 22rem;
    max-width: 34rem;
}

/* Skróty pod przyciskiem na stronie 404: to, czego rodzice szukają najczęściej. */
.error-page__shortcuts {
    margin-top: 2rem;
}

.error-page__shortcuts p {
    margin: 0 0 0.5rem;
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--purple);
}

.error-page__shortcuts ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 700;
}

/* --- Bazgroły w marginesach podstron --------------------------------------- */

/* Na szerokich ekranach puste boki obok kolumny tekstu dostają rzadko rozsiane, przygaszone rysunki
   (static/img/doodles/margin-*.svg). Pas rysunków biegnie wzdłuż całej strony, a nie każdego bloku osobno –
   przy krótkim bloku (np. sam tytuł i wstęp) kafelek z rysunkami był ucinany w połowie. Tylko na stronach,
   których wszystkie bloki leżą w kolumnie tekstu (siatki kart na całą szerokość nie dostają rysunków na sobie),
   i tylko tam, gdzie po obu stronach kolumny jest co najmniej 10 rem wolnego miejsca. */
@media (min-width: 75rem) {
    .page--margins:not(:has(> :not(.content))) {
        position: relative;
    }

    .page--margins:not(:has(> :not(.content)))::before,
    .page--margins:not(:has(> :not(.content)))::after {
        content: "";
        position: absolute;
        top: 7.5rem;
        bottom: 2rem;
        width: 10rem;
        /* round: tyle całych kafelków (po 6 rysunków), ile się zmieści, lekko powiększonych albo pomniejszonych
           tak, żeby pas wypełnił całą wysokość – bez pustego dołu i bez uciętych rysunków. Szerokość „auto”
           zachowuje proporcje rysunków. */
        background: url("../img/doodles/margin-left.8db352521860.svg") no-repeat round center top / auto 48.75rem;
        opacity: 0.75;
        /* Na niskiej stronie ostatni rysunek nie urywa się ostro, tylko łagodnie znika. */
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
        pointer-events: none;
    }

    .page--margins:not(:has(> :not(.content)))::before {
        right: calc(50% + var(--content) / 2 + 3rem);
    }

    .page--margins:not(:has(> :not(.content)))::after {
        left: calc(50% + var(--content) / 2 + 3rem);
        background-image: url("../img/doodles/margin-right.21917814c501.svg");
    }
}

/* Krótka strona z samym formularzem hasła: zmniejszony kafelek dałby malutkie rysunki – zostają w naturalnym
   rozmiarze, a ostatni łagodnie znika (maska wyżej). */
@media (min-width: 75rem) {
    .page--margins:has(.password-card)::before,
    .page--margins:has(.password-card)::after {
        background-repeat: no-repeat;
    }
}

/* Strony z szerokim blokiem pod tekstem (np. galeria zdjęć na „O nas”): rysunki tylko obok bloków tekstu. */
@media (min-width: 75rem) {
    .page--margins:has(> :not(.content)) > .content {
        position: relative;
    }

    .page--margins:has(> :not(.content)) > .content::before,
    .page--margins:has(> :not(.content)) > .content::after {
        content: "";
        position: absolute;
        top: 5rem;
        bottom: 0;
        width: 10rem;
        /* round: tyle całych kafelków (po 6 rysunków), ile się zmieści, lekko powiększonych albo pomniejszonych
           tak, żeby pas wypełnił całą wysokość – bez pustego dołu i bez uciętych rysunków. Szerokość „auto”
           zachowuje proporcje rysunków. */
        background: url("../img/doodles/margin-left.8db352521860.svg") no-repeat round center top / auto 48.75rem;
        opacity: 0.75;
        /* Na niskiej stronie ostatni rysunek nie urywa się ostro, tylko łagodnie znika. */
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
        pointer-events: none;
    }

    .page--margins:has(> :not(.content)) > .content::before {
        right: calc(100% + 3rem);
    }

    .page--margins:has(> :not(.content)) > .content::after {
        left: calc(100% + 3rem);
        background-image: url("../img/doodles/margin-right.21917814c501.svg");
    }
}

@media print {
    .page--margins::before,
    .page--margins::after,
    .page--margins > .content::before,
    .page--margins > .content::after {
        content: none;
    }
}

/* --- Ograniczenie ruchu --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Animacje ------------------------------------------------------------- */
/* Krótkie i „kredkowe”. Przy „ograniczaniu ruchu” wyłącza je reguła prefers-reduced-motion wyżej
   (elementy od razu w stanie końcowym), a przejścia między stronami włączają się tylko bez niej. */

/* Ikonki w kafelkach i różdżka przy nazwie kołyszą się po najechaniu. */
.quick-link:hover .quick-link__icon,
.site-name:hover .site-name__mark {
    animation: wiggle 0.5s ease-in-out;
}

@keyframes wiggle {
    25% { transform: rotate(-8deg); }
    50% { transform: rotate(6deg); }
    75% { transform: rotate(-3deg); }
}

/* Zdjęcie, które jeszcze się wczytuje: lawendowe tło z przesuwającym się jaśniejszym „pociągnięciem kredki”.
   Wczytane kawałki zdjęcia są w tym czasie przesunięte poza ramkę (object-position), więc zdjęcie nie
   wyłania się pasami od góry – pokazuje się w całości, gdy jest gotowe (klasy ustawia main.js). */
.anim img.is-loading {
    object-position: -100vw 0;
    color: transparent;   /* Firefox pokazuje opis zdjęcia (alt), dopóki się wczytuje – czytniki ekranu nadal go mają */
    background:
        linear-gradient(100deg, transparent 25%, rgb(255 255 255 / 0.95) 50%, transparent 75%) 0 0 / 250% 100% no-repeat,
        color-mix(in srgb, var(--lavender) 75%, var(--white));
    animation: img-shimmer 1.2s ease-in-out infinite;
}

@keyframes img-shimmer {
    from { background-position: 100% 0, 0 0; }
    to { background-position: -50% 0, 0 0; }
}

/* W galerii pas przechodzi falą: każdy kolejny kafelek w rzędzie trochę później. */
.anim .gallery-grid li:nth-child(5n + 2) img.is-loading { animation-delay: 0.1s; }
.anim .gallery-grid li:nth-child(5n + 3) img.is-loading { animation-delay: 0.2s; }
.anim .gallery-grid li:nth-child(5n + 4) img.is-loading { animation-delay: 0.3s; }
.anim .gallery-grid li:nth-child(5n + 5) img.is-loading { animation-delay: 0.4s; }

@keyframes page-out {
    to { opacity: 0; }
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(0.875rem); }
}

/* Przeglądarki bez płynnych przejść między stronami (np. Firefox): treść strony łagodnie się pojawia
   po wczytaniu. Klasę .page-fade ustawia skrypt w <head> (head_assets.html) tylko tam, gdzie przejść nie ma. */
.page-fade main {
    animation: page-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Przycisk formularza po wysłaniu: „Wysyłanie…” i kropki zamiast kolejnego kliknięcia. */
button[aria-busy="true"] {
    cursor: progress;
    opacity: 0.85;
}

button[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    width: 1.2em;
    text-align: left;
    vertical-align: bottom;
    animation: busy-dots 1.2s steps(4) infinite;
}

@keyframes busy-dots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

/* Płynne przejścia między podstronami (View Transitions): treść się przenika, nagłówek z menu
   stoi w miejscu. Przeglądarki bez tej funkcji przechodzą zwyczajnie. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    /* view-transition-name tworzy osobną warstwę nagłówka – bez z-index belka z zamkiem przykryłaby
       rozwinięte podmenu. */
    .site-header {
        position: relative;
        z-index: 40;
        view-transition-name: site-header;
    }

    /* Stara strona szybko blednie, nowa łagodnie wjeżdża z dołu – jak kolejna kartka w zeszycie. */
    ::view-transition-old(root) {
        animation: page-out 0.12s ease-out both;
    }

    ::view-transition-new(root) {
        animation: page-in 0.3s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;   /* dopiero gdy stara zniknie – bez nakładania się */
    }
}

/* --- Animacje, etap 2 ------------------------------------------------------ */

/* Wjeżdżanie przy przewijaniu: elementy poniżej pierwszego ekranu lekko wjeżdżają od dołu, raz, jeden po
   drugim (--reveal-delay). Klasy ustawia main.js tylko przy .anim – bez JS i przy ograniczaniu ruchu
   wszystko jest widoczne od razu. Właściwość translate (nie transform) – kafelki i kartki zachowują
   swoje obroty i uniesienie po najechaniu; po animacji main.js zdejmuje klasy. */
.anim .reveal {
    opacity: 0;
}

.anim .reveal.is-visible {
    animation: reveal-in 0.5s var(--reveal-delay, 0s) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes reveal-in {
    from {
        opacity: 0;
        translate: 0 1.25rem;
    }
    to {
        opacity: 1;
    }
}

@media print {
    .anim .reveal {
        opacity: 1;
    }
}

/* Żyjący zamek: chmurki odpływają i wracają, iskierki dwa razy mrugają. Wszystko po wczytaniu strony,
   krócej niż 5 s, potem stoi (WCAG 2.2.2 – bez przycisku pauzy ruch nie może trwać dłużej). */
.anim .hero__sky--cloud {
    animation: cloud-drift 2s 0.3s ease-in-out 2 alternate;
}

.anim .hero__sky--cloud-small {
    animation: cloud-drift-small 1.8s 0.5s ease-in-out 2 alternate;
}

.anim .hero__sky--sparkle {
    animation: twinkle 0.9s 0.4s ease-in-out 2;
}

.anim .hero__sky--sparkle-small {
    animation: twinkle 0.9s 0.9s ease-in-out 2;
}

@keyframes cloud-drift {
    to { translate: -1rem 0; }
}

@keyframes cloud-drift-small {
    to { translate: 0.75rem 0; }
}

@keyframes twinkle {
    50% {
        scale: 1.35;
        rotate: 15deg;
        opacity: 0.7;
    }
}