/* ==========================================================
   D-dance — style komponentów (Etap 3)
   Tokeny (kolory, typografia, spacing) zdefiniowane w style.css.
   Opis decyzji projektowych: DESIGN_SYSTEM.md.
   ========================================================== */

/* --- Sekcje / tła --- */
.section--white {
	background: var(--color-white);
}

.section--paper {
	background: var(--color-paper);
}

.section--turquoise {
	background: var(--color-turquoise);
	color: var(--color-white);
}

.section--turquoise a:not(.btn) {
	color: var(--color-white);
	text-decoration-color: var(--color-ink);
}

.section--turquoise-dark {
	background: var(--color-turquoise-dark);
	color: var(--color-white);
}

/* Końcowe CTA — tło to rotujące, przyciemnione zdjęcia zamiast płaskiego
   koloru. --color-turquoise-dark zostaje jako tło sekcji (widoczne przez
   ułamek sekundy przed załadowaniem zdjęć, i zapasowo bez otagowanych
   zdjęć). Mocna, stała nakładka (::after) gwarantuje czytelny kontrast
   jasnego tekstu niezależnie od jasności konkretnego zdjęcia. */
.cta-koncowe {
	position: relative;
	overflow: hidden;
}

.cta-koncowe-bg {
	position: absolute;
	inset: 0;
}

.cta-koncowe-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* 0.78, nie mniej — sprawdzone matematycznie: nawet przy jasnym zdjęciu
	   (bliskim bieli) .lead--on-dark na tej nakładce trzyma min. 4.5:1 (AA). */
	background: rgba(20, 22, 26, 0.78);
}

.cta-koncowe > .container {
	position: relative;
	z-index: 1;
}

.section--dark {
	background: var(--color-ink);
	color: var(--color-white);
}

.section--dark a:not(.btn) {
	color: var(--color-white);
	text-decoration-color: var(--color-lime);
}

.section--dark a:not(.btn):hover {
	color: var(--color-lime);
}

.container--narrow {
	max-width: 52rem;
}

.text-center {
	text-align: center;
}

.text-small {
	font-size: var(--text-small);
	color: var(--color-gray-600);
}

.section--dark .text-small {
	color: var(--color-fog-300);
}

/* --- Nagłówek strony (Oferta, Grafik, Instruktorzy, Q&A, Aktualności) ---
   Wersja B: bez osobnego, kolorowego "boxa" — cienka linia zamiast bloku
   koloru. Eyebrow i H1 trzymają się RAZEM (to samo wyrównanie, blisko
   siebie), żeby czytały się jako jedna spójna etykieta, nie dwa oderwane
   napisy. Tytuł umiarkowanie duży — mniejszy niż H1 w Hero, bo to nie
   to samo miejsce w hierarchii uwagi. */
.page-header {
	padding-block: var(--space-7) var(--space-6);
	background: var(--color-white);
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-gray-200);
}

.page-header-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: var(--space-2);
}

.page-header .eyebrow {
	color: var(--color-turquoise-dark);
	margin: 0;
}

.page-header h1 {
	font-size: clamp(1.75rem, 1.35rem + 2vw, 3rem);
	line-height: var(--lh-tight);
	max-width: 22ch;
	margin: 0;
}

@media (max-width: 639px) {
	.page-header-inner {
		align-items: flex-start;
		text-align: left;
	}
}

/* --- Hero (strona główna) --- */
.hero {
	padding-block: var(--space-10) var(--space-9);
	color: var(--color-white);
}

/* PRÓBKA do akceptacji: gradient + "liquid glass" + cień, tylko w Hero
   (patrz DESIGN_SYSTEM.md — decyzja o rozszerzeniu na resztę strony
   czeka na Twoją reakcję po zobaczeniu tego na żywo). */
