@charset "UTF-8";

/* ==========================================================================
   Iteracja — arkusz podstrony warsztatu.
   Konstrukcja bierze się z planu dnia: rynek z godzinami po lewej, pola
   rozdzielone linią, żółta karteczka jako jedyny sygnał akcji.
   ========================================================================== */

/* ------------------------------------------------------------------ kroje */

@font-face {
	font-family: 'Source Serif';
	src: url('../fonts/sourceserif4-var.woff2') format('woff2-variations');
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Hanken Grotesk';
	src: url('../fonts/hankengrotesk-var.woff2') format('woff2-variations');
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

/* Metryki zastępcze zbliżone do krojów docelowych — przesunięcie tekstu przy
   podmianie kroju schodzi do ułamka wiersza zamiast całego akapitu. */
@font-face {
	font-family: 'Hanken Zastepczy';
	src: local('Arial');
	size-adjust: 96%;
	ascent-override: 94%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: 'Serif Zastepczy';
	src: local('Georgia'), local('Times New Roman');
	size-adjust: 98%;
	ascent-override: 96%;
	descent-override: 26%;
	line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokeny */

:root {
	/* Powierzchnie i tekst. Współczynniki policzone przed pierwszą linią arkusza
	   (kontrast-tokenow.mjs) — pary użytkowe opisane przy każdej barwie. */
	--pole: oklch(1 0 0);                    /* tło czytania */
	--pole-2: oklch(0.975 0.004 160);        /* pole wyróżnione na jasnym */
	--tablica: oklch(0.27 0.042 162);        /* ciemne pole; biel na nim 14,9:1 */
	--tablica-glebiej: oklch(0.22 0.036 162);
	--zielen: oklch(0.44 0.100 160);         /* powierzchnia akcji; biel na niej 7,8:1 */
	--zielen-ciemniej: oklch(0.38 0.095 160);
	--zielen-jasna: oklch(0.80 0.110 160);   /* akcent na ciemnym */
	--bursztyn: oklch(0.78 0.135 72);        /* sygnał; atrament na nim 8,4:1 */
	--bursztyn-mocny: oklch(0.72 0.145 68);
	--bursztyn-tekst: oklch(0.50 0.120 62);  /* bursztyn jako tekst na jasnym, 6,0:1 */
	--atrament: oklch(0.22 0.016 160);       /* tekst na jasnym; 17,1:1 */
	--atrament-2: oklch(0.47 0.014 160);     /* tekst drugorzędny; 6,7:1 */
	--jasny: oklch(0.97 0.006 160);          /* tekst na ciemnym */
	--jasny-2: oklch(0.85 0.016 160);
	--kreska: oklch(0.88 0.008 160);
	--kreska-mocna: oklch(0.78 0.012 160);
	--kreska-ciemna: oklch(0.38 0.028 162);
	--obrys: oklch(0.56 0.016 160);          /* granice kontrolek; 4,59:1 */
	--blad: oklch(0.47 0.170 27);
	--blad-tlo: oklch(0.96 0.025 27);
	--sukces: oklch(0.44 0.105 155);

	/* Role prowadzącego — kolor zawsze z podpisem. */
	--rola-ekspert: oklch(0.47 0.140 250);
	--rola-mentor: oklch(0.50 0.125 55);
	--rola-coach: oklch(0.49 0.155 345);
	--rola-kierownik: oklch(0.44 0.070 200);
	--rola-ekspert-jasna: oklch(0.76 0.115 250);
	--rola-mentor-jasna: oklch(0.79 0.120 62);
	--rola-coach-jasna: oklch(0.77 0.130 345);
	--rola-kierownik-jasna: oklch(0.78 0.070 200);

	/* Głębia: dwa stopnie, oba miękkie. Fotografia i karty odrywają się od tła
	   na tyle, żeby strona miała warstwy, a nie na tyle, żeby to było widać. */
	--cien-1: 0 1px 2px rgb(9 32 21 / 0.06), 0 4px 12px rgb(9 32 21 / 0.05);
	--cien-2: 0 2px 4px rgb(9 32 21 / 0.07), 0 16px 40px rgb(9 32 21 / 0.10);
	--promien: 3px;

	/* Krój */
	--font-naglowek: 'Source Serif', 'Serif Zastepczy', Georgia, serif;
	--font-tekst: 'Hanken Grotesk', 'Hanken Zastepczy', system-ui, sans-serif;

	/* Skala typograficzna, stosunek 1,25 */
	--t-xxl: clamp(2.5rem, 5.6vw, 4.5rem);
	--t-xl: clamp(1.9rem, 3.6vw, 2.9rem);
	--t-l: clamp(1.3rem, 2.1vw, 1.6rem);
	--t-m: 1.125rem;
	--t-base: 1.0625rem;
	--t-s: 0.9375rem;
	--t-xs: 0.875rem;

	/* Odstępy — jedna skala co 0,25 rem */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4rem;
	--rytm: clamp(3rem, 7vw, 6.5rem);

	--kontener: 1180px;
	--margines: clamp(1.25rem, 5vw, 3rem);

	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Skala warstw — nazwana, bez przypadkowych tysięcy */
	--warstwa-pasek: 30;
	--warstwa-pominiecie: 60;
}

/* ------------------------------------------------------------------ podstawy */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--pole);
	color: var(--atrament);
	font-family: var(--font-tekst);
	font-size: var(--t-base);
	line-height: 1.62;
	font-kerning: normal;
	font-optical-sizing: auto;
	overflow-wrap: break-word;
}

