/*
 * Autocontent — cikkbe ágyazott CTA-box.
 *
 * SZÍNEK (Step 46.1): minden szín az arculati változókból származik, fix hexa sehol.
 *   --ac-primary : gomb-gradiens kezdete, hivatkozás-szín
 *   --ac-accent  : gomb-gradiens vége, eyebrow, glow, gomb-árnyék
 *   --ac-ink     : a banner háttere
 * A változókat a shortcode inline style-ja ÉS a stíluslaphoz fűzött inline blokk is
 * beállítja (utóbbi a Classic-út nyers divjei miatt), a beállítások brand-mezőiből.
 * A származtatott árnyalatok color-mix()-szel készülnek; minden ilyen szabály elé
 * kerül egy statikus fallback-sor a régebbi böngészőknek.
 *
 * HARDENING (Step 46.1): a host-téma (pl. Avada) tipikusan `.post-content p`-szerű,
 * 0-1-1 specificitású szabályokkal ír felül. Ezért MINDEN belső szabály duplikált
 * osztály-prefixszel (`.ac-cta.ac-cta …` = 0-3-0) van írva, és a törékeny
 * tulajdonságokat (margó, igazítás, szélesség, float, lista-stílus) explicit
 * visszaállítjuk. Így nincs szükség !important-ra, és idegen témák sem törik el.
 */

.ac-cta {
	--ac-primary: #13678A;
	--ac-accent: #45C4B0;
	--ac-ink: #012030;

	display: block;
	margin: 2.4em auto;
	padding: 40px 32px;
	border-radius: 18px;
	color: #fff;
	text-align: center;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-sizing: border-box;
	float: none;
	width: auto;
	max-width: 100%;
	background: var(--ac-ink);
	/* Step 47 — erősebb, kiterjedtebb glow-k: a Banner elszíneződése jobban látszik a sötét alapon
	   (a korábbi 16%/22% szinte eltűnt), gradientesebb hatással. A többi skin módosítói felülírják. */
	background:
		radial-gradient(ellipse 78% 115% at 85% -18%, color-mix(in srgb, var(--ac-accent) 40%, transparent), transparent 72%),
		radial-gradient(ellipse 62% 88% at 6% 118%, color-mix(in srgb, var(--ac-primary) 52%, transparent), transparent 74%),
		var(--ac-ink);
}

.ac-cta *,
.ac-cta *::before,
.ac-cta *::after {
	box-sizing: border-box;
}

.ac-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.5px);
	background-size: 24px 24px;
	pointer-events: none;
	z-index: -1;
}

.ac-cta > * {
	position: relative;
	float: none;
}

/* Eyebrow (mini felcím) — az akcentszínből. */
.ac-cta.ac-cta .ac-cta-eyebrow {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: inherit;
	color: var(--ac-accent);
	color: color-mix(in srgb, var(--ac-accent) 78%, #fff);
	margin: 0 auto 14px;
	padding: 0;
}

.ac-cta.ac-cta h3,
.ac-cta.ac-cta .ac-cta-title {
	margin: 0 auto 12px;
	padding: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.18;
	color: #fff;
	max-width: 24ch;
	text-align: inherit;
	text-wrap: pretty;
	text-transform: none;
}

.ac-cta.ac-cta .ac-cta-desc {
	margin: 0 auto 20px;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .62);
	max-width: 54ch;
	text-align: inherit;
}

.ac-cta.ac-cta .ac-cta-btn {
	display: inline-block;
	margin: 0;
	padding: 12px 26px;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-accent) 100%);
	color: #fff;
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
	transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ac-cta.ac-cta .ac-cta-btn:hover,
.ac-cta.ac-cta .ac-cta-btn:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.08);
	transform: translateY(-1px);
	/* A színes vetett árnyék is az akcentszínből (fallback: nincs árnyék-szín-drift). */
	box-shadow: 0 8px 24px color-mix(in srgb, var(--ac-accent) 38%, transparent);
}

/* LEGACY geometria-módosítók (Step 41): a kanonikus kulcskészlet render-kor banner-re
   normalizálja őket, de a Classic-út nyers divjeiben előfordulhatnak. */
.ac-cta--band {
	border-radius: 0;
	padding: 56px 32px;
}

.ac-cta--card {
	max-width: 560px;
	padding: 32px 26px;
}

/*
 * Kanonikus design-skinek. Az alap .ac-cta = "banner" (a --banner módosítónak nincs
 * saját szabálya). A többi skin az alapot írja felül, ugyanazzal a hardening-mintával.
 */

