/*
 * ASG Opole — strona główna i strony usług (agent Strony).
 * Tylko tokeny z tokens.css (var(--asg-…)), prefiks klas .asg-p-.
 * Ruch: tylko transform/opacity; reakcja na wciśnięcie 100 ms; reduced-motion / -transparency / -contrast.
 * Skala promieni: przyciski = pill, karty = --asg-r-lg (wewnętrzne --asg-r-md), obramowania bezel = --asg-r-xl.
 */

/* ============================================================ 0. Baza i reset w obrębie stron */

#main-content.asg-p {
	background: var(--asg-ink);
	color: var(--asg-text);
	font-family: var(--asg-font-text);
	font-size: var(--asg-fs-body);
	line-height: var(--asg-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
.asg-p :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, table, caption, address, fieldset, legend) {
	margin: 0;
	padding: 0;
}
.asg-p :where(ul, ol) { list-style: none; }
/* Fundament: body.asg p:not(:last-child) { margin-bottom: 1em } — w naszych komponentach odstępy ustawiamy sami. */
body.asg .asg-p p:not(:last-child) { margin-bottom: 0; }
.asg-p p + p { margin-top: var(--asg-s-4); }
body.asg .asg-p :is(ul, ol) { padding-left: 0; margin-left: 0; list-style: none; }
.asg-p a[href^="tel:"] { white-space: nowrap; }
.asg-p :where(h1, h2, h3, h4) {
	color: var(--asg-text);
	font-family: var(--asg-font-display);
	font-weight: 650;
	text-wrap: balance;
}
.asg-p :where(p, li, dd) { text-wrap: pretty; }
.asg-p :where(a) { color: var(--asg-sand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--asg-sand) 40%, transparent); text-underline-offset: 0.2em; transition: color var(--asg-dur-fast) var(--asg-ease-out), text-decoration-color var(--asg-dur-fast) var(--asg-ease-out); }
.asg-p :where(a):hover { color: var(--asg-sand-strong); text-decoration-color: currentColor; }
.asg-p :where(img) { display: block; max-width: 100%; height: auto; }
.asg-p :where(address) { font-style: normal; }
.asg-p :focus-visible { outline: 2px solid var(--asg-sand); outline-offset: 3px; border-radius: var(--asg-r-sm); }

.asg-p-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.asg-p-ikona { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ============================================================ 1. Układ i typografia */

.asg-p-wrap {
	width: 100%;
	max-width: calc(var(--asg-max) + 2 * var(--asg-gutter));
	margin-inline: auto;
	padding-inline: var(--asg-gutter);
	box-sizing: border-box;
}
.asg-p-sekcja { padding-block: calc(var(--asg-section) * 0.74) calc(var(--asg-section) * 0.8); }
.asg-p-sekcja--ciasna { padding-block: calc(var(--asg-section) * 0.45) calc(var(--asg-section) * 0.5); }
.asg-p-sekcja + .asg-p-sekcja--ciasna { padding-top: 0; }

.asg-p-h2 {
	font-size: var(--asg-fs-h2);
	line-height: var(--asg-lh-h2);
	letter-spacing: var(--asg-ls-h2);
	max-width: 22ch;
}
.asg-p .asg-p-h3 {
	font-size: var(--asg-fs-h3);
	line-height: var(--asg-lh-h3);
	letter-spacing: var(--asg-ls-h3);
	font-weight: 620;
}
.asg-p .asg-p-h4 {
	font-size: 1.0625rem;
	line-height: 1.3;
	letter-spacing: -0.005em;
	font-weight: 620;
}
.asg-p-lead {
	margin-top: var(--asg-s-4) !important;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.5;
	color: var(--asg-text-2);
	max-width: var(--asg-max-text);
}
.asg-p-h2 + p:not(.asg-p-lead) { margin-top: var(--asg-s-4); color: var(--asg-text-2); max-width: var(--asg-max-text); }
.asg-p-drobne { font-size: var(--asg-fs-small); line-height: var(--asg-lh-small); letter-spacing: var(--asg-ls-small); color: var(--asg-text-3); }
.asg-p-eyebrow {
	font-size: var(--asg-fs-eyebrow);
	letter-spacing: var(--asg-ls-eyebrow);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--asg-sand);
}

.asg-p-dwie {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--asg-s-7) var(--asg-s-8);
	align-items: start;
}
.asg-p-dwie--rowno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.asg-p-lead + .asg-p-dwie { margin-top: var(--asg-s-7); }
.asg-p-dwie > :first-child > .asg-p-h2 + .asg-p-lead { margin-bottom: var(--asg-s-5); }
.asg-p-naglowek-rzad { display: flex; align-items: end; justify-content: space-between; gap: var(--asg-s-5); flex-wrap: wrap; }

/* ============================================================ 2. Przyciski */

.asg-p .asg-p-btn {
	--asg-p-btn-bg: var(--asg-sand);
	--asg-p-btn-fg: var(--asg-sand-ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 3.25rem;
	padding: 0.375rem 1.5rem;
	border-radius: var(--asg-r-pill);
	background: var(--asg-p-btn-bg);
	color: var(--asg-p-btn-fg);
	border: 1px solid transparent;
	font-family: var(--asg-font-text);
	font-size: 1rem;
	font-weight: 620;
	letter-spacing: 0.005em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--asg-dur-fast) var(--asg-ease-out), background-color var(--asg-dur-fast) var(--asg-ease-out), border-color var(--asg-dur-fast) var(--asg-ease-out), color var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-btn:has(.asg-p-btn__ikona) { padding-right: 0.375rem; }
.asg-p .asg-p-btn:hover { --asg-p-btn-bg: var(--asg-sand-strong); color: var(--asg-p-btn-fg); }
.asg-p .asg-p-btn:active,
.asg-p .asg-p-btn.is-wcisniety { transform: scale(0.97); transition-duration: var(--asg-dur-press); transition-timing-function: var(--asg-ease-press); }
.asg-p-btn__ikona {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--asg-p-btn-fg) 12%, transparent);
	transition: transform var(--asg-dur-base) var(--asg-ease-out);
}
.asg-p-btn__ikona .asg-p-ikona { width: 1.05rem; height: 1.05rem; }
.asg-p .asg-p-btn:hover .asg-p-btn__ikona { transform: translateX(2px); }

.asg-p .asg-p-btn--ghost {
	--asg-p-btn-bg: color-mix(in srgb, var(--asg-text) 7%, transparent);
	--asg-p-btn-fg: var(--asg-text);
	border-color: var(--asg-line-strong);
}
.asg-p .asg-p-btn--ghost:hover { --asg-p-btn-bg: color-mix(in srgb, var(--asg-text) 13%, transparent); }
.asg-p .asg-p-btn--tekst {
	--asg-p-btn-bg: transparent;
	--asg-p-btn-fg: var(--asg-sand);
	min-height: 2.75rem;
	padding-left: 0;
	gap: 0.25rem;
}
.asg-p .asg-p-btn--tekst:hover { --asg-p-btn-bg: transparent; --asg-p-btn-fg: var(--asg-sand-strong); }
.asg-p .asg-p-btn--tekst .asg-p-btn__ikona { background: transparent; width: 2rem; }

