/* 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);
}
.naglowek .wrap { display: flex; align-items: center; gap: 20px; min-height: 96px; }
.logo img { height: 76px; width: auto; }
@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: .93rem; padding: 8px 11px; 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; }
}
.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; }
.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;
}

/* ---------- 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 --- */
/* Fala jest SCHODKOWA, nie płynna: równe schodki: 20 px szerokości, skok 6 px, wzór powtarzany co 280 px, ten sam rytm
   co wyszczerbienia przycisków. Płynna krzywa kłóciła się z pikselowym
   charakterem reszty strony. Decyzja Roberta 17.08.2026. */
.fala { display: block; width: 100%; height: 54px; }
/* Fala zamykająca sekcję od spodu. Bez niej granatowy pas urywał się prostą
   krawędzią, choć od góry wchodził falą, i te dwie krawędzie się kłóciły. */
.fala-dol { margin-top: -1px; }
.fala path { fill: var(--tlo-jasne); }
.fala.odwrocona path { fill: #fff; }

/* --- 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 wokół granatowych sekcji ----------
   Sekcja .zapis dostaje falę u góry i u dołu, tak jak
   przejście spod nagłówka. Fala jest częścią sekcji,
   więc działa niezależnie od tego, co jest obok. */
.zapis { position: relative; }
.zapis::before, .zapis::after {
	content: ""; position: absolute; left: 0; right: 0; height: 54px;
	background: #fff;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.zapis::before {
	top: -1px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='54' %3E%3Cpath d='M0,45 L20,45 L20,39 L40,39 L40,33 L60,33 L60,27 L80,27 L80,21 L100,21 L100,15 L120,15 L120,9 L140,9 L160,9 L180,9 L180,15 L200,15 L200,21 L220,21 L220,27 L240,27 L240,33 L260,33 L260,39 L280,39 L280,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='54' %3E%3Cpath d='M0,45 L20,45 L20,39 L40,39 L40,33 L60,33 L60,27 L80,27 L80,21 L100,21 L100,15 L120,15 L120,9 L140,9 L160,9 L180,9 L180,15 L200,15 L200,21 L220,21 L220,27 L240,27 L240,33 L260,33 L260,39 L280,39 L280,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
}
.zapis::after {
	bottom: -1px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='54' %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' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='54' %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' fill='%23000'/%3E%3C/svg%3E");
}
/* gdy sąsiad ma szare tło, fala musi być szara, nie biała */
.jasna + .zapis::before, .zapis:has(+ .jasna)::after { background: var(--tlo-jasne); }
.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;
	/* Schodki trzystopniowe w dwóch przeciwległych narożnikach plus dwa wyjęte
	   kwadraty po przekątnej. Sześć wyszczerbień na całym obwodzie wyglądało
	   na postrzępione, zwłaszcza przy dłuższym napisie. */
	clip-path: polygon(
		18px 0, 44px 0, 44px 6px, 58px 6px, 58px 0,
		calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
		100% calc(100% - 18px), calc(100% - 6px) calc(100% - 18px),
		calc(100% - 6px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px),
		calc(100% - 12px) calc(100% - 6px), calc(100% - 18px) calc(100% - 6px),
		calc(100% - 18px) 100%,
		calc(100% - 62px) 100%, calc(100% - 62px) calc(100% - 6px),
		calc(100% - 76px) calc(100% - 6px), calc(100% - 76px) 100%,
		6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px),
		0 18px, 6px 18px, 6px 12px, 12px 12px, 12px 6px, 18px 6px);
	/* 🔴 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; }

@media (max-width: 480px) {
	/* na wąskim ekranie przycisk bywa na całą szerokość: wtedy wyszczerbienia
	   liczone w procentach rozjeżdżają się, więc zostają same schodki */
	.btn-piksel {
		clip-path: polygon(
			18px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
			100% calc(100% - 18px), calc(100% - 6px) calc(100% - 18px),
			calc(100% - 6px) calc(100% - 12px), calc(100% - 12px) calc(100% - 12px),
			calc(100% - 12px) calc(100% - 6px), calc(100% - 18px) calc(100% - 6px),
			calc(100% - 18px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px),
			0 18px, 6px 18px, 6px 12px, 12px 12px, 12px 6px, 18px 6px);
		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); } }