/* Światło międzyliterowe zależy od stopnia: slab w wielkim tytule wymaga ściągnięcia,
   ten sam krój w nazwie techniki (17 px) przy tej samej wartości zlepia litery. */
h1, h2, h3 {
	font-family: var(--font-naglowek);
	font-weight: 700;
	text-wrap: balance;
	margin: 0 0 var(--s4);
}

h1 { font-size: var(--t-xxl); line-height: 1.08; letter-spacing: -0.022em; }
h2 { font-size: var(--t-xl); line-height: 1.14; letter-spacing: -0.014em; }
h3 { font-size: var(--t-l); line-height: 1.22; letter-spacing: -0.004em; }

/* Tekst jasny na ciemnym polu czyta się jako lżejszy, więc dostaje więcej powietrza
   w wierszu i między literami. */
.program, .zapis, .stopka, .pasek-podgladu, .pasek-zapisu {
	line-height: 1.68;
	letter-spacing: 0.006em;
}

p { margin: 0 0 var(--s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--zielen); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--zielen-ciemniej); }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
li { margin-bottom: var(--s2); }

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

:focus-visible {
	outline: 3px solid var(--zielen);
	outline-offset: 2px;
	border-radius: 2px;
}

.pomin-nawigacje {
	position: absolute;
	left: var(--s4);
	top: var(--s4);
	z-index: var(--warstwa-pominiecie);
	padding: var(--s3) var(--s4);
	background: var(--bursztyn);
	color: var(--atrament);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-160%);
	transition: transform 160ms var(--ease);
}
.pomin-nawigacje:focus { transform: translateY(0); }

.tylko-dla-czytnika {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.wnetrze,
.metryczka__wnetrze,
.rozstrzygniecie__wnetrze,
.program__wnetrze,
.techniki__wnetrze,
.zakres__wnetrze,
.prowadzacy__wnetrze,
.terminy__wnetrze,
.zapis__wnetrze,
.pytania__wnetrze,
.wejscie__wnetrze,
.zawartosc-pracy__wnetrze,
.wykaz__wnetrze,
.strona__wnetrze,
.potwierdzenie__wnetrze,
.stopka__wnetrze,
.naglowek__wnetrze,
.pasek-podgladu__wnetrze,
.pasek-zapisu__wnetrze {
	max-width: var(--kontener);
	margin-inline: auto;
	padding-inline: var(--margines);
}

/* ------------------------------------------------------------------ przyciski */

.przycisk {
	border-radius: var(--promien);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: var(--s3) var(--s5);
	border: 2px solid transparent;
	font-family: var(--font-tekst);
	font-size: var(--t-m);
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms var(--ease), transform 140ms var(--ease);
}

.przycisk--glowny {
	background: var(--zielen);
	color: var(--pole);
}
.przycisk--glowny:hover {
	background: var(--zielen-ciemniej);
	color: var(--pole);
	transform: translateY(-1px);
}

.przycisk--jasny {
	background: var(--bursztyn);
	color: var(--atrament);
}
.przycisk--jasny:hover {
	background: var(--bursztyn-mocny);
	color: var(--atrament);
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ pasek podglądu */

.pasek-podgladu {
	background: var(--tablica-glebiej);
	color: var(--jasny-2);
	font-size: var(--t-s);
}
.pasek-podgladu__tresc {
	margin: 0;
	padding-block: var(--s2);
	max-width: 56ch;
}
.pasek-podgladu strong { color: var(--jasny); font-weight: 600; }
.pasek-podgladu a { color: var(--zielen-jasna); }

/* ------------------------------------------------------------------ nagłówek */

.naglowek {
	border-bottom: 1px solid var(--kreska);
	background: var(--pole);
}
.naglowek__wnetrze {
	display: flex;
	flex-wrap: wrap;
	/* Blok znaku ma wymuszone 44 px wysokości, więc linia bazowa przestała być wspólną
	   miarą — nawigacja wyrównuje się do środka tego bloku. */
	align-items: center;
	justify-content: space-between;
	gap: var(--s3) var(--s5);
	padding-block: var(--s4);
}
.naglowek__znak {
	display: flex;
	align-items: center;
	gap: var(--s3);
	/* Cel dotykowy 44 px w pionie (WCAG 2.2 SC 2.5.5) — logo jest odnośnikiem do strony
	   wejściowej, więc trafia się w nie kciukiem, nie kursorem. */
	min-block-size: 44px;
	color: var(--atrament);
	text-decoration: none;
}
.naglowek__nazwa {
	font-family: var(--font-naglowek);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.znak {
	flex: 0 0 auto;
	align-self: center;
	color: var(--atrament);
	transform-origin: 50% 50%;
	transition: transform 320ms var(--ease);
}
.naglowek__znak:hover .znak { transform: rotate(90deg); }
.naglowek__podpis {
	color: var(--atrament-2);
	font-size: var(--t-s);
}
.naglowek__nawigacja {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s5);
}
.naglowek__nawigacja a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--atrament);
	font-size: var(--t-s);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.naglowek__nawigacja a:hover {
	border-bottom-color: var(--zielen);
	color: var(--zielen);
}

/* ------------------------------------------------------------------ metryczka warsztatu */

.metryczka {
	padding-block: clamp(2rem, 6vw, 4.5rem) var(--rytm);
	border-bottom: 1px solid var(--kreska);
}
.metryczka__wnetrze {
	display: grid;
	gap: var(--s6);
}
.metryczka__tytul {
	margin-bottom: var(--s5);
	max-width: 16ch;
}
.metryczka__zajawka {
	max-width: 52ch;
	margin-bottom: var(--s6);
	font-size: var(--t-m);
	color: var(--atrament);
}
.metryczka__dopisek {
	margin-top: var(--s3);
	color: var(--atrament-2);
	font-size: var(--t-s);
}

.metryczka__kadr {
	margin: 0;
	align-self: start;
}
.metryczka__kadr img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 62% 50%;
	border-radius: var(--promien);
	box-shadow: var(--cien-2);
}

