/*
 * 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ínátmenetes kártya.
 *
 * A háttér a KÉT márkaszín átmenete (akcentus -> elsődleges), nem külön beállítás: így
 * minden arculatnál azonnal működik. A szöveg balra igazított, a gomb teljes szélességű
 * fehér, a felirata a sötét `--ac-ink` — ugyanaz a szerep, amiben a light-card skin is
 * használja (sötét szöveg világos alapon), tehát az olvashatóság ugyanarra a garanciára
 * épül. A pont-minta itt kikapcsol: a színátmenet maga a textúra.
 */
.ac-cta--gradient {
	background: var(--ac-accent);
	/* A ZÁRÓ szín az `--ac-ink`, NEM az `--ac-primary`, és KÖZBÜLSŐ MEGÁLLÓ SINCS.
	   Mérve a fehér szövegre (WCAG-padló 4,5:1): egy világos elsődleges színnel záró
	   átmenet 2,64:1-ig esik, és már 20% elsődleges szín a középső megállóban is 4,32:1-re
	   viszi le a leggyengébb pontot. Az egyenes akcentus -> ink átmenet legrosszabb pontja
	   4,91:1, tehát a kártya TELJES felületén olvasható marad a fehér. Az `--ac-ink`
	   definíció szerint az a sötét árnyalat, amin a fehér szöveg megáll. */
	background: linear-gradient(135deg, var(--ac-accent) 0%, var(--ac-ink) 100%);
	color: #fff;
	max-width: 560px;
	padding: 34px 30px;
	border-radius: 18px;
	text-align: left;
}

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

/* TÖMÖR fehér, áttetszőség nélkül: a .82-es eyebrow a gradiens sötét végén 3,85:1-et
   adna, a .88-as leírás 4,19-et — mindkettő a 4,5-ös padló alatt. A vizuális hierarchiát
   itt a méret, a betűköz és a vastagság viszi, nem az alfa. */
.ac-cta--gradient.ac-cta .ac-cta-eyebrow {
	color: #fff;
	opacity: 1;
}

.ac-cta--gradient.ac-cta h3,
.ac-cta--gradient.ac-cta .ac-cta-title {
	color: #fff;
	/* Az alap `margin: 0 auto` + `max-width: 24ch` a BLOKKOT húzza középre, hiába balra
	   igazított benne a szöveg. Balra igazított skinnél ezt vissza kell venni. */
	margin-left: 0;
	margin-right: auto;
}

.ac-cta--gradient.ac-cta .ac-cta-desc {
	color: #fff;
	opacity: 1;
	margin-left: 0;
	margin-right: auto;
}

/* Teljes szélességű fehér gomb. A `display:block` + `width:100%` az alap inline-block
   pirulát írja felül; a sugár is kisebb, hogy a kártya sarkaival egy nyelvet beszéljen. */
.ac-cta--gradient.ac-cta .ac-cta-btn {
	display: block;
	width: 100%;
	margin: 22px 0 0;
	padding: 15px 24px;
	background: #fff;
	/* Az AKCENTUS a felirat színe: a rendszerben ez az élénk, telített márkaszín, tehát
	   fehér gombon jellemzően erősebb kontrasztú, mint az ink. Ezen az arculaton mérve
	   7,34:1 (az ink 4,91 volt). */
	color: var(--ac-accent);
	border-radius: 12px;
	/* Nagybetűs felirat: kisebb méret és nagyobb betűköz, különben tömörnek és
	   hangosabbnak látszik a kelleténél. */
	font-size: 13.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ac-cta--gradient.ac-cta .ac-cta-btn:hover,
.ac-cta--gradient.ac-cta .ac-cta-btn:focus {
	background: #fff;
	color: var(--ac-accent);
	filter: none;
	transform: translateY(-1px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}

/* 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;
}

/*
 * FOGÁSZAT — fotó-hátterű skin, arculati színfátyollal.
 *
 * A Dentha Fogászat éles cikkeiben lévő Avada CTA-elem MÉRT geometriája és
 * tipográfiája (Chrome computed style): 60/50 padding, 22px radius, 180°-os
 * fátyol a rendelő-fotón, és fehér kontúros, chevronos gomb. Így az
 * Autocontentből kiküldött cikk CTA-ja ugyanúgy néz ki, mint a kézzel épített
 * Avada-elem — de sima HTML + CSS, builder nélkül.
 *
 * A fotó a pluginnal utazik (assets/img/cta-fogaszat.webp, 1200x675, 16 KB), és
 * a --ac-cta-photo változóval cserélhető, ha egy oldal saját képet akar.
 * A színek ITT IS az arculatból jönnek — fix hexa csak a fehér szövegre és a
 * mért, semleges árnyékra van.
 */
.ac-cta--fogaszat {
	--ac-cta-photo: url("../img/cta-fogaszat.webp");
	/* A mért fátyol: az arculati szín ~10%-kal sötétebb változata, 70% fedésen. */
	--ac-cta-veil: color-mix(in srgb, var(--ac-primary) 72%, #000);
	/* Az Inter az éles oldal cikk-címsor-fontja; ha nincs betöltve, a téma fontja jön. */
	--ac-cta-heading: "Inter", var(--awb-typography1-font-family, ui-sans-serif), system-ui, sans-serif;

	padding: 60px 50px;
	border-radius: 22px;
	box-shadow: 0 0 10px 0 rgba(46, 46, 46, .1);
	/* Fallback: sima arculati szín — color-mix nélkül is olvasható a fehér szöveg. */
	background: var(--ac-primary);
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--ac-cta-veil) 70%, transparent) 0%,
			var(--ac-primary) 100%),
		var(--ac-cta-photo) center center / cover no-repeat,
		var(--ac-primary);
}

