/* Fonty hostowane lokalnie i zawezone do znakow uzywanych na stronie.
   Powod: jedno polaczenie mniej przy wczytywaniu i zero adresow IP
   rodzicow wysylanych do Google przy kazdym wejsciu. */

@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/baloo-2-600-ext.woff2') format('woff2');
	unicode-range: U+0020, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/baloo-2-600-lat.woff2') format('woff2');
	unicode-range: U+0020-007E, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00F6, U+00F8-00FD, U+00FF, U+2013-2014, U+2019-201A, U+201D-201E, U+2022, U+2026, U+20AC, U+2122;
}
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/baloo-2-700-ext.woff2') format('woff2');
	unicode-range: U+0020, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: 'Baloo 2';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/baloo-2-700-lat.woff2') format('woff2');
	unicode-range: U+0020-007E, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00F6, U+00F8-00FD, U+00FF, U+2013-2014, U+2019-201A, U+201D-201E, U+2022, U+2026, U+20AC, U+2122;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/hanken-grotesk-400-ext.woff2') format('woff2');
	unicode-range: U+0020, U+0041, U+00C1, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/hanken-grotesk-400-lat.woff2') format('woff2');
	unicode-range: U+0020-007E, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00F6, U+00F8-00FD, U+00FF, U+2013-2014, U+2019-201A, U+201D-201E, U+2022, U+2026, U+20AC, U+2122;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/hanken-grotesk-600-ext.woff2') format('woff2');
	unicode-range: U+0020, U+0041, U+00C1, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/hanken-grotesk-600-lat.woff2') format('woff2');
	unicode-range: U+0020-007E, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00F6, U+00F8-00FD, U+00FF, U+2013-2014, U+2019-201A, U+201D-201E, U+2022, U+2026, U+20AC, U+2122;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/hanken-grotesk-700-ext.woff2') format('woff2');
	unicode-range: U+0020, U+0041, U+00C1, U+0104-0107, U+0118-0119, U+0141-0144, U+015A-015B, U+0179-017C;
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/hanken-grotesk-700-lat.woff2') format('woff2');
	unicode-range: U+0020-007E, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00CF, U+00D1-00DD, U+00DF-00EF, U+00F1-00F6, U+00F8-00FD, U+00FF, U+2013-2014, U+2019-201A, U+201D-201E, U+2022, U+2026, U+20AC, U+2122;
}

/* =========================================================
   Cogito, szkoła dla dzieci. Arkusz wspólny.
   Kolory i kroje: dane/brand-guide.md, sekcja Cogito.
   ZASADA ANTY-AI: gradient granat-magenta żyje wyłącznie
   w pasku 6 px na górze. Nigdy jako tło hero ani sekcji.
   Limonka jest akcentem (kreska, punktor, ramka), nie tłem.
   ========================================================= */

:root {
	--granat: #393185;
	--granat-ciemny: #2C2668;
	--limonka: #B0CB1F;
	--magenta: #A82682;
	--magenta-ciemna: #8E1F6E;
	--tekst: #2A2A35;
	--tekst-2: #5B5B6B;
	--linia: #E4E4EC;
	--tlo-jasne: #F6F6F9;
	--tlo-limonka: #FCFDF2;
	--biel: #FFFFFF;

	--max: 1140px;
	--radius: 14px;
	--cien: 0 2px 8px rgba(41, 38, 104, .07);
	--cien-mocny: 0 8px 28px rgba(41, 38, 104, .13);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--tekst);
	background: var(--biel);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	/* Naglowki: Baloo 2 (wybor Roberta 07.08.2026 z 5 wariantow).
	   Tekst: Hanken Grotesk, czyli HK Grotesk z ksiegi znaku Edukido.
	   Core Humanist Sans (tytulowy z ksiegi) jest komercyjny, nie mamy go. */
	font-family: "Baloo 2", system-ui, sans-serif;
	color: var(--granat);
	line-height: 1.18;
	margin: 0 0 .6em;
	font-weight: 700;
}

h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }

p { margin: 0 0 1.1em; }
a { color: var(--magenta); }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* ---------- pasek marki (jedyne miejsce na gradient) ---------- */
.pasek-marki { height: 6px; background: linear-gradient(90deg, var(--granat), var(--magenta)); }

/* ---------- belka ogłoszeniowa: trwają zapisy ---------- */
.belka-zapisy {
	background: var(--limonka); color: var(--granat);
	font-family: "Hanken Grotesk", sans-serif; font-weight: 600; font-size: .96rem;
	text-align: center; padding: 10px 20px;
}
.belka-zapisy .wrap {
	display: flex; align-items: center; justify-content: center;
	gap: 8px 16px; flex-wrap: wrap;
}
.belka-zapisy svg { width: 18px; height: 18px; flex-shrink: 0; }
.belka-zapisy a {
	color: var(--granat); text-decoration: underline; text-underline-offset: 3px;
	font-weight: 700; white-space: nowrap;
}
.belka-zapisy a:hover { color: var(--magenta); }
@media (max-width: 600px) {
	.belka-zapisy { font-size: .88rem; padding: 9px 14px; }
}

/* ---------- góra strony: belka + nagłówek jadą razem ----------
   Belka o zapisach ma być widoczna cały czas, nie tylko na samym początku.
   Przykleja się cały pojemnik, a nie każdy pasek osobno, bo wysokość belki
   zmienia się przy zawijaniu tekstu na wąskim ekranie i sztywne odsunięcie
   nagłówka rozjechałoby się przy pierwszym dłuższym ogłoszeniu.
   Strony bez belki (polityka, standardy) nie mają tego pojemnika i tam
   przykleja się sam nagłówek, regułą niżej. */
.gora { position: sticky; top: 0; z-index: 60; }

/* 🔴 GÓRA MA STAŁĄ WYSOKOŚĆ i nie wolno przywracać kurczenia bez przeczytania:

   Góra jest przyklejona, ale zajmuje miejsce w układzie strony. Zmiana jej
   wysokości w trakcie przewijania przesuwa treść pod nią, co zmienia pozycję
   przewijania, co znów przekracza próg w drugą stronę. Efekt: miganie
   i podskakiwanie w punkcie przełączenia, widoczne najmocniej tam, gdzie menu
   mija krawędź zdjęcia.

   Miejsce na wąskim ekranie odzyskujemy inaczej: nagłówek jest tam po prostu
   niższy od początku, regułą przy .naglowek niżej. */
/* ---------- nagłówek ---------- */
.naglowek {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--linia);
}
/* 🔴 Logo bylo SCISNIETE (31.08.2026). Naglowek to flex, a jedynym elementem,
   ktory mogl sie skurczyc, byl odsylacz z logo: menu ma dziewiec pozycji z
   `white-space: nowrap`, przycisk ma `flex-shrink: 0`. Do tego globalna regula
   `img { max-width: 100% }` zwezala obrazek, gdy jego kontener sie skurczyl,
   przy sztywnej `height: 76px`, czyli deformowala proporcje. Trzy leki naraz:
   logo nie kurczy sie w ogole, obrazek nie daje sie zwezic, a naglowek dostaje
   wiecej miejsca niz kolumna tresci (1280 zamiast 1140), zeby menu i tak weszlo. */
.naglowek .wrap { display: flex; align-items: center; gap: 16px; min-height: 96px; max-width: 1280px; }
.logo { flex-shrink: 0; }
.logo img { height: 76px; width: auto; max-width: none; }
@media (max-width: 900px) {
	/* niższa góra na wąskim ekranie, ale stała: bez zmiany w trakcie przewijania */
	.naglowek .wrap { min-height: 66px; }
	.logo img { height: 52px; }
	.belka-zapisy { padding-top: 7px; padding-bottom: 7px; font-size: .86rem; }
}
.menu { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.menu a {
	position: relative; color: var(--granat); text-decoration: none;
	font-weight: 600; font-size: .9rem; padding: 8px 8px; border-radius: 9px;
	white-space: nowrap; /* 🔴 bez tego pozycje łamią się na dwie linie */
	transition: background .18s, color .18s, transform .18s;
}
/* 🔴 Wyróżnienie kreską, nie tłem. Zaokrąglony prostokąt pod napisem
   kłócił się z pikselowym przyciskiem obok: dwa różne języki kształtu
   w tym samym pasku. Kreska jest neutralna i nie konkuruje z przyciskiem. */
.menu a::after {
	content: ""; position: absolute;
	left: 11px; right: 11px; bottom: 2px; height: 3px;
	background: var(--limonka); border-radius: 2px;
	transform: scaleX(0); transform-origin: left center;
	transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.menu a:hover, .menu a:focus-visible { color: var(--magenta); }
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
/* pozycja bieżącej strony: kreska widoczna na stałe */
.menu a[aria-current="page"] { color: var(--magenta); }
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a.zewnetrzny::after {
	content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 5px;
	vertical-align: -1px; opacity: .55;
	background: currentColor;
	-webkit-mask: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,9 L20,9 L20,15 L40,15 L40,21 L60,21 L60,27 L80,27 L80,33 L100,33 L100,39 L120,39 L120,45 L140,45 L160,45 L180,45 L180,39 L200,39 L200,33 L220,33 L220,27 L240,27 L240,21 L260,21 L260,15 L280,15 L280,54 L0,54 Z'/%3E%3C/svg%3E");
	mask: no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0,9 L20,9 L20,15 L40,15 L40,21 L60,21 L60,27 L80,27 L80,33 L100,33 L100,39 L120,39 L120,45 L140,45 L160,45 L180,45 L180,39 L200,39 L200,33 L220,33 L220,27 L240,27 L240,21 L260,21 L260,15 L280,15 L280,54 L0,54 Z'/%3E%3C/svg%3E");
}

/* przycisk zapisu wpięty w przyklejoną belkę górną */
.naglowek .btn-naglowek {
	padding: 11px 22px; font-size: .96rem; white-space: nowrap; flex-shrink: 0;
}

.menu-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--granat); margin: 5px 0; }

