/* lfc/why-lfc */
.wp-block-lfc-why-lfc {
	padding: var(--lfc-space-lg) var(--lfc-container-pad);
	/* Wrapper-level defaults so block supports (Font Size, Family, Color) cascade to inner. */
	font-family: var(--lfc-font-body);
	font-size: clamp(var(--lfc-text-3xl), 4vw, var(--lfc-text-4xl));
}

@media ( min-width: 768px ) {
	.wp-block-lfc-why-lfc {
		padding: var(--lfc-space-xl) var(--lfc-container-pad);
	}
}

.wp-block-lfc-why-lfc__inner {
	max-width: var(--lfc-max-width-narrow);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--lfc-space-6);
}

.wp-block-lfc-why-lfc--align-left   .wp-block-lfc-why-lfc__inner { text-align: left; }
.wp-block-lfc-why-lfc--align-center .wp-block-lfc-why-lfc__inner { text-align: center; }

.wp-block-lfc-why-lfc__heading {
	font-family: var(--lfc-font-heading);
	font-weight: 700;
	/* Inherits wrapper font-size so block-level Font Size cascades to heading. */
	font-size: inherit;
	line-height: 1.15;
	margin: 0;
	color: inherit;
}

.wp-block-lfc-why-lfc__body {
	font-family: inherit;
	/* Body scales relative to wrapper font-size (~50%) for proportional resize. */
	font-size: 0.5em;
	line-height: 1.6;
}

.wp-block-lfc-why-lfc__body p {
	margin: 0 0 var(--lfc-space-4) 0;
}

.wp-block-lfc-why-lfc__body a {
	color: var(--lfc-link);
	text-decoration: underline;
}

.wp-block-lfc-why-lfc__body a:hover,
.wp-block-lfc-why-lfc__body a:focus-visible {
	color: var(--lfc-link-hover);
}

/* ================================================
   Buttons slot (mirrors lfc/cta-banner button design).
   Renders inside __inner, below __body. Inherits the
   section's bgColor so the button visually belongs to
   the same content block — no separate banner.
   ================================================ */
.wp-block-lfc-why-lfc__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lfc-space-3);
	align-items: center;
}

.wp-block-lfc-why-lfc--align-left   .wp-block-lfc-why-lfc__buttons { justify-content: flex-start; }
.wp-block-lfc-why-lfc--align-center .wp-block-lfc-why-lfc__buttons { justify-content: center; }
.wp-block-lfc-why-lfc--align-right  .wp-block-lfc-why-lfc__buttons { justify-content: flex-end; }

/* Granular button-row alignment (overrides legacy block alignment when set). */
.wp-block-lfc-why-lfc .wp-block-lfc-why-lfc__buttons--align-left   { justify-content: flex-start; }
.wp-block-lfc-why-lfc .wp-block-lfc-why-lfc__buttons--align-center { justify-content: center; }
.wp-block-lfc-why-lfc .wp-block-lfc-why-lfc__buttons--align-right  { justify-content: flex-end; }

@media ( max-width: 640px ) {
	.wp-block-lfc-why-lfc__buttons {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.wp-block-lfc-why-lfc__buttons .wp-block-lfc-why-lfc__button {
		width: 100%;
	}
}

.wp-block-lfc-why-lfc__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--lfc-space-3) var(--lfc-space-8);
	background: var(--lfc-coral);
	color: #fff;
	font-family: var(--lfc-font-heading);
	font-weight: 700;
	font-size: var(--lfc-text-base);
	border: 2px solid transparent;
	border-radius: var(--lfc-radius-full);
	text-decoration: none;
	min-height: 44px;
	transition: background var(--lfc-transition),
				color var(--lfc-transition),
				transform var(--lfc-transition);
}

.wp-block-lfc-why-lfc__button:hover,
.wp-block-lfc-why-lfc__button:focus-visible {
	background: var(--lfc-navy);
	color: #fff;
	transform: translateY(-2px);
}

.wp-block-lfc-why-lfc__button:focus-visible {
	outline: 3px solid var(--lfc-navy);
	outline-offset: 3px;
}

.wp-block-lfc-why-lfc__button--outline {
	background: transparent;
	color: var(--lfc-navy);
	border-color: var(--lfc-navy);
}

.wp-block-lfc-why-lfc__button--outline:hover,
.wp-block-lfc-why-lfc__button--outline:focus-visible {
	background: var(--lfc-navy);
	color: #fff;
	transform: translateY(-2px);
}

@media ( prefers-reduced-motion: reduce ) {
	.wp-block-lfc-why-lfc__button,
	.wp-block-lfc-why-lfc__button--outline {
		transition: none;
	}
	.wp-block-lfc-why-lfc__button:hover,
	.wp-block-lfc-why-lfc__button--outline:hover {
		transform: none;
	}
}

/* ================================================
   has-photo: split-layout variant (image + copy).
   Active ONLY when an image is set in the editor.
   Without `.has-photo`, every selector below is inert
   so the 33 existing instances are unaffected.
   ================================================ */
