/*
 * Stickerly — nagłówek stron informacyjnych, styl B v2.
 *
 * ⚠️ Prefiks klas: `st2-hi`. Każda klasa MUSI go mieć — kolizja nazw raz już
 * rozwaliła układ w zupełnie innej sekcji strony (dziennik 06.09).
 *
 * ⚠️ NAJWAŻNIEJSZA ZMIANA WOBEC V1: tło. Nie chodziło o odcień, tylko o to, że
 * płaski prostokąt w jednym kolorze nie ma czym oddać światła. Tu leżą trzy
 * warstwy: gradient bazowy, poświata pod renderem i dwie fale — i dopiero
 * razem dają wrażenie z wizualizacji.
 */

.st2-hi {
	position: relative;
	overflow: hidden;
	border-radius: var(--st2-r-sekcja);
	background: var(--st2-tlo-ciemne);
	color: #fff;
	isolation: isolate;
}

/* ---------- fale w tle ---------- */

.st2-hi-tlo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.st2-hi-fale { position: absolute; inset: 0; width: 100%; height: 100%; }

/*
 * ⚠️ FALE NA 5–7 % KRYCIA, NIE WIĘCEJ. Powyżej dziesięciu procent zaczynają
 * konkurować z nagłówkiem — a to nagłówek ma być pierwszą rzeczą, którą widać.
 */
.st2-hi-fale path { fill: rgba(255, 255, 255, 0.055); }
.st2-hi-fale path:nth-child(2) { fill: rgba(12, 22, 56, 0.22); }

/* ---------- układ ---------- */

.st2-hi-srodek {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(2rem, 4.6vw, 3.4rem) clamp(1.4rem, 4vw, 3.4rem);
}

.st2-hi-tresc { min-width: 0; }

/* ---------- okruszki ---------- */

.st2-hi-okruszki ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 clamp(0.7rem, 2vw, 1.15rem);
	padding: 0;
	list-style: none;
	font-size: 0.86rem;
}

.st2-hi-okruszki li { display: flex; align-items: center; gap: 0.45rem; }

/* Separator jako pseudoelement — nie zaśmieca treści dla czytnika ekranu. */
.st2-hi-okruszki li + li::before {
	content: "›";
	color: rgba(255, 255, 255, 0.45);
	font-size: 1rem;
	line-height: 1;
}