/* Dane warsztatu: karta o cienkiej ramce, nie pole krzyczące kolorem.
   Sygnał niesie jedna wartość — cena — i przycisk. */
.pole-danych {
	margin: 0;
	padding: var(--s4) var(--s5);
	background: var(--pole);
	border: 1px solid var(--kreska);
	border-radius: var(--promien);
	box-shadow: var(--cien-1);
	color: var(--atrament);
	align-self: start;
}
.pole-danych__wiersz {
	display: grid;
	gap: 0;
	padding-block: var(--s2);
	border-bottom: 1px solid var(--kreska);
}
.pole-danych__wiersz:first-child { padding-top: 0; }
.pole-danych__wiersz:last-child { border-bottom: 0; padding-bottom: 0; }
.pole-danych dt {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--atrament-2);
}
.pole-danych dd {
	margin: 0;
	font-family: var(--font-naglowek);
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}
.pole-danych__uwaga {
	display: block;
	font-family: var(--font-tekst);
	font-size: var(--t-s);
	font-weight: 400;
	color: var(--atrament-2);
}

@media (min-width: 48em) {
	.metryczka__wnetrze {
		grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
		grid-template-areas: 'tresc dane' 'kadr kadr';
		column-gap: var(--s7);
		row-gap: var(--s6);
		align-items: start;
	}
	.metryczka__tresc { grid-area: tresc; }
	.pole-danych { grid-area: dane; }
	.metryczka__kadr { grid-area: kadr; }
}

@media (min-width: 62em) {
	.metryczka__wnetrze {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
		grid-template-areas: 'tresc kadr' 'dane kadr';
		column-gap: var(--s8);
		row-gap: var(--s6);
		align-content: start;
	}
	.metryczka__kadr img { aspect-ratio: 4 / 5; }
	.pole-danych { max-width: 26rem; }
}

/* ------------------------------------------------------------------ problem i efekt */

.rozstrzygniecie {
	padding-block: var(--rytm);
	background: var(--pole-2);
}
.rozstrzygniecie__wnetrze {
	display: grid;
	gap: var(--s5);
}
.rozstrzygniecie h2 {
	font-size: var(--t-l);
	margin-bottom: var(--s4);
}
.lista-objawow,
.lista-efektow {
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 46ch;
}
.lista-objawow li,
.lista-efektow li {
	font-size: var(--t-m);
	padding-block: var(--s1);
	border-top: 1px solid var(--kreska);
}
.lista-objawow li:last-child,
.lista-efektow li:last-child { border-bottom: 1px solid var(--kreska); }
.lista-efektow li {
	padding-left: 1.75rem;
	position: relative;
}
.lista-efektow li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.45em;
	width: 0.85rem;
	height: 0.85rem;
	background: var(--zielen);
}
.rozstrzygniecie__kolumna--efekt h2 { color: var(--zielen-ciemniej); }

@media (min-width: 54em) {
	.rozstrzygniecie__wnetrze { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}

/* ------------------------------------------------------------------ program dnia */

.program {
	padding-block: var(--rytm);
	background: var(--tablica);
	color: var(--jasny);
}
.program h2 { color: var(--jasny); }
.program__naglowek { max-width: 46ch; margin-bottom: var(--s5); }
.program__wprowadzenie { color: var(--jasny-2); }

.os-godzinowa {
	margin: 0 0 var(--s7);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--kreska-ciemna);
}
.blok-programu {
	display: grid;
	gap: var(--s1) var(--s5);
	padding-block: var(--s4);
	border-bottom: 1px solid var(--kreska-ciemna);
	margin: 0;
}
.blok-programu__czas {
	display: flex;
	align-items: baseline;
	gap: var(--s3);
}
.blok-programu__godzina {
	font-family: var(--font-naglowek);
	font-size: 1.8rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--zielen-jasna);
	line-height: 1;
}
.blok-programu__minuty {
	color: var(--jasny-2);
	font-size: var(--t-s);
	font-variant-numeric: tabular-nums;
}
.blok-programu__tytul {
	font-size: var(--t-l);
	margin-bottom: var(--s2);
	color: var(--jasny);
}
.blok-programu__opis {
	max-width: 56ch;
	color: var(--jasny-2);
	margin-bottom: var(--s3);
}