/* ---------- przyciski ---------- */
.btn {
	display: inline-block; padding: 14px 28px; border-radius: 999px;
	font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: 1rem;
	text-decoration: none; border: 2px solid transparent; cursor: pointer;
	transition: background .15s, color .15s, transform .1s;
}
.btn-glowny { background: var(--magenta); color: #fff; }
.btn-glowny:hover { background: var(--magenta-ciemna); transform: translateY(-1px); }
.btn-drugi {
	/* Bez ramki, tylko limonkowa kreska pod napisem. Owalna obwódka kłóciła
	   się z pikselowym kształtem przycisku głównego, a dwa pełne przyciski
	   obok siebie odbierają pierwszeństwo temu, na którym nam zależy. */
	background: transparent;
	border: 0;
	color: var(--granat);
	border-radius: 0;
	padding: 13px 6px 11px;
	box-shadow: inset 0 -3px 0 var(--limonka);
	transition: box-shadow .18s ease, color .18s ease;
}
.btn-drugi:hover, .btn-drugi:focus-visible {
	color: var(--magenta);
	box-shadow: inset 0 -3px 0 var(--magenta);
}
/* na granacie kreska i napis muszą być jasne */
.zapis .btn-drugi, .hero--ciemny .btn-drugi { color: #fff; box-shadow: inset 0 -3px 0 var(--limonka); }
.zapis .btn-drugi:hover { color: var(--limonka); }
.btn-jasny { background: #fff; color: var(--granat); }
.btn-jasny:hover { background: var(--tlo-limonka); }

/* ---------- hero (bez gradientu, zdjęcie + jednolity kolor) ---------- */
.hero { background: var(--tlo-jasne); padding: 56px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero p.lead { font-size: 1.18rem; color: var(--tekst-2); max-width: 34em; }
.hero-foto img { border-radius: var(--radius); box-shadow: var(--cien-mocny); }
.hero .cta-grupa { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

.kreska { display: block; width: 56px; height: 4px; background: var(--limonka); border-radius: 2px; margin-bottom: 20px; }

/* ---------- liczby (dowód) ---------- */
.liczby { background: var(--granat); color: #fff; padding: 34px 0 30px; }
.liczby .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; text-align: center; }
/* krój cyfr jest niżej, w sekcji o matrycy */

/* ---------- sekcje ---------- */
section { padding: 64px 0; }
section.jasna { background: var(--tlo-jasne); }
.sekcja-naglowek { max-width: 46em; margin-bottom: 38px; }
.sekcja-naglowek p { color: var(--tekst-2); font-size: 1.1rem; margin-bottom: 0; }

/* ---------- karty oferty ---------- */
.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.karta {
	background: #fff; border: 1px solid var(--linia); border-radius: var(--radius);
	overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--cien);
	transition: transform .15s, box-shadow .15s;
}
.karta:hover { transform: translateY(-3px); box-shadow: var(--cien-mocny); }
.karta img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.karta-tresc { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.wiek {
	display: inline-block; align-self: flex-start; margin-bottom: 10px;
	background: var(--tlo-limonka); border: 1px solid var(--limonka);
	color: var(--granat); font-weight: 600; font-size: .85rem;
	padding: 3px 12px; border-radius: 999px;
}
.karta ul { margin: 0 0 18px; padding: 0; list-style: none; }
.karta li { position: relative; padding-left: 22px; margin-bottom: 7px; color: var(--tekst-2); }
.karta li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; border-radius: 2px; background: var(--limonka);
}
.karta .btn { margin-top: auto; align-self: flex-start; }
.marka { font-size: .9rem; color: var(--tekst-2); margin: -4px 0 12px; }
.marka b { color: var(--granat); }

/* ---------- czym się różnimy ---------- */
.roznice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.roznica {
	background: #fff; border: 1px solid var(--linia); border-left: 4px solid var(--limonka);
	border-radius: 10px; padding: 24px 26px;
	/* Ikona w kolumnie obok tekstu, nie nad nim. Karta czyta się poziomo,
	   a ikona ma tyle miejsca, żeby dało się w niej cokolwiek narysować. */
	display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start;
}
.roznica-tresc { min-width: 0; }   /* pozwala tekstowi zawijać się w wąskiej kolumnie */
.roznica h3 { margin-bottom: .35em; }
.roznica p { margin: 0; color: var(--tekst-2); }
/* karta bez ikony nie ma pustej kolumny */
.roznica:not(:has(.roznica-ikona)) { display: block; }

@media (max-width: 520px) {
	/* na wąskim ekranie ikona wraca nad tekst, ale zostaje duża */
	.roznica { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- opinie ---------- */
.opinie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.opinia { background: #fff; border: 1px solid var(--linia); border-radius: var(--radius); padding: 24px; }
.gwiazdki { color: #F4B400; letter-spacing: 2px; margin-bottom: 10px; }
.opinia p { font-size: 1rem; }
.opinia .autor { color: var(--tekst-2); font-size: .92rem; margin: 0; }

/* ---------- pasek zapisu ---------- */
.zapis { background: var(--granat); color: #fff; text-align: center; }
.zapis h2, .zapis p { color: #fff; }
.zapis p { max-width: 40em; margin-inline: auto; opacity: .92; }
.zapis .btn-grupa { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------- sekcja z tekstem i zdjęciem obok ---------- */
.tekst-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.tekst-foto.odwrocona > :first-child { order: 2; }
.tekst-foto img { border-radius: var(--radius); box-shadow: var(--cien-mocny); }
.tekst-foto .podpis { font-size: .92rem; color: var(--tekst-2); margin: 12px 0 0; }

/* ---------- taśma zdjęć, przewija się w pętli ----------
   Dwa identyczne zestawy obok siebie. Pierwszy przesuwa się
   o własną szerokość, w tym momencie drugi jest dokładnie
   w jego miejscu, więc skok jest niewidoczny i taśma
   wygląda na nieskończoną. */
.tasma { overflow: hidden; margin-top: 40px; position: relative; }
.tasma::before, .tasma::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.tasma::before { left: 0; background: linear-gradient(90deg, var(--tlo-jasne), transparent); }
.tasma::after { right: 0; background: linear-gradient(270deg, var(--tlo-jasne), transparent); }
.tasma-tor { display: flex; gap: 16px; width: max-content; animation: tasma-jazda 46s linear infinite; }
.tasma:hover .tasma-tor { animation-play-state: paused; }
.tasma img {
	width: 300px; height: 210px; object-fit: cover; border-radius: 12px;
	box-shadow: var(--cien); flex-shrink: 0;
}
@keyframes tasma-jazda {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 8px)); }
}
@media (max-width: 720px) {
	.tasma img { width: 220px; height: 155px; }
	.tasma::before, .tasma::after { width: 40px; }
}

/* pasek zdjęć w siatce (wariant zapasowy) */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 34px; }
.galeria img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; width: 100%; box-shadow: var(--cien); }
.galeria figure { margin: 0; }
.galeria figcaption { font-size: .86rem; color: var(--tekst-2); margin-top: 8px; }

@media (max-width: 900px) {
	.tekst-foto { grid-template-columns: 1fr; gap: 26px; }
	.tekst-foto.odwrocona > :first-child { order: 0; }
	.galeria { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- mapa miejscowości ---------- */
.mapa-box { display: grid; grid-template-columns: 1.55fr .45fr; gap: 36px; align-items: start; }
.mapa-google {
	width: 100%; height: 600px; border-radius: var(--radius);
	border: 1px solid var(--linia); box-shadow: var(--cien);
	background: var(--tlo-jasne); z-index: 1;
}
.mapa-google .leaflet-popup-content-wrapper { border-radius: 12px; }
.mapa-google .leaflet-popup-content { margin: 14px 18px; line-height: 1.5; }
.mapa-google .leaflet-container { font-family: "Hanken Grotesk", sans-serif; }

/* Wezwanie obok mapy. Zajmuje miejsce po liście 29 nazw, która powtarzała
   to, co widać na pinezkach. Jedyna rzecz w tej sekcji, po której rodzic
   może się odezwać, więc ma wyglądać jak zaproszenie, nie jak przypis. */
.mapa-zaproszenie {
	background: var(--tlo-limonka);
	border: 2px solid var(--limonka);
	border-radius: var(--radius);
	padding: 26px 24px 24px;
	/* Ta sama wysokość co mapa obok. Wcześniej ramka miała własną
	   i wystawała pod mapę, więc dół sekcji był poszarpany. */
	height: 480px;
	display: flex; flex-direction: column;
}
/* Tekst rozpycha się, przyciski siadają na dole: dzięki temu obie
   kolumny kończą się w tej samej linii niezależnie od długości tekstu. */
.mapa-zaproszenie p { flex: 1; }
.mapa-zaproszenie__ikona {
	display: grid; place-items: center;
	width: 52px; height: 52px; border-radius: 50%;
	background: var(--limonka); color: var(--granat); margin-bottom: 16px;
}
.mapa-zaproszenie__ikona svg { width: 27px; height: 27px; }
.mapa-zaproszenie h3 { font-size: 1.3rem; margin: 0 0 10px; color: var(--granat); }
.mapa-zaproszenie p { color: var(--tekst-2); font-size: .96rem; margin: 0 0 20px; }
.mapa-zaproszenie .btn {
	width: 100%; justify-content: center; text-align: center;
	white-space: nowrap;      /* numer telefonu nigdy nie łamie się na dwa wiersze */
	padding-left: 14px; padding-right: 14px;
}
.mapa-zaproszenie .btn + .btn { margin-top: 9px; }
/* Telefon jako tekst, nie drugi przycisk: przy wezwaniu do zgłoszenia
   ma być jedna droga główna, a nie dwie równorzędne. */
.mapa-telefon {
	margin: 12px 0 0; text-align: center; font-size: .92rem; color: var(--tekst-2);
}
.mapa-telefon a { color: var(--granat); font-weight: 700; }
.mapa-zaproszenie .btn small {
	display: block; font-size: .74rem; font-weight: 600;
	opacity: .8; letter-spacing: .05em; text-transform: uppercase;
	margin-bottom: 1px;
}
.mapa-zaproszenie .btn b { font-size: 1.06rem; letter-spacing: .01em; }

@media (max-width: 900px) {
	.mapa-zaproszenie { height: auto; }
}


.mapa-lista { font-size: .95rem; }
.mapa-lista h3 { margin-bottom: .5em; }
.mapa-lista ul { list-style: none; margin: 0 0 18px; padding: 0; columns: 2; column-gap: 20px; }
.mapa-lista li { margin-bottom: 5px; color: var(--tekst-2); break-inside: avoid; }
.mapa-lista li::before { content: "•"; color: var(--limonka); font-weight: 700; margin-right: 7px; }
.mapa-lista .uwaga-woj {
	background: var(--tlo-limonka); border: 1px solid var(--limonka); border-radius: 10px;
	padding: 14px 16px; font-size: .92rem; color: var(--tekst-2);
}
@media (max-width: 900px) {
	.mapa-box { grid-template-columns: 1fr; gap: 24px; }
	.mapa-google { height: 440px; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 800px; }
.faq-uklad { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.faq-uklad .faq { max-width: none; }
.faq-foto { position: sticky; top: 120px; }
.faq-foto img { border-radius: var(--radius); box-shadow: var(--cien-mocny); }
.faq-foto .ramka {
	background: #fff; border: 1px solid var(--linia); border-left: 4px solid var(--limonka);
	border-radius: 10px; padding: 18px 20px; margin-top: 18px;
}
.faq-foto .ramka p { margin: 0; color: var(--tekst-2); font-size: .95rem; }
.faq-foto .ramka b { color: var(--granat); }
@media (max-width: 900px) {
	.faq-uklad { grid-template-columns: 1fr; gap: 28px; }
	.faq-foto { position: static; }
}
/* ---------- blok z telefonem pod pytaniami rodzicow ----------
   🔴 Stal wczesniej w waskiej kolumnie pod zdjeciem wiez z klockow: numer lamal
   sie na dwa wiersze, a caly blok gubil sie pod fotografia. Od 31.08.2026 stoi
   osobno, na calej szerokosci, wysrodkowany, a numer ma twarde spacje i wlasny
   rozmiar, wiec nie da sie go przelamac. */
.telefon-pomoc {
	margin: 46px auto 0; max-width: 720px; text-align: center;
	background: var(--tlo-limonka); border: 1px solid var(--limonka);
	border-radius: var(--radius); padding: 30px 24px;
}
.telefon-pomoc-nad {
	margin: 0; font-family: "Baloo 2", sans-serif; font-weight: 600;
	font-size: 1.2rem; color: var(--granat);
}
.telefon-pomoc-numer {
	display: inline-block; margin: 8px 0 10px;
	font-family: "Baloo 2", sans-serif; font-weight: 700;
	font-size: clamp(2rem, 5.4vw, 2.7rem); line-height: 1.1;
	color: var(--magenta); text-decoration: none; white-space: nowrap;
	letter-spacing: .5px;
}
.telefon-pomoc-numer:hover { color: var(--magenta-ciemna); }
.telefon-pomoc-pod { margin: 0 auto; max-width: 40em; color: var(--tekst-2); font-size: 1rem; }

.faq details {
	border: 1px solid var(--linia); border-radius: 10px; margin-bottom: 12px; background: #fff;
}
.faq summary {
	cursor: pointer; padding: 18px 22px; font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600; color: var(--granat); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-size: 1.3rem; line-height: 1; color: var(--limonka); }
.faq details[open] summary::after { content: "–"; }
.faq .odp { padding: 0 22px 20px; color: var(--tekst-2); }
.faq .odp p:last-child { margin-bottom: 0; }

/* ---------- formularz ---------- */
.form-box {
	background: #fff; border: 1px solid var(--linia); border-radius: var(--radius);
	padding: 30px; box-shadow: var(--cien); max-width: 640px;
}
.pole { margin-bottom: 16px; }
.pole label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95rem; }
.pole input, .pole select, .pole textarea {
	width: 100%; padding: 12px 14px; border: 1px solid var(--linia);
	border-radius: 8px; font: inherit; color: var(--tekst); background: #fff;
}
.pole input:focus, .pole select:focus, .pole textarea:focus {
	outline: 2px solid var(--limonka); outline-offset: 1px; border-color: var(--limonka);
}
.zgoda { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: .92rem; color: var(--tekst-2); }
.zgoda input { margin-top: 4px; flex-shrink: 0; }
.klauzula {
	font-size: .84rem; color: var(--tekst-2); background: var(--tlo-jasne);
	border-radius: 8px; padding: 14px 16px; margin-top: 6px;
}
.klauzula p { margin-bottom: .6em; }
.klauzula p:last-child { margin-bottom: 0; }

/* ---------- stopka ---------- */
.stopka { background: var(--granat-ciemny); color: #fff; padding: 52px 0 24px; font-size: .97rem; }
.stopka a { color: #fff; text-decoration: none; opacity: .88; }
.stopka a:hover { opacity: 1; border-bottom: 1px solid var(--limonka); }
.stopka a.zewnetrzny::after { content: " \2197"; opacity: .6; font-size: .85em; }
.stopka-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.15fr 1fr 1fr; gap: 26px; }
/* 🔴 21.09.2026: nagłówki stopki zmieniono z h4 na h3 tylko na stronie głównej, a reguła
   przeszła na h3 w całości, więc na pozostałych stronach (35 z 36 na cogito.szkola.pl)
   nagłówki stopki były granatowe na granacie. Reguła obejmuje oba poziomy. */
.stopka h3, .stopka h4 { color: #fff; font-size: 1rem; margin-bottom: .8em; }
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { margin-bottom: 8px; }
.stopka img { height: 34px; width: auto; margin-bottom: 14px; }
.stopka-dol {
	border-top: 1px solid rgba(255,255,255,.16); margin-top: 34px; padding-top: 18px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: .8; font-size: .9rem;
}

/* 🔴 Menu chowa sie pod przycisk juz przy 1180 px, nie dopiero przy 900 px (31.08.2026).
   Miedzy tymi szerokosciami dziewiec pozycji menu razem z przyciskiem zapisu nie
   miescilo sie w naglowku. Wczesniej miejsce oddawalo SCISNIETE logo i dlatego
   nikt tego nie zglaszal jako przepelnienia, tylko jako zdeformowane logo.
   Po usztywnieniu logo trzeba bylo dac menu wlasny prog. Dotyczy TYLKO naglowka,
   reszta ukladu przelacza sie dalej przy 900 px. */
@media (max-width: 1180px) {
	.menu {
		display: none; position: absolute; top: 96px; left: 0; right: 0;
		background: #fff; flex-direction: column; gap: 0;
		border-bottom: 1px solid var(--linia); padding: 8px 20px 16px;
	}
	.menu.otwarte { display: flex; }
	.menu a { padding: 12px 8px; width: 100%; border-bottom: 1px solid var(--linia); border-radius: 0; font-size: .95rem; }
	.menu a:hover { transform: none; }
	.menu-toggle { display: block; order: 3; }
	.naglowek .btn-naglowek { margin-left: auto; }
}

/* ---------- responsywność ---------- */
@media (max-width: 900px) {
	.hero .wrap { grid-template-columns: 1fr; gap: 30px; }
	.karty, .opinie { grid-template-columns: 1fr; }
	.roznice { grid-template-columns: 1fr; }
	.liczby .wrap { grid-template-columns: repeat(2, 1fr); gap: 26px; }
	.stopka-grid { grid-template-columns: 1fr; }
	.menu {
		display: none; position: absolute; top: 96px; left: 0; right: 0;
		background: #fff; flex-direction: column; gap: 0;
		border-bottom: 1px solid var(--linia); padding: 8px 20px 16px;
	}
	.menu.otwarte { display: flex; }
	.menu a { padding: 12px 8px; width: 100%; border-bottom: 1px solid var(--linia); border-radius: 0; }
	.menu a:hover { transform: none; }
	.menu-toggle { display: block; order: 3; }
	.naglowek .wrap { min-height: 78px; gap: 12px; }
	.logo img { height: 56px; }
	.naglowek .btn-naglowek { padding: 9px 16px; font-size: .9rem; margin-left: auto; }
	section { padding: 48px 0; }
}

/* =========================================================
   RUCH
   Wzorzec: Scroll Reveal / Stagger List, 400-600 ms,
   przesunięcie 24 px, ease-out, opóźnienie 0,08 s.
   Bez bibliotek: IntersectionObserver + przejścia CSS.
   🔴 Treść jest widoczna domyślnie. Klasę .ruch dokłada
   dopiero JavaScript, więc bez skryptu i dla robotów
   wyszukiwarek strona pozostaje w pełni czytelna.
   ========================================================= */
.ruch [data-wejscie] {
	opacity: 0;
	transform: translateY(34px);
	/* 0,85 s zamiast 0,5 s i większy dystans: przy krótszym ruchu element
	   był na miejscu, zanim wzrok zdążył go zauważyć, więc animacji
	   praktycznie nie było widać. Kiedy ruch ma się zacząć: app.js */
	transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
	will-change: opacity, transform;
}
.ruch [data-wejscie].widoczne { opacity: 1; transform: none; }

/* --- infografika: ścieżka wieku --- */
.sciezka { position: relative; margin-top: 44px; }
.sciezka-linia {
	position: absolute; left: 0; right: 0; top: 30px; height: 4px;
	background: var(--linia); border-radius: 2px; overflow: hidden;
}
.sciezka-linia i {
	display: block; height: 100%; width: 0; background: var(--limonka);
	transition: width 1.2s cubic-bezier(.22,.61,.36,1);
}
.ruch .sciezka.widoczne .sciezka-linia i { width: 100%; }
.sciezka-kroki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.krok { text-align: center; }
.krok .kropka {
	width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
	background: #fff; border: 4px solid var(--linia);
	display: grid; place-items: center; color: var(--granat);
	transition: border-color .35s, transform .35s;
}
.krok .kropka svg { width: 28px; height: 28px; }
.ruch .sciezka.widoczne .krok .kropka { border-color: var(--limonka); }
/* Kropki zapalają się po kolei, w tempie rosnącej linii, zamiast wszystkie
   naraz. Cztery kroki to cztery lata rozwoju dziecka, więc kolejność niesie
   treść, nie tylko efekt. */
.ruch .sciezka .krok:nth-child(1) .kropka { transition-delay: .15s; }
.ruch .sciezka .krok:nth-child(2) .kropka { transition-delay: .5s; }
.ruch .sciezka .krok:nth-child(3) .kropka { transition-delay: .85s; }
.ruch .sciezka .krok:nth-child(4) .kropka { transition-delay: 1.2s; }
.krok:hover .kropka { transform: translateY(-3px); }
.krok b { display: block; font-family: "Hanken Grotesk", sans-serif; color: var(--granat); font-size: 1.02rem; }
.krok span { font-size: .93rem; color: var(--tekst-2); }

/* --- ikony SVG w kartach różnic --- */
/* 🔴 BEZ RAMKI I BEZ TŁA. Ikona ma być rysunkiem obok tekstu, a nie
   przyciskiem: ramka z tłem robiła z niej element klikalny, którym nie jest. */
.roznica-ikona {
	width: 96px; height: 96px;
	display: grid; place-items: center;
	margin: 0;
}
.roznica-ikona svg { width: 96px; height: 96px; display: block; }
@media (max-width: 520px) {
	.roznica-ikona, .roznica-ikona svg { width: 76px; height: 76px; }
}

/* --- licznik --- */
.liczby .l { font-variant-numeric: tabular-nums; }

/* --- modal zapisu --- */
.modal {
	position: fixed; inset: 0; z-index: 100; display: none;
	background: rgba(24,22,58,.55); padding: 20px; overflow-y: auto;
}
.modal[open], .modal.otwarty { display: grid; place-items: start center; }
.modal-panel {
	background: #fff; border-radius: 16px; width: 100%; max-width: 620px;
	margin: 40px auto; box-shadow: 0 24px 60px rgba(20,18,50,.28);
	animation: modal-wjazd .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes modal-wjazd { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-gora {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 24px 26px 0;
}
.modal-gora h2 { margin: 0; font-size: 1.4rem; }
.modal-gora p { margin: 6px 0 0; color: var(--tekst-2); font-size: .96rem; }
.modal-zamknij {
	margin-left: auto; background: none; border: 0; cursor: pointer;
	width: 40px; height: 40px; border-radius: 50%; color: var(--tekst-2);
	display: grid; place-items: center; flex-shrink: 0;
}
.modal-zamknij:hover { background: var(--tlo-jasne); color: var(--granat); }
.modal-tresc { padding: 20px 26px 28px; }
.wybrany-kurs {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--tlo-limonka); border: 1px solid var(--limonka);
	color: var(--granat); font-weight: 600; font-size: .9rem;
	padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}

/* --- pasek zapisu przyklejony na telefonie --- */
.pasek-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	background: #fff; border-top: 1px solid var(--linia);
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	display: none; gap: 10px; box-shadow: 0 -4px 16px rgba(41,38,104,.08);
}
.pasek-cta .btn { flex: 1; text-align: center; padding: 12px 16px; font-size: .96rem; }
@media (max-width: 720px) {
	.pasek-cta { display: flex; }
	body { padding-bottom: 74px; }
	.sciezka-kroki { grid-template-columns: repeat(2, 1fr); gap: 26px; }
	.sciezka-linia { display: none; }
}

/* =========================================================
   MOCNIEJSZA DYNAMIKA
   Grafiki i tła reagują na przewijanie. Tam, gdzie
   przeglądarka wspiera osie przewijania w CSS
   (animation-timeline: view), robi to sam silnik, bez JS.
   Starsze przeglądarki dostają wersję statyczną.
   ========================================================= */

/* --- zdjęcie hero: lekkie odjeżdżanie i przybliżenie --- */
@supports (animation-timeline: view()) {
	.ruch .hero-foto img {
		animation: foto-parallax linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}
	@keyframes foto-parallax {
		from { transform: translateY(26px) scale(1.04); }
		to   { transform: translateY(-26px) scale(1); }
	}

	/* karty: delikatne unoszenie w trakcie przewijania */
	.ruch .karta {
		animation: karta-unos linear both;
		animation-timeline: view();
		animation-range: entry 25% cover 65%;
	}
	@keyframes karta-unos {
		from { transform: translateY(42px); }
		to   { transform: translateY(0); }
	}

	/* pasek postępu czytania na górze */
	.postep {
		animation: postep linear both;
		animation-timeline: scroll(root);
	}
	@keyframes postep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* pasek postępu czytania */
.postep {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
	background: var(--limonka); transform-origin: 0 50%; transform: scaleX(0);
}

/* Fala jako granica sekcji: USUNIETA 31.08.2026 (decyzja Roberta). */

/* --- rysowane dekoracje w tle sekcji --- */
.deko {
	position: absolute; pointer-events: none; user-select: none;
	opacity: .85; z-index: 0;
}
.deko-warstwa { position: relative; overflow: hidden; }
.deko-warstwa > .wrap { position: relative; z-index: 1; }

.deko-1 { width: 74px; height: 74px; top: 34px; right: 6%; transform: rotate(-8deg); }
.deko-2 { width: 58px; height: 58px; bottom: 40px; left: 4%; transform: rotate(12deg); }
.deko-3 { width: 92px; height: 92px; top: 50%; right: 3%; opacity: .5; }
.deko-petla { width: 128px; height: 44px; bottom: 18px; right: 12%; opacity: .55; }


@media (max-width: 720px) {
	.deko-1, .deko-3 { display: none; }
	.deko-2 { width: 44px; height: 44px; }
}

/* --- ikona przy nagłówku sekcji, wzorzec z Leo (liniowa, 16-20 px) --- */
.naglowek-ikona {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 9px;
	background: var(--tlo-limonka); border: 1px solid var(--limonka);
	color: var(--granat); margin-right: 12px; vertical-align: middle;
}
.naglowek-ikona svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.z-ikona { display: flex; align-items: center; gap: 0; }

/* --- ruch wyłączony na życzenie systemu --- */
@media (prefers-reduced-motion: reduce) {
	.postep { display: none; }
	.deko { transform: none !important; }
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.ruch [data-wejscie] { opacity: 1 !important; transform: none !important; }
	.sciezka-linia i { width: 100% !important; }
}

/* ---------- strony treściowe: SOM, polityka, regulaminy ---------- */
.dokument-tresc { padding: 48px 0 72px; }
.dokument-tresc .wrap { max-width: 820px; }
.dokument-tresc h1 { margin-bottom: .8em; }
.dokument-tresc h2 {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 2em 0 .6em;
	padding-top: .5em; border-top: 1px solid var(--linia);
}
.dokument-tresc h3 { font-size: 1.12rem; margin: 1.6em 0 .5em; }
.dokument-tresc p, .dokument-tresc li { color: var(--tekst); }
.dokument-tresc ul, .dokument-tresc ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.dokument-tresc li { margin-bottom: .5em; }
.dokument-tresc table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; }
.dokument-tresc th, .dokument-tresc td { border: 1px solid var(--linia); padding: 10px 12px; text-align: left; vertical-align: top; }
.dokument-tresc th { background: var(--tlo-jasne); font-family: "Baloo 2", sans-serif; color: var(--granat); }
.dokument-tresc strong, .dokument-tresc b { color: var(--granat); }

/* ---------- cennik urodzinek ---------- */
.pakiety { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pakiet {
	background: #fff; border: 1px solid var(--linia); border-radius: var(--radius);
	overflow: hidden; box-shadow: var(--cien); transition: transform .15s, box-shadow .15s;
}
.pakiet:hover { transform: translateY(-3px); box-shadow: var(--cien-mocny); }
.pakiet img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.pakiet .tresc { padding: 16px 18px 20px; }
.pakiet h3 { font-size: 1.06rem; margin-bottom: .3em; }
.pakiet .meta { font-size: .88rem; color: var(--tekst-2); margin-bottom: 10px; }
.pakiet .cena { font-family: "Baloo 2", sans-serif; font-weight: 700; color: var(--magenta); font-size: 1.1rem; }

.cennik-tabela { width: 100%; border-collapse: collapse; margin-top: 22px; }
.cennik-tabela th, .cennik-tabela td { border-bottom: 1px solid var(--linia); padding: 12px 14px; text-align: left; }
.cennik-tabela th { font-family: "Baloo 2", sans-serif; color: var(--granat); background: var(--tlo-jasne); }
.cennik-tabela td:last-child { text-align: right; font-weight: 700; color: var(--granat); white-space: nowrap; }
.startowy {
	background: var(--tlo-limonka); border: 2px solid var(--limonka); border-radius: var(--radius);
	padding: 26px 28px; margin-bottom: 30px;
}
.startowy .kwota { font-family: "Baloo 2", sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--granat); line-height: 1; }
.startowy ul { list-style: none; padding: 0; margin: 16px 0 0; }
.startowy li { position: relative; padding-left: 24px; margin-bottom: 6px; color: var(--tekst-2); }
.startowy li::before { content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px; border-radius: 2px; background: var(--limonka); }

/* 🔴 Fale wokol granatowych sekcji ZDJETE 31.08.2026 na polecenie Roberta.
   Sekcja .zapis konczy sie prosta krawedzia. Byly tu maski ::before/::after
   rysujace schodkowa fale; razem z <svg class="fala"> w HTML robily z kazdego
   przejscia miedzy sekcjami wyszczerbiony pas. */
.zapis { position: relative; }
.zapis .wrap { position: relative; z-index: 1; padding-top: 26px; padding-bottom: 26px; }

/* podpowiedź pod polem formularza: po co zbieramy tę daną */
.pole .podpowiedz { display: block; font-size: .85rem; color: var(--tekst-2); margin-top: 5px; }

/* Zastrzeżenie o znaku LEGO, wymagane przez centralę franczyzy.
   Świadomie drobne i wyszarzone: to nota prawna, nie treść dla rodzica,
   ale musi być czytelna, więc kontrast zostaje powyżej progu. */
.stopka-lego {
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.14);
	font-size: .82rem;
	line-height: 1.55;
	color: rgba(255,255,255,.72);
	max-width: 780px;
}

/* ---------- okno o trwających zapisach (element sezonowy) ----------
   Wygląd celowo bliski oknu zapisu: rodzic ma poczuć, że to ta sama
   ścieżka, a nie osobna reklama doklejona do strony. */
.okno-zapisy {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(15, 12, 40, .55);
	backdrop-filter: blur(3px);
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	opacity: 0; visibility: hidden;
	transition: opacity .26s ease, visibility .26s ease;
}
.okno-zapisy.otwarte { opacity: 1; visibility: visible; }
.okno-zapisy__panel {
	background: #fff; border-radius: var(--radius);
	max-width: 520px; width: 100%; padding: 34px 32px 26px;
	position: relative; box-shadow: 0 30px 80px rgba(57, 49, 133, .3);
	transform: translateY(18px) scale(.97);
	transition: transform .3s cubic-bezier(.22,.61,.36,1);
	max-height: 92vh; overflow-y: auto;
}
.okno-zapisy.otwarte .okno-zapisy__panel { transform: none; }
.okno-zapisy__nadtytul {
	display: inline-block; font-family: "Hanken Grotesk", sans-serif;
	font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--magenta); background: rgba(168, 38, 130, .09);
	padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}
.okno-zapisy__panel h2 { font-size: 1.75rem; margin: 0 0 10px; }
.okno-zapisy__panel p { color: var(--tekst-2); margin: 0 0 18px; }
.okno-zapisy__punkty { list-style: none; padding: 0; margin: 0 0 24px; }
.okno-zapisy__punkty li {
	position: relative; padding-left: 26px; margin-bottom: 9px; color: var(--tekst);
}
.okno-zapisy__punkty li::before {
	content: ""; position: absolute; left: 0; top: .45em;
	width: 13px; height: 13px; border-radius: 3px; background: var(--limonka);
}
.okno-zapisy__akcje { display: flex; gap: 10px; flex-wrap: wrap; }
.okno-zapisy__akcje .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
.okno-zapisy__zamknij {
	position: absolute; top: 14px; right: 14px;
	width: 38px; height: 38px; border: 0; border-radius: 50%;
	background: var(--tlo-jasne); color: var(--tekst-2); cursor: pointer;
	display: grid; place-items: center;
}
.okno-zapisy__zamknij:hover { background: var(--linia); color: var(--granat); }
.okno-zapisy__odrzuc {
	display: block; margin: 16px auto 0; border: 0; background: none;
	color: var(--tekst-2); font-size: .92rem; cursor: pointer;
	text-decoration: underline; text-underline-offset: 3px;
	font-family: "Hanken Grotesk", sans-serif;
}
.okno-zapisy__odrzuc:hover { color: var(--granat); }

@media (max-width: 560px) {
	.okno-zapisy__panel { padding: 28px 22px 20px; }
	.okno-zapisy__panel h2 { font-size: 1.45rem; }
	.okno-zapisy__akcje { flex-direction: column; }
}

/* ---------- przewijający się pasek miejscowości ----------
   Ten sam mechanizm co taśma zdjęć: dwa identyczne zestawy obok siebie,
   pierwszy przesuwa się o własną szerokość, drugi jest wtedy dokładnie
   w jego miejscu, więc skok jest niewidoczny.

   Lista pochodzi z assets/miejscowosci.json, czyli z tego samego pliku,
   z którego rysowana jest mapa. Dwie listy tych samych nazw rozjechałyby
   się przy pierwszej nowej placówce. */
.tasma-miejsca {
	overflow: hidden; position: relative;
	/* bez linii oddzielającej: pasek stoi nad mapą i należy do niej,
	   a kreska między nimi rozcinałaby jedną rzecz na dwie */
	padding: 4px 0 24px;
}
.tasma-miejsca::before, .tasma-miejsca::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2;
	pointer-events: none;
}
.tasma-miejsca::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.tasma-miejsca::after { right: 0; background: linear-gradient(270deg, #fff, transparent); }
.tasma-miejsca-tor {
	display: flex; width: max-content; align-items: center;
	animation: miejsca-jazda 64s linear infinite;
}
.tasma-miejsca:hover .tasma-miejsca-tor { animation-play-state: paused; }
.tasma-miejsca b {
	font-family: "Hanken Grotesk", sans-serif; font-weight: 500; font-size: 1rem;
	color: var(--tekst-2); padding: 0 20px; white-space: nowrap;
}
.tasma-miejsca i {
	width: 6px; height: 6px; border-radius: 50%; background: var(--limonka);
	flex-shrink: 0;
}
@keyframes miejsca-jazda {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.tasma-miejsca-tor { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}
@media (max-width: 600px) {
	.tasma-miejsca b { font-size: .94rem; padding: 0 15px; }
	.tasma-miejsca-tor { animation-duration: 48s; }
}

/* ---------- wyróżnienie przy nagłówku podstrony ----------
   Odznaka jest okrągła i żółta, czyli w kolorze spoza naszej palety.
   To celowe: znak przyznany z zewnątrz ma wyglądać jak coś, co
   przyszło z zewnątrz, a nie jak nasza własna naklejka. */
.wyroznienie {
	display: flex; align-items: center; gap: 14px;
	margin: 22px 0 0; padding: 12px 18px 12px 12px;
	background: #fff; border: 1px solid var(--linia);
	border-radius: 60px; box-shadow: var(--cien);
	width: fit-content; max-width: 100%;
}
.wyroznienie img { width: 58px; height: 58px; flex-shrink: 0; }
.wyroznienie span {
	font-family: "Hanken Grotesk", sans-serif; font-size: .93rem;
	line-height: 1.4; color: var(--tekst-2);
}
.wyroznienie b { display: block; color: var(--granat); font-weight: 700; }
@media (max-width: 560px) {
	.wyroznienie { padding: 10px 14px 10px 10px; gap: 11px; }
	.wyroznienie img { width: 48px; height: 48px; }
	.wyroznienie span { font-size: .86rem; }
}

/* ---------- własna mapa regionu ----------
   Rysunek zamiast podkładu z kafelków. Na mapie ma być widać jedno:
   gdzie jesteśmy. Wszystko poza tym jest tłem i ma się nie narzucać. */
.mapa-svg { width: 100%; height: auto; display: block; }

.mapa-woj {
	fill: #f2f3f8;
	stroke: #dcdef0;
	stroke-width: 2;
	stroke-linejoin: round;
}
/* Podkarpackie mocniej: tam jest trzon działania, reszta to kontekst */
.mapa-woj--glowne { fill: #e8eaf6; stroke: #c3c7e6; }

.mapa-pin { cursor: default; }
.mapa-pin-aura { fill: var(--limonka); opacity: .16; transition: opacity .2s, r .2s; }
.mapa-pin-kropka {
	fill: var(--limonka); stroke: #fff; stroke-width: 2.5;
	transition: r .2s;
}
.mapa-pin--glowna .mapa-pin-kropka { fill: var(--magenta); }
.mapa-pin--glowna .mapa-pin-aura { fill: var(--magenta); }

.mapa-pin-nazwa {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 15px; font-weight: 600; fill: var(--tekst-2);
	text-anchor: middle; paint-order: stroke;
	stroke: #fff; stroke-width: 4px; stroke-linejoin: round;
	opacity: 0; transition: opacity .2s;
	pointer-events: none;
}
/* Nazwy głównych miast widać zawsze, reszta pojawia się po najechaniu.
   Wszystkie 29 naraz zlałoby się w plamę tekstu. */
.mapa-pin--glowna .mapa-pin-nazwa { opacity: 1; font-size: 17px; font-weight: 700; fill: var(--granat); }
.mapa-pin:hover .mapa-pin-nazwa,
.mapa-pin:focus .mapa-pin-nazwa { opacity: 1; }
.mapa-pin:hover .mapa-pin-aura,
.mapa-pin:focus .mapa-pin-aura { opacity: .3; }
.mapa-pin:focus { outline: none; }
.mapa-pin:focus .mapa-pin-kropka { stroke: var(--granat); stroke-width: 3; }

.mapa-zrodlo {
	font-size: .78rem; color: var(--tekst-2); opacity: .7;
	margin: 8px 0 0; text-align: right;
}
.mapa-awaria { padding: 40px 20px; text-align: center; color: var(--tekst-2); }

@media (max-width: 700px) {
	.mapa-pin-nazwa { font-size: 20px; }
	.mapa-pin--glowna .mapa-pin-nazwa { font-size: 23px; }
}

@media (max-width: 720px) {
	/* na telefonie dwie liczby w rzędzie, bo cztery robią się nieczytelne */
	.liczby .wrap { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
	.liczby .l { font-size: 1.8rem; }
	.liczby .o { font-size: .82rem; }
}

/* ---------- wyświetlacz matrycowy w pasie z liczbami ----------
   Krój Doto: każda kreska cyfry jest zbudowana z okrągłych kropek,
   jak diody na tablicy. Pobieramy z niego wyłącznie cyfry i litery
   z podpisów („lat", „zł"), stąd niecały kilobajt na plik.

   Litery muszą tu być: bez nich „10 lat" wychodziło pół w matrycy,
   pół w zwykłym kroju. */
@font-face {
	font-family: "Doto-cyfry";
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url("fonts/doto-cyfry.woff2") format("woff2");
}
@font-face {
	font-family: "Doto-cyfry";
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url("fonts/doto-cyfry-ext.woff2") format("woff2");
	unicode-range: U+0100-024F;
}

/* 🔴 BEZ CZARNYCH PANELI. Czerń nie występuje nigdzie indziej na stronie,
   więc cztery ciemne kafelki wyglądały jak wklejone z innego projektu.
   Zostaje granat marki jako tło pasa i krój matrycowy na cyfrach:
   charakter wyświetlacza bez obcego koloru. */
.liczby .l {
	font-family: "Doto-cyfry", "Baloo 2", monospace;
	font-weight: 900;
	font-size: 2.4rem;
	color: var(--limonka);
	/* delikatniejsza poświata: na granacie limonka i tak mocno odbija,
	   mocny blask robiłby się mętny */
	text-shadow: 0 0 14px rgba(176,203,31,.35);
	line-height: 1.05;
}
.liczby .o {
	color: rgba(255,255,255,.82);
	letter-spacing: .03em;
	font-size: .9rem;
}

/* ---------- karuzela w nagłówku strony głównej ----------
   🔴 Bez skryptu widać pierwszy slajd, a reszta leży pod nim jako zwykła
   treść: strona jest wtedy dłuższa, ale kompletna i czytelna. Ukrywanie
   slajdów włącza dopiero skrypt, klasą .karuzela--gotowa. Dzięki temu
   awaria pliku nie zabiera treści, a roboty wyszukiwarek widzą wszystko. */
.hero--karuzela { position: relative; overflow: hidden; }
.hero--karuzela .slajd { padding: 0; }

.karuzela--gotowa .slajd {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	transform: translateX(28px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1), visibility .55s;
	display: flex; align-items: center;
	pointer-events: none;
}
.karuzela--gotowa .slajd.aktywny {
	position: relative;
	opacity: 1; visibility: visible; transform: none;
	pointer-events: auto;
}
/* Wysokość bierze się z najwyższego slajdu, żeby przy przełączaniu
   nie skakała reszta strony. */
.karuzela--gotowa { display: grid; }
.karuzela--gotowa > .slajd { grid-area: 1 / 1; }
.karuzela--gotowa > .slajd:not(.aktywny) { position: relative; }

.hero--karuzela .wrap { width: 100%; }

/* --- kropki --- */
.karuzela-sterowanie {
	position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3;
	display: flex; justify-content: center; gap: 9px;
}
.karuzela-kropka {
	width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0;
	background: rgba(57,49,133,.22); cursor: pointer;
	transition: background .2s, transform .2s, width .25s;
}
.karuzela-kropka:hover { background: rgba(57,49,133,.45); }
.karuzela-kropka.aktywna { background: rgba(168,38,130,.22); width: 34px; border-radius: 6px; }
/* Odliczanie wypełnia aktywną kropkę od lewej. To ta sama informacja co
   pasek przez całą stronę, ale w miejscu, w którym rodzic już patrzy,
   i bez mylenia jej ze wskaźnikiem wczytywania strony. */
.karuzela-kropka.aktywna::after {
	content: ""; position: absolute; inset: 0;
	background: var(--magenta); border-radius: 6px;
	transform-origin: left center;
	animation: karuzela-odliczanie var(--czas-slajdu, 7000ms) linear forwards;
}
.karuzela-kropka { position: relative; overflow: hidden; }
@keyframes karuzela-odliczanie {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.karuzela-kropka.aktywna { background: var(--magenta); }
	.karuzela-kropka.aktywna::after { animation: none; }
}
.karuzela-kropka:focus-visible { outline: 3px solid var(--limonka); outline-offset: 3px; }

/* --- strzałki --- */
.karuzela-strzalka {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linia);
	background: rgba(255,255,255,.9); color: var(--granat); cursor: pointer;
	display: grid; place-items: center;
	transition: background .2s, box-shadow .2s;
	box-shadow: var(--cien);
}
.karuzela-strzalka:hover { background: #fff; box-shadow: var(--cien-mocny); }
.karuzela-strzalka:focus-visible { outline: 3px solid var(--limonka); outline-offset: 2px; }
.karuzela-strzalka--wstecz { left: 10px; }
.karuzela-strzalka--dalej { right: 10px; }

/* Nagłówki slajdów od drugiego w górę to H2, bo H1 na stronie ma być jeden.
   Wygląd zostaje taki sam jak pierwszego: to nadal główne zdanie slajdu. */
.tytul-slajdu {
	font-size: clamp(1.9rem, 4.2vw, 3.05rem);
	line-height: 1.12;
	margin: 0 0 18px;
	color: var(--granat);
	max-width: 15em;
}

/* --- znacznik wieku i marki w slajdzie --- */
.hero--karuzela .wiek { margin-bottom: 12px; }
.hero--karuzela .marka { margin-top: -6px; }

@media (max-width: 1100px) {
	.karuzela-strzalka { display: none; }   /* na wąskim ekranie zostaje palec i kropki */
}
@media (max-width: 720px) {
	.karuzela-sterowanie { bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.karuzela--gotowa .slajd { transition: opacity .01s; transform: none; }
}

/* ---------- logo programu przy nagłówku podstrony ----------
   Logo stoi w wierszu z wyrazem „program", więc czyta się jak zdanie,
   a nie jak baner. Odsyłacz prowadzi do strony marki: rodzic, który chce
   sprawdzić, co to za program, robi to jednym kliknięciem. */
.marka-logo {
	display: flex; align-items: center; gap: 10px;
	margin-top: 4px;
}
.marka-logo img {
	height: 30px; width: auto;
	opacity: .92; transition: opacity .2s, transform .2s;
}
.marka-logo a:hover img { opacity: 1; transform: translateY(-1px); }
.marka-logo a:focus-visible { outline: 3px solid var(--limonka); outline-offset: 3px; border-radius: 4px; }
/* strzałka „link zewnętrzny" przy logo byłaby szumem: samo logo mówi,
   że to inna marka */
.marka-logo .zewnetrzny::after { content: none; }


/* ---------- zajawki tekstów na stronie głównej ---------- */
.sekcja-blog .karta-tresc { padding: 24px; }
.sekcja-blog h3 { font-size: 1.18rem; margin-bottom: .5em; }
.sekcja-blog h3 a { color: var(--granat); text-decoration: none; }
.sekcja-blog h3 a:hover { color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }
.sekcja-blog p { color: var(--tekst-2); margin: 0; }
.pod-kartami { text-align: center; margin: 52px 0 0; }

/* ---------- opinie rodziców ---------- */
.sekcja-opinie .opinie { grid-template-columns: repeat(3, 1fr); }
.opinia { display: flex; flex-direction: column; margin: 0; }
.opinia p { margin: 0 0 16px; color: var(--tekst); font-size: 1rem; }
.opinia .autor {
	margin-top: auto; color: var(--tekst-2); font-size: .92rem;
	font-family: "Hanken Grotesk", sans-serif; font-weight: 600;
}
@media (max-width: 900px) {
	.sekcja-opinie .opinie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.sekcja-opinie .opinie { grid-template-columns: 1fr; }
}

/* ---------- przycisk zapisu, kształt pikselowy ----------
   Schodki trzystopniowe w dwóch narożnikach plus sześć wyjętych kwadratów
   w krawędziach. Jednostka wzoru to 6 px, ten sam moduł co schodki, dlatego
   wyszczerbienia czyta się jako wyjęte klocki, a nie przypadkowe wcięcia.

   Nawiązuje do wszystkich trzech programów naraz: blok z Minecrafta jest
   pikselowy, warstwa wydruku 3D układa się schodkami, klocek stawia się
   na siatce. Przede wszystkim jednak jest spójny z naszym własnym znakiem,
   który też jest narysowany pikselami, a nie z cudzą marką.

   🔴 Kształt rysujemy przycięciem tła, NIE obrazkiem. Dzięki temu przycisk
   zostaje tekstem: czyta go czytnik ekranu, da się zaznaczyć i skaluje się
   razem z resztą strony. */
.btn-piksel {
	border-radius: 0;
	padding: 16px 36px;
	/* 🔴 KSZTALT: wariant C, wybrany przez Roberta 01.09.2026 z czterech propozycji
	   (plik roboczy wybor-przycisku-3.html). Zwykly prostokat, cztery JEDNAKOWE
	   narozniki zbiegajace trzema schodkami po 4 px. Zero wciec na krawedziach.
	   Poprzedni ksztalt mial szesc wyszczerbien rozrzuconych po obwodzie, zadna
	   krawedz nie byla rowna przeciwleglej i przy dluzszym napisie wygladalo to
	   przypadkowo. Wszystkie wymiary sa w px, wiec ksztalt nie zalezy od szerokosci
	   przycisku: dlatego osobna regula dla waskich ekranow przestala byc potrzebna. */
	clip-path: polygon(
		12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 8px) 4px,
		calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 12px, 100% 12px,
		100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px),
		calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
		calc(100% - 8px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px),
		calc(100% - 12px) 100%, 12px 100%,
		12px calc(100% - 4px), 8px calc(100% - 4px), 8px calc(100% - 8px),
		4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px),
		0 12px, 4px 12px, 4px 8px, 8px 8px, 8px 4px, 12px 4px);
	/* 🔴 CIEŃ PRZEZ drop-shadow, NIE box-shadow.
	   box-shadow przy clip-path znika bez śladu: rysuje się poza obszarem
	   elementu, a przycięcie usuwa wszystko poza obszarem. drop-shadow
	   działa na przyciętym kształcie, więc idzie za konturem ze schodkami.
	   Sprawdzone porównaniem trzech wariantów, nie założone. */
	filter: drop-shadow(0 5px 0 rgba(57,49,133,.3)) drop-shadow(0 9px 12px rgba(57,49,133,.2));
	transition: transform .12s ease, filter .12s ease;
}
.btn-piksel:hover {
	transform: translateY(-2px);
	filter: drop-shadow(0 7px 0 rgba(57,49,133,.3)) drop-shadow(0 12px 16px rgba(57,49,133,.24)) brightness(1.05);
}
/* wciśnięcie: przycisk siada na cieniu, jak klocek wpinany w podstawkę */
.btn-piksel:active {
	transform: translateY(4px);
	filter: drop-shadow(0 1px 0 rgba(57,49,133,.3));
}

/* 🔴 Na ciemnym tle cień musi być CIEMNIEJSZY od tła, inaczej daje rozmytą
   plamę zamiast wrażenia grubości: granat na granacie to za bliskie kolory. */
.zapis .btn-piksel,
.liczby .btn-piksel {
	filter: drop-shadow(0 5px 0 rgba(0,0,0,.28)) drop-shadow(0 9px 12px rgba(0,0,0,.22));
}
.zapis .btn-piksel:hover,
.liczby .btn-piksel:hover {
	filter: drop-shadow(0 7px 0 rgba(0,0,0,.3)) drop-shadow(0 12px 16px rgba(0,0,0,.25)) brightness(1.04);
}
.zapis .btn-piksel:active,
.liczby .btn-piksel:active { filter: drop-shadow(0 1px 0 rgba(0,0,0,.3)); }
/* Obrys fokusu nie może iść za przyciętym kształtem, bo znikłby razem z nim.
   Rysujemy go cieniem, który leży poza obszarem przycięcia. */
.btn-piksel:focus-visible { outline: 3px solid var(--limonka); outline-offset: 4px; }

/* Wyjatek dla ekranow do 480 px USUNIETY 01.09.2026: byl potrzebny, bo stary
   ksztalt liczyl czesc wciec od prawej krawedzi i na przycisku przez cala
   szerokosc sie rozjezdzal. Wariant C ma wszystkie wymiary w px i cztery
   jednakowe narozniki, wiec wyglada tak samo niezaleznie od szerokosci. */
@media (max-width: 480px) {
	.btn-piksel { padding-left: 26px; padding-right: 26px; }
}

/* ---------- film: miniatura, odtwarzacz po kliknięciu ---------- */
.film {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--granat);
	box-shadow: var(--cien-mocny);
	cursor: pointer;
}
.film img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film iframe { width: 100%; height: 100%; border: 0; display: block; }
.film-play {
	position: absolute; inset: 0; margin: auto;
	width: 84px; height: 84px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: var(--magenta); color: #fff;
	display: grid; place-items: center;
	box-shadow: 0 8px 28px rgba(0,0,0,.34);
	transition: transform .18s ease, background .18s ease;
}
.film-play svg { margin-left: 4px; }   /* trójkąt optycznie na środku */
.film:hover .film-play { transform: scale(1.08); }
.film-play:focus-visible { outline: 4px solid var(--limonka); outline-offset: 4px; }
.film-nota {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 10px 14px; font-size: .82rem;
	color: rgba(255,255,255,.9); background: linear-gradient(transparent, rgba(0,0,0,.55));
	text-align: center; pointer-events: none;
}
.film--gra { cursor: default; }
@media (max-width: 560px) {
	.film-play { width: 62px; height: 62px; }
	.film-play svg { width: 26px; height: 26px; }
}

/* ---------- dyplomy i podziękowania ----------
   Sekcja pokazuje się dopiero, gdy jest co pokazać: skrypt usuwa ją,
   gdy lista jest pusta. Pusta ramka z napisem „wkrótce" mówi rodzicowi,
   że czegoś nam brakuje, zamiast po prostu nie mówić nic. */
.sekcja-referencje { display: none; }
.sekcja-referencje.referencje--sa { display: block; }

.referencje-siatka {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.referencja {
	margin: 0; background: #fff; border: 1px solid var(--linia);
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--cien);
	transition: transform .2s, box-shadow .2s;
}
.referencja:hover { transform: translateY(-3px); box-shadow: var(--cien-mocny); }
.referencja img {
	width: 100%; aspect-ratio: 5 / 7; object-fit: cover; display: block;
	border-bottom: 1px solid var(--linia);
}
.referencja figcaption { padding: 14px 16px 16px; font-size: .92rem; }
.referencja figcaption b { display: block; color: var(--granat); font-size: .98rem; }
.referencja figcaption span { color: var(--tekst-2); font-size: .86rem; }
.referencja figcaption em { display: block; font-style: normal; color: var(--tekst-2); margin-top: 6px; }

@media (max-width: 900px) { .referencje-siatka { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .referencje-siatka { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---------- cykl warsztatów miesiąc po miesiącu ---------- */
.miesiace { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.miesiac {
	background: #fff; border: 1px solid var(--linia); border-radius: 12px;
	padding: 20px 20px 22px; position: relative;
	border-top: 4px solid var(--limonka);
}
.miesiac-nazwa {
	display: inline-block; font-family: "Hanken Grotesk", sans-serif;
	font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--magenta); margin-bottom: 8px;
}
.miesiac h3 { font-size: 1.08rem; margin-bottom: .4em; color: var(--granat); }
.miesiac p { margin: 0; color: var(--tekst-2); font-size: .94rem; }
@media (max-width: 1000px) { .miesiace { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .miesiace { grid-template-columns: 1fr; } }

/* ---------- zdjęcie we wpisie blogowym ----------
   Wchodzi po pierwszym akapicie, nie na samej górze: rodzic najpierw
   czyta zdanie, które go zatrzymało, a potem dostaje obraz. */
.wpis-foto { margin: 32px 0 34px; }
.wpis-foto img {
	width: 100%; height: auto; display: block;
	border-radius: var(--radius); box-shadow: var(--cien);
	aspect-ratio: 16 / 10; object-fit: cover;
}
.wpis-foto figcaption {
	margin-top: 10px; font-size: .9rem; color: var(--tekst-2); text-align: center;
}

/* ---------- Poranek Technologiczny (strona warsztatów) ---------- */
.sekcja-poranek { background: var(--granat); color: #fff; }
.sekcja-poranek .sekcja-naglowek h2,
.sekcja-poranek .poranek-krok h3 { color: #fff; }
.sekcja-poranek .lead { color: rgba(255,255,255,.86); }

.poranek-kroki {
	display: grid; gap: 22px; margin-top: 40px;
	grid-template-columns: repeat(4, 1fr);
}
.poranek-krok {
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
	padding: 26px 22px 22px;
}
.poranek-krok p { color: rgba(255,255,255,.8); font-size: .96rem; margin: 8px 0 0; }
/* numer kroku krojem matrycowym, tym samym co liczniki: jeden język liczb
   na całej witrynie, zamiast osobnego stylu w każdej sekcji */
.poranek-numer {
	font-family: "Doto", var(--font-naglowek), sans-serif;
	font-weight: 800; font-size: 2.1rem; line-height: 1;
	color: var(--limonka); margin-bottom: 12px;
}

.poranek-fakty {
	display: grid; gap: 18px; margin-top: 34px;
	grid-template-columns: repeat(4, 1fr);
}
.poranek-fakty > div {
	border-left: 3px solid var(--limonka); padding-left: 14px;
}
.poranek-fakty b { display: block; font-size: 1.15rem; color: #fff; }
.poranek-fakty span { display: block; margin-top: 5px; font-size: .89rem; color: rgba(255,255,255,.72); }

.sekcja-poranek .pod-kartami { color: rgba(255,255,255,.66); margin-top: 30px; }
.poranek-cta { text-align: center; margin-top: 30px; }
/* cień przycisku na ciemnym tle: granat na granacie daje plamę, więc czarny */
.sekcja-poranek .btn-piksel {
	filter: drop-shadow(0 5px 0 rgba(0,0,0,.28)) drop-shadow(0 9px 12px rgba(0,0,0,.22));
}

@media (max-width: 960px) {
	.poranek-kroki, .poranek-fakty { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.poranek-kroki, .poranek-fakty { grid-template-columns: 1fr; }
}

/* ---------- Przebieg zajęć: cztery etapy ---------- */
/* 🔴 Klasa nazywa się `etap`, NIE `krok`: `.krok` jest już zajęty przez
   kropki na ścieżce w sekcji „Jak to działa" i style by się zderzyły. */
.sekcja-kroki { background: var(--granat); color: #fff; }
.sekcja-kroki .sekcja-naglowek h2, .sekcja-kroki .etap h3 { color: #fff; }

.etapy { display: grid; gap: 22px; margin-top: 40px; grid-template-columns: repeat(4, 1fr); }
.etap {
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.14);
	padding: 26px 22px 22px;
}
.etap p { color: rgba(255,255,255,.8); font-size: .96rem; margin: 8px 0 0; }
/* numer krojem matrycowym, tym samym co liczniki i Poranek: jeden język liczb */
.etap-numer {
	font-family: "Doto", var(--font-naglowek), sans-serif;
	font-weight: 800; font-size: 2.1rem; line-height: 1;
	color: var(--limonka); margin-bottom: 12px;
}

/* ---------- Myśl przewodnia: jedno zdanie, dużo powietrza ---------- */
.sekcja-mysl { background: var(--jasne); }
.mysl { max-width: 760px; margin: 0 auto; text-align: center; }
.mysl h2 { margin: 14px 0 12px; }
.mysl p { font-size: 1.12rem; line-height: 1.7; color: var(--tekst); }
.mysl .kreska { margin: 0 auto; }

/* ---------- Tekst obok zdjęcia, naprzemiennie ---------- */
.tekst-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.tekst-foto--odwr .tekst-foto-tresc { order: 2; }
.tekst-foto-obraz img { width: 100%; height: auto; border-radius: 14px; display: block; }

@media (max-width: 960px) {
	.etapy { grid-template-columns: repeat(2, 1fr); }
	.tekst-foto { grid-template-columns: 1fr; gap: 26px; }
	.tekst-foto--odwr .tekst-foto-tresc { order: 0; }
}
@media (max-width: 560px) { .etapy { grid-template-columns: 1fr; } }

/* ---------- Przykładowe tematy warsztatu ---------- */
.tematy { display: grid; gap: 18px; margin-top: 36px; grid-template-columns: repeat(3, 1fr); }
.temat {
	background: #fff; border: 1px solid var(--obwodka);
	border-left: 4px solid var(--limonka);
	padding: 22px 22px 20px;
}
.temat h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--granat); }
.temat p { margin: 0; font-size: .95rem; }
.tematy-swieta {
	margin-top: 26px; padding: 22px 24px;
	background: var(--jasne); border-left: 4px solid var(--magenta);
}
.tematy-swieta h3 { margin: 0 0 8px; font-size: 1.02rem; color: var(--granat); }
.tematy-swieta p { margin: 0; color: var(--tekst-jasny); }
@media (max-width: 960px) { .tematy { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tematy { grid-template-columns: 1fr; } }

/* ---------- Pojedynczy dokument do pobrania ---------- */
/* Osobna klasa, bo to nie jest siatka: jeden dokument jest tu poprawnym
   stanem, a kontrola siatek zgłaszałaby go jako zjedzoną resztę. */
.dokumenty { margin-top: 30px; }
.dokument { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center;
	background: #fff; border: 1px solid var(--obwodka); border-left: 4px solid var(--limonka); padding: 20px 22px; }
.dokument-ikona { width: 72px; height: 72px; }
.dokument-ikona svg { width: 100%; height: 100%; }
.dokument-tresc h3 { margin: 0 0 6px; color: var(--granat); }
.dokument-tresc p { margin: 0; }
@media (max-width: 560px) { .dokument { grid-template-columns: 56px 1fr; } .dokument-ikona { width: 56px; height: 56px; } }

/* ---------- Pas zdjęć z zajęć ---------- */
.pas-foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
.pas-foto-kafel { margin: 0; overflow: hidden; border-radius: 12px; aspect-ratio: 3 / 4; }
.pas-foto-kafel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pas-foto-kafel:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .pas-foto { grid-template-columns: repeat(2, 1fr); } }


/* 🔴 GORA NA TELEFONIE (31.08.2026). Blok stoi na KONCU arkusza swiadomie:
   wczesniej lezal wyzej i przegrywal z regulami z progu 900 px, wiec nie robil nic. Logo dostalo `flex-shrink: 0`, zeby przestalo
   sie deformowac, ale przez to nie oddaje juz miejsca na waskim ekranie i naglowek
   zaczynal wychodzic poza kadr. Miejsce oddaja teraz swiadomie logo i przycisk,
   kazde o tyle, ile trzeba, zamiast deformowac ktorykolwiek z nich. */
@media (max-width: 600px) {
	.naglowek .wrap { gap: 10px; min-height: 68px; }
	.logo img { height: 44px; }
	.naglowek .btn-naglowek { padding: 9px 13px; font-size: .84rem; }
	.menu { top: 68px; }
}
@media (max-width: 380px) {
	/* najwezsze telefony: przycisk w naglowku ustepuje, bo ta sama akcja stoi
	   w przyklejonym pasku na dole ekranu i w zielonej belce nad naglowkiem */
	.naglowek .btn-naglowek { display: none; }
}

/* Sieroty i wdowy (Robert 20.08 i 03.09.2026): przegladarka rownowazy wiersze naglowkow
   i akapitow, a w druku nie zostawia samotnych linii. Twarde spacje po jednoliterowych
   wyrazach wstawia skrypt twarde-spacje.py, to jest druga warstwa. */
h1, h2, h3, h4, p, li, .lead { text-wrap: pretty; }
@media print { p, li, h1, h2, h3, h4 { orphans: 2; widows: 2; } }