/**
 * Image and Content section styles.
 *
 * Open: --container-narrow-max (67 @ 85rem, 87 @ 105rem).
 * Panel: full site container split card (Community & Volunteers).
 */

.image-and-content {
	--iac-pad-inline: var(--container-gutter);
	--iac-content-max: var(--container-narrow-max);
	--iac-inner-max: var(--iac-content-max);
	--iac-panel-gap: 1.5rem;
	--iac-copy-gap: 1.5rem;
	--iac-copy-pad-block: 0;
	--iac-copy-pad-inline: 0;
	--iac-headline-size: var(--type-h2-size);
	--iac-deck-size: clamp(1rem, 1.5vw, 1.1875rem);
	--iac-body-size: 1rem;
	--iac-media-radius: 0.5rem;
	--iac-panel-radius: 0.75rem;
	/* Columns sum to 67rem at scale 1 (31.3125 + 3.5625 + 32.125) */
	--iac-copy-max: calc(31.3125rem * var(--container-content-scale));
	--iac-media-max: calc(32.125rem * var(--container-content-scale));
	--iac-media-ratio: 517 / 394;
	--iac-pad-block: clamp(1.75rem, 5vw, 5.25rem); /* → 100px */
	--iac-pad-top: var(--iac-pad-block);
	--iac-pad-bottom: var(--iac-pad-block);
	--iac-align-items: center;

	position: relative;
	isolation: isolate;
	overflow: clip;
	padding-block: var(--iac-pad-top) var(--iac-pad-bottom);
	padding-inline: var(--iac-pad-inline);
	color: var(--color-navy);
}

/* Spacing presets — per-instance overrides set inline from ACF. */
.image-and-content--pad-top-none {
	--iac-pad-top: 0;
}

.image-and-content--pad-top-xs {
	--iac-pad-top: clamp(0.5rem, 1.5vw, 1.25rem); /* → 20px */
}

.image-and-content--pad-top-sm {
	--iac-pad-top: clamp(1rem, 3vw, 2.5rem); /* → 40px */
}

.image-and-content--pad-top-lg {
	--iac-pad-top: clamp(2.25rem, 6.5vw, 7.5rem); /* → 120px */
}

.image-and-content--pad-top-xl {
	--iac-pad-top: clamp(3rem, 8vw, 10rem); /* → 160px */
}

.image-and-content--pad-bottom-none {
	--iac-pad-bottom: 0;
}

.image-and-content--pad-bottom-xs {
	--iac-pad-bottom: clamp(0.5rem, 1.5vw, 1.25rem); /* → 20px */
}

.image-and-content--pad-bottom-sm {
	--iac-pad-bottom: clamp(1rem, 3vw, 2.5rem); /* → 40px */
}

.image-and-content--pad-bottom-lg {
	--iac-pad-bottom: clamp(2.25rem, 6.5vw, 7.5rem); /* → 120px */
}

.image-and-content--pad-bottom-xl {
	--iac-pad-bottom: clamp(3rem, 8vw, 10rem); /* → 160px */
}

.image-and-content__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.image-and-content__bg-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.image-and-content__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--iac-inner-max);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

.image-and-content__panel {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--iac-panel-gap);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin-inline: 0;
	padding-inline: 0;
	box-sizing: border-box;
}

.image-and-content__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--iac-copy-gap);
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: var(--iac-copy-pad-block) var(--iac-copy-pad-inline);
	box-sizing: border-box;
}

.image-and-content__headline {
	margin: 0;
	width: 100%;
	max-width: 100%;
	font-family: var(--font-family-display);
	font-size: var(--iac-headline-size);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--color-navy);
	overflow-wrap: break-word;
}

.image-and-content__description {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
	max-width: 100%;
	font-family: var(--font-family-sans);
	font-size: var(--iac-body-size);
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-navy);
	overflow-wrap: break-word;
}

.image-and-content__description > *:first-child {
	margin-block-start: 0;
}

.image-and-content__description > *:last-child {
	margin-block-end: 0;
}

.image-and-content__description p {
	margin: 0;
}

.image-and-content__description strong,
.image-and-content__description b {
	font-size: var(--iac-deck-size);
	font-weight: 700;
	line-height: 1.4;
}

