/**
 * Hero - pelnoekranowa scena z ruchomym tlem (POPRAWKA 2 sekcja 7).
 * Pisany mobile-first.
 */

.hero--cinematic {
	position: relative;
	display: flex;
	align-items: center;
	/* 100svh, a nie 100vh: na telefonie pasek adresu chowa sie przy
	   przewijaniu i przy 100vh hero "podskakiwalo" o jego wysokosc.
	   svh to najmniejszy stan viewportu, wiec kadr jest stabilny. */
	min-height: 100svh;
	/* Naglowek jest przezroczysty i lezy NA hero - tresc musi zaczac sie
	   ponizej, inaczej plakietka wchodzilaby pod logo. */
	padding-top: calc(64px + var(--space-8));
	padding-bottom: var(--space-16);
	overflow: hidden;
	isolation: isolate;
}

/* ---------- Warstwa tla ---------- */
.hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--z-hero-bg);
	overflow: hidden;
}

.hero__video,
.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Kadr Route 66 jest poziomy. W pionie srodek zdjecia to samo niebo,
	   wiec przesuwamy punkt kadrowania nizej - na droge i auto. */
	object-position: 50% 62%;
	display: block;
}

/*
 * Powolny ruch kamery na nieruchomym kadrze.
 * To ROZWIAZANIE TYMCZASOWE na czas, gdy nie ma jeszcze pliku wideo:
 * prompt wymaga, zeby hero nie bylo martwym zdjeciem. Gdy wideo trafi do
 * assets/video/, PHP przestaje renderowac <img> i ta animacja znika sama.
 */
.hero__img--kenburns {
	animation: hero-kenburns 34s ease-in-out infinite alternate;
	transform-origin: 50% 60%;
}

@keyframes hero-kenburns {
	from {
		transform: scale(1.06) translate3d(-1.2%, 0, 0);
	}
	to {
		transform: scale(1.16) translate3d(1.2%, -1.5%, 0);
	}
}

/* Przyciemnienie: mocne u dolu (pod tekstem) i u gory (pod naglowkiem),
   przejrzyste w srodku, zeby scena byla widoczna. */
.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: var(--z-hero-scrim);
	background:
		linear-gradient(180deg,
			color-mix(in srgb, #000 62%, transparent) 0%,
			transparent 26%,
			transparent 42%,
			color-mix(in srgb, #000 70%, transparent) 88%,
			var(--color-bg) 100%),
		/* Delikatne winietowanie - kieruje wzrok do srodka. */
		radial-gradient(120% 80% at 50% 45%, transparent 40%, color-mix(in srgb, #000 45%, transparent) 100%);
}

/* ---------- Tresc ---------- */
.hero__content {
	position: relative;
	z-index: var(--z-raised);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-6);
}

.hero__badge {
	display: inline-flex;
	align-items: center;
	padding: 7px var(--space-4);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.07);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #f5f5f4;
}

.hero__title {
	margin: 0;
	max-width: 16ch;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(2.5rem, 9vw, 5.5rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5);
}

.hero__lead {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
	line-height: 1.65;
	/* Nie --color-text-muted: tekst lezy na zdjeciu, nie na tle motywu,
	   wiec potrzebuje wlasnej, jasnej wartosci niezaleznej od motywu. */
	color: rgba(245, 245, 244, 0.86);
	text-shadow: 0 1px 20px rgba(0, 0, 0, 0.55);
}

.hero__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-3);
	width: 100%;
	max-width: 320px;
	margin-top: var(--space-2);
}

/*
 * .hero__actions jest uzywane takze POZA .hero__content - jako grupa
 * przyciskow CTA na dole podstron (Koszty, FAQ, 404, wpis blogowy).
 * W hero dziala flex-parent .hero__content (align-items:center) i centruje
 * ja bez wzgledu na wlasny margin. Poza hero taki flex-parent nie istnieje,
 * a .hero__actions jest blokiem o ograniczonej szerokosci (max-width:320px
 * na mobile, potem width:auto) - bez marginesu automatycznego zostaje
 * przyklejona do lewej krawedzi kontenera, mimo ze naglowek nad nia jest
 * juz wysrodkowany przez text-align:center.
 */
.hero__actions--center {
	margin-inline: auto;
}

/* ---------- Wskaznik przewijania ---------- */
.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: var(--space-8);
	width: 24px;
	height: 38px;
	margin-left: -12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--radius-pill);
	z-index: var(--z-raised);
}

.hero__scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 3px;
	height: 6px;
	margin-left: -1.5px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.75);
	animation: hero-scroll 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes hero-scroll {
	0% { transform: translateY(0); opacity: 0; }
	22% { opacity: 1; }
	72% { transform: translateY(14px); opacity: 0; }
	100% { transform: translateY(14px); opacity: 0; }
}

/* ---------- Od tabletu w gore ---------- */
@media (min-width: 600px) {
	.hero__actions {
		flex-direction: row;
		justify-content: center;
		width: auto;
		max-width: none;
		gap: var(--space-4);
	}
}

@media (min-width: 900px) {
	.hero--cinematic {
		padding-top: calc(76px + var(--space-16));
	}
	.hero__video,
	.hero__img {
		object-position: center;
	}
	.hero__content {
		gap: var(--space-8);
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Zero ruchu w tle: ani wideo, ani jazdy kamery, ani wskaznika. */
	.hero__img--kenburns {
		animation: none;
		transform: scale(1.04);
	}
	.hero__scroll::after {
		animation: none;
		opacity: 0.75;
	}
}

/*
 * Sekcja "Gotowy na swoje auto..." (strona glowna) jest jedynym miejscem,
 * gdzie ten uklad jest CELOWO dwukolumnowy na desktopie (tekst po lewej,
 * przyciski po prawej) - tam .hero__actions--center nie powinno wchodzic
 * w gre. Centrowanie dotyczy wylacznie mobile, gdzie grid--2 spada do
 * jednej kolumny i przyciski (jak wyzej) zostaja przyklejone do lewej.
 */
@media (max-width: 767px) {
	#cta-final .container {
		text-align: center;
	}
	#cta-final .hero__actions {
		margin-inline: auto;
	}
}