/* ===========================================================================
   BANNER-CTA-2COL — two-column section, image + content
   Shared CSS for all three variants:
     .hodc-banner-cta-2col--intro    (terracotta bg, photo right, no eyebrow/button)
     .hodc-banner-cta-2col--help     (white bg, photo left, teal-filled CTA)
     .hodc-banner-cta-2col--veterans (warm off-white bg, photo right, eyebrow + terracotta CTA)
   Typography inherits from theme.json elements + is-style-eyebrow.
   Section-bg colors via local is-style-section-* overrides scoped to this pattern.
   Source: docs/figma/our-services/_slices/05-, 08-, 09-banner-cta-2col-*.png
   =========================================================================== */

.wp-block-group.hodc-banner-cta-2col {
	overflow: hidden;
}

/* Variant backgrounds + per-variant section heights pinned to Figma slice
 * heights so verify-component diffs against an equally-tall reference. */
.wp-block-group.hodc-banner-cta-2col.is-style-section-accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 0;
	height: 461px;                   /* Figma slice 05 exact height */
}

.wp-block-group.hodc-banner-cta-2col.is-style-section-light {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	padding: 32px 0;
	min-height: 525px;               /* Figma slice 08 height */
}

.wp-block-group.hodc-banner-cta-2col.is-style-section-warm-neutral {
	background: #f3f1ef;             /* warm off-white sampled from veterans slice */
	color: var(--wp--preset--color--primary);
	padding: 30px 0;
	min-height: 700px;               /* Figma slice 09 height */
}

/* Row + columns */
.hodc-banner-cta-2col__row {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	gap: 60px;
	align-items: center;             /* vertical-center content against photo */
}

.hodc-banner-cta-2col.is-style-section-accent .hodc-banner-cta-2col__row {
	max-width: none;
	padding: 0;
	gap: 0;                          /* columns butt up — text bg color extends to photo edge */
	align-items: stretch;            /* photo + text band span section height */
	height: 100%;                    /* fill section height so columns stretch to 461 */
}

/* Content column — typography inherits; max-width only for the accent variant */
.hodc-banner-cta-2col__content {
	padding: 0;
}

/* Text rail aligns with the centered 1200 px content rail used by
 * services-cards-3up + page-intro. At 1440 viewport (1440-1200)/2 = 120;
 * at wider viewports the rail moves further in. Calc keeps the intro-accent
 * text left-edge locked to that rail at every viewport width.
 * box-sizing: border-box so padding sits INSIDE the column's 55%. */
