/* ==========================================================================
   Blok: Home — HERO (full-bleed slider Swiper 12)
   Port z prototypu (sections/home/hero/hero.css); tokeny → var(--wp--*).
   CSS/JS Swipera enqueue'owane osobno (inc/blocks-assets.php). Header globalny
   jest solidny i stoi NAD hero w normalnym flow (ADR-0037) — ta sekcja go nie
   zawiera, tylko odejmuje jego wysokość od ekranu (patrz --hero-height).
   ========================================================================== */

.hero {
	position: relative;
	width: 100%;

	/* Header (solidny, sticky, w normalnym flow — ADR-0037) stoi NAD hero, więc
	   hero bierze RESZTĘ ekranu: header + hero = dokładnie 100svh, ani piksela
	   więcej. `1px` = hairline headera (border-block-end), nie token.
	   svh = stabilne na mobile (pasek adresu). */
	--hero-height: calc(100svh - var(--wp--custom--header-height) - 1px);

	/* Kontrolki na zdjęciach: kropki siedzą na „szklanej pigułce" (przyciemnione
	   tło + blur) → czytelne na KAŻDYM kadrze (jasnym i ciemnym), niezależnie od
	   zmiennej jasności zdjęć. Nieaktywna kropka biała, aktywna = akcent. */
	--hero-track: color-mix(in srgb, var(--wp--preset--color--white) 70%, transparent);
	--hero-fill: var(--wp--preset--color--accent);
	--hero-control-scrim: color-mix(in srgb, var(--wp--preset--color--dark) 70%, transparent);
}

/* --- Kontener Swipera ---------------------------------------------------- */
.hero__swiper {
	width: 100%;
	height: var(--hero-height);
}

/* --- Slajd --------------------------------------------------------------- */
.hero__slide {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

/* ==========================================================================
   Paginacja — kropki (bez strzałek)
   ========================================================================== */
.hero__pagination.swiper-pagination {
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3vw, 2.25rem);
	transform: translateX(-50%);
	z-index: 3;

	display: flex;
	align-items: center;
	gap: 2px;
	width: auto;

	/* Szklana pigułka (język marki, radius 47px) — gwarantuje kontrast kropek
	   na każdym zdjęciu. Ciasno otula kropki, bez pustej przestrzeni. */
	padding: 8px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--hero-control-scrim);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* Swiper renderuje każdą kropkę przez renderBullet (view.js) */
.hero__bullet {
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: 6px; /* obszar kliknięcia 24×24px (WCAG 2.5.8) wokół widocznej kropki */
	background: none;
	cursor: pointer;
	display: grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--circle);
}

.hero__bullet-dot {
	display: block;
	width: 12px;
	height: 12px;
	border-radius: var(--wp--custom--radius--circle);
	background: var(--hero-track);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.hero__bullet--active .hero__bullet-dot {
	background: var(--hero-fill);
	transform: scale(1.35);
}

.hero__bullet:hover .hero__bullet-dot,
.hero__bullet:focus-visible .hero__bullet-dot {
	background: color-mix(in srgb, var(--wp--preset--color--white) 90%, transparent);
}

.hero__bullet:focus-visible {
	outline: 2px solid var(--hero-fill);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.hero__bullet-dot {
		transition: none;
	}
}