.hero--sample {
	/* overflow celowo NIE ukryty (patrz .hero-photo niżej — zdjęcie ma
	   wychodzić poza dolną krawędź boxa). Blask (.hero-glow) trzyma się
	   w bezpiecznym zasięgu (patrz niżej), więc nie potrzebuje przycięcia. */
	position: relative;
	z-index: 1;
	overflow: visible;
	/* Gradient celowo nie dochodzi do jaśniejszego --color-turquoise — przy
	   białym tekście spadłby poniżej AA dla drobnego druku (eyebrow, lead).
	   Ink → turquoise-dark daje min. 5.2:1 z bielą w każdym punkcie tła. */
	background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-turquoise-dark) 100%);
}

/* Tło Hero: rotujące zdjęcia (zamiast/pod gradientem) z mocną, stałą
   nakładką — ta sama sprawdzona matematycznie wartość (0.78) co przy
   innych miejscach z tekstem na zdjęciu: nawet przy jasnym zdjęciu biały
   H1/eyebrow trzyma ~9.8:1, a .lead--on-dark (jaśniejszy szary) ~4.6:1
   (oba nad wymaganym AA). Flat, nie gradient — dwubarwna nakładka na
   jasnym zdjęciu potrafiła schodzić poniżej 4.5:1 dla drobnego tekstu. */
.hero-bg {
	position: absolute;
	inset: 0;
}

.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(20, 22, 26, 0.78);
}

/* right:0 (nie ujemny) — .hero--sample ma celowo overflow:visible (żeby
   .hero-photo mogło "wychodzić" poza dół sekcji), więc jakikolwiek
   ujemny "right" tutaj wypychał całą stronę szerzej niż viewport i
   powodował poziomy scroll/przycinanie treści przy węższych oknach. */
.hero-glow {
	position: absolute;
	top: -4rem;
	right: 0;
	width: 26rem;
	height: 26rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(192, 218, 47, 0.28) 0%, rgba(192, 218, 47, 0) 70%);
	pointer-events: none;
}

.hero-grid {
	position: relative;
	display: grid;
	gap: var(--space-8);
	align-items: center;
}

.hero--split .hero-grid {
	grid-template-columns: 1.15fr 0.85fr;
}

.hero-content {
	position: relative;
}

/* Nagłówek Hero to teraz pełne zdanie (nie krótkie hasło) — mniejszy
   rozmiar niż domyślny --text-display, żeby długi tekst dobrze się
   komponował, a nie łamał na kilka linii w gigantycznej czcionce. */
.hero-content h1 {
	font-size: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
}

/* Zdjęcie "wychodzi" poza box z gradientem: margines ujemny na dole
   przeciąga kartę poza dolną krawędź sekcji, w kolejną sekcję. Zdjęcia
   ułożone jedno na drugim (position: absolute) i przenikają się przez
   opacity — patrz .photo-fade-slide niżej i assets/js/photo-fade.js
   (mechanizm współdzielony z rotacją zdjęć instruktorów). */
.hero-photo {
	position: relative;
	align-self: end;
	aspect-ratio: 5 / 4;
	max-height: 26rem;
	margin-bottom: -8.5rem;
	border-radius: var(--radius-md);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
	transform: rotate(-2deg);
}

/* --- Rotacja zdjęć (przenikanie opacity) — współdzielone przez Hero i
   profile instruktorów. Wrapper (np. .hero-photo, .instruktor-profil-media)
   musi mieć position:relative i własny rozmiar (aspect-ratio/wysokość) —
   slajdy są position:absolute i się na siebie nakładają. */
.photo-fade-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.photo-fade-slide.is-active {
	opacity: 1;
}

/* Wariant z efektem powiększenia (np. kafelki oferty) — nowy element
   "wjeżdża" lekkim zoomem zamiast tylko się rozjaśniać. */
.zoom-fade-slide {
	transform: scale(0.88);
	transition: opacity 1.2s ease, transform 1.2s ease;
}

.zoom-fade-slide.is-active {
	transform: scale(1);
}

@media (max-width: 899px) {
	.hero--split .hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-photo {
		max-width: 22rem;
		max-height: none;
		margin-inline: auto;
		margin-bottom: -2.5rem;
		transform: none;
	}
}