/* ============================================================ 3. Hero */

.asg-p-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: clamp(30rem, 74svh, 46rem);
	padding-top: calc(var(--asg-header-h) + var(--asg-s-8));
	padding-bottom: clamp(var(--asg-s-7), 6vw, var(--asg-s-9));
	overflow: hidden;
	background: var(--asg-ink);
}
.asg-p-hero--glowna { min-height: min(100svh, 62rem); }
.asg-p-hero--niski { min-height: clamp(26rem, 56svh, 36rem); }
.asg-p-hero__media { position: absolute; inset: 0; z-index: -2; }
.asg-p-hero__media picture,
.asg-p-hero__media img { width: 100%; height: 100%; }
.asg-p-hero__media img {
	object-fit: cover;
	object-position: var(--asg-p-pozycja, 50% 50%);
	transform-origin: 50% 60%;
}
/* Ton zdjęć z biblioteki = gradacja marki (odcień grafitowo-morski), bez obróbki plików. */
.asg-p-hero:not(.asg-p-hero--glowna) .asg-p-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--asg-surface-3);
	mix-blend-mode: color;
	opacity: 0.6;
}
.asg-p-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(to top, var(--asg-ink) 0%, color-mix(in srgb, var(--asg-ink) 78%, transparent) 26%, color-mix(in srgb, var(--asg-ink) 20%, transparent) 62%, color-mix(in srgb, var(--asg-ink) 55%, transparent) 100%),
		linear-gradient(to right, color-mix(in srgb, var(--asg-ink) 70%, transparent) 0%, transparent 62%);
}
.asg-p-hero__tresc { position: relative; }
.asg-p-hero__tresc .asg-p-eyebrow { margin-bottom: var(--asg-s-4); }
.asg-p .asg-p-hero__tytul {
	font-size: var(--asg-fs-h1);
	line-height: var(--asg-lh-h1);
	letter-spacing: var(--asg-ls-h1);
	font-weight: 680;
	max-width: 16ch;
}
.asg-p .asg-p-hero--glowna .asg-p-hero__tytul {
	font-size: var(--asg-fs-hero);
	line-height: var(--asg-lh-hero);
	letter-spacing: var(--asg-ls-hero);
	max-width: 12ch;
	padding-bottom: 0.04em;
}
.asg-p-hero__lead {
	margin-top: var(--asg-s-5) !important;
	max-width: 36rem;
	font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.3125rem);
	line-height: 1.5;
	color: var(--asg-text-2);
}
.asg-p-hero__cta { display: flex; flex-wrap: wrap; gap: var(--asg-s-3); margin-top: var(--asg-s-6); }

/* ============================================================ 4. Pas faktów pod hero */

.asg-p-fakty { padding-block: var(--asg-s-7) 0; }
.asg-p-fakty__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--asg-s-5);
	padding-top: var(--asg-s-6);
	border-top: 1px solid var(--asg-line);
}
.asg-p-fakty__lista dt {
	font-family: var(--asg-font-display);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--asg-text);
	font-variant-numeric: tabular-nums;
}
.asg-p-fakty__lista dd { margin-top: var(--asg-s-2); color: var(--asg-text-3); font-size: var(--asg-fs-small); line-height: var(--asg-lh-small); max-width: 22ch; }

/* ============================================================ 5. Dla kogo — bento */

.asg-p-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: minmax(15rem, auto);
	gap: var(--asg-s-4);
	margin-top: var(--asg-s-7);
}
.asg-p .asg-p-kafel {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--asg-s-2);
	grid-column: span 3;
	padding: var(--asg-s-5);
	border-radius: var(--asg-r-lg);
	background: var(--asg-surface);
	border: 1px solid var(--asg-line);
	color: var(--asg-text);
	text-decoration: none;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--asg-dur-base) var(--asg-ease-out), border-color var(--asg-dur-fast) var(--asg-ease-out), background-color var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-kafel:hover { border-color: var(--asg-line-strong); background: var(--asg-surface-2); color: var(--asg-text); }
.asg-p .asg-p-kafel:active { transform: scale(0.985); transition-duration: var(--asg-dur-press); }
.asg-p .asg-p-kafel--foto { grid-column: span 5; min-height: 30rem; justify-content: flex-end; padding: var(--asg-s-6); }
.asg-p .asg-p-kafel--duzy { grid-column: span 7; }
.asg-p-kafel__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform 900ms var(--asg-ease-out);
}
.asg-p-kafel--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, var(--asg-ink) 8%, color-mix(in srgb, var(--asg-ink) 55%, transparent) 46%, color-mix(in srgb, var(--asg-ink) 5%, transparent) 100%);
}
.asg-p-kafel--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--asg-surface-3);
	mix-blend-mode: color;
	opacity: 0.55;
}
.asg-p .asg-p-kafel--foto:hover .asg-p-kafel__img { transform: scale(1.035); }
.asg-p-kafel__tresc { display: flex; flex-direction: column; gap: var(--asg-s-2); max-width: 30rem; }
.asg-p-kafel__ikona {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--asg-s-3);
	clip-path: var(--asg-hex-pointy);
	background: var(--asg-sand-soft);
	color: var(--asg-sand);
}
.asg-p-kafel__ikona .asg-p-ikona { width: 1.25rem; height: 1.25rem; }
.asg-p-kafel__tytul { font-family: var(--asg-font-display); font-size: var(--asg-fs-h3); line-height: var(--asg-lh-h3); letter-spacing: var(--asg-ls-h3); font-weight: 640; }
.asg-p-kafel--foto .asg-p-kafel__tytul { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.018em; line-height: 1.12; }
.asg-p-kafel__opis { color: var(--asg-text-2); font-size: 0.975rem; line-height: 1.5; }
.asg-p-kafel__wiecej {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: auto;
	padding-top: var(--asg-s-4);
	color: var(--asg-sand);
	font-weight: 600;
	font-size: 0.9375rem;
}
.asg-p-kafel__wiecej .asg-p-ikona { width: 1rem; height: 1rem; transition: transform var(--asg-dur-base) var(--asg-ease-out); }
.asg-p .asg-p-kafel:hover .asg-p-kafel__wiecej .asg-p-ikona { transform: translateX(3px); }
.asg-p-kafel--akcent { background: linear-gradient(160deg, var(--asg-sand-soft), var(--asg-surface) 70%); border-color: color-mix(in srgb, var(--asg-sand) 28%, transparent); }

/* ============================================================ 6. Kroki (heksagon jako znacznik) */

