/* ===========================================================================
   BANNER-CTA-2COL-INTRO-PRIMARY — Hospice page intro band
   Full-bleed primary teal + 2-col content-left/photo-right + pull-quote stack.
   Standalone CSS (does NOT extend the shared banner-cta-2col.css — per the
   page-scope protocol; consolidate later via merge-pattern-css.sh if patterns
   stabilize toward a shared family rule set).
   Source slice: docs/figma/hospice/_slices/04-banner-cta-2col-intro-primary.png
   =========================================================================== */

.wp-block-group.hodc-banner-cta-2col--intro-primary {
	/* Section bg is set by is-style-section-primary (style.css). */
	padding: 0;
	overflow: hidden;
}

/* 2-col row — kill the default WP columns horizontal padding so the photo
   reaches the right viewport edge full-bleed. */
.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__row {
	margin: 0;
	padding: 0;
	gap: 0;
	max-width: none;
}

/* Left content column — text-left tracks the centered 1200 content rail used by
 * services-cards-3up + page-intro at every viewport (fixed 116px would bleed left
 * of the rail at viewports wider than 1440). 24 px floor for narrow viewports.
 * border-box so the padding sits inside the column's flex-basis. align-self
 * stretch so the column fills section height despite is-vertically-aligned-center. */
.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__content {
	padding: 80px 24px 80px max(24px, calc((100vw - 1200px) / 2));
	box-sizing: border-box;
	align-self: stretch;
}

/* Pull-quote heading — per Figma spec: Source Serif Pro Regular 42,
   line-height 127% (~53), letter -1%, width 528 px, color white
   (inherited from is-style-section-primary). Earlier pass mistakenly
   pinned 32/40 (an intermediate size); the Figma frame's actual node
   spec is 42 / 127% — the same h-l ramp value as section H2s. */
.hodc-banner-cta-2col-intro-primary__quote {
	font-family: var(--wp--preset--font-family--source-serif-pro);
	font-size: 42px;
	line-height: 1.27;
	font-weight: 400;
	letter-spacing: -0.01em;
	margin: 0 0 24px;
	max-width: 528px;
}

/* Body paragraph — per Figma spec: p-large ramp 18/28, width 528 px,
   color white. (The Figma node references the common text style
   p-large which resolves to Mr Eaves XL Modern Regular 18/28.) */
.hodc-banner-cta-2col-intro-primary__body {
	font-family: var(--wp--preset--font-family--mreavesxlmodotheavy);
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
	color: var(--wp--preset--color--white);
	margin: 0;
	max-width: 528px;
}

/* Right photo column — full-bleed, no padding. */
.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__media-col {
	padding: 0;
}

.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__media,
.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}

/* Mobile — NOT IN FIGMA. Proposed: stack with photo above content. */
@media (max-width: 1024px) {
	.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__row {
		flex-direction: column-reverse;
	}
	.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__content {
		padding: clamp(48px, 6vw, 80px) clamp(24px, 6vw, 56px);
		flex-basis: 100% !important;
	}
	.hodc-banner-cta-2col--intro-primary .hodc-banner-cta-2col__media-col {
		flex-basis: 100% !important;
	}
	/* Forrest 6/13 (BC #9993800723, grief_support_groups1.PNG): desktop 42px
	 * pull-quote outran the page H1 (37.5px) on /support-groups/ mobile —
	 * hierarchy inverted. Clamp down to ~28px on phone scaling up to 42px
	 * at tablet so the section H2 reads smaller than the page-intro H1. */
	.hodc-banner-cta-2col-intro-primary__quote {
		font-size: clamp(28px, 7vw, 42px);
	}
}