/* --- "O D-dance" ze zdjęciem (opcjonalnie, jeśli ustawione w ACF) ---
   Zdjęcie po lewej: w znaczniku .o-ddance-photo jest teraz PRZED
   .o-ddance-content, więc kolumny gridu są w tej samej kolejności
   (0.85fr zdjęcie / 1fr tekst) — bez potrzeby .order. */
.o-ddance-grid {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: var(--space-8);
	align-items: center;
}

/* Wrapper ma własny rozmiar i jest kontekstem pozycjonowania dla
   .photo-fade-slide (rotacja) — ten sam wzorzec co .hero-photo i
   .instruktor-profil-media. */
.o-ddance-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4;
	max-height: 24rem;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

@media (max-width: 899px) {
	.o-ddance-grid {
		grid-template-columns: 1fr;
	}

	.o-ddance-photo {
		max-width: 24rem;
		margin-inline: auto;
	}
}

.eyebrow-glass {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	margin: 0 0 var(--space-5);
	font-size: var(--text-eyebrow);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-white);
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-button);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.4);
}

.btn-lifted {
	box-shadow: 0 20px 45px -18px rgba(10, 118, 144, 0.55);
}

/* --- Karuzela kafelków oferty (strona główna) ---
   4 kafelki widoczne naraz, przesuwają się co ~3s o jeden w lewo. Pętla:
   tor ma dodatkowe klony pierwszych kafelków na końcu (assets/js/
   oferta-carousel.js), więc reset pozycji po pełnym okrążeniu jest
   wizualnie identyczny ze startem — bez animowania samego skoku (transition:
   none + wymuszony reflow przez getBoundingClientRect(), NIE
   requestAnimationFrame, bo rAF nie odpala się w tle karty). Nowo wjeżdżający
   (ostatni, prawy) kafelek dodatkowo "wjeżdża" lekkim zoomem — patrz
   .oferta-tile--entering.
   UWAGA (odstępstwo od WCAG 2.2.2 na życzenie): brak widocznego przycisku
   pauzy — auto-przewijanie zatrzymuje się na hover/focus i szanuje
   prefers-reduced-motion. To jedyny mechanizm pauzy, słabszy niż
   dedykowany widoczny przycisk. */
.oferta-carousel {
	margin-top: var(--space-8);
	display: flex;
	justify-content: center;
}

.oferta-carousel-viewport {
	overflow: hidden;
	width: calc(4 * clamp(10.5rem, 22vw, 13.5rem) + 3 * var(--space-5));
	max-width: 100%;
	/* Padding pionowy — cień i podpis pod zdjęciem (który nachodzi na dół)
	   potrzebują miejsca, żeby się nie ucinać na krawędzi maski. */
	padding: var(--space-5) 0 var(--space-7);
}

.oferta-carousel-track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-5);
	transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.oferta-tile {
	flex: 0 0 auto;
	width: clamp(10.5rem, 22vw, 13.5rem);
}

/* Bez białej karty-tła — samo zdjęcie (zaokrąglone, z cieniem) niesie
   kompozycję, etykieta to pływający biały "przycisk" nachodzący na dół
   zdjęcia (patrz .oferta-tile-label niżej). */
.oferta-tile a {
	position: relative;
	display: block;
	width: 100%;
	text-decoration: none;
	color: var(--color-ink);
	transition: transform 0.2s ease;
}

.oferta-tile a:hover,
.oferta-tile a:focus-visible {
	transform: translateY(-4px);
}