.asg-p-kroki {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--asg-s-6);
	margin-top: var(--asg-s-7) !important;
	margin-bottom: var(--asg-s-7) !important;
	counter-reset: krok;
}
.asg-p-kroki::before {
	content: "";
	position: absolute;
	top: 1.75rem;
	left: 1.75rem;
	right: 1.75rem;
	height: 1px;
	background: linear-gradient(to right, var(--asg-line-strong), var(--asg-line) 85%, transparent);
}
.asg-p-krok { position: relative; }
.asg-p-krok__hex {
	position: relative;
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--asg-s-5);
	clip-path: var(--asg-hex-pointy);
	background: var(--asg-surface-3);
	color: var(--asg-sand);
}
.asg-p-krok__hex::before {
	content: "";
	position: absolute;
	inset: 1px;
	clip-path: var(--asg-hex-pointy);
	background: var(--asg-surface);
	z-index: -1;
}
.asg-p-krok__hex .asg-p-ikona { width: 1.375rem; height: 1.375rem; }
.asg-p-krok p { margin-top: var(--asg-s-3); color: var(--asg-text-2); font-size: 0.975rem; line-height: 1.55; max-width: 30ch; }
.asg-p-krok p a { color: var(--asg-text); white-space: nowrap; }

/* ============================================================ 7. Tabele, bezel, cennik w skrócie */

.asg-p-bezel {
	padding: 0.375rem;
	border-radius: var(--asg-r-xl);
	background: color-mix(in srgb, var(--asg-text) 3.5%, transparent);
	border: 1px solid var(--asg-line);
}
.asg-p-bezel > * {
	border-radius: calc(var(--asg-r-xl) - 0.375rem);
	background: var(--asg-surface);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--asg-text) 7%, transparent);
}
.asg-p-tabela {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-variant-numeric: tabular-nums;
	overflow: hidden;
}
.asg-p-tabela caption {
	caption-side: top;
	text-align: left;
	padding: var(--asg-s-5) var(--asg-s-5) var(--asg-s-2);
	color: var(--asg-text-3);
	font-size: var(--asg-fs-small);
	letter-spacing: var(--asg-ls-small);
}
.asg-p .asg-p-tabela :is(th, td) { padding: 0.9rem var(--asg-s-5); text-align: left; vertical-align: baseline; border: 0; background: none; }
.asg-p .asg-p-tabela thead th { white-space: nowrap; color: var(--asg-text-3); font-weight: 500; font-size: var(--asg-fs-small); padding-top: var(--asg-s-3); padding-bottom: var(--asg-s-3); }
.asg-p .asg-p-tabela tbody th { font-weight: 500; color: var(--asg-text-2); }
.asg-p .asg-p-tabela td { font-weight: 640; color: var(--asg-text); white-space: nowrap; width: 6.5rem; }
.asg-p .asg-p-tabela thead th:not(:first-child),
.asg-p .asg-p-tabela td { text-align: right; }
.asg-p .asg-p-tabela tbody tr > * { border-top: 1px solid var(--asg-line); }
.asg-p .asg-p-tabela tbody tr:last-child > * { padding-bottom: var(--asg-s-5); }
.asg-p .asg-p-tabela--duza td { font-size: 1.25rem; width: 9rem; }
.asg-p .asg-p-tabela--duza tbody th { font-size: 1.0625rem; color: var(--asg-text); }
.asg-p .asg-p-tabela--duza thead th { padding-top: var(--asg-s-5); }

.asg-p-skrot__siatka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--asg-s-8); align-items: start; }
.asg-p-skrot__tabele { display: grid; gap: var(--asg-s-4); }
.asg-p-przyklad {
	margin-block: var(--asg-s-6) var(--asg-s-5);
	padding: var(--asg-s-5);
	border-radius: var(--asg-r-lg);
	border: 1px dashed color-mix(in srgb, var(--asg-sand) 40%, transparent);
	background: var(--asg-sand-soft);
}
.asg-p-przyklad__tytul { font-size: var(--asg-fs-small); color: var(--asg-sand); font-weight: 600; letter-spacing: var(--asg-ls-small); }
.asg-p-przyklad__rachunek { margin-top: var(--asg-s-2) !important; color: var(--asg-text-2); font-variant-numeric: tabular-nums; }
.asg-p-przyklad__suma { margin-top: var(--asg-s-3) !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.asg-p-przyklad__suma strong { font-family: var(--asg-font-display); font-size: 2.25rem; letter-spacing: -0.025em; line-height: 1; font-weight: 680; font-variant-numeric: tabular-nums; }
.asg-p-przyklad__suma span { color: var(--asg-text-2); }

/* ============================================================ 8. Karuzela produktów (przewijanie z przyciąganiem) */

.asg-p-karuzela { margin-top: var(--asg-s-7); }
.asg-p-karuzela__tor {
	--asg-p-bok: max(var(--asg-gutter), calc((100% - var(--asg-max)) / 2));
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(15rem, 72vw, 20rem);
	gap: var(--asg-s-4);
	padding-inline: var(--asg-p-bok);
	padding-bottom: var(--asg-s-4);
	scroll-padding-inline: var(--asg-p-bok);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--asg-line-strong) transparent;
}
.asg-p-karuzela__el { scroll-snap-align: start; }
.asg-p-produkty { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--asg-s-4); margin-top: var(--asg-s-6); }
.asg-p .asg-p-produkt__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--asg-r-lg);
	background: var(--asg-surface);
	border: 1px solid var(--asg-line);
	color: var(--asg-text);
	text-decoration: none;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--asg-dur-base) var(--asg-ease-out), border-color var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-produkt__link:hover { border-color: var(--asg-line-strong); color: var(--asg-text); }
.asg-p .asg-p-produkt__link:active { transform: scale(0.98); transition-duration: var(--asg-dur-press); }
.asg-p-produkt__foto { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--asg-surface-2); }
.asg-p-produkt__foto img { width: 100%; height: 100% !important; object-fit: cover; transition: transform 900ms var(--asg-ease-out); }
.asg-p .asg-p-produkt__link:hover .asg-p-produkt__foto img { transform: scale(1.04); }
.asg-p-produkt__opis { display: flex; flex-direction: column; gap: 0.375rem; padding: var(--asg-s-4) var(--asg-s-5) var(--asg-s-5); flex: 1; }
.asg-p-produkt__kat { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--asg-text-3); font-weight: 600; }
.asg-p-produkt__nazwa { font-weight: 600; line-height: 1.3; }
.asg-p-produkt__cena { margin-top: auto; padding-top: var(--asg-s-2); color: var(--asg-sand); font-weight: 650; font-variant-numeric: tabular-nums; }
.asg-p-produkt__cena del { color: var(--asg-text-3); font-weight: 400; margin-right: 0.375rem; }
.asg-p-produkt__cena ins { text-decoration: none; }

/* ============================================================ 9. Pusty stan, Amelia */

.asg-p-pusto {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--asg-s-5) var(--asg-s-6);
	margin-top: var(--asg-s-6);
	padding: var(--asg-s-6);
	border-radius: var(--asg-r-lg);
	border: 1px solid var(--asg-line);
	background: var(--asg-surface);
}
.asg-p-pusto__hex { display: grid; place-items: center; width: 4rem; height: 4rem; clip-path: var(--asg-hex-pointy); background: var(--asg-sand-soft); color: var(--asg-sand); }
.asg-p-pusto__hex .asg-p-ikona { width: 1.5rem; height: 1.5rem; }
.asg-p-pusto__tytul { font-weight: 640; font-size: 1.125rem; margin-bottom: var(--asg-s-1) !important; }
.asg-p-pusto p:not(.asg-p-pusto__tytul) { color: var(--asg-text-2); max-width: 46ch; }
.asg-p-pusto__cta { display: flex; gap: var(--asg-s-3); flex-wrap: wrap; justify-content: flex-end; }