.hodc-banner-cta-2col.is-style-section-accent .hodc-banner-cta-2col__content {
	padding: 50px 40px 50px max(24px, calc((100vw - 1200px) / 2));
	box-sizing: border-box;
	align-self: stretch;             /* override is-vertically-aligned-center default */
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Photo column fills its 45% of section height; image stretched to fill. */
.hodc-banner-cta-2col.is-style-section-accent .hodc-banner-cta-2col__media-col {
	box-sizing: border-box;
	height: 100%;
}
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media,
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* Intro-accent paragraphs use the homepage contact lead typography
 * (Mr Eaves XL Modern 22/28) — established "lead body" treatment
 * for prominent intro copy on accent backgrounds. */
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__content p {
	font-family: "mreavesxlmodotheavy", system-ui, sans-serif;
	font-size: 22px;
	line-height: 1.27;
	font-weight: 400;
}

/* Intro-accent column split — matches the Figma slice exactly:
 * Text col 55% (photo starts at viewport x=787, 67 px RIGHT of midpoint),
 * Photo col 45%. wp:columns inline flex-basis is content-box; we explicitly
 * pin width + border-box above so the 55/45 lands at the right pixel. */
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__row .hodc-banner-cta-2col__content {
	flex: 0 0 55%;
	max-width: 55%;
}
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__row .hodc-banner-cta-2col__media-col {
	flex: 0 0 45%;
	max-width: 45%;
}

.hodc-banner-cta-2col__content > * + * {
	margin-top: 24px;
}

/* Heading color overrides (typography inherits from theme.json h2) */
.hodc-banner-cta-2col.is-style-section-light .hodc-banner-cta-2col__heading--accent {
	color: var(--wp--preset--color--accent);
}

/* Paragraph color (typography inherits from theme.json styles.typography) */
.hodc-banner-cta-2col.is-style-section-accent .hodc-banner-cta-2col__content p {
	color: var(--wp--preset--color--white);
}

.hodc-banner-cta-2col.is-style-section-light .hodc-banner-cta-2col__content p,
.hodc-banner-cta-2col.is-style-section-warm-neutral .hodc-banner-cta-2col__content p {
	color: var(--wp--preset--color--primary);
}

/* Buttons */
.hodc-banner-cta-2col__content .wp-block-buttons {
	margin-top: 32px;
}

/* Media column */
.hodc-banner-cta-2col__media-col {
	display: flex;
	align-items: center;
}

.hodc-banner-cta-2col__media {
	margin: 0;
	width: 100%;
}

.hodc-banner-cta-2col__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Intro: full-bleed photo, no rounding */
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media-col {
	align-items: stretch;
}
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media,
.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media img {
	height: 100%;
}

/* Help + veterans + help-faq: rounded card photo (asymmetric corners) */
.hodc-banner-cta-2col--help .hodc-banner-cta-2col__media,
.hodc-banner-cta-2col--veterans .hodc-banner-cta-2col__media,
.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__media {
	border-radius: 50px 25px 50px 25px;
	overflow: hidden;
}

/* --help: vertically center the row within the 525 min-height so the
 * extra space (min-height − row height) splits evenly above and below
 * rather than dropping all to the bottom. Scoped to --help so respite,
 * here-to-help, and transparency keep their existing flow. */
.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--help {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   --help-faq variant — FAQ-page mirror of --help.
   Differences vs --help: warm-neutral bg (vs white), heading in primary teal
   (vs terracotta), outline-accent button (vs filled-primary), content LEFT /
   photo RIGHT (vs photo-left / content-right).
   --------------------------------------------------------------------------- */

/* Heading inherits theme.json elements.h2 (primary teal, no override needed).
 * Body paragraph max-width narrows the 3-line wrap that matches the Figma slice. */
.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__content p {
	max-width: 480px;
}

/* Section: zero top/bottom padding so the right-column photo can bleed
 * edge-to-edge against the warm-neutral band. Height pinned to the Figma
 * slice value at every viewport — without this, the right-column image's
 * natural aspect ratio drives the section height taller at wide viewports
 * (vw=1920 made the section grow to ~549 px). overflow:hidden clips the
 * image to the fixed height; object-fit: cover (on the img element) handles
 * the aspect mismatch by cropping the photo's top/bottom rather than
 * stretching the section. */
.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--help-faq {
	padding: 0;
	height: 412px;
	min-height: 412px;
	max-height: 412px;
	overflow: hidden;
}

/* Row: full-bleed (max-width: none), pinned to section height. Columns
 * pack to the left (justify-content: flex-start) — image sits adjacent
 * to the text column rather than anchoring to the viewport's right edge.
 * At wider viewports the warm-neutral section bg fills the empty space
 * on the right of the image. */
.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__row {
	max-width: none;
	padding: 0;
	gap: 0;
	height: 100%;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
}

/* Text column: shrink-wrap to content (heading natural width + body
 * max-width: 480) plus the rail-tracking left padding. !important
 * overrides the inline style="flex-basis:50%" from wp:column. No
 * max-width on the column itself — content's own widths constrain it.
 * Column expands at wider viewports because the rail-tracking left
 * padding grows, which is the intended behavior (text always sits
 * inside the 1200 rail). */
.hodc-banner-cta-2col--help-faq .wp-block-column.hodc-banner-cta-2col__content {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 40px 40px 40px max(24px, calc((100vw - 1200px) / 2));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Image column — DEFAULT photo treatment ("Trust photo size" / V0).
 * Photo shrink-wraps to natural aspect at section height. Column width
 * follows image's natural width (no stretch). Editors can opt into
 * "Fill & center" or "Fill & anchor right" via the Styles sidebar on this
 * column (see register_block_style calls in functions.php + the override
 * rules below). */
.hodc-banner-cta-2col--help-faq .wp-block-column.hodc-banner-cta-2col__media-col {
	flex: 0 0 auto !important;
	width: auto !important;
	height: 100%;
	padding: 0 !important;
	overflow: hidden;
}
.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__media {
	border-radius: 0;
	aspect-ratio: auto;
	max-height: none;
	height: 100%;
	width: auto;
	margin: 0;
}
.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__media img {
	height: 100%;
	width: auto;
	display: block;
}

/* --- Photo-fill toggle overrides (block style variations on core/column) ---
 * When editor picks "Fill & center" or "Fill & anchor right" on the media
 * column, the column gets is-style-photo-fill-center or is-style-photo-fill-right.
 * Both expand the column to 50% and scale the image to cover; object-position
 * differs (center vs 80% from left).
 * Scoped to .hodc-banner-cta-2col (parent class — applies to ALL banner-cta-2col
 * variants: --help, --help-faq, --help-reverse, --careers, --legacy, --sanctuary,
 * --veterans, --veteran-to-veteran, --intro-primary, etc.). Toggle has zero
 * visual effect on wp:column instances outside any banner-cta-2col. */
.hodc-banner-cta-2col .wp-block-column.hodc-banner-cta-2col__media-col.is-style-photo-fill-center,
.hodc-banner-cta-2col .wp-block-column.hodc-banner-cta-2col__media-col.is-style-photo-fill-right {
	flex: 0 0 50% !important;
	width: 50% !important;
}
.hodc-banner-cta-2col .wp-block-column.is-style-photo-fill-center .hodc-banner-cta-2col__media,
.hodc-banner-cta-2col .wp-block-column.is-style-photo-fill-right .hodc-banner-cta-2col__media {
	width: 100%;
}
.hodc-banner-cta-2col .wp-block-column.is-style-photo-fill-center .hodc-banner-cta-2col__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.hodc-banner-cta-2col .wp-block-column.is-style-photo-fill-right .hodc-banner-cta-2col__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% center;
}

/* When the toggle is active on the media column, force the SIBLING content
 * column to flex-grow into the remaining space. Without this, variants whose
 * content rule is width:auto (--careers, --help-faq, etc.) leave a section-bg
 * gap between the content column and the now-50% media column. */
.hodc-banner-cta-2col__row:has(.hodc-banner-cta-2col__media-col.is-style-photo-fill-center) .hodc-banner-cta-2col__content,
.hodc-banner-cta-2col__row:has(.hodc-banner-cta-2col__media-col.is-style-photo-fill-right) .hodc-banner-cta-2col__content {
	flex: 1 1 0 !important;
	width: auto !important;
	max-width: none !important;
}

/* Button — Figma's design is white-fill + terracotta-label + NO border.
 * The base is-style-outline-accent global style applies a 2 px terracotta
 * border by default; we explicitly remove it here. Hover flips to a filled
 * terracotta button with white label, consistent with the site's button
 * hover language. */
.hodc-banner-cta-2col--help-faq .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;
}
.hodc-banner-cta-2col--help-faq .wp-block-button.is-style-outline-accent > .wp-block-button__link:hover,
.hodc-banner-cta-2col--help-faq .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);
}