.znacznik-roli {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-size: var(--t-s);
	font-weight: 600;
	color: var(--jasny-2);
}
.znacznik-roli__pole {
	width: 0.85rem;
	height: 0.85rem;
	flex: 0 0 auto;
	background: var(--rola-ekspert-jasna);
}
.znacznik-roli--ekspert .znacznik-roli__pole { background: var(--rola-ekspert-jasna); }
.znacznik-roli--mentor .znacznik-roli__pole { background: var(--rola-mentor-jasna); }
.znacznik-roli--coach .znacznik-roli__pole { background: var(--rola-coach-jasna); }
.znacznik-roli--kierownik .znacznik-roli__pole { background: var(--rola-kierownik-jasna); }

.legenda-rol {
	padding: var(--s3);
	background: var(--tablica-glebiej);
}
.legenda-rol__wstep {
	margin-bottom: var(--s4);
	color: var(--jasny-2);
	font-size: var(--t-s);
}
.legenda-rol dl { margin: 0; display: grid; gap: var(--s1); }
/* Rola i jej opis w jednym wierszu: cztery pozycje w dwóch liniach każda zjadały ekran. */
.legenda-rol__wiersz { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); }
.legenda-rol__wiersz dd { flex: 1 1 14rem; }
.legenda-rol dt { font-weight: 600; }
.legenda-rol dd { margin: 0; color: var(--jasny-2); font-size: var(--t-s); }

/* Przerwa jest częścią planu, ale nie treścią — zajmuje mniej miejsca i nie ma roli. */
.blok-programu--przerwa { padding-block: var(--s3); }
.blok-programu--przerwa .blok-programu__godzina { font-size: 1.15rem; color: var(--jasny-2); }
.blok-programu--przerwa .blok-programu__tytul {
	font-family: var(--font-tekst);
	font-size: var(--t-s);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--jasny-2);
	margin: 0;
}

@media (min-width: 48em) {
	.blok-programu {
		grid-template-columns: 8.5rem minmax(0, 1fr);
		align-items: baseline;
		padding-block: var(--s5);
	}
	.blok-programu__czas { display: block; }
	.blok-programu__minuty { display: block; margin-top: var(--s1); }
	.blok-programu__opis { margin-bottom: 0; }
	.legenda-rol__wiersz { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
	.legenda-rol dl { gap: var(--s2); }
}

/* Od szerokiego ekranu rola staje w trzeciej kolumnie planu, przy tytule bloku. */
@media (min-width: 62em) {
	.blok-programu { grid-template-columns: 8.5rem minmax(0, 1fr) max-content; }
	.blok-programu .znacznik-roli { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ------------------------------------------------------------------ fazy w programie */

/* Budowa spotkania jako pasek pod wprowadzeniem: pięć nazw z czasem. Wcześniej stała
   osobną sekcją z rysunkiem karteczek i dublowała rozpiskę godzinową poniżej. */
.fazy { margin-top: var(--s5); }
.fazy__wstep { color: var(--jasny-2); max-width: 46ch; }
.fazy__lista {
	margin: var(--s3) 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
}
.fazy__faza {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	padding: var(--s1) var(--s3);
	border: 1px solid var(--kreska-ciemna);
	border-radius: var(--promien);
}
.fazy__nazwa { font-weight: 600; font-size: var(--t-s); }
.fazy__czas {
	font-size: var(--t-xs);
	font-variant-numeric: tabular-nums;
	color: var(--zielen-jasna);
}

.program__kadr { margin: var(--s5) 0 0; }
.program__kadr img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--promien);
}
.program__kadr figcaption {
	margin-top: var(--s2);
	font-size: var(--t-s);
	color: var(--jasny-2);
}

@media (min-width: 62em) {
	.program__wnetrze {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
		grid-template-areas: 'naglowek kadr' 'os os' 'legenda legenda';
		column-gap: var(--s8);
		align-items: start;
	}
	.program__naglowek { grid-area: naglowek; max-width: none; }
	.program__kadr { grid-area: kadr; margin-top: 0; }
	.program__kadr img { aspect-ratio: 4 / 3; }
	.os-godzinowa { grid-area: os; }
	.legenda-rol { grid-area: legenda; }
}

/* ------------------------------------------------------------------ wejście w zapis */

/* Wezwanie po programie: czytelnik właśnie przeczytał, co dostaje w ciągu dnia,
   i to jest moment, w którym decyduje. Bez niego droga od pierwszego ekranu
   do formularza mierzy ponad osiem tysięcy pikseli. */
.wejscie-w-zapis {
	background: var(--bursztyn);
	color: var(--atrament);
}
.wejscie-w-zapis__wnetrze {
	max-width: var(--kontener);
	margin-inline: auto;
	padding: var(--s4) var(--margines);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
}
.wejscie-w-zapis__tresc { margin: 0; max-width: 46ch; }
.wejscie-w-zapis .przycisk--glowny { background: var(--tablica); }
.wejscie-w-zapis .przycisk--glowny:hover { background: var(--tablica-glebiej); }

/* ------------------------------------------------------------------ techniki */

.techniki { padding-block: var(--rytm); }
.techniki__wstep { max-width: 58ch; margin-bottom: var(--s4); color: var(--atrament-2); }

/* Technika jest kartą z zestawu, nie plamą koloru: biel, cienka ramka, czas
   w bursztynie. Na telefonie opis chowa się pod dotknięciem, bo dwanaście
   pełnych opisów pod rząd czyta się jak wydruk. */
.karteczki {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--s2);
	align-items: start;
}
.karteczka {
	margin: 0;
	background: var(--pole);
	border: 1px solid var(--kreska);
	border-radius: var(--promien);
	color: var(--atrament);
	transition: box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.karteczka:hover { border-color: var(--kreska-mocna); box-shadow: var(--cien-1); }

.karteczka__naglowek {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s1) var(--s3);
	min-height: 48px;
	padding: var(--s2) var(--s4);
	cursor: pointer;
	list-style: none;
}
.karteczka__naglowek::-webkit-details-marker { display: none; }
.karteczka__naglowek::after {
	content: '';
	margin-left: auto;
	align-self: center;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--atrament-2);
	border-bottom: 2px solid var(--atrament-2);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 180ms var(--ease);
}
.karteczka__wnetrze[open] > .karteczka__naglowek::after {
	transform: rotate(225deg) translate(-2px, -2px);
}

