/* ============================================================
   Agru-Frank — Hero slider (strona główna) — Phase 3
   Full-bleed + overlay, fade transition, Custom Vanilla JS.
   Tokeny z base.css (color-mix + 8-digit HEX fallback dla Safari <16.2 / Firefox <113).
   ⚠ Typografia headline = TYMCZASOWA (clamp na system font) — retype po Księdze znaku.
   Plan: plans/02-sekcje/wykonane/2026-06-08-hero-slider-homepage.md
   ============================================================ */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: calc(100svh - var(--header-height));   /* svh — branzowy standard dla tego przypadku (nie moje zgadywanie,
	                                                       zweryfikowane researchem 2026-07-15): dopasowany do ekranu W MOMENCIE
	                                                       zaladowania (pasek widoczny = najmniejszy realny viewport), wiec
	                                                       zero jumpa i zero janku z ciaglych przeliczen (dvh). Po schowaniu
	                                                       paska kolejna sekcja staje sie widoczna troche wczesniej — to
	                                                       normalne zachowanie scrolla, nie bug. */
}

/* --- Viewport (slider rośnie do wypełnienia hero; slajdy absolute → CLS=0) --- */
.hero__viewport {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;                 /* flex child — pozwala wypełnić przestrzeń bez przepełnienia */
	background: var(--graphite);   /* anty-flash zanim załaduje się obraz slajdu */
	overflow: hidden;
}

/* --- Slajdy (fade; visibility usuwa nieaktywne z tab order + SR) --- */
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-slow), visibility 0s linear 500ms;
}
.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--transition-slow), visibility 0s;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* object-position ustawiany inline per slajd (focal point z danych) */
}

/* --- Overlay: gradient graphite od lewej → kontrast białego tekstu (WCAG ≥4.5:1) --- */
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, #3E3E3DE6 0%, #3E3E3DB3 36%, #3E3E3D33 66%, #3E3E3D00 100%);   /* fallback */
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--graphite) 90%, transparent) 0%,
		color-mix(in srgb, var(--graphite) 70%, transparent) 36%,
		color-mix(in srgb, var(--graphite) 20%, transparent) 66%,
		transparent 100%
	);
}

/* --- Treść (wyśrodkowana pionowo, ograniczona do containera) --- */
.hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	z-index: 1;
}
.hero__text {
	max-width: var(--measure);
	color: var(--white);
}
/* .hero__eyebrow: .u-eyebrow w utilities.css (kontrast na overlay ~8:1 AA/AAA) */
.hero__headline {
	margin: 0 0 var(--space-16);
	font-size: var(--text-display);
	font-weight: 600;
	line-height: 1.1;
	color: var(--white);
}
.hero__subheading {
	margin: 0 0 var(--space-32);
	max-width: var(--measure);
	font-size: var(--text-lead);
	line-height: 1.6;
	color: var(--white);
}
/* --- Kontrolki (dół, wyrównane do containera) --- */
.hero__controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-24);
	z-index: 2;
}
.hero__controls-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-16);
}

.hero__arrow,
.hero__playpause {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tap-target-min);
	height: var(--tap-target-min);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF2E;   /* fallback */
	background: color-mix(in srgb, var(--white) 18%, transparent);
	color: var(--white);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background var(--transition-fast);
}
.hero__arrow:hover,
.hero__playpause:hover {
	background: #FFFFFF52;   /* fallback */
	background: color-mix(in srgb, var(--white) 32%, transparent);
}

/* Dots — widoczna kropka 10px, klikalny obszar 24px (WCAG 2.2 SC 2.5.8) */
.hero__dots {
	display: flex;
	align-items: center;
	gap: var(--space-8);
}
.hero__dot {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
}
.hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10px;
	height: 10px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #FFFFFF73;   /* fallback */
	background: color-mix(in srgb, var(--white) 45%, transparent);
	transition: background var(--transition-fast), width var(--transition-fast), height var(--transition-fast);
}
.hero__dot.is-active::before {
	width: 12px;
	height: 12px;
	background: var(--white);
}

/* Play/pause — przełączanie ikon przez data-state (JS) */
.hero__icon {
	display: inline-flex;
}
.hero__icon--play {
	display: none;
}
.hero__playpause[data-state="paused"] .hero__icon--pause {
	display: none;
}
.hero__playpause[data-state="paused"] .hero__icon--play {
	display: inline-flex;
}

/* --- Focus-visible: białe outline (na zdjęciu --blue słabo widoczny) --- */
.hero__arrow:focus-visible,
.hero__playpause:focus-visible,
.hero__dot:focus-visible,
.hero .agf-btn:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: 2px;
}

/* --- A11Y: live region (ogłaszanie zmiany slajdu) — visually hidden --- */
.hero__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Mobile: swipe wystarcza, chowamy strzałki (oszczędność miejsca) --- */
@media (max-width: 767px) {
	.hero__arrow {
		display: none;
	}
	.hero__controls-inner {
		gap: var(--space-24);
	}
}

/* --- prefers-reduced-motion: fade natychmiastowy (base.css globalnie ścina);
   autoplay wyłączany dodatkowo w JS. --- */