.image-and-content__cta {
	--btn-navy-font-size: 1rem;
	--btn-navy-font-weight: 400;
	--btn-navy-letter-spacing: 0.02em;
	--btn-navy-line-height: 1.2375;
	--btn-navy-border-radius: 2.5rem;
	max-width: 100%;
	min-height: 3.875rem;
}

.image-and-content__cta-label {
	text-align: center;
}

.image-and-content__cta-icon {
	flex-shrink: 0;
}

.image-and-content__cta-icon img {
	display: block;
	width: auto;
}

.image-and-content__media {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border-radius: var(--iac-media-radius);
}

.image-and-content__image {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: var(--iac-media-ratio);
	object-fit: cover;
	object-position: center;
	contain-intrinsic-size: unset;
}

/* Title underline — ACF Show title border */
.image-and-content--title-border .image-and-content__headline {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-light-outline);
}

/* Stack follows ACF side: left = image first, right = copy first (DOM order). */
.image-and-content--image-left .image-and-content__media {
	order: -1;
}

/* Panel layout — full container width split card */
.image-and-content--panel {
	--iac-inner-max: var(--container-outer-max);
	--iac-pad-inline: var(--container-pad-inline);
	--iac-panel-gap: 0;
	--iac-copy-gap: 2rem;
	--iac-copy-pad-block: 2rem;
	--iac-copy-pad-inline: 1.25rem;
	--iac-media-ratio: 711 / 542;
	--iac-media-radius: 0;
	/* Side pad lives on __inner so the card matches the header box. */
	padding-inline: 0;
}

.image-and-content--panel .image-and-content__inner {
	padding-inline: var(--iac-pad-inline);
}

.image-and-content--panel .image-and-content__panel {
	max-width: 100%;
	overflow: hidden;
	border-radius: var(--iac-panel-radius);
}

.image-and-content--panel .image-and-content__media {
	min-height: 14rem;
	border-radius: 0;
}

.image-and-content--panel .image-and-content__image {
	height: 100%;
	min-height: 14rem;
	aspect-ratio: var(--iac-media-ratio);
}

/* Tablet: still stacked, full container width — no desktop 1080 inset */
@media (min-width: 48rem) and (max-width: 63.9375rem) {
	.image-and-content {
		--iac-panel-gap: 2rem;
		--iac-copy-gap: 1.75rem;
	}

	.image-and-content--open .image-and-content__panel,
	.image-and-content--open .image-and-content__copy,
	.image-and-content--open .image-and-content__media {
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
	}

	.image-and-content--panel {
		--iac-copy-pad-block: 2.5rem;
		--iac-copy-pad-inline: 1.5rem;
	}
}