.oferta-tile-photo {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.2s ease, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Nowo wjeżdżający (skrajny prawy) kafelek — dodaje JS tuż przed
   przesunięciem toru, więc zoom i przesunięcie widać w tym samym ruchu.
   Zdejmowane po zakończeniu przejścia. */
.oferta-tile--entering .oferta-tile-photo {
	transform: scale(0.82);
}

.oferta-tile a:hover .oferta-tile-photo,
.oferta-tile a:focus-visible .oferta-tile-photo {
	box-shadow: 0 24px 40px -14px rgba(0, 0, 0, 0.55);
}

.oferta-tile-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.oferta-tile a:hover .oferta-tile-photo img {
	transform: scale(1.06);
}

.oferta-tile-label {
	display: block;
	position: absolute;
	left: 50%;
	bottom: -1.35rem;
	transform: translateX(-50%);
	z-index: 1;
	width: max-content;
	max-width: calc(100% - var(--space-4));
	padding: var(--space-2) var(--space-4);
	background: var(--color-white);
	color: var(--color-ink);
	border-radius: var(--radius-button);
	font-weight: 700;
	font-size: var(--text-small);
	text-align: center;
	line-height: 1.3;
	box-shadow: 0 10px 22px -10px rgba(0, 0, 0, 0.45);
	transition: background-color 0.2s ease;
}

.oferta-tile a:hover .oferta-tile-label,
.oferta-tile a:focus-visible .oferta-tile-label {
	background: var(--color-turquoise-pale);
}

.eyebrow--on-dark {
	color: var(--color-lime);
}

.eyebrow--lime {
	color: var(--color-lime);
}

.lead--on-dark {
	color: var(--color-fog-300);
}

/* --- Sekcja "Sprawdź naszą ofertę" — pełny blok koloru, wyśrodkowany akcent --- */
.section-oferta-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	padding-block: var(--space-3);
}

.section-oferta-cta h2 {
	max-width: 24ch;
	margin: 0;
}

.section-oferta-cta .btn {
	margin-left: auto;
}

@media (max-width: 639px) {
	.section-oferta-cta {
		flex-direction: column;
		align-items: flex-start;
	}

	.section-oferta-cta .btn {
		margin-left: 0;
	}
}

/* --- Treść WYSIWYG (pola ACF, opisy zajęć/instruktorów, wpisy) --- */
.prose :first-child {
	margin-top: 0;
}

.prose ul,
.prose ol {
	padding-left: 1.25em;
}

.prose li {
	margin-bottom: var(--space-2);
}

/* --- Przyciski --- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-7);
	border-radius: var(--radius-button);
	font-weight: 700;
	font-size: var(--text-body);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	min-height: 44px;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card);
}

/* Wciśnięcie — krótkie, wyraźne "odbicie" zamiast tylko zmiany koloru. */
.btn:active {
	transform: translateY(0) scale(0.96);
	transition-duration: 0.08s;
}

.btn-primary {
	background: var(--color-turquoise);
	color: var(--color-ink);
}

.btn-primary:hover {
	background: var(--color-turquoise-dark);
	color: var(--color-white);
}

.btn-dark {
	background: var(--color-ink);
	color: var(--color-white);
}

.btn-dark:hover {
	background: #000;
	color: var(--color-white);
}

.btn-outline-dark {
	background: transparent;
	border-color: currentColor;
	color: var(--color-ink);
}

.section--dark .btn-outline-dark,
.section--turquoise-dark .btn-outline-dark,
.section--turquoise .btn-outline-dark {
	color: var(--color-white);
}

.btn-on-turquoise-dark {
	background: var(--color-white);
	color: var(--color-turquoise-dark);
}

.btn-on-turquoise-dark:hover {
	background: var(--color-ink);
	color: var(--color-white);
}

.link-arrow {
	font-weight: 700;
	white-space: nowrap;
}

.link-arrow::after {
	content: "\2192";
	display: inline-block;
	margin-left: var(--space-1);
	transition: transform 0.15s ease;
}

.link-arrow:hover::after {
	transform: translateX(3px);
}

/* --- Nagłówek witryny / nawigacja --- */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-200);
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
}

.site-branding {
	margin: 0;
	line-height: 0;
}

.site-branding a {
	display: inline-block;
}

.site-logo {
	width: 7rem;
	max-width: none;
	height: 3.5rem;
}

.menu-toggle {
	display: none;
	background: transparent;
	border: 2px solid var(--color-ink);
	border-radius: var(--radius-sm);
	padding: var(--space-2);
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-ink);
	position: relative;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after {
	content: "";
	position: absolute;
}

