/*
 * Stickerly — boks CTA na karcie produktu, styl B v2.
 *
 * ⚠️ Prefiks klas: `st2-cta`.
 *
 * ⚠️ CIEPŁO BIERZE SIĘ Z GRADIENTU I MIĘKKICH KRAWĘDZI, NIE Z KOLORU TEKSTU.
 * v1 miała płaską biel, ostre rogi i prostokątne przyciski — i to składało się
 * na „korporacyjnie". Tu: gradient biel → bardzo jasny błękit, promień sekcji,
 * przyciski w pigułce, cień pod całością.
 */

.st2-cta {
	position: relative;
	overflow: hidden;
	container-type: inline-size;
	border-radius: var(--st2-r-sekcja);
	background: var(--st2-tlo-jasne);
	box-shadow: var(--st2-cien-spok);
	isolation: isolate;
}

/* Poświata pod renderem — po prawej, tam gdzie leży obiekt. */
/*
 * ⚠️ NADTYTUŁ W TYM BOKSIE NIE MA KRESKI. Dawid: *„ten indywidualny projekt
 * też jest jakoś inaczej zrobiony"*. Na wizualizacji to same wersaliki
 * z szerokim światłem — kreska jest językiem SEKCJI strony, a boks CTA
 * siedzi wewnątrz karty produktu i nie otwiera żadnej sekcji.
 */
.st2-cta .st2-nad { letter-spacing: 0.2em; font-size: 0.66rem; }
.st2-cta .st2-nad::before { display: none; }

.st2-cta-tlo {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(52% 82% at 84% 46%, rgba(111, 131, 199, 0.20) 0%, rgba(111, 131, 199, 0) 68%);
	pointer-events: none;
}

.st2-cta-srodek {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	align-items: center;
	gap: clamp(1.2rem, 3vw, 2.6rem);
	padding: clamp(1.6rem, 3.4vw, 2.8rem) clamp(1.3rem, 3.4vw, 3rem);
}

/* ---------- treść ---------- */

/*
 * ⚠️ NAGŁÓWEK GRUBSZY I CIAŚNIEJSZY. Dawid, porównując z wizualizacją:
 * *„ta czcionka jest pogrubiona i to lepiej wygląda, ten nagłówek"*.
 * 900 zamiast 800 plus mocniejsze ściągnięcie liter — na wizualizacji tytuł
 * jest wyraźnie cięższy od reszty boksu i to on trzyma całą kompozycję.
 */
.st2-cta-tytul {
	margin: 0;
	font-size: clamp(1.5rem, 2.9vw, 2.25rem);
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--st2-grafit);
}

.st2-cta-akcent { color: var(--st2-granat); }

.st2-cta-lead {
	max-width: 52ch;
	margin: 0.7rem 0 0;
	font-size: 0.96rem;
	line-height: 1.55;
	color: var(--st2-szary);
}

/* ---------- atuty ---------- */

.st2-cta-atuty {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.8rem, 2vw, 1.6rem);
	margin: clamp(1rem, 2.4vw, 1.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.st2-cta-atuty li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.84rem;
	line-height: 1.3;
	color: var(--st2-grafit);
}

/* Kreska między atutami — ten sam separator co w chipach nagłówka. */
.st2-cta-atuty li + li { padding-left: clamp(0.8rem, 2vw, 1.6rem); border-left: 1px solid var(--st2-obwodka); }

/*
 * ⚠️ IKONA ATUTU JEST BEZ KAFELKA — sama kreska.
 * Na wizualizacji Dawida trzy atuty mają gołe ikony; kwadraciki dostają dopiero
 * chipy w nagłówku. Ta różnica jest celowa: tu ikona towarzyszy tekstowi,
 * tam sama jest elementem.
 */
.st2-cta-ikona { flex: 0 0 auto; color: var(--st2-granat); }
.st2-cta-ikona svg { width: 21px; height: 21px; display: block; }
.st2-cta-atut-tekst { color: var(--st2-grafit); }

