/**
 * Landing bezpłatnego audytu.
 *
 * Korzysta ze zmiennych i klas motywu (--brand, .btn, .card, .section),
 * więc dokłada wyłącznie to, czego w motywie nie ma. Plik ładuje się
 * WYŁĄCZNIE na landingu — reszta witryny go nie pobiera.
 */

/* ============================== HERO ============================== */

.al-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
	background: var(--bg);
}

/*
 * Poświata nie może wychodzić poza kontener. Ujemne right tworzyło poziomy
 * nadmiar dokumentu, a na telefonie przeglądarka rozszerza wtedy layout
 * viewport ponad szerokość ekranu — i element position: fixed (przyklejony
 * pasek) rozciąga się na tę szerszą wartość, przez co jego prawa część
 * wychodzi poza ekran. Gradient jest miękki, więc wizualnie nic nie tracimy.
 */
.al-glow {
	position: absolute;
	top: -30%;
	right: 0;
	width: min(720px, 80vw);
	height: min(720px, 80vw);
	background: radial-gradient(circle, rgba(227, 0, 15, .10), transparent 65%);
	pointer-events: none;
}

/*
 * Układ jednokolumnowy — decyzja z pomiaru, nie z wyczucia.
 *
 * W układzie dwukolumnowym (1280 px) formularz miał 1577 px, a kolumna z
 * tekstem 688 px. To 889 px pustki po lewej stronie. Sam blok zgód to 567 px,
 * czyli ponad jedna trzecia formularza — zmniejszenie w nim czcionki odzyskuje
 * rząd 150 px, więc nie zamyka luki nawet w połowie. Różnica jest
 * strukturalna, nie typograficzna: te kolumny nie mają szans się zrównać.
 *
 * Stąd jedna kolumna. Nagłówek dostaje pełną szerokość (H1 łamie się na dwie
 * linie zamiast trzech), a formularz — wyśrodkowaną kartę o ograniczonej
 * szerokości. Szersza karta to dodatkowa korzyść: te same zgody mieszczą się
 * w mniejszej liczbie wierszy. Pola rozciągnięte na całe 1200 px byłyby
 * nieczytelne, więc pełna szerokość nie wchodzi w grę.
 */
.al-hero-grid {
	position: relative;
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 781px) {
	/*
	 * 54rem, nie 46 — przy węższym bloku nagłówek łamie się na trzy wiersze
	 * i drugie zdanie rozpada się w połowie („…a co ją / hamuje"). Szerokość
	 * dotyczy praktycznie tylko H1: akapit ma własne ograniczenie 34em,
	 * a lista korzyści jest wyśrodkowanym blokiem o szerokości treści.
	 */
	.al-hero-copy {
		max-width: 54rem;
		margin-inline: auto;
		text-align: center;
	}

	.al-hero-copy .al-sub,
	.al-hero-copy .al-note {
		margin-inline: auto;
	}

	/*
	 * Lista korzyści zostaje pionowa, ale jako wyśrodkowany blok z tekstem
	 * do lewej. W jednym rzędzie te trzy pozycje nie mieszczą się w 46rem,
	 * a wyśrodkowanie samego tekstu rozjechałoby ikony.
	 */
	.al-usp {
		width: fit-content;
		margin-inline: auto;
		text-align: left;
	}

	.al-hero .cta-row {
		justify-content: center;
	}
}

.al-hero-form {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

.al-hero-copy h1 {
	margin: .6rem 0 0;
	font-size: clamp(2rem, 5vw, 3.15rem);
	line-height: 1.08;
	letter-spacing: -.02em;
}

.al-hero-copy h1 .hl { color: var(--brand); }

.al-sub {
	margin-top: 1.1rem;
	max-width: 34em;
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	color: var(--ink-soft);
}

.al-usp {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.al-usp li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	font-size: 1rem;
	color: var(--ink-soft);
}

.al-usp svg,
.al-facts svg,
.al-fair svg,
.al-limits h3 svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: var(--brand);
}

.al-usp b,
.al-facts b { color: var(--ink); }

.al-hero .cta-row { margin-top: 1.8rem; }

.al-note {
	margin-top: 1.1rem;
	max-width: 34em;
	font-size: .9rem;
	color: var(--muted);
}

/* ---------------------------- karta formularza --------------------- */

.al-form-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: clamp(1.25rem, 3vw, 1.9rem);
}

/*
 * Zgody mniejszą czcionką: 0.9rem = 14.4 px. To dolna granica, przy której
 * tekst prawny czyta się jeszcze wygodnie — niżej zaczyna wyglądać jak
 * chowanie treści przed czytelnikiem. Pola wyboru zostają 24 px (WCAG 2.2,
 * kryterium 2.5.8 Target Size), więc maleje tekst, a nie cel kliknięcia.
 */