.menu-toggle-icon::before {
	top: -6px;
}

.menu-toggle-icon::after {
	top: 6px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle-icon {
	background: transparent;
}

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

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

.primary-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
}

.primary-navigation a {
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--text-small);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	padding-block: var(--space-1);
	border-bottom: 2px solid transparent;
}

.primary-navigation a:hover,
.primary-navigation .current-menu-item > a {
	border-bottom-color: var(--color-turquoise-dark);
	color: var(--color-turquoise-dark);
}

@media (max-width: 767px) {
	.menu-toggle {
		display: inline-flex;
	}

	.primary-navigation {
		display: none;
		width: 100%;
	}

	.primary-navigation[data-open="true"] {
		display: block;
	}

	.primary-navigation ul {
		flex-direction: column;
		gap: var(--space-4);
		padding-block: var(--space-4);
	}

	.site-header-inner {
		flex-wrap: wrap;
	}
}

/* --- Stopka --- */
.site-footer {
	padding-block: var(--space-7);
}

.footer-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	margin: 0 0 var(--space-4);
	padding: 0;
}

.footer-navigation a {
	color: var(--color-white);
	text-decoration: none;
	font-weight: 600;
}

.footer-navigation a:hover {
	color: var(--color-lime);
}

.site-footer p {
	margin: 0;
	color: var(--color-fog-300);
	font-size: var(--text-small);
}

/* --- Karty (Aktualności, Oferta) --- */
.card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--space-6);
}

/* Aktualności na stronie głównej: sztywna siatka 3 w rzędzie, do 5 wpisów
   + jeden dodatkowy kafelek "Wszystkie aktualności" jako 6. pozycja. */
.card-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 899px) {
	.card-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 559px) {
	.card-grid--3 {
		grid-template-columns: 1fr;
	}
}

.aktualnosc-item--more {
	background: var(--color-paper);
	border-style: dashed;
}

.aktualnosc-more-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	padding: var(--space-6);
	min-height: 100%;
	text-align: center;
	font-weight: 700;
	font-size: var(--text-h3);
	color: var(--color-ink);
	text-decoration: none;
}

.aktualnosc-more-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--color-turquoise-pale);
	color: var(--color-turquoise-dark);
	font-size: 1.25rem;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.aktualnosc-item--more:hover .aktualnosc-more-arrow {
	background: var(--color-turquoise);
	color: var(--color-white);
	transform: translateX(4px);
}

.card {
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
}

/* .card i .reveal-in-* obie ustawiają skrót "transition" (na tym samym
   elemencie, np. kafelki Oferty i Aktualności) — skróty się nie łączą,
   nadpisują nawzajem całość, więc czas wejścia (opacity, wolniejszy) ginął
   pod szybszym czasem hover z .card. Tu jawnie godzimy oba naraz. */
.card.reveal-in {
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.15s ease;
}

.card.reveal-in--zoom {
	transition: opacity 1s ease, transform 0.5s ease, box-shadow 0.15s ease;
}

.card-body {
	padding: var(--space-6);
}

.aktualnosc-thumb img,
.zajecia-thumb img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}

.aktualnosc-item h3,
.aktualnosc-item h2 {
	font-size: var(--text-h3);
	margin-bottom: var(--space-2);
}

.aktualnosc-item h3 a,
.aktualnosc-item h2 a {
	text-decoration: none;
}

.aktualnosc-item h3 a:hover,
.aktualnosc-item h2 a:hover,
.aktualnosc-item h3 a:focus-visible,
.aktualnosc-item h2 a:focus-visible {
	text-decoration: underline;
}

.zajecia-card h3 {
	color: var(--color-turquoise-dark);
}

/* --- Definition lists / meta ("Wiek", "Poziom", "Instruktor" itd.) --- */
.meta-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--space-3) var(--space-5);
	margin: var(--space-6) 0 0;
}

.meta-list dt {
	font-weight: 700;
	font-size: var(--text-small);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-turquoise-dark);
}

.meta-list dd {
	margin: 0;
}