/* ---------- przyciski ---------- */

.st2-cta-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: clamp(1.1rem, 2.6vw, 1.7rem);
}

/* ---------- kolumna wizualna ---------- */

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

.st2-cta-render {
	position: relative;
	aspect-ratio: 4 / 3;
	display: grid;
	place-items: center;
}

.st2-cta-render img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 16px 30px rgba(31, 44, 88, 0.20));
}

/* ---------- zastępnik naklejki ---------- */

/*
 * ⚠️ ZASTĘPNIK MA WYGLĄDAĆ NA DECYZJĘ, NIE NA BRAK PLIKU.
 * Zamiast szarego prostokąta z napisem „miejsce na zdjęcie" leży tu prawdziwa
 * naklejka: biały wykrojnik z grubą obwódką, przechylony, z cieniem. Po
 * dostarczeniu renderu (brief A8) wchodzi on w to samo miejsce.
 */
.st2-cta-naklejka {
	position: relative;
	display: grid;
	place-items: center;
	width: min(62%, 220px);
	aspect-ratio: 1 / 1;
	padding: 1.2rem;
	border: 7px solid #fff;
	border-radius: 18px;
	background: linear-gradient(150deg, #ffffff 0%, #eef2fd 100%);
	box-shadow: 0 3px 8px rgba(31, 44, 88, 0.14), 0 18px 34px rgba(31, 44, 88, 0.20);
	transform: rotate(-7deg);
}

.st2-cta-napis {
	font-size: clamp(1.15rem, 2.4vw, 1.75rem);
	line-height: 1.15;
	text-align: center;
	color: var(--st2-granat-gleb) !important;
}

/*
 * ⚠️ ISKRY MUSZĄ SIEDZIEĆ PRZY NAKLEJCE, NIE W PUSTYM POLU OBOK.
 * W pierwszej wersji leżały w warstwie rozciągniętej na cały slot, więc przy
 * proporcji 4:3 lądowały w prawym górnym rogu — metr od obiektu (Dawid
 * zaznaczył to czerwoną ramką na zrzucie). Teraz warstwa iskier jest
 * przypięta do samej naklejki, więc jadą razem z nią przy każdej szerokości.
 */
.st2-cta-iskry {
	inset: auto;
	left: 50%;
	top: 50%;
	width: min(62%, 220px);
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%) rotate(-7deg);
}

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

/* ---------- dopisek ---------- */

.st2-cta-dopisek {
	position: absolute;
	z-index: 2;
	left: -1rem;
	top: 2%;
	width: clamp(110px, 11vw, 150px);
	pointer-events: none;
}

.st2-cta-dopisek p { margin: 0; font-size: clamp(0.86rem, 1.1vw, 1.02rem); }
.st2-cta-strzalka { width: 84px; height: auto; margin-top: 0.1rem; }

/* ---------- plakietka ---------- */

/*
 * ⚠️ PLAKIETKA UNOSI SIĘ NAD RENDEREM — dlatego jako jedyna w całym stylu ma
 * cień także w spoczynku. To nie niekonsekwencja: element, który ma sprawiać
 * wrażenie leżącego wyżej, musi rzucać cień, bo inaczej po prostu przykrywa.
 */
.st2-cta-plakietka {
	position: absolute;
	right: 2%;
	bottom: 12%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	padding: 0.55rem 0.9rem;
	border-radius: var(--st2-r-pole);
	background: #fff;
	box-shadow: 0 2px 6px rgba(31, 44, 88, 0.10), 0 12px 26px rgba(31, 44, 88, 0.14);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--st2-grafit);
}

/* ============================================================== WĘŻSZE */

@container (max-width: 860px) {
	.st2-cta-srodek { grid-template-columns: 1fr; }

	/* Wizual pod treścią — CTA sprzedaje tekstem, render tylko go wspiera. */
	.st2-cta-wizual { order: 1; }
	.st2-cta-render { aspect-ratio: 16 / 9; }
	.st2-cta-dopisek { left: auto; right: 4%; top: -0.5rem; }
	.st2-cta-plakietka { right: 4%; bottom: 4%; }
}