.st2-hi-okruszki a { color: rgba(255, 255, 255, 0.74); text-decoration: none; }
.st2-hi-okruszki a:hover { color: #fff; text-decoration: underline; }

/*
 * ⚠️ BIEŻĄCA STRONA MUSI DOSTAĆ KOLOR JAWNIE. W okruszkach WooCommerce ostatnia
 * pozycja to `<b>`, a nie `[aria-current]` — w v1 dziedziczyła grafit i była
 * niewidoczna na granacie (ta sama mina co 07.09).
 */
.st2-hi-okruszki span,
.st2-hi-okruszki b { color: #fff; font-weight: 500; }

/* ---------- nagłówek ---------- */

.st2-hi-tytul {
	margin: 0;
	font-size: clamp(2.2rem, 5.6vw, 4.1rem);
	font-weight: 800;
	line-height: 1.03;
	letter-spacing: -0.02em;
	color: #fff;
}

.st2-hi-lead {
	max-width: 46ch;
	margin: clamp(0.7rem, 2vw, 1.05rem) 0 0;
	font-size: clamp(1rem, 1.5vw, 1.16rem);
	line-height: 1.5;
	/* Jawnie, nie dziedziczeniem — `.st-hub-lead p` z innego arkusza ustawia
	   szary i wygrywa specyficznością (zmierzone 07.09, kontrast 1,28). */
	color: rgba(255, 255, 255, 0.88);
}

/* ---------- chipy ---------- */

/*
 * ⚠️ TRZY CHIPY MUSZĄ ZOSTAĆ W JEDNEJ LINII.
 * Dawid ze zrzutu: *„tu się trochę rozjechało na kontakcie i na dostawie…
 * nie są w trzech liniach, tylko są osobno"*. Przyczyna: `flex-wrap: wrap`
 * przy chipach o zmiennej szerokości — trzeci nie mieścił się i spadał niżej,
 * przez co układ wyglądał na zepsuty, a nie na zawinięty.
 *
 * Teraz to SIATKA o trzech równych kolumnach: każdy chip dostaje dokładnie
 * jedną trzecią szerokości niezależnie od długości napisu, więc rząd nie ma
 * jak się rozjechać. Zawijanie wraca dopiero poniżej 700 px, gdzie i tak
 * przechodzimy na kolumnę.
 */
.st2-hi-chipy {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, auto));
	justify-content: start;
	align-items: center;
	gap: clamp(0.7rem, 1.8vw, 1.5rem);
	margin: clamp(1.2rem, 3vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.st2-hi-chip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	font-size: clamp(0.8rem, 1.05vw, 0.92rem);
	line-height: 1.28;
}

/* Napis chipu nie może rozpychać kolumny — łamie się, ale nie rozwala rzędu. */
.st2-hi-chip-tekst { min-width: 0; }

/* Cienka pionowa kreska między chipami — dokładnie jak na wizualizacji. */
.st2-hi-chip + .st2-hi-chip { padding-left: clamp(0.9rem, 2.4vw, 1.9rem); border-left: 1px solid rgba(255, 255, 255, 0.18); }

.st2-hi-chip-tekst { display: flex; flex-direction: column; }
.st2-hi-chip-tekst strong { font-weight: 600; color: #fff; }
.st2-hi-chip-tekst span { color: rgba(255, 255, 255, 0.82); }

/* ---------- kolumna z renderem ---------- */

.st2-hi-wizual { position: relative; min-width: 0; }

.st2-hi-render {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 400px;
	margin-inline: auto;
}

.st2-hi-render img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Cień pod renderem, nie pod ramką — render ma przezroczyste tło. */
	filter: drop-shadow(0 18px 32px rgba(9, 16, 42, 0.42));
}

.st2-hi-zastepnik {
	position: relative;
	z-index: 1;
	padding: 0.4rem 0.8rem;
	border-radius: var(--st2-r-znacznik);
	background: rgba(255, 255, 255, 0.1);
	font-size: 0.76rem;
	color: rgba(255, 255, 255, 0.7);
	text-align: center;
}

/* ---------- dopisek odręczny ---------- */

.st2-hi-dopisek {
	position: absolute;
	z-index: 2;
	left: -2.5rem;
	top: 4%;
	width: clamp(150px, 15vw, 210px);
	pointer-events: none;
}

.st2-hi-dopisek p { margin: 0; font-size: clamp(1rem, 1.5vw, 1.22rem); }

.st2-hi-strzalka { width: 100%; height: auto; margin-top: 0.15rem; }

/* ---------- iskry ---------- */

.st2-hi-iskry { inset: 0; }

.st2-hi-iskry span {
	left: var(--x);
	top: var(--y);
	height: var(--h);
	transform: rotate(var(--r));
}


/* ---------- punkty i przycisk (hub „Oferta dla firm") ---------- */

/*
 * ⚠️ KOLORY NADAWANE JAWNIE, NIE DZIEDZICZENIEM.
 * Lista wchodzi z treści strony, a tam obowiązują reguły `.st-hub-lead p`
 * i `.st-wpis-tresc li`, które nadają kolor tekstu głównego. Na granacie dałoby
 * to kontrast 1,28 — dokładnie ta mina wystąpiła 07.09 przy punktach huba.
 */
.st2-hi-punkty {
	margin: clamp(0.8rem, 2vw, 1.15rem) 0 0;
	max-width: 54ch;
	font-size: 0.94rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.88);
}

.st2-hi-punkty p { margin: 0 0 0.5rem; color: rgba(255, 255, 255, 0.88); }
.st2-hi-punkty p:last-child { margin-bottom: 0; }

.st2-hi-punkty ul {
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.42rem;
}

.st2-hi-punkty li {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
	color: rgba(255, 255, 255, 0.88);
}

/* Ptaszek zamiast kropki — ten sam znak, co przy atutach w TL;DR. */
.st2-hi-punkty li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 5px;
	height: 9px;
	border: solid #a9baea;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.st2-hi-punkty strong { color: #fff; font-weight: 700; }