.meta-list--lg {
	grid-template-columns: 1fr;
	gap: var(--space-1) 0;
}

.meta-list--lg dt {
	margin-top: var(--space-4);
}

.meta-list--lg dt:first-child {
	margin-top: 0;
}

.zajecia-cena {
	font-weight: 800;
	font-size: 1.125rem;
}

.terminy-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8125rem;
}

/* Zakres godzin nigdy nie łamie się w środku (np. "17:00–" w jednej
   linii, "18:00" w kolejnej) — jeśli cała pozycja się nie mieści, łamanie
   następuje przed godzinami, nie wewnątrz nich. */
.terminy-godziny {
	white-space: nowrap;
}

.zapisy-dokumenty-naglowek {
	color: var(--color-lime);
	font-weight: 700;
	font-size: var(--text-lead);
}

/* Grupa przycisków do dokumentów — używana i w Kontakcie, i w sekcji
   "Zapisy" na stronie głównej. Mniejszy padding/czcionka niż zwykły .btn
   (tylko tutaj) — żeby kilka przycisków z dłuższymi etykietami mieściło
   się obok siebie w jednym rzędzie zamiast od razu się łamać. flex-wrap
   zostaje jako zabezpieczenie na naprawdę wąskich ekranach (mobile). */
.dokumenty-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-5);
}

.dokumenty-przyciski .btn {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-small);
	flex: 1 1 200px;
	max-width: 220px;
	white-space: normal;
	text-align: center;
	justify-content: center;
}

.social-links {
	list-style: none;
	display: flex;
	gap: var(--space-4);
	margin: var(--space-6) 0 0;
	padding: 0;
}

/* --- Tabela Grafiku --- */
.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
}

.table-scroll:focus-visible {
	outline: 3px solid var(--color-lime);
	outline-offset: 2px;
}

.grafik-table {
	border-collapse: collapse;
	width: 100%;
	min-width: 32rem;
}

.grafik-table th,
.grafik-table td {
	padding: var(--space-4) var(--space-5);
	text-align: left;
	border-bottom: 1px solid var(--color-gray-200);
	line-height: var(--lh-body);
}

.grafik-table thead th {
	background: var(--color-ink);
	color: var(--color-white);
	font-size: var(--text-small);
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	padding-block: var(--space-4);
}

.grafik-table tbody tr:nth-child(even) {
	background: var(--color-paper);
}

.grafik-table tbody tr:hover {
	background: var(--color-turquoise-pale);
}

.grafik-table tbody th {
	font-weight: 700;
}

.grafik-table a {
	text-decoration: none;
}

.grafik-table a:hover,
.grafik-table a:focus-visible {
	text-decoration: underline;
}

h2 + .table-scroll,
.table-scroll + h2,
h2 + .grafik-tydzien-scroll {
	margin-top: var(--space-6);
}

.grafik-tydzien-scroll + h2 {
	margin-top: var(--space-9);
}

/* Mniejszy odstęp nad widokiem tygodniowym niż standardowe --space-9
   (reguła [class*="section--"]) — nagłówek strony i tak już wprowadza
   sporo przestrzeni, dublowanie jej pełnym odstępem sekcji wyglądało na
   zbyt duże. Tylko góra (dół zostaje bez zmian). */
.grafik-content {
	padding-top: var(--space-6);
}

/* --- Widok tygodniowy Grafiku: kolumny dni (bez soboty/niedzieli), każda
   pozycja to nazwa grupy + zakres godzin — nie klasyczna siatka godzina×dzień,
   więc nie jest to <table> (nie ma już drugiej osi danych). */
.grafik-tydzien-scroll {
	overflow-x: auto;
	border-radius: var(--radius-md);
}

.grafik-tydzien-scroll:focus-visible {
	outline: 3px solid var(--color-lime);
	outline-offset: 2px;
}

.grafik-tydzien {
	display: flex;
	gap: var(--space-5);
	padding-bottom: var(--space-1);
}

.grafik-dzien {
	flex: 1 1 0;
	min-width: 10.5rem;
	text-align: center;
}