/* Amelia — tylko wygląd (kolory, typografia, promienie) przez jej zmienne CSS; nie dotykamy układu ani zachowania. */
.asg-p-amelia { margin-top: var(--asg-s-6); }
.asg-p-amelia #amelia-container,
.asg-p-amelia .amelia-v2-booking,
.asg-p-amelia [class*="amelia-v2-booking"] {
	--am-c-primary: var(--asg-sand) !important;
	--am-c-success: var(--asg-ok) !important;
	--am-c-error: var(--asg-err) !important;
	--am-c-warning: var(--asg-warn) !important;
	--am-c-main-bgr: var(--asg-surface) !important;
	--am-c-main-heading-text: var(--asg-text) !important;
	--am-c-main-text: var(--asg-text) !important;
	--am-c-sb-bgr: var(--asg-surface-2) !important;
	--am-c-sb-text: var(--asg-text) !important;
	--am-c-inp-bgr: var(--asg-surface-3) !important;
	--am-c-inp-border: var(--asg-line-strong) !important;
	--am-c-inp-text: var(--asg-text) !important;
	--am-c-inp-placeholder: var(--asg-text-3) !important;
	--am-c-drop-bgr: var(--asg-surface-2) !important;
	--am-c-drop-text: var(--asg-text) !important;
	--am-c-btn-prim: var(--asg-sand) !important;
	--am-c-btn-first: var(--asg-sand) !important;
	--am-c-btn-text: var(--asg-sand-ink) !important;
	--am-c-btn-bgr: var(--asg-surface-3) !important;
	--am-c-btn-border: var(--asg-line-strong) !important;
	--am-font-family: var(--asg-font-text) !important;
	--am-rad-inp: var(--asg-r-sm) !important;
	font-family: var(--asg-font-text) !important;
}
.asg-p-amelia .amelia-app-booking,
.asg-p-amelia .amelia-app-booking * { font-family: var(--asg-font-text) !important; }
.asg-p-amelia .amelia-app-booking { color: var(--asg-text); }
.asg-p-amelia .amelia-app-booking .am-event,
.asg-p-amelia .amelia-app-booking .am-events-list > div {
	background: var(--asg-surface) !important;
	border: 1px solid var(--asg-line) !important;
	border-radius: var(--asg-r-lg) !important;
	color: var(--asg-text) !important;
}
.asg-p-amelia .amelia-app-booking .el-button--primary,
.asg-p-amelia .amelia-app-booking .am-button--primary {
	background: var(--asg-sand) !important;
	border-color: var(--asg-sand) !important;
	color: var(--asg-sand-ink) !important;
	border-radius: var(--asg-r-pill) !important;
}

/* ============================================================ 10. FAQ */

.asg-p-faq__siatka { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--asg-s-8); align-items: start; }
.asg-p-faq__bok { position: sticky; top: calc(var(--asg-header-h) + var(--asg-s-6)); }
.asg-p-faq__bok p { margin-top: var(--asg-s-4); color: var(--asg-text-2); }
.asg-p-faq__lista { border-top: 1px solid var(--asg-line); }
.asg-p-faq__el { border-bottom: 1px solid var(--asg-line); }
.asg-p-faq__el summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--asg-s-5);
	padding: var(--asg-s-5) 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--asg-font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.008em;
	line-height: 1.3;
	color: var(--asg-text);
	-webkit-tap-highlight-color: transparent;
	transition: color var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p-faq__el summary::-webkit-details-marker { display: none; }
.asg-p-faq__el summary:hover { color: var(--asg-sand-strong); }
.asg-p-faq__el summary:active .asg-p-faq__znak { transform: scale(0.9); transition-duration: var(--asg-dur-press); }
.asg-p-faq__znak {
	position: relative;
	flex: none;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--asg-text) 6%, transparent);
	transition: transform var(--asg-dur-base) var(--asg-ease-in-out), background-color var(--asg-dur-fast);
}
.asg-p-faq__znak::before,
.asg-p-faq__znak::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.75rem;
	height: 1.5px;
	margin: -0.75px 0 0 -0.375rem;
	border-radius: 1px;
	background: currentColor;
	transition: transform var(--asg-dur-base) var(--asg-ease-in-out);
}
.asg-p-faq__znak::after { transform: rotate(90deg); }
.asg-p-faq__el[open] .asg-p-faq__znak { background: var(--asg-sand-soft); color: var(--asg-sand); }
.asg-p-faq__el[open] .asg-p-faq__znak::after { transform: rotate(0deg); }
.asg-p-faq__odp { padding: 0 3rem var(--asg-s-5) 0; color: var(--asg-text-2); max-width: 62ch; }
.asg-p-faq__el[open] .asg-p-faq__odp { animation: asg-p-faq var(--asg-dur-base) var(--asg-ease-out); }
@keyframes asg-p-faq { from { opacity: 0; transform: translateY(-0.375rem); } }

/* ============================================================ 11. Poligony, social, kontakt */