.wp-block-lfc-why-lfc.has-photo {
	/* Drop ALL outer padding so the photo goes edge-to-edge on mobile (no
	   bg-color band above) and fills its column edge-to-edge on desktop. The
	   copy-col owns the breathing room instead. */
	padding: 0;
}

.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__inner {
	/* The grid container; max-width-narrow no longer applies because we want
	   the photo edge-to-edge on mobile. Desktop applies its own max-width. */
	max-width: none;
	margin-inline: 0;
	display: flex;
	/* `column-reverse` keeps DOM order (copy→photo, a11y) but renders photo
	   on top, copy below — matching the Pattern L mobile mockup. Desktop
	   switches to `display: grid` (overrides this) at min-width: 768px. */
	flex-direction: column-reverse;
	gap: var(--lfc-space-6);
}

.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__copy-col {
	/* Restore the horizontal padding + add vertical breathing room that
	   used to sit on the outer wrapper. Photo column fills edge-to-edge,
	   copy column keeps the breathing space. */
	padding: var(--lfc-space-12) var(--lfc-container-pad);
	display: flex;
	flex-direction: column;
	gap: var(--lfc-space-6);
}

.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__photo-col {
	/* Override browser default `<figure>` margin (1em 40px) — critical for
	   full-bleed mobile rendering with zero horizontal scroll. */
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	/* Mobile aspect-ratio set below via .mobile-aspect-* */
}

.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Per-instance focal shift. The cover crop
 * on the square frame was cutting the right-hand person out of the Home
 * "middle" photo; shift the focal point right so all three people show. */
.lfc-photo-focus-right .wp-block-lfc-why-lfc__photo {
	object-position: 80% 50%;
}

/* Mobile aspect-ratio variants (only active when stacked, i.e. <768px). */
.wp-block-lfc-why-lfc.has-photo.mobile-aspect-4-3  .wp-block-lfc-why-lfc__photo-col { aspect-ratio: 4 / 3; }
.wp-block-lfc-why-lfc.has-photo.mobile-aspect-16-9 .wp-block-lfc-why-lfc__photo-col { aspect-ratio: 16 / 9; }
.wp-block-lfc-why-lfc.has-photo.mobile-aspect-3-4  .wp-block-lfc-why-lfc__photo-col { aspect-ratio: 3 / 4; }
.wp-block-lfc-why-lfc.has-photo.mobile-aspect-1-1  .wp-block-lfc-why-lfc__photo-col { aspect-ratio: 1 / 1; }

@media ( min-width: 768px ) {
	.wp-block-lfc-why-lfc.has-photo {
		/* Outer vertical padding remains; horizontal padding stays zero (copy-col owns it). */
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 0;
		/* Full-bleed: photo column flushes the screen edge, copy column owns
		   its own padding. No max-width container at this breakpoint. */
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__copy-col {
		/* Restore breathing room: horizontal padding for legibility, capped
		   for a comfortable measure but centred within its grid column. */
		padding: var(--lfc-space-12) var(--lfc-space-12);
		max-width: 560px;
		margin-inline: auto;
	}

	.wp-block-lfc-why-lfc.has-photo .wp-block-lfc-why-lfc__photo-col {
		/* Desktop fills column height; aspect-ratio overrides cleared.
		 * `align-self: stretch` overrides the container's `align-items: center`
		 * for this column only — without it, the photo-col shrinks to its
		 * image's natural display height. When the copy column is taller
		 * (long body text + 48px×2 padding), an offwhite strip appears
		 * below the photo. align-self: stretch + object-fit: cover keeps
		 * the photo flush with the section's bottom edge. */
		align-self: stretch;
		aspect-ratio: auto;
		height: 100%;
		min-height: 320px;
		/* No border-radius on desktop split — photo flushes the screen edge. */
		border-radius: 0;
	}

	/* is-photo-left: visually swap columns without reordering DOM (a11y). */
	.wp-block-lfc-why-lfc.has-photo.is-photo-left .wp-block-lfc-why-lfc__inner {
		direction: rtl;
	}
	.wp-block-lfc-why-lfc.has-photo.is-photo-left .wp-block-lfc-why-lfc__copy-col,
	.wp-block-lfc-why-lfc.has-photo.is-photo-left .wp-block-lfc-why-lfc__photo-col {
		direction: ltr;
	}
}

/* ================================================
   Pull-quote variant for the body.
   Active ONLY when bodyStyle === 'pullquote' (renders
   <blockquote class="...__body--pullquote">). All
   selectors below are scoped to the modifier class so
   the 31 plain instances remain unaffected.
   ================================================ */
.wp-block-lfc-why-lfc__body.wp-block-lfc-why-lfc__body--pullquote {
	border-left: 4px solid var(--lfc-coral);
	padding: 6px 0 6px 20px;
	margin: 24px 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--lfc-navy);
	font-style: italic;
}

.wp-block-lfc-why-lfc__body.wp-block-lfc-why-lfc__body--pullquote p {
	margin: 0;
	font-style: italic;
}

@media (max-width: 767px) {
	.wp-block-lfc-why-lfc__body.wp-block-lfc-why-lfc__body--pullquote {
		font-size: 18px;
		padding-left: 16px;
	}
}