@container (max-width: 560px) {
	.st2-cta-atuty { flex-direction: column; gap: 0.55rem; }
	.st2-cta-atuty li + li { padding-left: 0; border-left: 0; }

	/* ⚠️ Przycisk na pełną szerokość, nie dwa obok siebie — przy 375 px dwie
	   pigułki w rzędzie schodzą do ~150 px i etykieta łamie się na trzy linie. */
	.st2-cta-przyciski { flex-direction: column; }
	.st2-cta-przyciski .st2-btn { width: 100%; }
	.st2-cta-plakietka { position: static; margin-top: 0.8rem; width: max-content; }
}

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

/* ============================================ KARTA PRODUKTU (wdrożenie) */

/*
 * ⚠️ `scroll-margin-top` JEST KONIECZNY, NIE KOSMETYCZNY.
 * Nagłówek Flatsome jest przyklejony, więc skok do kotwicy ląduje pod nim
 * i wygląda, jakby przycisk nie zadziałał (ta sama mina co przy spisie treści
 * dokumentów, 06.09).
 */
.st-cta-kotwica { scroll-margin-top: 110px; }

@media (prefers-reduced-motion: no-preference) {
	html:has(.st-cta-kotwica) { scroll-behavior: smooth; }
}

/* ---------- skrót pod konfiguratorem ---------- */

.st-mod-skrot { margin: 0.9rem 0 0; }

.st-mod-skrot a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px dashed var(--st2-obwodka, #dce1ea);
	border-radius: var(--st2-r-pole, 10px);
	background: var(--st2-blekit-mgla, #f2f5fd);
	font-size: 0.84rem;
	line-height: 1.3;
	color: var(--st2-szary, #606775);
	text-decoration: none;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}

.st-mod-skrot a:hover {
	border-color: var(--st2-granat, #344a90);
	background: var(--st2-blekit-jasny, #e8ecf8);
	color: var(--st2-szary, #606775);
	text-decoration: none;
}

.st-mod-skrot strong { color: var(--st2-granat, #344a90); font-weight: 700; }
.st-mod-skrot-ikona { display: inline-flex; color: var(--st2-granat, #344a90); }
.st-mod-skrot-ikona svg { width: 16px; height: 16px; }
.st-mod-skrot-strzalka { width: 14px; height: 14px; color: var(--st2-granat, #344a90); }

/* Strzałka w dół delikatnie pulsuje — mówi, że to prowadzi niżej na tej samej
   stronie, a nie do innego adresu. */
@media (prefers-reduced-motion: no-preference) {
	.st-mod-skrot a:hover .st-mod-skrot-strzalka { animation: st-mod-skok 0.9s ease-in-out infinite; }
	@keyframes st-mod-skok { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}

/* ---------- telefon ---------- */

@media (max-width: 700px) {
	/*
	 * ⚠️ GRAFIKA MNIEJSZA, ALE DOPISEK I STRZAŁKA WRACAJĄ.
	 * Dawid 11.09: *„na mobilce trochę pomniejszymy tę grafikę?… tu nie ma tej
	 * strzałki i już nie ma tego efektu z czcionką pisaną"*. Ozdobniki znikały
	 * regułą ogólną z `styl-b2.css`; tutaj są wyjątkiem, bo w tym boksie
	 * dopisek jest częścią przekazu, a nie tłem.
	 */
	.st2-cta-render { aspect-ratio: 4 / 3; max-width: 320px; margin-inline: auto; }
	.st2-cta-naklejka { width: min(58%, 170px); }

	.st2-cta .st2-odrecznie,
	.st2-cta .st2-strzalka { display: block !important; }

	.st2-cta-dopisek {
		position: absolute;
		left: 0;
		top: 0;
		width: 118px;
		z-index: 2;
	}

	.st2-cta-dopisek p { font-size: 0.82rem; }
	.st2-cta-strzalka { width: 64px; }
}