.asg-p-dojazd__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--asg-s-4); margin-top: var(--asg-s-6); }
.asg-p-poligon {
	display: flex;
	flex-direction: column;
	gap: var(--asg-s-4);
	padding: var(--asg-s-6);
	border-radius: var(--asg-r-lg);
	background: var(--asg-surface);
	border: 1px solid var(--asg-line);
}
.asg-p-poligon__adres { color: var(--asg-text-2); line-height: 1.6; }
.asg-p-poligon__adres span { color: var(--asg-text-3); font-size: var(--asg-fs-small); }
.asg-p-poligon__kontakt { display: grid; gap: var(--asg-s-2); }
.asg-p-poligon__kontakt li { display: flex; align-items: center; gap: var(--asg-s-3); }
.asg-p-poligon__kontakt .asg-p-ikona { color: var(--asg-text-3); width: 1.125rem; height: 1.125rem; }
.asg-p .asg-p-poligon__link { color: var(--asg-text); text-decoration: none; font-weight: 550; }
.asg-p .asg-p-poligon__link:hover { color: var(--asg-sand-strong); }
.asg-p-poligon__cta { margin-top: auto; padding-top: var(--asg-s-2); }
.asg-p-social { display: flex; gap: var(--asg-s-2); }
.asg-p .asg-p-social a {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	color: var(--asg-text-2);
	background: color-mix(in srgb, var(--asg-text) 5%, transparent);
	transition: color var(--asg-dur-fast), background-color var(--asg-dur-fast), transform var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-social a:hover { color: var(--asg-text); background: color-mix(in srgb, var(--asg-text) 11%, transparent); }
.asg-p .asg-p-social a:active { transform: scale(0.94); transition-duration: var(--asg-dur-press); }
.asg-p-social .asg-p-ikona { width: 1.125rem; height: 1.125rem; }

.asg-p-kontakt-pasek { display: flex; flex-wrap: wrap; gap: var(--asg-s-3); margin-top: var(--asg-s-5); }
.asg-p .asg-p-kontakt-pasek a {
	display: inline-flex;
	align-items: center;
	gap: var(--asg-s-3);
	min-height: 3.5rem;
	padding: 0 var(--asg-s-5);
	border-radius: var(--asg-r-pill);
	background: var(--asg-surface);
	border: 1px solid var(--asg-line);
	color: var(--asg-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--asg-dur-fast), transform var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-kontakt-pasek a:hover { border-color: var(--asg-line-strong); }
.asg-p .asg-p-kontakt-pasek a:active { transform: scale(0.97); transition-duration: var(--asg-dur-press); }
.asg-p-kontakt-pasek .asg-p-ikona { color: var(--asg-sand); }

/* Zgoda dla rodziców — wyeksponowana karta */
.asg-p .asg-p-zgoda {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--asg-s-5);
	margin-top: var(--asg-s-6);
	padding: var(--asg-s-5) var(--asg-s-6);
	border-radius: var(--asg-r-lg);
	background: linear-gradient(100deg, var(--asg-sand-soft), var(--asg-surface) 65%);
	border: 1px solid color-mix(in srgb, var(--asg-sand) 30%, transparent);
	color: var(--asg-text);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--asg-dur-fast) var(--asg-ease-out), border-color var(--asg-dur-fast);
}
.asg-p .asg-p-zgoda:hover { border-color: color-mix(in srgb, var(--asg-sand) 55%, transparent); color: var(--asg-text); }
.asg-p .asg-p-zgoda:active { transform: scale(0.985); transition-duration: var(--asg-dur-press); }
.asg-p-zgoda__hex { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; clip-path: var(--asg-hex-pointy); background: var(--asg-sand); color: var(--asg-sand-ink); }
.asg-p-zgoda__hex .asg-p-ikona { width: 1.375rem; height: 1.375rem; }
.asg-p-zgoda__tekst { display: grid; gap: 0.125rem; }
.asg-p-zgoda__tekst strong { font-size: 1.125rem; font-weight: 640; }
.asg-p-zgoda__tekst span { color: var(--asg-text-2); font-size: 0.9375rem; }
.asg-p-zgoda__plik { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--asg-sand); font-weight: 620; white-space: nowrap; }
.asg-p-zgoda__plik .asg-p-ikona { width: 1rem; height: 1rem; transition: transform var(--asg-dur-base) var(--asg-ease-out); }
.asg-p .asg-p-zgoda:hover .asg-p-zgoda__plik .asg-p-ikona { transform: translateX(3px); }

/* ============================================================ 12. Końcowe CTA */

.asg-p-final__karta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(var(--asg-s-7), 7vw, var(--asg-s-9)) clamp(var(--asg-s-5), 6vw, var(--asg-s-9));
	border-radius: var(--asg-r-xl);
	background:
		radial-gradient(120% 140% at 100% 0%, var(--asg-sand-soft), transparent 55%),
		var(--asg-surface);
	border: 1px solid var(--asg-line);
}
.asg-p-final__hex {
	position: absolute;
	z-index: -1;
	right: clamp(2rem, 7vw, 7rem);
	top: 50%;
	width: clamp(12rem, 22vw, 19rem);
	aspect-ratio: 0.866;
	transform: translateY(-50%);
	clip-path: var(--asg-hex-pointy);
	background: linear-gradient(160deg, color-mix(in srgb, var(--asg-sand) 38%, transparent), color-mix(in srgb, var(--asg-sand) 6%, transparent) 70%);
}
.asg-p-final__hex::after {
	content: "";
	position: absolute;
	inset: 1.5px;
	clip-path: var(--asg-hex-pointy);
	background: linear-gradient(160deg, var(--asg-surface-2), var(--asg-surface) 70%);
}
.asg-p .asg-p-final__tel {
	display: inline-flex;
	align-items: center;
	gap: var(--asg-s-4);
	margin-top: var(--asg-s-6);
	font-family: var(--asg-font-display);
	font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem);
	letter-spacing: -0.03em;
	line-height: 1;
	font-weight: 680;
	color: var(--asg-text);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: color var(--asg-dur-fast), transform var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-final__tel:hover { color: var(--asg-sand-strong); }
.asg-p .asg-p-final__tel:active { transform: scale(0.98); transition-duration: var(--asg-dur-press); }
.asg-p-final__tel .asg-p-ikona { width: 0.7em; height: 0.7em; color: var(--asg-sand); }
.asg-p-final__cta { display: flex; flex-wrap: wrap; gap: var(--asg-s-3); margin-top: var(--asg-s-6); }

/* ============================================================ 13. Komponenty podstron */

/* lista z ptaszkami */
.asg-p-check { display: grid; gap: var(--asg-s-3); margin-top: var(--asg-s-5) !important; }
.asg-p-check li { display: flex; gap: var(--asg-s-3); align-items: flex-start; color: var(--asg-text-2); line-height: 1.45; }
.asg-p-check .asg-p-ikona { width: 1.125rem; height: 1.125rem; margin-top: 0.15em; color: var(--asg-sand); }
.asg-p-check--duza { gap: 0; }
.asg-p-check--duza li { padding: var(--asg-s-4) 0; font-size: 1.0625rem; color: var(--asg-text); }
.asg-p-check--duza li + li { border-top: 1px solid var(--asg-line); }