.karteczka__nazwa { font-size: 1.05rem; margin: 0; letter-spacing: 0; }
.karteczka__czas {
	font-size: var(--t-s);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--bursztyn-tekst);
}
.karteczka__opis {
	margin: 0;
	padding: 0 var(--s4) var(--s4);
	font-size: var(--t-s);
	color: var(--atrament-2);
	max-width: 46ch;
}

@media (min-width: 40em) {
	.karteczki {
		grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
		gap: var(--s4);
	}
	.karteczka__naglowek {
		display: block;
		min-height: 0;
		padding: var(--s5) var(--s5) var(--s2);
		cursor: default;
	}
	.karteczka__naglowek::after { content: none; }
	.karteczka__nazwa { font-size: 1.2rem; margin-bottom: var(--s1); }
	.karteczka__czas { display: block; }
	.karteczka__opis { padding: 0 var(--s5) var(--s5); }
}

/* ------------------------------------------------------------------ zakres */

.zakres { padding-block: var(--rytm); border-top: 1px solid var(--kreska); }
.zakres__wnetrze { display: grid; gap: var(--s5); }
.zakres h2 { font-size: var(--t-l); }
.lista-zakresu { margin: 0 0 var(--s4); padding: 0; list-style: none; max-width: 48ch; }
.lista-zakresu li {
	position: relative;
	padding-left: 1.75rem;
	padding-block: var(--s1);
}
.lista-zakresu li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1.35em;
	width: 0.85rem;
	height: 0.85rem;
	background: var(--zielen);
}
.lista-zakresu--granice li::before {
	background: transparent;
	border: 2px solid var(--obrys);
	height: 0;
	top: 1.7em;
	width: 0.85rem;
}
.zakres__wymagania {
	max-width: 48ch;
	color: var(--atrament-2);
	font-size: var(--t-s);
}

@media (min-width: 54em) {
	.zakres__wnetrze { grid-template-columns: 1fr 1fr; gap: var(--s8); }
}

/* ------------------------------------------------------------------ prowadzący */

.prowadzacy { padding-block: var(--rytm); background: var(--pole-2); }
.prowadzacy__kadr { margin: 0 0 var(--s4); }
.prowadzacy__kadr img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--promien);
	box-shadow: var(--cien-1);
}
.prowadzacy__wstep { margin-bottom: var(--s5); color: var(--atrament-2); }
.prowadzacy__lista { display: grid; gap: var(--s5); }
.prowadzacy__osoba { max-width: 52ch; }
.prowadzacy__imie { font-size: var(--t-l); margin-bottom: var(--s1); }
.prowadzacy__rola {
	margin-bottom: var(--s3);
	color: var(--zielen-ciemniej);
	font-weight: 600;
	font-size: var(--t-s);
}
.prowadzacy__opis { color: var(--atrament); }

@media (min-width: 62em) {
	.prowadzacy__wnetrze {
		display: grid;
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
		grid-template-areas: 'kadr naglowek' 'kadr wstep' 'kadr lista';
		column-gap: var(--s8);
		align-items: start;
	}
	.prowadzacy__kadr { grid-area: kadr; margin-bottom: 0; }
	.prowadzacy h2 { grid-area: naglowek; }
	.prowadzacy__wstep { grid-area: wstep; }
	.prowadzacy__lista { grid-area: lista; }
}

/* ------------------------------------------------------------------ terminy */

.terminy { padding-block: var(--rytm); }
.terminy__uwaga { max-width: 58ch; color: var(--atrament-2); margin-bottom: var(--s4); }

.tabela-terminow {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.tabela-terminow__podpis {
	text-align: left;
	padding-bottom: var(--s3);
	color: var(--atrament-2);
	font-size: var(--t-s);
}
.tabela-terminow th,
.tabela-terminow td {
	padding: var(--s3) var(--s4) var(--s3) 0;
	border-bottom: 1px solid var(--kreska);
	vertical-align: baseline;
}
.tabela-terminow thead th {
	font-family: var(--font-tekst);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--atrament-2);
	border-bottom: 2px solid var(--atrament);
	padding-bottom: var(--s2);
}
.tabela-terminow tbody th {
	font-family: var(--font-naglowek);
	font-size: 1.1rem;
	letter-spacing: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.tabela-terminow__wiersz--zamkniety { color: var(--atrament-2); }

/* Najbliższy termin na żółtym polu: atrament na nim ma 11,46:1, więc wyróżnienie
   niesie sygnał, a nie kosztuje czytelności. */
.tabela-terminow__wiersz--najblizszy > * { background: var(--bursztyn); }
.tabela-terminow__wiersz--najblizszy th:first-child { padding-left: var(--s3); }
.tabela-terminow__wiersz--najblizszy .odnosnik-akcji { color: var(--atrament); }
.tabela-terminow__znacznik {
	display: inline-block;
	margin-left: var(--s2);
	padding: 0 var(--s2);
	background: var(--atrament);
	color: var(--bursztyn);
	font-family: var(--font-tekst);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	vertical-align: middle;
}
.tabela-terminow__stan { font-size: var(--t-s); }
.tabela-terminow__akcja { text-align: right; padding-right: 0; }
.odnosnik-akcji {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--s3);
	font-weight: 600;
	color: var(--zielen-ciemniej);
}

