/*
 * fibel/cta block — CTA banner (design: claude.ai/design project 6be74bef,
 * FAQ page CTA). Colors/typography ride on the live theme presets with the
 * same values as static fallbacks; dark mode is pinned explicitly per site
 * mode (body.is-dark-theme) like the FAQ block — see the gotcha in CLAUDE.md.
 * Buttons are <a> elements, so the theme's generic dark BUTTON rules don't
 * apply here; transitions stay property-scoped anyway.
 */
.fibel-cta {
	--fcta-font: var(--wp--preset--font-family--primary, "Mona Sans", sans-serif);
	--fcta-main: var(--wp--preset--color--main, #0f172a);
	--fcta-main-accent: var(--wp--preset--color--main-accent, #64748b);
	--fcta-accent: var(--wp--preset--color--primary-accent, #ff6347);
	--fcta-base: var(--wp--preset--color--base, #ffffff);
	--fcta-tertiary: var(--wp--preset--color--tertiary, #f1f5f9);
	--fcta-border-dark: var(--wp--preset--color--border-dark, #94a3b8);
	--fcta-fs-small: var(--wp--preset--font-size--small, 0.95rem);
	--fcta-fs-medium: var(--wp--preset--font-size--medium, 1.35rem);
	--fcta-sp-medium: var(--wp--preset--spacing--medium, clamp(1.5rem, 4vw, 2rem));
	--fcta-sp-large: var(--wp--preset--spacing--large, clamp(2rem, 5vw, 3rem));
	--fcta-radius: 5px;

	background: var(--fcta-tertiary);
	border-radius: calc(var(--fcta-radius) * 3);
	padding: var(--fcta-sp-large);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fcta-sp-medium);
	font-family: var(--fcta-font);
}

/* Dark half of each fibel/theme.json light-dark() pair. */
body.is-dark-theme .fibel-cta {
	--fcta-main: #f8fafc;
	--fcta-main-accent: #64748b;
	/* Signal Coral stays coral in dark mode — The Both Modes Rule (DESIGN.md).
	   Keep the pin, only the value changed (was #64748b). */
	--fcta-accent: #ff6347;
	--fcta-base: #09090b;
	--fcta-tertiary: #1e1e26;
	--fcta-border-dark: #475569;
}

.fibel-cta__heading {
	margin: 0 0 0.35rem;
	color: var(--fcta-main);
	font-family: var(--fcta-font);
	font-size: var(--fcta-fs-medium);
	font-weight: var(--wp--custom--font-weight--semi-bold, 600);
	line-height: var(--wp--custom--line-height--snug, 1.2);
}

.fibel-cta__lede {
	margin: 0;
	color: var(--fcta-main-accent);
	font-size: var(--fcta-fs-small);
	line-height: var(--wp--custom--line-height--body, 1.5);
}

.fibel-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fibel-cta .fibel-cta__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--fcta-main);
	color: var(--fcta-base);
	border: 1px solid var(--fcta-main);
	border-radius: var(--fcta-radius);
	padding: 0.6em 1em;
	font-family: var(--fcta-font);
	font-size: var(--fcta-fs-small);
	font-weight: var(--wp--custom--font-weight--medium, 500);
	line-height: var(--wp--custom--line-height--body, 1.5);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.fibel-cta .fibel-cta__button:hover {
	color: var(--fcta-accent);
}

.fibel-cta .fibel-cta__button--ghost {
	background: transparent;
	color: var(--fcta-main);
	border-color: var(--fcta-border-dark);
}
.fibel-cta .fibel-cta__button--ghost:hover {
	color: var(--fcta-main);
	border-color: var(--fcta-main);
}

@media (max-width: 640px) {
	.fibel-cta {
		flex-direction: column;
		align-items: flex-start;
	}
}