/* Sekcja: Decyzja to ich stanowisko. Odwołanie to Twoja odpowiedź. (finalne CTA strony głównej) */

.oai-site .oai-final-cta {
	position: relative;
	padding: 96px 40px;
	overflow-x: hidden;
}

.oai-site .oai-final-cta__inner {
	max-width: var(--oai-container-width);
	margin: 0 auto;
}

/* Panel — obraz jako najniższa warstwa (background-image, ustawiony inline w PHP przez
   get_theme_file_uri()), granatowy gradient w ::before, subtelna cyjanowa poświata w
   ::after, treść w .oai-final-cta__body ponad warstwami tła. */

.oai-site .oai-final-cta__panel {
	--oai-final-cta-gradient: linear-gradient(
		90deg,
		rgba(1, 2, 66, 0.97) 0%,
		rgba(1, 2, 66, 0.93) 38%,
		rgba(1, 2, 66, 0.7) 65%,
		rgba(1, 2, 66, 0.46) 100%
	);
	position: relative;
	min-width: 0;
	overflow: hidden;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border-radius: var(--oai-radius-l);
	padding: 72px 80px;
	min-height: 460px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 68% 40%;
}

.oai-site .oai-final-cta__panel::before,
.oai-site .oai-final-cta__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.oai-site .oai-final-cta__panel::before {
	background: var(--oai-final-cta-gradient);
}

.oai-site .oai-final-cta__panel::after {
	background: radial-gradient(circle at 88% 18%, rgba(33, 225, 253, 0.14) 0%, rgba(33, 225, 253, 0) 55%);
}

.oai-site .oai-final-cta__body {
	position: relative;
	z-index: 1;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.oai-site .oai-final-cta__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-final-cta__title {
	margin: 0 0 16px;
	font-size: clamp(1.75rem, 1.4rem + 2.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-white);
	overflow-wrap: break-word;
}

.oai-site .oai-final-cta__lead {
	margin: 0 0 28px;
	max-width: 520px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #C7CFEA;
	overflow-wrap: break-word;
}

.oai-site .oai-final-cta__cta {
	display: inline-flex;
	min-height: 48px;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--oai-color-cyan);
	color: var(--oai-color-navy);
}

.oai-site .oai-final-cta__cta:hover {
	box-shadow: 0 0 0 2px var(--oai-color-navy);
}

html[data-oai-input="keyboard"] .oai-site .oai-final-cta__cta:focus-visible {
	outline-color: var(--oai-color-navy);
}

.oai-site .oai-final-cta__note {
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: #C7CFEA;
	overflow-wrap: break-word;
}

/* Reduced motion: globalne wyłączenie transition/animation w main.css
   (.oai-site * { transition: none !important; animation: none !important; })
   obejmuje już przejście box-shadow na CTA. Tło i gradient są statyczne. */

/* Tablet: poniżej 900px, mocniejszy gradient i tło przesunięte, żeby dłoń i dokument
   pozostały częściowo widoczne. */

@media (max-width: 899px) {
	.oai-site .oai-final-cta__panel {
		--oai-final-cta-gradient: linear-gradient(
			90deg,
			rgba(1, 2, 66, 0.98) 0%,
			rgba(1, 2, 66, 0.95) 42%,
			rgba(1, 2, 66, 0.8) 72%,
			rgba(1, 2, 66, 0.62) 100%
		);
		padding: 48px;
		min-height: 440px;
		background-position: 74% 34%;
	}
}

/* Desktop: od 900px — blok tekstowy ograniczony do czytelnej szerokości. */

@media (min-width: 900px) {
	.oai-site .oai-final-cta__body {
		max-width: 620px;
	}
}

/* Mobile do 600px: brak wymuszonej wysokości, tekst ważniejszy niż zdjęcie, CTA na
   pełną szerokość. */

@media (max-width: 600px) {
	.oai-site .oai-final-cta__panel {
		--oai-final-cta-gradient: linear-gradient(
			90deg,
			rgba(1, 2, 66, 0.98) 0%,
			rgba(1, 2, 66, 0.97) 50%,
			rgba(1, 2, 66, 0.92) 100%
		);
		min-height: 0;
		padding: 40px 24px;
		background-position: 84% 26%;
	}

	.oai-site .oai-final-cta__cta {
		width: 100%;
		text-align: center;
	}
}

/* Mobile do 430px */

@media (max-width: 430px) {
	.oai-site .oai-final-cta {
		padding: 56px 18px;
	}

	.oai-site .oai-final-cta__panel {
		padding: 40px 20px;
	}
}

/* Mobile do 360px */

@media (max-width: 360px) {
	.oai-site .oai-final-cta {
		padding: 48px 16px;
	}

	.oai-site .oai-final-cta__panel {
		padding: 32px 16px;
	}
}