/* Na telefonie termin jest blokiem, nie wierszem tabeli: data prowadzi, szczegóły
   idą jednym ciągiem oddzielonym kropkami, akcja stoi pod spodem. Siatka dwóch
   kolumn rozsypywała te same dane na cztery linie z przypadkowym wyrównaniem. */
@media (max-width: 47.99em) {
	.tabela-terminow thead { display: none; }
	.tabela-terminow tbody tr {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		column-gap: var(--s2);
		padding: var(--s4) 0;
		border-bottom: 1px solid var(--kreska);
	}
	.tabela-terminow th,
	.tabela-terminow td { border: 0; padding: 0; }
	.tabela-terminow tbody th {
		flex: 1 0 100%;
		margin-bottom: var(--s1);
		font-size: 1.2rem;
	}
	.tabela-terminow tbody td:not(.tabela-terminow__akcja) {
		flex: 0 1 auto;
		font-size: var(--t-s);
		color: var(--atrament-2);
	}
	/* Kropka rozdziela dane, więc nie stoi przed akcją ani na końcu ciągu. */
	.tabela-terminow tbody td:not(.tabela-terminow__akcja)::after { content: ' ·'; }
	.tabela-terminow tbody td:not(.tabela-terminow__akcja):has(+ .tabela-terminow__akcja)::after,
	.tabela-terminow tbody td:not(.tabela-terminow__akcja):last-child::after { content: none; }
	.tabela-terminow__akcja { flex: 1 0 100%; text-align: left; }
	.odnosnik-akcji { padding-left: 0; }
	.tabela-terminow__wiersz--najblizszy { padding-inline: var(--s4); }
	.tabela-terminow__wiersz--najblizszy > * { background: none; }
	.tabela-terminow__wiersz--najblizszy { background: var(--bursztyn); }
	/* Pełny atrament, nie zmiękczony: na bursztynie miks 80% dawał 3,33:1 przy progu 4,5:1. */
	.tabela-terminow tbody .tabela-terminow__wiersz--najblizszy td:not(.tabela-terminow__akcja) {
		color: var(--atrament);
	}
	.tabela-terminow__wiersz--najblizszy th:first-child { padding-left: 0; }
}

/* ------------------------------------------------------------------ zapis */

.zapis {
	position: relative;
	padding-block: var(--rytm);
	background-color: var(--tablica);
	color: var(--jasny);
	isolation: isolate;
}
/* Zdjęcie ściany karteczek pod nakładką: tło niesie kontekst, tekst zachowuje
   kontrast, bo nakładka jest nieprzezroczysta w 88%. */
.zapis::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgb(17 45 32 / 0.90), rgb(17 45 32 / 0.94)),
		image-set(
			url('../img/sciana-992.webp') 1x,
			url('../img/sciana-1600.webp') 2x
		);
	background-size: cover;
	background-position: center;
}
.zapis h2 { color: var(--jasny); }
.zapis__wnetrze { display: grid; gap: var(--s5); }
.zapis__wstep { max-width: 46ch; color: var(--jasny-2); }
.zapis__alternatywa { font-size: var(--t-s); }

.formularz__pola { display: grid; gap: var(--s3); }
.formularz__pole { margin: 0; display: grid; gap: var(--s2); }
.formularz label { font-weight: 600; font-size: var(--t-s); }
.formularz__opcjonalne { font-weight: 400; color: var(--jasny-2); }
.formularz input[type='text'],
.formularz input[type='email'],
.formularz input[type='number'],
.formularz select,
.formularz textarea {
	border-radius: var(--promien);
	width: 100%;
	min-height: 48px;
	padding: var(--s3);
	background: var(--pole);
	color: var(--atrament);
	border: 2px solid var(--obrys);
	font-family: var(--font-tekst);
	font-size: var(--t-base);
}
.formularz textarea { min-height: 6rem; resize: vertical; }
.formularz input::placeholder,
.formularz textarea::placeholder { color: var(--atrament-2); }
.formularz input:focus-visible,
.formularz select:focus-visible,
.formularz textarea:focus-visible {
	outline: 3px solid var(--bursztyn);
	outline-offset: 1px;
	border-color: var(--atrament);
}
.formularz [aria-invalid='true'] { border-color: var(--blad); border-width: 3px; }

