/* ===========================================================================
   BANNER-CTA-2COL-LEGACY — Hinkle House "Legacy of Support" band
   Standalone per-pattern CSS (NOT shared with banner-cta-2col.css per principal).
   Source: docs/figma/hinkle-house/_slices/04-banner-cta-2col-legacy.png (1440 × 476)
   =========================================================================== */

/* Section: full-bleed terracotta. 476 was the Figma slice height, but
 * the content column's natural height (62 top + content + 62 bottom)
 * runs ~508 px and was being clipped by overflow: hidden — visible
 * bottom padding came out shorter than the top (#9899204641). Switch
 * to min-height so the section grows to fit content and the 62/62
 * column padding stays equal. */
.wp-block-group.hodc-banner-cta-2col-legacy.is-style-section-accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 0;
	min-height: 476px;
}

/* 50/50 row, no gap, full section height (matches Figma column structure). */
.hodc-banner-cta-2col-legacy__row {
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	align-items: stretch;
}

/* Left content column — pad to 1200 rail (121 px Figma → max() pin to global rail). */
.hodc-banner-cta-2col-legacy__content {
	box-sizing: border-box;
	padding: 62px 73px 62px max(24px, calc((100vw - 1200px) / 2));
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-self: stretch;
	height: 100%;
	flex: 0 0 50%;
	max-width: 50%;
}

/* Eyebrow — Mr Eaves Heavy 20 / +6% / UPPER, white. */
.hodc-banner-cta-2col-legacy__eyebrow {
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1.27;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	margin: 0 0 8px;
}

/* Heading — Source Serif Pro 42/52, white, 2-line wrap at 528 px width. */
.hodc-banner-cta-2col-legacy__heading {
	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--white);
	margin: 0 0 25px;               /* title → body gap */
	max-width: 528px;
}

/* Body — Mr Eaves Regular 18/28, white, 5-line wrap. */
.hodc-banner-cta-2col-legacy__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--white);
	margin: 0 0 62px;               /* body → buttons gap */
	max-width: 528px;
}

/* Buttons row — two side-by-side, column-gap 24, row-gap 12. */
.hodc-banner-cta-2col-legacy__buttons {
	margin: 0;
	gap: 12px 24px;
}

/* Button shape: padding 13/24/12, height 40, Mr Eaves Heavy 14 +6% UPPER. */
.hodc-banner-cta-2col-legacy__buttons .wp-block-button__link {
	padding: 13px 24px 12px;
	height: 40px;
	line-height: 1;
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 0;               /* Figma buttons are square; theme.json button radius applies elsewhere */
}

/* Override is-style-filled-on-dark default text color (primary teal) with terracotta
 * to match the Figma "filled white + accent text" spec. */
.hodc-banner-cta-2col-legacy__buttons .wp-block-button.is-style-filled-on-dark > .wp-block-button__link {
	color: var(--wp--preset--color--accent);
}
.hodc-banner-cta-2col-legacy__buttons .wp-block-button.is-style-filled-on-dark > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

/* Right column: photo full-bleed, no inset, no rounding. */
.hodc-banner-cta-2col-legacy__media-col {
	flex: 0 0 50%;
	max-width: 50%;
	padding: 0;
	align-self: stretch;
	height: 100%;
}

.hodc-banner-cta-2col-legacy__media,
.hodc-banner-cta-2col-legacy__media img {
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

/* Mobile — NOT IN FIGMA. Proposed: stack, photo above content, height auto. */
@media (max-width: 1024px) {
	.wp-block-group.hodc-banner-cta-2col-legacy.is-style-section-accent {
		height: auto;
	}
	.hodc-banner-cta-2col-legacy__row {
		flex-direction: column;
	}
	.hodc-banner-cta-2col-legacy__content,
	.hodc-banner-cta-2col-legacy__media-col {
		flex: 0 0 100%;
		max-width: 100%;
	}
	.hodc-banner-cta-2col-legacy__content {
		padding: clamp(48px, 7vw, 62px) clamp(24px, 5vw, 48px);
	}
	.hodc-banner-cta-2col-legacy__media-col {
		order: -1;                  /* photo above content */
		height: 320px;
	}
}