/**
 * cg/valuation-cta — block styles.
 *
 * Mirrors the Figma valuation band (node 4296:19331): a money-tree mark,
 * serif Light heading + serif subtitle, a thin theme-400 numeric input, and
 * an accent-outline submit button (the Figma "Default Button"). The band
 * background is editor-selectable via the `background` field — Mid (700, the
 * default), Dark (900, the Figma box), or Light (100, which flips the text
 * and controls dark). All colours use the page-level theme tokens
 * (var(--color-theme-*)) so the band inherits whatever colour theme the page
 * is set to. Loaded on enqueue_block_assets, so it applies on the frontend
 * and in the editor.
 */

.cg-valuation-cta {
	background: var(--color-theme-700);
	color: var(--color-theme-100);
	padding-block: clamp(3.5rem, 7vw, 6rem); /* → 96px (Figma py-24) */
	padding-inline: clamp(1.5rem, 5vw, 5rem);
}

.cg-valuation-cta--bg-theme-900 {
	background: var(--color-theme-900);
}

.cg-valuation-cta--bg-theme-100 {
	background: var(--color-theme-100);
	color: var(--color-theme-900);
}

.cg-valuation-cta__inner {
	max-width: 700px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(1.75rem, 4vw, 3rem);
}

/* Money-tree mark above the heading — 48px, muted theme-400 (Figma). */
.cg-valuation-cta__icon {
	display: block;
	width: 3rem;
	height: 3rem;
	color: var(--color-theme-400);
}

.cg-valuation-cta__icon .cg-valuation-cta__icon-svg {
	width: 100%;
	height: 100%;
}

.cg-valuation-cta__heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-weight: 200; /* Martina Light (200 is shipped; 300 is not) */
	font-size: clamp(2rem, 4vw, 3rem); /* → 48px (Figma 6xl) */
	line-height: 1.15;
	letter-spacing: -0.2px;
}

.cg-valuation-cta__subtitle {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, Georgia, serif);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	line-height: 1.5;
}

.cg-valuation-cta__form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 1rem; /* 16px — Figma button-row gap */
	width: 100%;
}

.cg-valuation-cta__input {
	flex: 1 1 18rem;
	max-width: 24rem;
	padding: 0.5rem 1rem; /* py-8 px-16 — height stretches to the button */
	background: transparent;
	border: 1.5px solid var(--color-theme-400);
	border-radius: 0.25rem;
	color: var(--color-theme-100);
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-size: 1.125rem; /* 18px */
	line-height: 1.35;
}

.cg-valuation-cta__input::placeholder {
	color: rgba(255, 251, 240, 0.8); /* white-80 (Figma) */
}

.cg-valuation-cta__input:focus-visible {
	outline: 2px solid var(--color-theme-accent);
	outline-offset: 2px;
}

/* Accent-outline submit — the Figma "Default Button": 2px accent border,
   transparent fill, off-white mono-bold 16px uppercase, 24px padding. */
.cg-valuation-cta__button {
	padding: 1.5rem;
	background: transparent;
	border: 2px solid var(--color-theme-accent);
	border-radius: 0.25rem;
	color: var(--wp--preset--color--off-white, #fffbf0);
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	font-weight: 700;
	font-size: 1rem; /* 16px */
	line-height: 1;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.cg-valuation-cta__button:hover {
	background: var(--color-theme-accent);
	color: var(--color-theme-900);
}

/* Light band: flip the input text/placeholder and button label dark (the
   off-white/white-80 values vanish on a theme-100 ground). */
.cg-valuation-cta--bg-theme-100 .cg-valuation-cta__input {
	color: var(--color-theme-900);
}

.cg-valuation-cta--bg-theme-100 .cg-valuation-cta__input::placeholder {
	color: rgba(27, 27, 23, 0.6); /* opacity/black-60 */
}

.cg-valuation-cta--bg-theme-100 .cg-valuation-cta__button {
	color: var(--color-theme-900);
}

/* Stack the input and button on narrow viewports. */
@media (max-width: 480px) {
	.cg-valuation-cta__form {
		flex-direction: column;
	}

	.cg-valuation-cta__input,
	.cg-valuation-cta__button {
		flex: 1 1 auto;
		max-width: none;
		width: 100%;
	}
}