.formularz__blad {
	color: var(--bursztyn);
	font-size: var(--t-s);
	font-weight: 600;
}
.formularz__blad-ogolny {
	padding: var(--s4);
	margin-bottom: var(--s5);
	background: var(--blad-tlo);
	color: var(--blad);
	font-weight: 600;
	border: 2px solid var(--blad);
}
.formularz__brak-terminow {
	padding: var(--s3);
	background: var(--tablica-glebiej);
	color: var(--jasny-2);
	font-size: var(--t-s);
}
.formularz__zgoda { margin: var(--s5) 0; }
.formularz__zgoda label {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--s3);
	align-items: start;
	font-weight: 400;
	font-size: var(--t-s);
	color: var(--jasny-2);
}
.formularz__zgoda input[type='checkbox'] {
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var(--zielen-jasna);
}
/* Pole-pułapka nie jest polem formularza dla nikogo poza automatem, więc znika
   z układu w całości. Wycięcie klipem zostawiałoby kontrolkę o szerokości 28 px. */
.formularz__pulapka { display: none; }
.formularz__nota {
	margin-top: var(--s3);
	color: var(--jasny-2);
	font-size: var(--t-s);
}

@media (min-width: 54em) {
	.zapis__wnetrze { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s8); }
	.formularz__pola { grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5); }
	.formularz__pole--szerokie { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ pytania */

.pytania { padding-block: var(--rytm); }
.pytania__lista { border-top: 1px solid var(--kreska); max-width: 68ch; }
.pytania__dopisek { margin-bottom: var(--s3); color: var(--atrament-2); max-width: 44ch; }

/* Od szerokiego ekranu pytania i dopisek stoją obok siebie: sama lista zostawiała
   pustą prawą połowę strony. */
@media (min-width: 62em) {
	.pytania__wnetrze {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
		grid-template-areas: 'naglowek dopisek' 'lista dopisek';
		column-gap: var(--s8);
		align-items: start;
	}
	.pytania h2 { grid-area: naglowek; }
	.pytania__lista { grid-area: lista; }
	.pytania__dopisek { grid-area: dopisek; margin-bottom: 0; }
}
.pytanie { border-bottom: 1px solid var(--kreska); }
.pytanie__tresc {
	letter-spacing: -0.002em;
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-height: 48px;
	padding-block: var(--s2);
	font-family: var(--font-naglowek);
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.pytanie__tresc::-webkit-details-marker { display: none; }
.pytanie__tresc::before {
	content: '+';
	flex: 0 0 auto;
	width: 1.5rem;
	color: var(--zielen);
	font-size: 1.4rem;
	line-height: 1;
}
.pytanie[open] .pytanie__tresc::before { content: '−'; }
.pytanie__odpowiedz { padding: 0 0 var(--s4) 2.25rem; max-width: 62ch; color: var(--atrament); }

/* ------------------------------------------------------------------ pasek zapisu */

.pasek-zapisu {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: var(--warstwa-pasek);
	background: var(--tablica-glebiej);
	color: var(--jasny);
	border-top: 2px solid var(--zielen-jasna);
	transform: translateY(110%);
	transition: transform 260ms var(--ease);
}
.pasek-zapisu[data-widoczny] { transform: translateY(0); }
.pasek-zapisu__wnetrze {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding-block: var(--s2);
}
.pasek-zapisu__dane {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s3);
	font-size: var(--t-xs);
	line-height: 1.25;
	min-width: 0;
}
.pasek-zapisu__termin { font-weight: 600; white-space: nowrap; }
.pasek-zapisu__cena { color: var(--jasny-2); }
.pasek-zapisu .przycisk { min-height: 44px; padding-block: var(--s2); flex: 0 0 auto; }

/* Pasek stoi nad treścią, więc strona rezerwuje pod niego miejsce: bez tego ostatnie
   dwa wiersze każdego ekranu chowają się pod nim przy przewijaniu. Wysokość mierzy
   skrypt, wartość zapasowa wystarcza na jeden wiersz z przyciskiem. */
body:has(.pasek-zapisu) { --wysokosc-paska: 68px; }
body:has(.pasek-zapisu[data-widoczny]) { padding-bottom: var(--wysokosc-paska); }
html { scroll-padding-bottom: 5rem; }

/* ------------------------------------------------------------------ strona wejściowa */

.wejscie { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--rytm); }
.wejscie__tytul { max-width: 18ch; }
.wejscie__lead { max-width: 58ch; font-size: var(--t-m); margin-bottom: var(--s6); }
.wejscie__dopisek { margin-top: var(--s3); color: var(--atrament-2); font-size: var(--t-s); max-width: 54ch; }

.zawartosc-pracy { padding-block: var(--rytm); background: var(--pole-2); border-top: 1px solid var(--kreska); }
.wykaz-pracy { margin: 0 0 var(--s6); display: grid; gap: var(--s5); }
.wykaz-pracy__pozycja { border-top: 1px solid var(--kreska); padding-top: var(--s4); }
.wykaz-pracy dt {
	font-family: var(--font-naglowek);
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: var(--s2);
}
.wykaz-pracy dd { margin: 0; max-width: 62ch; color: var(--atrament); }
.zawartosc-pracy__nota { max-width: 62ch; color: var(--atrament-2); font-size: var(--t-s); }

@media (min-width: 54em) {
	.wykaz-pracy { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s7); }
}

/* ------------------------------------------------------------------ wykaz warsztatów */