.al-form-card .audyt-consent {
	font-size: .9rem;
	line-height: 1.55;
}

/*
 * Wyróżnienie zgody na serię wskazówek (7 paź 2026).
 *
 * To jedyna zgoda, która coś daje użytkownikowi, więc ma wyglądać jak
 * oferta, a nie jak klauzula. Delikatne tło i ramka w kolorze marki,
 * pierwsze zdanie pogrubione. Zgoda zostaje DOBROWOLNA i NIEZAZNACZONA —
 * domyślne zaznaczenie jest nieważne z mocy motywu 32 RODO i wyroku TSUE
 * Planet49 (C-673/17), więc wyróżniamy wyłącznie wizualnie.
 */
.al-form-card label[for="consent-marketing"] {
	display: flex;
	align-items: flex-start;
	gap: .55rem;
	margin: .35rem 0 .6rem;
	padding: .8rem .9rem;
	background: #FFF5F5;
	border: 1px solid rgba(227, 0, 15, .25);
	border-radius: var(--radius-md, 10px);
}

.al-form-card label[for="consent-marketing"]:hover {
	border-color: rgba(227, 0, 15, .45);
}

.al-form-card label[for="consent-marketing"]:focus-within {
	outline: 2px solid var(--brand, #E3000F);
	outline-offset: 2px;
}

/* Legenda i podpowiedzi w tej samej skali, żeby blok był spójny. */
.al-form-card .audyt-fieldset legend,
.al-form-card .audyt-hint {
	font-size: .9rem;
}

/*
 * Klauzula informacyjna pod formularzem (art. 13 RODO). Ta sama skala co
 * notka wtyczki — to informacja towarzysząca, nie treść sprzedażowa.
 */
.al-form-card .audyt-klauzula {
	margin: .5rem 0 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.al-form-card .audyt-klauzula a {
	color: inherit;
	text-decoration: underline;
}

/* Zdanie o bezwarunkowości audytu pod przyciskiem. */
.al-form-wolne {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	margin: .9rem 0 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--ink-soft);
}

.al-form-wolne svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: .1rem;
	color: #10794F;
}

/* Formularz wtyczki wewnątrz karty — bez podwójnej ramki i tła. */
.al-form-card .audyt-strony {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	max-width: none;
}

/* ============================ SEKCJE ============================== */

.al-fair {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	max-width: 56em;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: 1.1rem 1.3rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-left: 3px solid var(--brand);
	border-radius: var(--radius-sm);
	font-size: .98rem;
	color: var(--ink-soft);
}

.section--alt .al-fair { background: #fff; }

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

/*
 * Siódmy kafelek nie ma pary.
 *
 * Obszarów audytu jest siedem i tyle ma zostać — dosypanie ósmego oznaczałoby
 * wymyślenie kontroli, których narzędzie nie wykonuje. Przy trzech kolumnach
 * ostatni kafelek zostawał sam w rzędzie, przy dwóch tak samo.
 *
 * Zamiast tego ostatni kafelek rozciąga się na całą szerokość i przechodzi
 * w układ poziomy: nagłówek po lewej, lista w dwóch kolumnach po prawej.
 * Rząd jest zawsze pełny, a szeroki kafelek czyta się jak domknięcie sekcji,
 * nie jak resztka.
 *
 * Liczba kolumn jest podana wprost, nie przez `auto-fit`. Przy `auto-fit`
 * siatka sama decydowała, czy zrobić trzy kolumny czy cztery, a wtedy nie da
 * się przewidzieć, ilu kafelków brakuje w ostatnim rzędzie. `:last-child`
 * zamiast klasy w szablonie — działa niezależnie od długości tablicy.
 */
.al-scope {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 601px) {
	.al-scope {
		grid-template-columns: repeat(2, 1fr);
	}

	.al-scope-item:last-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(190px, 1fr) 2fr;
		column-gap: clamp(1.5rem, 4vw, 3rem);
		align-content: start;
	}

	.al-scope-item:last-child .card-icon { grid-column: 1; grid-row: 1; }
	.al-scope-item:last-child h3        { grid-column: 1; grid-row: 2; }

	.al-scope-item:last-child ul {
		grid-column: 2;
		grid-row: 1 / span 2;
		/*
		 * `display: block` jest konieczne. Bazowa reguła daje listom
		 * `display: grid`, a kontener siatki ignoruje `columns` — lista
		 * zostawała w jednej kolumnie mimo poprawnego `column-count`
		 * w stylach wyliczonych. Odstępy przejmuje margines na pozycjach,
		 * bo `gap` znika razem z siatką.
		 */
		display: block;
		columns: 2;
		column-gap: clamp(1.5rem, 4vw, 3rem);
	}

	/* Bez tego pozycja potrafi się rozpaść między dwiema kolumnami. */
	.al-scope-item:last-child li {
		break-inside: avoid;
		margin-bottom: .38rem;
	}
}