/* pakiety: porównanie (cennik replik, karnety) */
.asg-p-pakiety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--asg-s-4); margin-top: var(--asg-s-7); align-items: stretch; }
.asg-p-pakiet {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--asg-s-3);
	padding: var(--asg-s-6);
	border-radius: var(--asg-r-lg);
	background: var(--asg-surface);
	border: 1px solid var(--asg-line);
}
.asg-p-pakiet--wyroznij {
	background: linear-gradient(170deg, var(--asg-sand-soft), var(--asg-surface) 55%);
	border-color: color-mix(in srgb, var(--asg-sand) 45%, transparent);
	box-shadow: var(--asg-shadow-2);
}
.asg-p-pakiet__znak { align-self: flex-start; padding: 0.3rem 0.7rem; border-radius: var(--asg-r-sm); background: var(--asg-sand); color: var(--asg-sand-ink); font-size: 0.8125rem; font-weight: 640; letter-spacing: 0.01em; }
.asg-p-pakiet__opis { color: var(--asg-text-2); min-height: 3em; }
.asg-p-pakiet__ceny { display: grid; grid-template-columns: 1fr 1fr; gap: var(--asg-s-3); padding-block: var(--asg-s-4); border-block: 1px solid var(--asg-line); margin-block: var(--asg-s-2) !important; }
.asg-p-pakiet__ceny dt { font-size: var(--asg-fs-small); color: var(--asg-text-3); }
.asg-p-pakiet__ceny dd { font-family: var(--asg-font-display); font-size: 2rem; font-weight: 660; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.asg-p-pakiet__kwota { font-family: var(--asg-font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-top: var(--asg-s-2) !important; }
.asg-p-pakiet .asg-p-check { margin-top: auto !important; padding-top: var(--asg-s-2); }

.asg-p-uwaga {
	display: flex;
	gap: var(--asg-s-4);
	align-items: flex-start;
	margin-top: var(--asg-s-6);
	padding: var(--asg-s-5);
	border-radius: var(--asg-r-lg);
	background: color-mix(in srgb, var(--asg-text) 3.5%, transparent);
	border: 1px solid var(--asg-line);
	color: var(--asg-text-2);
	max-width: 56rem;
}
.asg-p-uwaga .asg-p-ikona { width: 1.5rem; height: 1.5rem; color: var(--asg-sand); margin-top: 0.1em; }
.asg-p-uwaga strong { color: var(--asg-text); }

/* akcesoria: dwie grupy z cenami */
.asg-p-akcesoria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--asg-s-4) var(--asg-s-8); margin-top: var(--asg-s-6); }
.asg-p-akcesoria__grupa h3 { padding-bottom: var(--asg-s-3); margin-bottom: var(--asg-s-2) !important; color: var(--asg-text-2); font-size: 1rem !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.asg-p-akcesoria__grupa li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--asg-s-4); padding: 0.8rem 0; border-top: 1px solid var(--asg-line); }
.asg-p-akcesoria__grupa li small { display: block; color: var(--asg-text-3); font-size: 0.8125rem; margin-top: 0.125rem; }
.asg-p-cena { font-weight: 640; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* opcje (ognisko, Smart Target) */
.asg-p-opcje { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--asg-s-4); margin-top: var(--asg-s-6); }
.asg-p-opcje--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.asg-p-opcja { display: flex; flex-direction: column; gap: var(--asg-s-3); padding: var(--asg-s-6) var(--asg-s-5); border-radius: var(--asg-r-lg); background: var(--asg-surface); border: 1px solid var(--asg-line); }
.asg-p-opcja > p:not(.asg-p-opcja__cena) { color: var(--asg-text-2); font-size: 0.975rem; }
.asg-p-opcja__ikona { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; clip-path: var(--asg-hex-pointy); background: var(--asg-sand-soft); color: var(--asg-sand); margin-bottom: var(--asg-s-2); }
.asg-p-opcja__ikona .asg-p-ikona { width: 1.25rem; height: 1.25rem; }
.asg-p-opcja__cena { font-family: var(--asg-font-display); font-size: 1.75rem; font-weight: 660; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.asg-p-opcja__cena :is(.amount, bdi) { font: inherit; letter-spacing: inherit; color: inherit; }
.asg-p-opcja__cena span:not(.amount):not(.woocommerce-Price-currencySymbol) { font-family: var(--asg-font-text); font-size: 0.875rem; font-weight: 450; letter-spacing: 0; color: var(--asg-text-3); }
.asg-p-opcja .asg-p-btn--tekst { margin-top: auto; align-self: flex-start; }

/* linki-karty */
.asg-p-linki { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--asg-s-4); margin-top: var(--asg-s-6); }
.asg-p .asg-p-link-karta,
.asg-p .asg-p-baner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--asg-s-4);
	padding: var(--asg-s-5);
	border-radius: var(--asg-r-lg);
	background: var(--asg-surface);
	border: 1px solid var(--asg-line);
	color: var(--asg-text);
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color var(--asg-dur-fast), background-color var(--asg-dur-fast), transform var(--asg-dur-fast) var(--asg-ease-out);
}
.asg-p .asg-p-link-karta:hover,
.asg-p .asg-p-baner:hover { border-color: var(--asg-line-strong); background: var(--asg-surface-2); color: var(--asg-text); }
.asg-p .asg-p-link-karta:active,
.asg-p .asg-p-baner:active { transform: scale(0.985); transition-duration: var(--asg-dur-press); }
.asg-p-link-karta > .asg-p-ikona:first-child { width: 1.5rem; height: 1.5rem; color: var(--asg-sand); }
.asg-p-link-karta > span,
.asg-p-baner > span:nth-child(2) { display: grid; gap: 0.125rem; }
.asg-p-link-karta strong,
.asg-p-baner strong { font-weight: 620; }
.asg-p-link-karta > span > span,
.asg-p-baner > span:nth-child(2) > span { color: var(--asg-text-2); font-size: 0.9375rem; }
.asg-p-link-karta__strzalka,
.asg-p-baner__strzalka { width: 1.125rem !important; height: 1.125rem !important; color: var(--asg-text-3); transition: transform var(--asg-dur-base) var(--asg-ease-out), color var(--asg-dur-fast); }
.asg-p .asg-p-link-karta:hover .asg-p-link-karta__strzalka,
.asg-p .asg-p-baner:hover .asg-p-baner__strzalka { transform: translateX(3px); color: var(--asg-sand); }
.asg-p .asg-p-baner { padding: var(--asg-s-6); background: linear-gradient(100deg, var(--asg-surface-2), var(--asg-surface)); }
.asg-p-baner strong { font-size: 1.1875rem; }
.asg-p-baner__ikona { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; clip-path: var(--asg-hex-pointy); background: var(--asg-sand-soft); color: var(--asg-sand); }
.asg-p-baner__ikona .asg-p-ikona { width: 1.375rem; height: 1.375rem; }

/* siatka informacji z ikonami */
.asg-p-info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--asg-s-6) var(--asg-s-6); margin-top: var(--asg-s-7); }
.asg-p-info--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--asg-s-6); gap: var(--asg-s-5); }
.asg-p-info--3 { margin-bottom: var(--asg-s-2); }
.asg-p-info__el { display: grid; gap: var(--asg-s-2); align-content: start; }
.asg-p-info__el p { color: var(--asg-text-2); font-size: 0.975rem; line-height: 1.55; }
.asg-p-info__ikona { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: var(--asg-s-2); border-radius: var(--asg-r-md); background: color-mix(in srgb, var(--asg-text) 5%, transparent); color: var(--asg-sand); }
.asg-p-info__ikona .asg-p-ikona { width: 1.25rem; height: 1.25rem; }

/* cechy (sprzęt dla dzieci) */
.asg-p-cechy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--asg-s-4); margin-top: var(--asg-s-7); }
.asg-p-cecha { padding: var(--asg-s-6) var(--asg-s-5); border-radius: var(--asg-r-lg); background: var(--asg-surface); border: 1px solid var(--asg-line); }
.asg-p-cecha__wartosc { font-family: var(--asg-font-display); font-size: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; color: var(--asg-text); }
.asg-p .asg-p-cecha__nazwa { margin-top: var(--asg-s-2); font-family: var(--asg-font-text); font-size: 0.9375rem; font-weight: 600; color: var(--asg-sand); letter-spacing: 0.005em; }
.asg-p-cecha > p:last-child { margin-top: var(--asg-s-3); color: var(--asg-text-2); font-size: 0.975rem; line-height: 1.55; }