.wykaz { padding-block: var(--rytm); }
.wykaz__lista { margin: 0; padding: 0; list-style: none; }
.pozycja-wykazu { border-top: 1px solid var(--kreska); padding-block: var(--s6); }
.pozycja-wykazu__tytul { margin-bottom: var(--s3); }
.pozycja-wykazu__tytul a { color: var(--atrament); text-decoration: none; }
.pozycja-wykazu__tytul a:hover { color: var(--zielen-ciemniej); text-decoration: underline; }
.pozycja-wykazu__zajawka { max-width: 52ch; color: var(--atrament-2); }
.pozycja-wykazu__dane {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s6);
}
.pozycja-wykazu__dane dt {
	font-size: var(--t-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--atrament-2);
}
.pozycja-wykazu__dane dd { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------------ strony treściowe */

.strona { padding-block: var(--rytm); }
.strona__tresc, .strona__lista { max-width: 68ch; }
.strona__odnosniki { max-width: 62ch; padding-left: 0; list-style: none; }
.strona__odnosniki li { border-bottom: 1px solid var(--kreska); }
.strona__odnosniki a { display: inline-flex; align-items: center; min-height: 48px; }

.potwierdzenie { padding-block: var(--rytm); }
.potwierdzenie p { max-width: 62ch; }
.potwierdzenie__tytul { max-width: 20ch; }
.potwierdzenie__numer {
	display: inline-block;
	padding: var(--s3) var(--s4);
	background: var(--bursztyn);
	font-family: var(--font-naglowek);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--s6);
}
.potwierdzenie__dane { margin: 0 0 var(--s6); max-width: 46ch; }
.potwierdzenie__wiersz {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: var(--s3);
	padding-block: var(--s3);
	border-bottom: 1px solid var(--kreska);
}
.potwierdzenie__wiersz dt { color: var(--atrament-2); font-size: var(--t-s); }
.potwierdzenie__wiersz dd { margin: 0; font-weight: 600; }
.potwierdzenie__naglowek { font-size: var(--t-l); }
.potwierdzenie__kroki { max-width: 62ch; }
.potwierdzenie__uwaga {
	max-width: 62ch;
	padding: var(--s4);
	background: var(--pole-2);
	color: var(--atrament-2);
	font-size: var(--t-s);
}

/* ------------------------------------------------------------------ stopka */

.stopka {
	padding-block: var(--rytm) var(--s6);
	background: var(--tablica-glebiej);
	color: var(--jasny-2);
	font-size: var(--t-s);
}
.stopka__wnetrze { display: grid; gap: var(--s5); }
.stopka a { color: var(--zielen-jasna); }
.stopka__nazwa {
	font-family: var(--font-naglowek);
	font-size: 1.2rem;
	letter-spacing: 0;
	font-weight: 700;
	color: var(--jasny);
	margin-bottom: var(--s1);
}
.stopka__naglowek { font-weight: 600; color: var(--jasny); margin-bottom: var(--s1); }
.stopka__drobne { margin-top: var(--s2); max-width: 40ch; color: var(--jasny-2); }
.stopka__kolumna--nota { max-width: 46ch; }

@media (min-width: 54em) {
	.stopka__wnetrze { grid-template-columns: 1fr 1fr 1.2fr; gap: var(--s7); }
}

/* ------------------------------------------------------------------ ruch */

/* Jedyny podpisany ruch strony: plan dnia zapisuje się blok po bloku, tak jak
   powstaje na tablicy. Elementy są widoczne domyślnie — animacja startuje dopiero
   wtedy, gdy skrypt oznaczy blok jako obejrzany, więc brak JS-a albo brak wsparcia
   dla obserwatora nie ukrywa treści. */
@keyframes itr-wejscie-bloku {
	from { opacity: 0.001; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes itr-rysowanie-osi {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

.blok-programu[data-wchodzi] {
	animation: itr-wejscie-bloku 520ms var(--ease) both;
	animation-delay: calc( var(--opoznienie, 0) * 45ms );
}

/* Linia osi rysuje się w miarę przewijania sekcji programu. Bez wsparcia dla osi
   czasu przewijania linia po prostu stoi — to dekoracja, nie nośnik treści. */
.os-godzinowa { position: relative; }

@media (min-width: 48em) {
	.os-godzinowa::before {
		content: '';
		position: absolute;
		left: 6.4rem;
		top: 0;
		bottom: 0;
		width: 2px;
		background: var(--zielen-jasna);
		transform-origin: top;
	}
	@supports (animation-timeline: view()) {
		.os-godzinowa::before {
			animation: itr-rysowanie-osi linear both;
			animation-timeline: view();
			animation-range: entry 10% cover 65%;
		}
	}
}

/* Odpowiedź na dotknięcie: przycisk oddaje nacisk, pole formularza podświetla obrys. */
.przycisk:active { transform: translateY(0) scale(0.985); }
.formularz input,
.formularz select,
.formularz textarea { transition: border-color 140ms var(--ease); }
.odnosnik-akcji { transition: color 140ms var(--ease); }

/* Rozwijanie pytania: wysokość animuje się tam, gdzie przeglądarka to obsługuje. */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
	.pytanie::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size 260ms var(--ease), content-visibility 260ms allow-discrete;
	}
	.pytanie[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 120ms !important;
		scroll-behavior: auto !important;
	}
	.karteczka { transform: none; }
	.karteczka:hover { transform: none; }
	.naglowek__znak:hover .znak { transform: none; }
	.przycisk:hover { transform: none; }
	.przycisk:active { transform: none; }
	/* Wejście bloków zostaje jako sam zanik, bez przesunięcia. */
	.blok-programu[data-wchodzi] { animation: none; }
	.os-godzinowa::before { animation: none; transform: none; }
	.pasek-zapisu { transition: none; }
}