.grafik-dzien-box {
	background: var(--color-paper);
	border-radius: var(--radius-md);
	padding: var(--space-5);
}

/* Plakietka z kolorowym tłem — inaczej niż nazwy zajęć niżej (zwykłe linki
   w kolorze turkusowym), żeby dzień tygodnia wyraźnie czytał się jako
   nagłówek grupy, nie kolejna pozycja na liście. */
.grafik-dzien h3 {
	display: inline-block;
	font-size: var(--text-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ls-eyebrow);
	color: var(--color-white);
	background: var(--color-gray-500);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-button);
	margin: 0 0 var(--space-4);
}

.grafik-dzien-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.grafik-dzien-list li {
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-gray-200);
}

.grafik-dzien-list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.grafik-dzien-list a {
	display: block;
	font-weight: 700;
	text-decoration: none;
}

.grafik-dzien-list a:hover,
.grafik-dzien-list a:focus-visible {
	text-decoration: underline;
}

.grafik-dzien-godziny {
	display: block;
	font-size: var(--text-small);
	color: var(--color-gray-600);
}

/* Węższe ekrany: dni tygodnia jeden pod drugim zamiast kolumn obok siebie —
   bez przewijania w bok. Pięć kolumn (min. 10,5rem każda + odstępy + marginesy
   kontenera) mieści się dopiero od ok. 1100px. */
@media (max-width: 1099px) {
	.grafik-tydzien {
		flex-direction: column;
	}

	.grafik-dzien {
		flex: none;
		min-width: 0;
	}
}

/* Telefony: pełna lista jako karty (jedna pozycja = jeden blok), zamiast
   szerokiej tabeli z przewijaniem. Nagłówki kolumn znikają wizualnie (zostają
   dla czytników), a etykiety pól biorą się z data-label w szablonie. */
@media (max-width: 767px) {
	.grafik-table {
		min-width: 0;
	}

	.grafik-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.grafik-table,
	.grafik-table tbody,
	.grafik-table tr,
	.grafik-table th,
	.grafik-table td {
		display: block;
	}

	.grafik-table tbody tr {
		padding: var(--space-4) var(--space-5);
		border-bottom: 1px solid var(--color-gray-200);
	}

	.grafik-table tbody tr:last-child {
		border-bottom: 0;
	}

	.grafik-table tbody th,
	.grafik-table td {
		padding: 0;
		border: 0;
	}

	.grafik-table tbody th {
		font-size: var(--text-lead);
		margin-bottom: var(--space-1);
	}

	.grafik-table td:empty {
		display: none;
	}

	.grafik-table td[data-label]::before {
		content: attr(data-label) ": ";
		content: attr(data-label) ": " / "";
		font-weight: 700;
		color: var(--color-gray-600);
	}
}

/* --- FAQ / akordeon ---
   Karty zamiast płaskiej listy z linią — więcej charakteru, ta sama
   dostępna mechanika (aria-expanded/aria-controls/hidden). Strzałka
   (nie +/×) obraca się o 180° po rozwinięciu — czysto dekoracyjna,
   stan komunikowany przez aria-expanded na przycisku. */
.faq-list {
	margin-top: var(--space-7);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.faq-item {
	background: var(--color-paper);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
	border-color: var(--color-turquoise);
	box-shadow: var(--shadow-card);
}

.faq-item h3 {
	margin: 0;
	font-size: var(--text-body);
}

.faq-question {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	width: 100%;
	text-align: left;
	font: inherit;
	font-weight: 700;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: var(--space-5) var(--space-6);
	color: var(--color-ink);
}

.faq-question-text {
	flex: 1;
}

.faq-icon {
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--color-turquoise-pale);
	position: relative;
	transition: transform 0.25s ease, background-color 0.2s ease;
}

.faq-icon::before {
	content: "";
	position: absolute;
	top: 42%;
	left: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--color-turquoise-dark);
	border-bottom: 2px solid var(--color-turquoise-dark);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: border-color 0.2s ease;
}