/* A pöttyrács kikapcsol: itt a fotó adja a textúrát. */
.ac-cta--fogaszat::before {
	content: none;
}

.ac-cta--fogaszat.ac-cta .ac-cta-eyebrow {
	font-family: var(--ac-cta-heading);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .017em;
	color: rgba(255, 255, 255, .95);
	margin: 0 auto 12px;
}

.ac-cta--fogaszat.ac-cta h3,
.ac-cta--fogaszat.ac-cta .ac-cta-title {
	font-family: var(--ac-cta-heading);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: normal;
	color: #fff;
	max-width: 28ch;
	margin: 0 auto 14px;
}

.ac-cta--fogaszat.ac-cta .ac-cta-desc {
	font-size: 16px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .96);
	max-width: 52ch;
	margin: 0 auto 22px;
}

/* Kontúros gomb chevronnal. A chevron CSS-ből van (elforgatott sarok), nem
   ikonfontból: a plugin nem támaszkodhat a téma FontAwesome-jára. */
.ac-cta--fogaszat.ac-cta .ac-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 32px;
	border: 2px solid #fff;
	border-radius: 6px;
	background: transparent;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .014em;
	box-shadow: none;
	transition: background-color .15s ease;
}

.ac-cta--fogaszat.ac-cta .ac-cta-btn::before {
	content: '';
	flex: none;
	width: .4em;
	height: .4em;
	margin-right: .8em;
	/* Az Avada `a::before` szabálya a link-színt adja a pszeudo-elemnek, ezért a
	   currentColor itt TÜRKIZ lenne (mérve) és a chevron beleolvadna a kártyába.
	   A színt explicit írjuk, ahogy a gomb szegélyét is. */
	color: #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}

/* Step 93/g — HOVER-ALÁHÚZÁS KIZÁRÁSA, minden skinre.
 *
 * A gombok alap-szabálya már kiírja a `text-decoration: none`-t, de az Avada
 * link-hover szabálya AZONOS FAJSÚLYON és KÉSŐBB töltődik, ezért aláhúzza a
 * CTA-gombot is (mérve 2026-09-13-án a dentha.hu éles vázlatán, fogaszat skinnel).
 *
 * Ugyanaz a helyzet, mint a cikk-címsoroknál, és ugyanazzal az idiómával oldjuk:
 * a `.ac-cta-btn` osztályt MEGDUPLÁZZUK, így a szabály fajsúlya biztosan nagyobb,
 * mint a téma link-szabályáé — anélkül, hogy `!important`-ot kellene írni.
 *
 * Mind a négy állapotra kell: a `:visited` és az `:active` alatt is aláhúzna.
 */
.ac-cta.ac-cta .ac-cta-btn.ac-cta-btn,
.ac-cta.ac-cta .ac-cta-btn.ac-cta-btn:hover,
.ac-cta.ac-cta .ac-cta-btn.ac-cta-btn:focus,
.ac-cta.ac-cta .ac-cta-btn.ac-cta-btn:active,
.ac-cta.ac-cta .ac-cta-btn.ac-cta-btn:visited {
	text-decoration: none;
}

/* A `callout` skin SZÁNDÉKOSAN aláhúzott link-gombot használ — ott visszaadjuk. */
.ac-cta--callout.ac-cta .ac-cta-btn.ac-cta-btn,
.ac-cta--callout.ac-cta .ac-cta-btn.ac-cta-btn:hover,
.ac-cta--callout.ac-cta .ac-cta-btn.ac-cta-btn:focus {
	text-decoration: underline;
}

.ac-cta--fogaszat.ac-cta .ac-cta-btn:hover,
.ac-cta--fogaszat.ac-cta .ac-cta-btn:focus {
	background: rgba(0, 0, 0, .3);
	color: #fff;
	filter: none;
	box-shadow: none;
	transform: none;
}

@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;
	}

	.ac-cta--fogaszat {
		padding: 36px 22px;
		border-radius: 16px;
	}

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

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

	.ac-cta--fogaszat.ac-cta .ac-cta-btn {
		display: inline-flex;
		padding: 15px 24px;
		font-size: 15.5px;
	}
}