/* ===========================================================================
   BANNER-CTA-2COL — Compact Support variant
   Architecturally aligned with banner-cta-2col-help-faq: unified warm-neutral
   section bg, photo at natural aspect anchored adjacent to the text column
   on the right side (bleeds to viewport right edge), white-only button (no
   border). Pinned section height matches the Figma slice (320 px).
   Source: docs/figma/news-events/_slices/07-looking-for-support.png
   =========================================================================== */

/* Section: unified warm-neutral bg, height pinned to 320 (Figma slice).
 * overflow:hidden clips the image to the fixed height. */
.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--compact-support {
	position: relative;
	background: #f3f1ef;            /* warm-neutral — same as --help-faq surface */
	padding: 0;
	height: 320px;
	min-height: 320px;
	max-height: 320px;
	overflow: hidden;
}

/* Row: full-bleed, columns pack to the left, text column shrink-wrapped
 * with rail-tracking padding, image column shrink-wrapped to natural
 * width at section height. Same shape as --help-faq. */
.hodc-banner-cta-2col--compact-support .hodc-banner-cta-2col__row {
	max-width: none;
	padding: 0;
	margin: 0;
	gap: 0;
	height: 100%;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
}

/* Text column: shrink-wrap, padding-left tracks the centered 1200 rail. */
.hodc-banner-cta-2col--compact-support .wp-block-column.hodc-banner-cta-2col-compact-support__left {
	background: transparent !important;
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 40px 40px 40px max(24px, calc((100vw - 1200px) / 2)) !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Heading: theme.json h2 typography (primary teal, Source Serif Pro 42/52). */
.hodc-banner-cta-2col-compact-support__heading {
	margin: 0 0 16px;
}

/* Sub paragraph — Mr Eaves XL Modern Regular 16/24, primary teal. */
.hodc-banner-cta-2col-compact-support__sub {
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	margin: 0 0 32px;
	max-width: 520px;
}

.hodc-banner-cta-2col-compact-support__left .wp-block-buttons {
	margin: 0;
}

/* Button: white fill + terracotta label + NO border. Hover inverts colors
 * — same treatment as --help-faq and --careers siblings. */
.hodc-banner-cta-2col-compact-support__left .wp-block-button.is-style-outline-accent > .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent);
	border: none;
	padding: 14px 24px;
}
.hodc-banner-cta-2col-compact-support__left .wp-block-button.is-style-outline-accent > .wp-block-button__link:hover,
.hodc-banner-cta-2col-compact-support__left .wp-block-button.is-style-outline-accent > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* Image column: shrink-wrap to image natural width at section height. */
.hodc-banner-cta-2col--compact-support .wp-block-column.hodc-banner-cta-2col-compact-support__right {
	background: transparent !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: 100%;
	padding: 0 !important;
	overflow: hidden;
	display: block;
}

/* Image: natural aspect, full section height, no rounding. */
.hodc-banner-cta-2col-compact-support__right .hodc-banner-cta-2col__media.hodc-banner-cta-2col-compact-support__media {
	width: auto;
	height: 100%;
	margin: 0;
	flex: none;
	aspect-ratio: auto;
}

.hodc-banner-cta-2col-compact-support__right .hodc-banner-cta-2col__media.hodc-banner-cta-2col-compact-support__media img {
	width: auto;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	display: block;
}

/* Mobile — release height pin, stack columns, restore natural sizing. */
@media (max-width: 1024px) {
	.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--compact-support {
		height: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}
	.hodc-banner-cta-2col--compact-support .hodc-banner-cta-2col__row {
		flex-direction: column;
		height: auto;
	}
	.hodc-banner-cta-2col--compact-support .wp-block-column.hodc-banner-cta-2col-compact-support__left {
		width: 100% !important;
		max-width: 100% !important;
		padding: clamp(40px, 6vw, 56px) 24px !important;
	}
	.hodc-banner-cta-2col--compact-support .wp-block-column.hodc-banner-cta-2col-compact-support__right {
		width: 100% !important;
		height: auto;
	}
	.hodc-banner-cta-2col-compact-support__right .hodc-banner-cta-2col__media.hodc-banner-cta-2col-compact-support__media,
	.hodc-banner-cta-2col-compact-support__right .hodc-banner-cta-2col__media.hodc-banner-cta-2col-compact-support__media img {
		width: 100%;
		height: auto;
	}
}