@media (min-width: 981px) {
	.al-scope {
		grid-template-columns: repeat(3, 1fr);
	}
}

.al-scope-item {
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.al-scope-item h3 {
	margin: .9rem 0 .7rem;
	font-size: 1.08rem;
}

.al-scope-item ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .38rem;
}

.al-scope-item li {
	position: relative;
	padding-left: 1.1rem;
	font-size: .93rem;
	color: var(--ink-soft);
}

.al-scope-item li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--brand);
}

.al-limits {
	max-width: 60em;
	margin: clamp(2rem, 4vw, 3rem) auto 0;
	padding: clamp(1.3rem, 3vw, 2rem);
	background: var(--bg-alt);
	border-radius: var(--radius);
}

.al-limits h3 {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 1rem;
	font-size: 1.12rem;
}

.al-limits ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .7rem;
}

.al-limits li {
	position: relative;
	padding-left: 1.5rem;
	color: var(--ink-soft);
}

.al-limits li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--brand);
	font-weight: 700;
}

/* ------------------------------ kroki ----------------------------- */

.al-steps {
	list-style: none;
	counter-reset: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.al-steps li {
	padding: 1.6rem;
	background: var(--surface-2);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius);
}

.al-step-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--brand);
	color: #fff;
	font-weight: 700;
}

.al-steps h3 {
	margin: 1rem 0 .5rem;
	font-size: 1.08rem;
	color: #fff;
}

.al-steps p {
	margin: 0;
	font-size: .95rem;
	color: #C7C7CF;
}

/* --------------------------- raport-przykład ---------------------- */

.al-report {
	max-width: 900px;
	margin-inline: auto;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.al-report-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1rem, 3vw, 2rem);
	padding: clamp(1.3rem, 3vw, 2rem);
	border-bottom: 1px solid var(--line);
}

.al-score {
	display: flex;
	align-items: baseline;
	gap: .3rem;
	padding: 1rem 1.5rem;
	border-radius: var(--radius);
	background: #10794F;
	color: #fff;
}

.al-score-n { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.al-score-d { font-size: .95rem; opacity: .85; }

.al-report-meta { flex: 1 1 260px; }
.al-report-host { margin: 0; font-weight: 700; font-size: 1.1rem; }
.al-report-note { margin: .35rem 0 0; font-size: .9rem; color: var(--ink-soft); }

.al-report-tag {
	display: inline-block;
	margin: .6rem 0 0;
	padding: .2rem .6rem;
	background: var(--bg-alt);
	border-radius: 999px;
	font-size: .78rem;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.al-report-cats {
	padding: clamp(1.3rem, 3vw, 2rem);
	display: grid;
	gap: .7rem;
}

.al-cat {
	display: grid;
	grid-template-columns: minmax(120px, 170px) 1fr 2.5rem;
	align-items: center;
	gap: .8rem;
	font-size: .92rem;
}

.al-cat-name { color: var(--ink-soft); }

.al-bar {
	height: 8px;
	background: var(--bg-alt);
	border-radius: 999px;
	overflow: hidden;
}

.al-bar i {
	display: block;
	height: 100%;
	background: #10794F;
	border-radius: 999px;
}

.al-cat-val { font-weight: 700; text-align: right; }

.al-report-list {
	padding: clamp(1.3rem, 3vw, 2rem);
	border-top: 1px solid var(--line);
	background: var(--bg-alt);
}

.al-report-list h3 { margin: 0 0 1rem; font-size: 1.05rem; }
.al-report-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.al-report-list li { font-size: .94rem; color: var(--ink-soft); }

.al-st {
	display: inline-block;
	margin-right: .5rem;
	padding: .12rem .55rem;
	border-radius: 4px;
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #fff;
	white-space: nowrap;
}

.al-st--warn { background: #8A5A00; }
.al-st--ok { background: #10794F; }

/* ------------------------------ fakty ----------------------------- */

.al-facts {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	gap: .65rem;
}

.al-facts li {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	color: var(--ink-soft);
}

/* ============================ DOSTĘPNOŚĆ ========================== */

@media (prefers-reduced-motion: reduce) {
	.al-hero *,
	.al-report * {
		animation: none !important;
		transition: none !important;
	}
}