/* ===========================================================================
   CONSIDER-CALLOUT-3UP — Hinkle House "When to Consider..."
   Section bg: rgba(215, 210, 203, 0.3) on white = #F3F1EF computed.
   Centered terracotta serif title + teal lead paragraph + 3-up text columns.
   Source: docs/figma/hinkle-house/consider-callout-3up.png (1440 × 521)
   =========================================================================== */

.wp-block-group.hodc-consider-callout-3up {
	background: #F3F1EF;             /* Figma fill_GWRENZ = rgba(215, 210, 203, 0.3) on white */
	padding: 59px 24px 67px;         /* Figma title y=59; bottom = 521 - 454 = 67 */
	color: var(--wp--preset--color--primary);
}

/* --- Title (centered terracotta serif) --- */
.hodc-consider-callout-3up__title {
	font-family: "source-serif-pro", Georgia, serif;
	font-weight: 400;
	font-size: 42px;
	line-height: 1.238;              /* 52/42 */
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
	margin: 0;                       /* gap to intro lives on intro's margin-block-start (50 px) */
	text-align: center;
}

/* --- Intro lead (centered teal) --- */
.hodc-consider-callout-3up__intro {
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 400;
	font-size: 30px;
	line-height: 1.2;                /* 36/30 */
	color: var(--wp--preset--color--primary);
	text-align: center;
	max-width: 1194px;
	/* margin-block-start: 0 explicitly overrides WP's
	 * :root :where(.is-layout-constrained) > * { margin-block-start: 24px } */
	margin: 0 auto 68px;
	margin-block-start: 50px;        /* title → intro gap, replaces WP block-gap 24 */
}

/* Override WP's 24 px block-gap on the last child (grid) — Figma intro→features is 68 px */
.hodc-consider-callout-3up__grid.wp-block-columns {
	margin-block-start: 0;
}

/* --- 3-up feature grid --- */
.hodc-consider-callout-3up__grid {
	max-width: 1198px;
	margin: 0 auto;
	gap: 38px;                       /* Figma column-gap 38 */
}

.hodc-consider-callout-3up__feature {
	padding: 0 10px;                 /* Figma feature padding 0/10 */
}

.hodc-consider-callout-3up__feature-name {
	font-family: "source-serif-pro", Georgia, serif;
	font-weight: 600;
	font-size: 28px;
	line-height: 1.286;              /* 36/28 */
	color: var(--wp--preset--color--primary);
	margin: 0 0 12px;                /* name → body gap, Figma 12 px */
}

.hodc-consider-callout-3up__feature-body {
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.556;              /* 28/18 */
	color: var(--wp--preset--color--primary);
	margin: 0;
}

/* Mobile — NOT IN FIGMA. Proposed: stack features, intro shrinks. */
@media (max-width: 768px) {
	.hodc-consider-callout-3up__title {
		font-size: clamp(28px, 5vw, 42px);
	}
	.hodc-consider-callout-3up__intro {
		font-size: 22px;
		line-height: 1.27;
	}
	.hodc-consider-callout-3up__grid {
		flex-direction: column;
		gap: 32px;
	}
	.hodc-consider-callout-3up__feature {
		padding: 0;
	}
}