.st2-hi-punkty a { color: #cfd9f5; text-decoration: underline; }

.st2-hi-cta { margin: clamp(1rem, 2.4vw, 1.5rem) 0 0; }

/* Przycisk na ciemnym tle: białe tło, granatowy napis — jak na wizualizacji. */
.st2-hi-cta .st2-btn { background: #fff; border-color: #fff; color: var(--st2-granat); }
.st2-hi-cta .st2-btn:hover { background: var(--st2-blekit-jasny); color: var(--st2-granat-hover); }

/* Przy punktach chipy schodzą niżej i są drobniejsze — inaczej nagłówek
   rośnie ponad ekran na stronach branżowych, które mają oba bloki. */
.st2-hi-punkty ~ .st2-hi-chipy { margin-top: clamp(0.9rem, 2vw, 1.3rem); font-size: 0.86rem; }

/* ============================================================= WARIANTY */

/*
 * ⚠️ BLOKI WARIANTÓW MUSZĄ STAĆ PO REGUŁACH BAZOWYCH.
 * Przy równej specyficzności wygrywa reguła późniejsza — w v1 blok wariantu
 * siedział w połowie pliku i przegrywał z tłem bazowym (dziennik 07.09, dwa razy
 * tego samego dnia).
 */

/* Niski — strony drugiego planu z dolnego rzędu wizualizacji. */
.st2-hi--niski .st2-hi-srodek { padding-block: clamp(1.4rem, 2.8vw, 2.1rem); gap: clamp(1rem, 3vw, 2rem); }
.st2-hi--niski .st2-hi-tytul { font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.st2-hi--niski .st2-hi-lead { font-size: 0.95rem; max-width: 40ch; }
.st2-hi--niski .st2-hi-render { max-width: 240px; }
.st2-hi--niski .st2-hi-chip { font-size: clamp(0.72rem, 0.95vw, 0.82rem); gap: 0.5rem; }
.st2-hi--niski .st2-hi-chipy { gap: clamp(0.5rem, 1.2vw, 1rem); }
.st2-hi--niski .st2-ikonka { width: 32px; height: 32px; }
.st2-hi--niski .st2-ikonka svg { width: 16px; height: 16px; }
.st2-hi--niski .st2-hi-dopisek { left: auto; right: 12%; top: -0.5rem; width: clamp(110px, 11vw, 150px); }

/*
 * Dokument — regulamin i polityka prywatności.
 * ⚠️ Dawid 10.09: *„Regulamin sklepu, bez sensu te zasady zakupu. Po prostu
 * regulamin sklepu i tyle, H1"*. Nagłówek dokumentu prawnego ma jedno zadanie:
 * powiedzieć, gdzie jesteś. Lead, chipy i render tylko rozpraszają.
 */
.st2-hi--dokument .st2-hi-srodek { grid-template-columns: 1fr; padding-block: clamp(1.5rem, 3vw, 2.2rem); }
.st2-hi--dokument .st2-hi-tytul { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.st2-hi--dokument .st2-hi-fale path:nth-child(1) { fill: rgba(255, 255, 255, 0.04); }

/* ============================================================== TELEFON */

@media (max-width: 900px) {
	.st2-hi-srodek { grid-template-columns: 1fr; text-align: left; }

	/* Render idzie NAD tekst — na wizualizacji jest po prawej, a na wąskim
	   ekranie „po prawej" znaczy „pod spodem", czyli poza pierwszym widokiem. */
	.st2-hi-wizual { order: -1; }
	.st2-hi-render { max-width: 220px; margin-inline: 0; }
	.st2-hi--niski .st2-hi-render { max-width: 160px; }
}

@media (max-width: 700px) {
	.st2-hi { border-radius: var(--st2-r-karta); }

	/* Kreski pionowe między chipami nie mają sensu, gdy chipy stoją w kolumnie. */
	.st2-hi-chipy { grid-template-columns: 1fr; gap: 0.7rem; }
	.st2-hi-chip + .st2-hi-chip { padding-left: 0; border-left: 0; }
	.st2-hi-chip-tekst { flex-direction: row; gap: 0.28em; flex-wrap: wrap; }
}