/* Universal size ladder (--text-<px>): the editor's font-size stepper emits
   var(--text-<px>); a theme's role tokens (--text-body, --text-h1 …) point at
   these. Themes may override single steps but should never need to. */
:root {
	--text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-15: 15px;
	--text-16: 16px; --text-17: 17px; --text-18: 18px; --text-20: 20px; --text-22: 22px;
	--text-24: 24px; --text-26: 26px; --text-28: 28px; --text-30: 30px; --text-33: 33px;
	--text-36: 36px; --text-40: 40px; --text-44: 44px; --text-48: 48px; --text-52: 52px;
	--text-56: 56px; --text-60: 60px; --text-66: 66px; --text-72: 72px; --text-80: 80px;
	--text-88: 88px; --text-96: 96px; --text-104: 104px; --text-112: 112px; --text-120: 120px;
}

/* Agentic WP component styles — markup emitted by the engine's Image
   component (Image::render 'inline' / 'fill'). Ships with the plugin so
   every consuming theme gets correct image behavior. */

.agwp-img-wrap {
	display: block;
	min-width: var(--cimg-min-w, auto);
	min-height: var(--cimg-min-h, auto);
}

/* The img carries the same min-height: a block wrapper's min-height alone
   would not size a percentage-height child, so the box would grow with empty
   space under the natural-aspect image instead of a taller (cover-cropped) one. */
.agwp-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--cimg-min-h, auto);
	object-fit: var(--cimg-fit, cover);
	object-position: var(--cimg-pos, center);
}

.agwp-img-fill {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.agwp-img-fill .agwp-img-wrap,
.agwp-img-fill .agwp-img {
	height: 100%;
}

@media (max-width: 768px) {
	.agwp-img {
		object-fit: var(--cimg-fit-m, var(--cimg-fit, cover));
		object-position: var(--cimg-pos-m, var(--cimg-pos, center));
	}
}

/* ── CtaBlock (CtaBlock::render) ─────────────────────────────────
   Belső ritmus + igazítás-módosítók. Az alap text-align a befogadó
   kontextusból öröklődik; a --{align} módosító a szerkesztői felülírás. */

.agwp-cta__eyebrow  { margin: 0 0 0.5em; }
.agwp-cta__title    { margin: 0; }
.agwp-cta__subtitle { margin: 0.5em 0 0; }
.agwp-cta__text     { margin-top: 1em; }

.agwp-cta__actions {
	margin-top: 1.5em;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* A wysiwyg block's own typography drives its paragraphs, not its headings.
   (--f-align is absent on purpose: text-align is layout and cascades to the
   headings via plain inheritance, which is the wanted behavior.) */
.agwp-cta__text :where(h1, h2, h3, h4, h5, h6) {
	--f-size: initial;
	--f-weight: initial;
	--f-family: initial;
}

.agwp-cta--left    { text-align: left; }
.agwp-cta--center  { text-align: center; }
.agwp-cta--right   { text-align: right; }
.agwp-cta--left   .agwp-cta__actions { justify-content: flex-start; }
.agwp-cta--center .agwp-cta__actions { justify-content: center; }
.agwp-cta--right  .agwp-cta__actions { justify-content: flex-end; }

/* ── MediaText (MediaText::render) ───────────────────────────────
   Két-slotos blokk: média + CtaBlock. A háttér-kinézetet (sec-bg--*)
   és a panel-paddingot a theme közös rétege / section CSS-e adja. */

.agwp-mtx {
	display: grid;
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

@media (min-width: 769px) {
	.agwp-mtx { grid-template-columns: 1fr 1fr; }
	.agwp-mtx--media-right .agwp-mtx__media { order: 2; }
}