/* Világos kártya. */
.ac-cta--light-card {
	background: #fff;
	background: color-mix(in srgb, var(--ac-accent) 7%, #fff);
	color: var(--ac-ink);
	border: 1px solid #E2E9EE;
	border: 1px solid color-mix(in srgb, var(--ac-accent) 30%, #E8EDF1);
	max-width: 560px;
	padding: 30px 28px;
	border-radius: 16px;
}

.ac-cta--light-card::before {
	content: none;
}

.ac-cta--light-card.ac-cta .ac-cta-eyebrow {
	color: var(--ac-primary);
}

.ac-cta--light-card.ac-cta h3,
.ac-cta--light-card.ac-cta .ac-cta-title {
	color: var(--ac-ink);
}

.ac-cta--light-card.ac-cta .ac-cta-desc {
	color: var(--ac-ink);
	opacity: .68;
}

/* Szöveges kiemelés (doboz nélkül, bal akcent-szegéllyel, link-stílusú gombbal). */
.ac-cta--callout {
	background: transparent;
	color: var(--ac-ink);
	border-radius: 0;
	border-left: 3px solid var(--ac-accent);
	text-align: left;
	padding: 6px 0 6px 22px;
	margin: 2em 0;
	overflow: visible;
}

.ac-cta--callout::before {
	content: none;
}

.ac-cta--callout.ac-cta .ac-cta-eyebrow {
	color: var(--ac-primary);
	margin: 0 0 8px;
}

.ac-cta--callout.ac-cta h3,
.ac-cta--callout.ac-cta .ac-cta-title {
	color: var(--ac-ink);
	margin: 0 0 8px;
	max-width: none;
	font-size: 20px;
}

.ac-cta--callout.ac-cta .ac-cta-desc {
	color: var(--ac-ink);
	opacity: .7;
	margin: 0 0 12px;
	max-width: 62ch;
}

.ac-cta--callout.ac-cta .ac-cta-btn {
	display: inline;
	background: none;
	padding: 0;
	border-radius: 0;
	color: var(--ac-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 600;
}

.ac-cta--callout.ac-cta .ac-cta-btn::after {
	content: ' \2192';
}

.ac-cta--callout.ac-cta .ac-cta-btn:hover,
.ac-cta--callout.ac-cta .ac-cta-btn:focus {
	color: var(--ac-primary);
	filter: none;
	box-shadow: none;
	transform: none;
	opacity: .8;
}

/* Vékony sáv (szöveg balra, gomb jobbra; mobilon egymás alá törik). */
.ac-cta--strip {
	display: flex;
	align-items: center;
	gap: 8px 18px;
	flex-wrap: wrap;
	text-align: left;
	padding: 16px 22px;
	border-radius: 10px;
}

.ac-cta--strip.ac-cta .ac-cta-eyebrow {
	flex-basis: 100%;
	margin: 0;
}

.ac-cta--strip.ac-cta h3,
.ac-cta--strip.ac-cta .ac-cta-title {
	font-size: 16.5px;
	margin: 0;
	max-width: none;
	flex: 1 1 240px;
}

.ac-cta--strip.ac-cta .ac-cta-desc {
	flex-basis: 100%;
	order: 3;
	margin: 0;
	font-size: 13px;
}

.ac-cta--strip.ac-cta .ac-cta-btn {
	padding: 10px 20px;
	font-size: 13.5px;
	margin-left: auto;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.ac-cta {
		padding: 28px 18px;
		border-radius: 14px;
	}

	.ac-cta.ac-cta h3,
	.ac-cta.ac-cta .ac-cta-title {
		font-size: 20px;
	}

	.ac-cta.ac-cta .ac-cta-desc {
		font-size: 13.5px;
	}

	.ac-cta.ac-cta .ac-cta-btn {
		display: block;
		padding: 12px 16px;
	}

	/* Skin-specifikus mobil-finomítások. */
	.ac-cta--callout {
		padding-left: 16px;
	}

	.ac-cta--callout.ac-cta .ac-cta-btn {
		display: inline;
		padding: 0;
	}

	.ac-cta--strip {
		padding: 14px 16px;
	}

	.ac-cta--strip.ac-cta .ac-cta-desc {
		display: none;
	}

	.ac-cta--strip.ac-cta .ac-cta-btn {
		display: block;
		flex-basis: 100%;
		margin-left: 0;
		text-align: center;
	}
}