/* ---------------------------------------------------------------------------
   --careers variant — "Join the Alderwood Family" bottom CTA on Leadership.
   Terracotta accent bg, white heading + body + white-fill button with
   terracotta label. Photo right, natural aspect at section height, anchored
   adjacent to the text column (same architectural treatment as --help-faq).
   --------------------------------------------------------------------------- */

/* Section: zero padding, height pinned to 412 (matches Figma slice). */
.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--careers {
	padding: 0;
	height: 412px;
	min-height: 412px;
	max-height: 412px;
	overflow: hidden;
}

/* Row: full-bleed, columns pack to the left so the photo sits adjacent
 * to the text column (warm-accent bg fills the right side at wider
 * viewports). */
.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__row {
	max-width: none;
	padding: 0;
	gap: 0;
	height: 100%;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
}

/* Text column: shrink-wrap to content, padding-left tracks the centered
 * 1200 rail. !important overrides the inline 50% flex-basis from wp:column. */
.hodc-banner-cta-2col--careers .wp-block-column.hodc-banner-cta-2col__content {
	flex: 0 0 auto !important;
	width: auto !important;
	max-width: none !important;
	padding: 40px 40px 40px max(24px, calc((100vw - 1200px) / 2));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Heading: white (overrides theme.json h2 primary teal default). */
.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__heading {
	color: var(--wp--preset--color--white);
	margin: 0;
}

/* Body p: white, narrower max-width to match the Figma slice's 5-line wrap. */
.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__content p {
	color: var(--wp--preset--color--white);
	max-width: 440px;
	margin: 24px 0 0;
}

/* Buttons block spacing. */
.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__content .wp-block-buttons {
	margin-top: 32px;
}

/* Button: white fill + terracotta label + NO border. On hover the fill
 * drops to transparent + the label flips to white, with a 2 px white
 * outline drawn via inset box-shadow. The outline keeps the button
 * visible against the terracotta section bg (a plain color-invert here
 * would make the button bg match the section bg and absorb the button
 * shape; the outline preserves the button silhouette on hover). */
.hodc-banner-cta-2col--careers .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;
}
.hodc-banner-cta-2col--careers .wp-block-button.is-style-outline-accent > .wp-block-button__link:hover,
.hodc-banner-cta-2col--careers .wp-block-button.is-style-outline-accent > .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--white);
}