/* Desktop: open layout side-by-side; widths follow --iac-content-max */
@media (min-width: 64rem) {
	.image-and-content {
		--iac-panel-gap: calc(3.5625rem * var(--container-content-scale));
		--iac-copy-gap: 2rem;
	}

	.image-and-content__panel {
		flex-direction: row;
		align-items: var(--iac-align-items);
	}

	.image-and-content--open .image-and-content__panel {
		/* __inner already = content + gutters; row fills content box */
		width: 100%;
		max-width: 100%;
		margin-inline: 0;
		justify-content: space-between;
		align-items: var(--iac-align-items);
		gap: var(--iac-panel-gap);
	}

	.image-and-content--align-top {
		--iac-align-items: flex-start;
	}

	.image-and-content--align-center {
		--iac-align-items: center;
	}

	.image-and-content--align-baseline {
		--iac-align-items: baseline;
	}

	.image-and-content--title-border .image-and-content__headline {
		padding-bottom: 2rem;
	}

	.image-and-content--open .image-and-content__copy {
		flex: 1 1 var(--iac-copy-max);
		width: auto;
		max-width: var(--iac-copy-max);
		min-width: 0;
	}

	.image-and-content--open .image-and-content__media {
		order: 0;
		flex: 1 1 var(--iac-media-max);
		width: auto;
		max-width: var(--iac-media-max);
		min-width: 0;
		margin-inline: 0;
		align-self: auto;
	}

	.image-and-content--open.image-and-content--image-left .image-and-content__media {
		order: -1;
	}

	.image-and-content--open.image-and-content--image-right .image-and-content__media {
		order: 0;
	}

	.image-and-content--panel {
		--iac-copy-gap: 4rem;
		--iac-copy-pad-block: clamp(2.5rem, 5vw, 5rem);
		--iac-copy-pad-inline: clamp(1.5rem, 4vw, 4.25rem);
	}

	.image-and-content--panel .image-and-content__panel {
		align-items: var(--iac-align-items);
	}

	.image-and-content--panel .image-and-content__copy {
		flex: 1 1 48%;
		width: auto;
	}

	.image-and-content--panel .image-and-content__media {
		order: 0;
		flex: 1 1 52%;
		width: auto;
		align-self: auto;
		min-height: 16rem;
	}

	.image-and-content--panel .image-and-content__image {
		height: auto;
		min-height: 16rem;
		aspect-ratio: var(--iac-media-ratio);
	}

	/* Panel + center: keep full-height image fill (existing card look). */
	.image-and-content--panel.image-and-content--align-center .image-and-content__panel {
		align-items: stretch;
	}

	.image-and-content--panel.image-and-content--align-center .image-and-content__media {
		align-self: stretch;
	}

	.image-and-content--panel.image-and-content--align-center .image-and-content__image {
		height: 100%;
		min-height: 100%;
		aspect-ratio: auto;
	}

	.image-and-content--panel.image-and-content--image-left .image-and-content__media {
		order: -1;
		border-radius: var(--iac-panel-radius) 0 0 var(--iac-panel-radius);
	}

	.image-and-content--panel.image-and-content--image-right .image-and-content__media {
		order: 0;
		border-radius: 0 var(--iac-panel-radius) var(--iac-panel-radius) 0;
	}

	.image-and-content--panel.image-and-content--image-left .image-and-content__copy {
		border-radius: 0 var(--iac-panel-radius) var(--iac-panel-radius) 0;
	}

	.image-and-content--panel.image-and-content--image-right .image-and-content__copy {
		border-radius: var(--iac-panel-radius) 0 0 var(--iac-panel-radius);
	}

	/* Column split — image : content (default 50:50 keeps rem maxes above). */
	.image-and-content--split-33-66.image-and-content--open .image-and-content__copy,
	.image-and-content--split-66-33.image-and-content--open .image-and-content__copy,
	.image-and-content--split-33-66.image-and-content--panel .image-and-content__copy,
	.image-and-content--split-66-33.image-and-content--panel .image-and-content__copy {
		flex-grow: var(--iac-copy-share);
		flex-shrink: 1;
		flex-basis: 0;
		max-width: none;
	}

	.image-and-content--split-33-66.image-and-content--open .image-and-content__media,
	.image-and-content--split-66-33.image-and-content--open .image-and-content__media,
	.image-and-content--split-33-66.image-and-content--panel .image-and-content__media,
	.image-and-content--split-66-33.image-and-content--panel .image-and-content__media {
		flex-grow: var(--iac-media-share);
		flex-shrink: 1;
		flex-basis: 0;
		max-width: none;
	}

	.image-and-content--split-33-66 {
		--iac-copy-share: 2;
		--iac-media-share: 1;
		/* Narrow column: taller crop so image keeps visual weight (~3:4). */
		--iac-media-ratio: 4 / 4;
	}

	.image-and-content--split-66-33 {
		--iac-copy-share: 1;
		--iac-media-share: 2;
	}
}

/* Mobile: stacked, flush to container gutter */
@media (max-width: 47.9375rem) {
	.image-and-content {
		--iac-panel-gap: 1.25rem;
		--iac-copy-gap: 1.25rem;
	}

	.image-and-content--open .image-and-content__panel,
	.image-and-content--open .image-and-content__copy,
	.image-and-content--open .image-and-content__media {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}

	.image-and-content--title-border .image-and-content__headline {
		padding-bottom: 1.25rem;
	}

	.image-and-content--panel {
		--iac-copy-pad-block: 1.5rem;
		--iac-copy-pad-inline: 1.25rem;
	}

	.image-and-content--panel .image-and-content__panel {
		border-radius: var(--iac-panel-radius);
	}

	.image-and-content--panel .image-and-content__media {
		border-radius: var(--iac-panel-radius) var(--iac-panel-radius) 0 0;
	}
}