@media (prefers-reduced-motion: reduce) {
	.hero__slide {
		transition: none;
	}
}

/* === Pasek liczb / trust — część hero, na dole 100dvh (ciemne tło) === */
.hero__stats {
	flex-shrink: 0;
	padding-top: 0;                    /* mobile: przyklejone do hero, bez przerwy */
	padding-bottom: var(--space-32);
	/* transparent → canvas .site-main (bg-page + siatka blueprint) pokazuje się w bocznych gutterach */
}
/* Base: layout wspólny dla mobile/desktop, ZERO wizualnej ramki tutaj — cała stylistyka
   ramki żyje w media queries niżej (mobile i desktop mają different technique, każdy izolowany
   we własnym bloku, żeby zmiana jednego nigdy nie przeciekła w drugi). */
.hero__stats-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.hero__stat {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	align-items: center;
	padding-block: var(--space-24);
	padding-inline: var(--space-16);
}
/* Mobile-only: full-bleed breakout (ujemny margin = -padding, nie 100vw bo wciąga scrollbar)
   + ramka NA hero__stat (border per-panel, sąsiadujące krawędzie collapsed -1px zamiast
   dublować grubość — klasyczny trick "border-collapse" dla div-gridów). */
@media (max-width: 767.98px) {
	.hero__stats-list {
		width: calc(100% + 2 * var(--container-pad));
		margin-inline: calc(-1 * var(--container-pad));
	}
	.hero__stat {
		position: relative;
		gap: var(--space-8);
		padding-block: var(--space-16);   /* 24→16, spojnie z padding-inline, mniej dominujace panele */
		border: 1px solid var(--blue);
	}
	.hero__stat:nth-child(even) { margin-left: -1px; }
	.hero__stat:nth-child(n+3) { margin-top: -1px; }
	/* Kreseczki — TYLKO pionowe (gora/dol), zero poziomych — poziomy overshoot na full-bleed
	   wypycha document scroll (prawa strona zawsze liczy sie do scrollWidth w LTR), pionowy nigdy.
	   3 styki gora (kreski w gore) + 3 styki dol (kreski w dol) = lewa/srodek/prawa krawedz.
	   left:-1px / right:-1px koryguje offset border (absolute liczy sie od padding-box dziecka,
	   1px do srodka od widocznej krawedzi bordera). */
	.hero__stat::before {
		content: "";
		position: absolute;
		left: -1px;
		width: 1px;
		background: var(--blue);
	}
	.hero__stat:nth-child(1)::before, .hero__stat:nth-child(2)::before {
		top: calc(var(--space-8) * -1);
		height: var(--space-8);
	}
	.hero__stat:nth-child(3)::before, .hero__stat:nth-child(4)::before {
		bottom: calc(var(--space-8) * -1);
		height: var(--space-8);
	}
	.hero__stat:nth-child(2)::after, .hero__stat:nth-child(4)::after {
		content: "";
		position: absolute;
		right: -1px;
		width: 1px;
		background: var(--blue);
	}
	.hero__stat:nth-child(2)::after { top: calc(var(--space-8) * -1); height: var(--space-8); }
	.hero__stat:nth-child(4)::after { bottom: calc(var(--space-8) * -1); height: var(--space-8); }
}
.hero__stat-value {
	font-size: var(--text-h2);
	font-weight: 600;
	line-height: 1;
	color: var(--blue);   /* niebieskie liczby — stare stylowanie */
}
.hero__stat-label {
	font-size: var(--text-label);
	line-height: 1.3;
	color: color-mix(in srgb, var(--graphite) 80%, transparent);
}

/* Ramka stats z PRZEDŁUŻONYMI liniami (desktop): piony i poziomy wychodzą 8px poza box,
   więc na każdym przecięciu tworzą krzyżyk same z siebie. Jeden system = ramka + krzyżyki,
   bez osobnych gradientów i bez dublowania. col-gap 0 → dzielniki równo na 25/50/75%.
   Padding na statach → linie sięgają pełnej wysokości paska. */
@media (min-width: 768px) {
	.hero__stats {
		padding-block: 0;
	}
	.hero__stats-list {
		grid-template-columns: repeat(4, 1fr);
		position: relative;
		column-gap: 0;
	}
	.hero__stats-list::before,
	.hero__stats-list::after {
		content: "";
		position: absolute;
		left: calc(var(--space-8) * -1);
		right: calc(var(--space-8) * -1);
		height: 1px;
		background: var(--blue);
	}
	.hero__stats-list::before { top: 0; }
	.hero__stats-list::after { bottom: 0; }
	.hero__stat {
		position: relative;
		justify-content: center;
		padding-block: var(--space-32);
		padding-inline: var(--space-16);
	}
	/* pionowe linie/dzielniki — przedłużone 8px góra/dół; każdy stat = lewa, ostatni + prawa */
	.hero__stat::before,
	.hero__stat:last-child::after {
		content: "";
		position: absolute;
		top: calc(var(--space-8) * -1);
		bottom: calc(var(--space-8) * -1);
		width: 1px;
		background: var(--blue);
	}
	.hero__stat::before { left: 0; }
	.hero__stat:last-child::after { right: 0; }
}