/* Image column: shrink-wrap to natural width at section height. */
.hodc-banner-cta-2col--careers .wp-block-column.hodc-banner-cta-2col__media-col {
	flex: 0 0 auto !important;
	width: auto !important;
	height: 100%;
	padding: 0 !important;
	overflow: hidden;
}
.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__media {
	border-radius: 0;
	aspect-ratio: auto;
	max-height: none;
	height: 100%;
	width: auto;
	margin: 0;
}
.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__media img {
	height: 100%;
	width: auto;
	display: block;
}

/* Mobile — NOT IN FIGMA. Proposed: stack columns, photo above content. */
@media (max-width: 1024px) {
	.hodc-banner-cta-2col__row { gap: 40px; flex-direction: column; }

	/* Photo-fill style variations: at mobile, force media column to full width.
	 * Otherwise the desktop is-style-photo-fill-* rule pins the column to
	 * width: 50% !important even when columns are stacking vertically — image
	 * renders at half-section width centered, not edge-to-edge. Same
	 * specificity (0,5,0) as the desktop rule; mobile media-query source order
	 * wins. Forrest 6/13 (BC #9993800723, leadership_and_staff1.PNG). */
	.hodc-banner-cta-2col .wp-block-column.hodc-banner-cta-2col__media-col.is-style-photo-fill-center,
	.hodc-banner-cta-2col .wp-block-column.hodc-banner-cta-2col__media-col.is-style-photo-fill-right {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
	.hodc-banner-cta-2col.is-style-section-accent .hodc-banner-cta-2col__content {
		padding: clamp(48px, 6vw, 80px) 24px;
		max-width: 100%;
	}

	/* --help-faq mobile override: the desktop rules pin section height to
	 * 412 px with overflow: hidden, which clips the column-stacked layout
	 * on narrow viewports. Release the height pin + restore natural sizing
	 * for the stacked content + image. Text column goes full-width with
	 * standard 24 px gutters; image renders at full width preserving its
	 * natural aspect ratio. */
	.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--help-faq {
		height: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}
	.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__row {
		height: auto;
	}
	.hodc-banner-cta-2col--help-faq .wp-block-column.hodc-banner-cta-2col__content {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: clamp(40px, 6vw, 64px) 24px !important;
	}
	.hodc-banner-cta-2col--help-faq .wp-block-column.hodc-banner-cta-2col__media-col {
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto;
		overflow: visible;
	}
	.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__media,
	.hodc-banner-cta-2col--help-faq .hodc-banner-cta-2col__media img {
		height: auto;
		width: 100%;
	}

	/* --careers mobile override: same shape as --help-faq's mobile rules.
	 * Release the height pin, stack columns full-width, image natural aspect. */
	.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--careers {
		height: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}
	.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__row {
		height: auto;
	}
	.hodc-banner-cta-2col--careers .wp-block-column.hodc-banner-cta-2col__content {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: clamp(40px, 6vw, 64px) 24px !important;
	}
	.hodc-banner-cta-2col--careers .wp-block-column.hodc-banner-cta-2col__media-col {
		flex: 0 0 auto !important;
		width: 100% !important;
		height: auto;
		overflow: visible;
	}
	.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__media,
	.hodc-banner-cta-2col--careers .hodc-banner-cta-2col__media img {
		height: auto;
		width: 100%;
	}

	/* --intro mobile override (BC #9983563911 - Forrest 6/10).
	 * Same shape as --help-faq / --careers: the is-style-section-accent
	 * height: 461px + overflow: hidden pins the section vertically and clips
	 * everything past 461 px when columns stack. Release pin + stack
	 * full-width + restore natural image aspect. */
	.wp-block-group.hodc-banner-cta-2col.hodc-banner-cta-2col--intro {
		height: auto;
		max-height: none;
		min-height: 0;
		overflow: visible;
	}
	.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__row {
		height: auto;
		align-items: stretch !important;  /* row's `verticalAlignment: center`
		                                    * → align-items:center in column-flex
		                                    * stops kids stretching to cross-axis
		                                    * full width. Override so columns fill. */
	}
	.hodc-banner-cta-2col--intro .wp-block-column.hodc-banner-cta-2col__content {
		flex: 0 0 auto !important;
		align-self: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: clamp(40px, 6vw, 64px) 24px !important;
	}
	.hodc-banner-cta-2col--intro .wp-block-column.hodc-banner-cta-2col__media-col,
	.hodc-banner-cta-2col--intro .wp-block-column.hodc-banner-cta-2col__media-col.is-style-photo-fill-right,
	.hodc-banner-cta-2col--intro .wp-block-column.hodc-banner-cta-2col__media-col.is-style-photo-fill-center {
		flex: 0 0 auto !important;
		align-self: stretch !important;
		width: 100% !important;             /* override desktop's 50% from
		                                     * is-style-photo-fill-right */
		max-width: 100% !important;
		height: auto;
		overflow: visible;
		padding: 0 !important;              /* photo bleeds edge-to-edge */
	}
	.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media,
	.hodc-banner-cta-2col--intro .hodc-banner-cta-2col__media img {
		display: block;
		height: auto;
		width: 100%;
		max-width: 100%;
		margin: 0;
		object-fit: cover;                 /* keep aspect framed if column is wide */
	}

	/* Forrest 6/13 (BC #9993800723, hospice_and_caregiver_resource1.PNG): on
	 * /caregiver-patient-resources/ the image is correctly full-bleed on mobile,
	 * but the wp:image caption underneath inherits the figure's 100% width and
	 * reads flush to the screen edge. Add a 24 px horizontal gutter to any
	 * banner-cta-2col figure caption so it sits inside the standard text rail
	 * while the image stays edge-to-edge above it. */
	.hodc-banner-cta-2col__media figcaption {
		padding-left: 24px;
		padding-right: 24px;
		box-sizing: border-box;
	}
}