/* zdjęcie w treści */
.asg-p-foto { border-radius: var(--asg-r-lg); overflow: hidden; background: var(--asg-surface-2); aspect-ratio: 4 / 3; }
.asg-p-foto--wysoka { aspect-ratio: 4 / 5; }
.asg-p-foto img { width: 100%; height: 100% !important; object-fit: cover; }

/* cenówka (szkoły) i karta rezerwacji */
.asg-p-cenowka__wnetrze,
.asg-p-rez-karta__wnetrze { padding: clamp(var(--asg-s-5), 4vw, var(--asg-s-7)); }
.asg-p-cenowka__etykieta,
.asg-p-rez-karta__etykieta { color: var(--asg-text-3); font-size: var(--asg-fs-small); }
.asg-p-cenowka__kwota { font-family: var(--asg-font-display); font-size: clamp(3.5rem, 2.6rem + 4vw, 6rem); font-weight: 690; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; margin-block: var(--asg-s-2) var(--asg-s-1) !important; }
.asg-p-cenowka__dodatki { display: grid; margin-block: var(--asg-s-6) var(--asg-s-4) !important; border-top: 1px solid var(--asg-line); }
.asg-p-cenowka__dodatki > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--asg-s-4); padding: 0.85rem 0; border-bottom: 1px solid var(--asg-line); }
.asg-p-cenowka__dodatki dt { color: var(--asg-text-2); }
.asg-p-cenowka__dodatki dd { font-weight: 640; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.asg-p-cenowka__dodatki small { display: block; font-weight: 400; color: var(--asg-text-3); font-size: 0.8125rem; }
.asg-p .asg-p-rez-karta__tel { display: block; margin-block: var(--asg-s-2) var(--asg-s-4); font-family: var(--asg-font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); font-weight: 680; letter-spacing: -0.03em; line-height: 1.05; color: var(--asg-text); text-decoration: none; font-variant-numeric: tabular-nums; }
.asg-p .asg-p-rez-karta__tel:hover { color: var(--asg-sand-strong); }
.asg-p-rez-karta__wnetrze > p:not(.asg-p-rez-karta__etykieta) { color: var(--asg-text-2); }
.asg-p-rez-karta__cta { margin-top: var(--asg-s-6); }

/* wyróżnienie (serwis 50%) */
.asg-p-wyroznienie {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--asg-s-6) var(--asg-s-7);
	padding: clamp(var(--asg-s-5), 5vw, var(--asg-s-8));
	border-radius: var(--asg-r-xl);
	background: radial-gradient(90% 140% at 0% 50%, var(--asg-sand-soft), transparent 60%), var(--asg-surface);
	border: 1px solid var(--asg-line);
}
.asg-p .asg-p-wyroznienie__liczba { font-family: var(--asg-font-display); font-size: clamp(4rem, 3rem + 5vw, 8rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--asg-sand); font-variant-numeric: tabular-nums; }
.asg-p-wyroznienie p { margin-top: var(--asg-s-3); color: var(--asg-text-2); max-width: 54ch; }

