/* ============================================================
   Agru-Frank — Sekcja "CTA Kontakt" (home) — Phase 3 (HOME-05)
   Niebieski banner (call to action) przed stopką: nagłówek + tekst + przycisk + telefon.
   Tło --blue-dark → biały tekst spełnia kontrast WCAG AA. Tokeny z base.css.
   ⚠ Typografia headline TYMCZASOWA — retype po Księdze znaku.
   ============================================================ */

.cta-contact {
	position: relative;
	overflow: hidden;   /* fallback Safari <16 (tam i tak brak scroll-driven anims) */
	overflow: clip;     /* why: `hidden` TWORZY scroll container → animation-timeline: view() na __art rozwiązywał
	                       się względem tej sekcji (która nigdy nie scrolluje) = timeline zamrożony, arty wisiały
	                       przy krawędziach. `clip` klipuje identycznie, ale scroll containera NIE tworzy → view()
	                       tracka viewport. Zweryfikowane pomiarem: hidden = ty stałe, clip = ty zmienne. */
	background: var(--blue-dark);
	view-timeline-name: --cta-view;   /* why: subject = sekcja (nieruchoma). Arty mają własny transform,
	                                     więc ich anonimowe view() krzywiło timeline (sprzężenie). Teraz
	                                     50% = sekcja dokładnie na środku ekranu. Named timeline działa
	                                     na descendantach domyślnie (MDN/Context7). */
}

/* Siatka + ghosted line-art — akcent "dokument inżynierski", bank pilot #4 (2026-07-15).
   Świadome odejście od decyzji 2026-07-13 (no-grid-on-dark): inny mechanizm — fade
   od krawędzi ekranu do środka, tekst __inner (720px, wycentrowany) zostaje na czystym
   tle. v2.0: lineart per-strona zamiast jednego uniwersalnego zaworu motylkowego. */
.cta-contact__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, #FFFFFF14 1px, transparent 1px),
		linear-gradient(to bottom, #FFFFFF14 1px, transparent 1px);
	background-image:
		linear-gradient(to right, color-mix(in srgb, var(--white) 8%, transparent) 1px, transparent 1px),
		linear-gradient(to bottom, color-mix(in srgb, var(--white) 8%, transparent) 1px, transparent 1px);
	background-size: var(--space-32) var(--space-32);
	-webkit-mask-image: linear-gradient(to right, black 0%, transparent 35%, transparent 65%, black 100%);
	mask-image: linear-gradient(to right, black 0%, transparent 35%, transparent 65%, black 100%);
	pointer-events: none;
}

.cta-contact__art {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 520px;
	max-width: 45%;
	filter: invert(1) brightness(2.2) grayscale(1);
	opacity: 0.4;
	pointer-events: none;
}
.cta-contact__art--right { right: -4%; scale: -1 1; }
.cta-contact__art--left  { left: -4%; scale: -0.85 0.85; }

/* Parallax scroll (2026-07-15): dwa lineart-arty dryfują przeciwbieżnie w pionie — jeden z góry,
   drugi z dołu — neutralne (równe sobie) gdy sekcja na 50% viewportu. CSS-only scroll-driven
   (animation-timeline: view(), potwierdzone Context7/MDN) — GPU transform, zero JS/scroll-listenera.
   Guard: @supports + prefers-reduced-motion; fallback = statyczne neutralne. Kompozycja: transform
   (parallax) + translate -50% (centrowanie) + scale (mirror) składają się poprawnie. */
@keyframes art-drift-down {
	from { transform: translateY(-400px); }   /* why: amplituda — odjazd od neutralnego (środek sekcji). Pełne schowanie za krawędź = (525+347)/2 ≈ 436; 400 = wybór Tomka, art ledwo zagląda na krańcu */
	50%  { transform: translateY(0); }
	to   { transform: translateY(400px); }
}
@keyframes art-drift-up {
	from { transform: translateY(400px); }
	50%  { transform: translateY(0); }
	to   { transform: translateY(-400px); }
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cta-contact__art--right {
			animation: art-drift-down 1ms linear both;   /* both: trzyma stan skrajny poza zakresem — bez skoku przy wejściu */
			animation-timeline: --cta-view;
		}
		.cta-contact__art--left {
			animation: art-drift-up 1ms linear both;
			animation-timeline: --cta-view;
		}
	}
}

/* Opt-in: tło zdjęciowe + niebieski overlay (używane np. na /kontakt). */
.cta-contact--bg {
	position: relative;
	background-image: url(../../images/cta-bg.jpg);
	background-size: cover;
	background-position: center;
}
.cta-contact--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #0D6FA8D9;                                            /* fallback blue-dark 85% */
	background: color-mix(in srgb, var(--blue-dark) 85%, transparent);
}
.cta-contact--bg > .container {
	position: relative;
	z-index: 1;
}

.cta-contact__inner {
	max-width: var(--container-text);
	margin-inline: auto;
	text-align: center;
}

/* --- Nagłówek sekcji: .section-head w utilities.css --- */
/* zeruj domyślny 48 section-head — odstęp do __actions niesie lead--gap-32 (32) */
.cta-contact__inner .section-head { margin-bottom: 0; }

/* --- Akcje: przycisk + telefon --- */
.cta-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-24);
}
@media (max-width: 767.98px) {
	.cta-contact__actions {
		flex-direction: column;
	}
	.cta-contact__art--left {
		display: none;   /* na mobile zostaje tylko prawy art, user 2026-07-16 */
	}
	.cta-contact__art--right {
		scale: -2 2;   /* 2x — bylo -1 1 (flip bez skalowania), zachowuje mirror + dwukrotny rozmiar */
	}
}

/* Modyfikator — wariant 4 akcji (product-form: btn + tel + mail + przedstawiciel).
   Column zamiast flex-wrap — 4 elementy w jednym rzędzie flex byłyby nieczytelne. */
.cta-contact__actions--stack {
	flex-direction: column;
}

/* Przycisk — inwersja na ciemnym tle: białe tło, niebieski tekst */
.cta-contact .agf-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	background: var(--white);
	color: var(--blue);
}
.cta-contact .agf-btn:hover {
	background: #FFFFFFE6;                                            /* fallback */
	background: color-mix(in srgb, var(--white) 90%, var(--blue-dark));
}

.cta-contact__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	font-weight: 600;
	color: var(--white);
	text-decoration: none;
}
.cta-contact__phone:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cta-contact__phone:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}