.faq-question[aria-expanded="true"] .faq-icon {
	background: var(--color-turquoise);
	transform: rotate(180deg);
}

.faq-question[aria-expanded="true"] .faq-icon::before {
	border-color: var(--color-white);
}

/* Płynne rozwijanie/zwijanie — JS mierzy realną wysokość treści i animuje
   max-height (patrz assets/js/faq-accordion.js; próba przez czyste CSS
   grid-template-rows 0fr/1fr przycinała treść zamiast animować do pełnej
   wysokości). Domyślnie (bez JS) w pełni widoczne — dla progresywnego
   wzmocnienia JS dopiero dokleja stan zwinięty (inline max-height). */
.faq-answer {
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.faq-answer-inner {
	padding: 0 var(--space-6) var(--space-6);
}

/* --- Instruktorzy --- */
.instruktorzy-overview-section {
	padding-block: var(--space-6);
}

.instruktorzy-overview {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-7) var(--space-6);
}

.instruktorzy-overview a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	text-decoration: none;
	color: var(--color-ink);
	font-weight: 700;
	text-align: center;
	width: auto;
}

.instruktor-avatar-name {
	white-space: nowrap;
}

.instruktor-avatar {
	display: block;
	width: 6.5rem;
	height: 6.5rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-turquoise-pale);
	border: 3px solid transparent;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.instruktorzy-overview a:hover .instruktor-avatar,
.instruktorzy-overview a:focus-visible .instruktor-avatar {
	border-color: var(--color-turquoise);
	transform: scale(1.06);
}

.instruktor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.instruktor-profil {
	scroll-margin-top: var(--space-6);
}

.instruktor-profil-grid {
	display: grid;
	grid-template-columns: minmax(0, 22rem) 1fr;
	gap: var(--space-8);
	align-items: center;
}

.instruktor-profil--reverse .instruktor-profil-grid {
	grid-template-columns: 1fr minmax(0, 22rem);
}


.instruktor-profil--reverse .instruktor-profil-media {
	order: 2;
}

/* Wrapper ma własny rozmiar (aspect-ratio) i jest kontekstem pozycjonowania
   dla .photo-fade-slide (position:absolute) — bez tego zdjęcia (rotujące
   się lub pojedyncze) nie miałyby żadnej wysokości. */
.instruktor-profil-media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	/* Delikatne tło, dopóki nie dodano żadnego dodatkowego zdjęcia — box
	   zostaje na swoim miejscu (rytm sekcji lewo/prawo), zamiast zniknąć. */
	background: var(--color-turquoise-pale);
}

@media (max-width: 767px) {
	.instruktor-profil-grid,
	.instruktor-profil--reverse .instruktor-profil-grid {
		grid-template-columns: 1fr;
	}

	.instruktor-profil--reverse .instruktor-profil-media {
		order: 0;
	}

	.instruktor-profil-media {
		max-width: 20rem;
	}
}

/* --- Pasek informacyjny o cookies ---
   Nieblokujący, przyklejony do dołu (position: fixed), domyślnie [hidden]
   w znaczniku (footer.php) — cookie-consent.js zdejmuje hidden i dopiero
   wtedy włącza klasę .is-visible, żeby:
   1) odwiedzający, którzy już zaakceptowali (localStorage), nigdy nie
      dostali go w DOM-ie (brak ukrytego, ale fokusowalnego przycisku),
   2) przejście wjazdu od dołu działało na transform, nie na display. */
.cookie-consent-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--container-pad);
	background: var(--color-ink);
	box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.4);
	transform: translateY(100%);
	transition: transform 0.4s ease;
}

.cookie-consent-bar.is-visible {
	transform: translateY(0);
}

.cookie-consent-text {
	flex: 1 1 320px;
	margin: 0;
	font-size: var(--text-small);
	color: var(--color-fog-300);
}

.cookie-consent-text a {
	color: var(--color-white);
}

.cookie-consent-actions {
	flex-shrink: 0;
}

.cookie-consent-actions .btn {
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-small);
	min-height: 40px;
}