/* kalkulator */
.asg-p-kalk__siatka { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--asg-s-7) var(--asg-s-8); align-items: start; }
.asg-p-kalk { margin: 0; }
.asg-p-kalk__wnetrze { display: grid; gap: var(--asg-s-6); padding: clamp(var(--asg-s-5), 4vw, var(--asg-s-7)); }
.asg-p-kalk__pole { border: 0; min-width: 0; }
.asg-p-kalk__pole > label,
.asg-p-kalk__pole > legend { display: block; margin-bottom: var(--asg-s-3) !important; color: var(--asg-text-2); font-size: var(--asg-fs-small); font-weight: 550; letter-spacing: var(--asg-ls-small); }
.asg-p-kalk__osoby { display: flex; align-items: center; gap: var(--asg-s-5); }
.asg-p-kalk__osoby output { min-width: 2.5ch; font-family: var(--asg-font-display); font-size: 2.25rem; font-weight: 680; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; text-align: right; }
.asg-p-kalk input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 1;
	height: 2.75rem;
	margin: 0;
	background: transparent;
	cursor: pointer;
	--asg-p-postep: 41%;
}
.asg-p-kalk input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--asg-sand) var(--asg-p-postep), var(--asg-surface-3) var(--asg-p-postep)); }
.asg-p-kalk input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--asg-surface-3); }
.asg-p-kalk input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--asg-sand); }
.asg-p-kalk input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: calc(3px - 0.875rem); border-radius: 50%; background: var(--asg-text); box-shadow: var(--asg-shadow-1), 0 0 0 6px color-mix(in srgb, var(--asg-sand) 18%, transparent); transition: transform var(--asg-dur-press) var(--asg-ease-press); }
.asg-p-kalk input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.asg-p-kalk input[type="range"]::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: var(--asg-text); }
.asg-p-segment {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	padding: 0.25rem;
	border-radius: var(--asg-r-pill);
	background: var(--asg-surface-3);
	isolation: isolate;
}
.asg-p-segment label { position: relative; z-index: 1; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.asg-p-segment input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.asg-p-segment span:not(.asg-p-segment__znacznik) { display: grid; place-items: center; min-height: 2.75rem; padding: 0 0.5rem; border-radius: var(--asg-r-pill); font-weight: 600; font-size: 0.9375rem; color: var(--asg-text-2); text-align: center; transition: color var(--asg-dur-fast) var(--asg-ease-out), transform var(--asg-dur-press) var(--asg-ease-press); }
.asg-p-segment label:active span { transform: scale(0.96); }
.asg-p-segment input:checked + span { color: var(--asg-sand-ink); }
.asg-p-segment input:focus-visible + span { outline: 2px solid var(--asg-sand); outline-offset: 2px; }
.asg-p-segment__znacznik {
	position: absolute;
	z-index: 0;
	top: 0.25rem;
	bottom: 0.25rem;
	left: 0.25rem;
	width: calc((100% - 0.5rem) / var(--asg-p-n, 2));
	border-radius: var(--asg-r-pill);
	background: var(--asg-sand);
	box-shadow: var(--asg-shadow-1);
	transform: translateX(calc(100% * var(--asg-p-idx, 0)));
	transition: transform var(--asg-dur-base) var(--asg-ease-out);
}
.asg-p-segment--3 { --asg-p-n: 3; }
/* bez JS znacznik chowamy, a zaznaczenie pokazuje tło etykiety */
html:not(.asg-p-js) .asg-p-segment__znacznik { display: none; }
html:not(.asg-p-js) .asg-p-segment input:checked + span { background: var(--asg-sand); }
.asg-p-kalk__wynik { padding-top: var(--asg-s-5); border-top: 1px solid var(--asg-line); }
.asg-p-kalk__suma { font-family: var(--asg-font-display); font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem); font-weight: 690; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.asg-p-kalk__suma span { display: inline-block; }
.asg-p-kalk__suma span.is-zmiana { animation: asg-p-licznik 380ms var(--asg-ease-out); }
@keyframes asg-p-licznik { from { opacity: 0.35; transform: translateY(0.25rem); } }
.asg-p-kalk__osoba { margin-top: var(--asg-s-2) !important; font-size: 1.125rem; color: var(--asg-text); }
.asg-p-kalk__osoba span { font-weight: 650; color: var(--asg-sand); font-variant-numeric: tabular-nums; }
.asg-p-kalk__rozbicie { margin-top: var(--asg-s-2) !important; color: var(--asg-text-3); font-size: var(--asg-fs-small); font-variant-numeric: tabular-nums; }

/* formularz CF7 (gdy włączony) */
.asg-p-formularz { max-width: 48rem; }
.asg-p-formularz__wnetrze { padding: var(--asg-s-6); }

/* ============================================================ 14. Ruch */

/* Odsłanianie przy przewijaniu: atrybut data-asg-odslon (+ data-asg-odslon-grupa) z ruch.js Fundamentu. */
.asg-p-js .asg-p-wejscie { animation: asg-p-wejscie 900ms var(--asg-ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
@keyframes asg-p-wejscie { from { opacity: 0; transform: translate3d(0, 1.25rem, 0); } }
.asg-p-js .asg-p-hero__img { animation: asg-p-hero-img 1800ms var(--asg-ease-out) both; }
@keyframes asg-p-hero-img { from { transform: scale(1.06); opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
	.asg-p-js .asg-p-wejscie,
	.asg-p-js .asg-p-hero__img { animation: none; }
	.asg-p-faq__el[open] .asg-p-faq__odp,
	.asg-p-kalk__suma span.is-zmiana { animation: none; }
	.asg-p .asg-p-kafel--foto:hover .asg-p-kafel__img,
	.asg-p .asg-p-produkt__link:hover .asg-p-produkt__foto img { transform: none; }
	.asg-p-segment__znacznik { transition: none; }
}
@media (prefers-contrast: more) {
	.asg-p-hero::after { background: linear-gradient(to top, var(--asg-ink) 0%, color-mix(in srgb, var(--asg-ink) 88%, transparent) 45%, color-mix(in srgb, var(--asg-ink) 60%, transparent) 100%); }
	.asg-p .asg-p-btn--ghost { border-color: var(--asg-text-2); }
	.asg-p-kafel,
	.asg-p-poligon,
	.asg-p-pakiet,
	.asg-p-opcja { border-color: var(--asg-line-strong); }
}

/* ============================================================ 15. Responsywność */

@media (max-width: 1100px) {
	.asg-p .asg-p-kafel { grid-column: span 6; }
	.asg-p .asg-p-kafel--foto { grid-column: span 12; min-height: 24rem; }
	.asg-p-opcje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.asg-p-kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--asg-s-7); }
	.asg-p-kroki::before { display: none; }
}
@media (max-width: 900px) {
	.asg-p-dwie,
	.asg-p-dwie--rowno,
	.asg-p-skrot__siatka,
	.asg-p-faq__siatka,
	.asg-p-kalk__siatka { grid-template-columns: minmax(0, 1fr); gap: var(--asg-s-6); }
	.asg-p-faq__bok { position: static; }
	.asg-p-fakty__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--asg-s-6); }
	.asg-p-pakiety,
	.asg-p-linki,
	.asg-p-cechy,
	.asg-p-info,
	.asg-p-opcje--3 { grid-template-columns: minmax(0, 1fr); }
	.asg-p-cechy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.asg-p-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.asg-p-dojazd__siatka,
	.asg-p-akcesoria { grid-template-columns: minmax(0, 1fr); }
	.asg-p-pusto { grid-template-columns: auto minmax(0, 1fr); }
	.asg-p-pusto__cta { grid-column: 1 / -1; justify-content: flex-start; }
	.asg-p-pakiet__opis { min-height: 0; }
}
@media (max-width: 640px) {
	.asg-p-hero { min-height: 42rem; padding-bottom: var(--asg-s-7); }
	.asg-p-hero--glowna { min-height: max(42rem, min(100svh, 46rem)); }
	.asg-p-hero--niski { min-height: 36rem; }
	.asg-p-hero::after {
		background:
			linear-gradient(to top, var(--asg-ink) 0%, color-mix(in srgb, var(--asg-ink) 82%, transparent) 30%, color-mix(in srgb, var(--asg-ink) 40%, transparent) 52%, color-mix(in srgb, var(--asg-ink) 8%, transparent) 74%, color-mix(in srgb, var(--asg-ink) 55%, transparent) 100%);
	}
	.asg-p-hero__cta { flex-direction: column; align-items: stretch; }
	.asg-p-hero__cta .asg-p-btn { width: 100%; }
	.asg-p-bento { grid-auto-rows: auto; gap: var(--asg-s-3); }
	.asg-p .asg-p-kafel,
	.asg-p .asg-p-kafel--foto { grid-column: span 12; }
	.asg-p .asg-p-kafel--foto { min-height: 22rem; padding: var(--asg-s-5); }
	.asg-p-kafel:not(.asg-p-kafel--foto) .asg-p-kafel__wiecej { padding-top: var(--asg-s-2); }
	.asg-p-kroki { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.asg-p-krok { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--asg-s-4); padding-bottom: var(--asg-s-6); }
	.asg-p-krok::before { content: ""; position: absolute; left: 1.75rem; top: 3.75rem; bottom: 0.25rem; width: 1px; background: var(--asg-line-strong); }
	.asg-p-krok:last-child::before { display: none; }
	.asg-p-krok__hex { grid-row: span 2; margin-bottom: 0; }
	.asg-p-krok h3 { align-self: center; }
	.asg-p-krok p { margin-top: var(--asg-s-2); }
	.asg-p-cechy,
	.asg-p-info,
	.asg-p-info--2,
	.asg-p-opcje { grid-template-columns: minmax(0, 1fr); }
	.asg-p-zgoda,
	.asg-p-link-karta,
	.asg-p-baner { grid-template-columns: auto minmax(0, 1fr); }
	.asg-p .asg-p-zgoda { padding: var(--asg-s-5); }
	.asg-p-zgoda__plik { grid-column: 2; }
	.asg-p-link-karta__strzalka,
	.asg-p-baner__strzalka { display: none; }
	.asg-p-pusto { grid-template-columns: minmax(0, 1fr); padding: var(--asg-s-5); }
	.asg-p-wyroznienie { grid-template-columns: minmax(0, 1fr); }
	.asg-p .asg-p-tabela :is(th, td) { padding-inline: var(--asg-s-4); }
	.asg-p .asg-p-tabela td { width: auto; }
	.asg-p-tabela caption { padding-inline: var(--asg-s-4); }
	.asg-p-pakiet__ceny dd { font-size: 1.75rem; }
	.asg-p-kontakt-pasek a { width: 100%; box-sizing: border-box; }
	.asg-p-final__cta { flex-direction: column; align-items: stretch; }
	.asg-p-final__hex { display: none; }
	.asg-p-faq__odp { padding-right: 0; }
}