/* lfc/cta-banner */
.wp-block-lfc-cta-banner {
	position: relative;
	padding: var(--lfc-space-lg) var(--lfc-container-pad);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
	/* Wrapper-level defaults so block supports (Font Size, Family, Color) cascade to heading. */
	font-family: var(--lfc-font-heading);
	font-size: clamp(var(--lfc-text-2xl), 4vw, var(--lfc-text-4xl));
}

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

.wp-block-lfc-cta-banner__bg-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.wp-block-lfc-cta-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.wp-block-lfc-cta-banner__inner {
	position: relative;
	z-index: 1;
	max-width: var(--lfc-max-width-narrow);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lfc-space-6);
}

.wp-block-lfc-cta-banner__heading {
	font-family: inherit;
	font-weight: 700;
	font-size: inherit;
	line-height: 1.2;
	margin: 0;
	color: inherit;
}

.wp-block-lfc-cta-banner__body {
	/* em-relative so it scales with the wrapper's clamp() default —
	   the same Case-B2 pattern used in the hero block. Client can
	   still override via the Body typography panel. */
	font-size: 0.55em;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	max-width: 65ch;
	color: inherit;
}

.wp-block-lfc-cta-banner__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lfc-space-3);
	justify-content: center;
	align-items: center;
}

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

.wp-block-lfc-cta-banner__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--lfc-space-3) var(--lfc-space-8);
	background: var(--lfc-bg);
	color: var(--lfc-navy);
	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-cta-banner__button:hover,
.wp-block-lfc-cta-banner__button:focus-visible {
	background: var(--lfc-navy);
	color: var(--lfc-bg);
	transform: translateY(-2px);
}

.wp-block-lfc-cta-banner__button:focus-visible {
	outline: 3px solid var(--lfc-bg);
	outline-offset: 3px;
}

/* Outline variant — transparent background with banner-text-colour border. */
.wp-block-lfc-cta-banner__button--outline {
	background: transparent;
	color: var(--lfc-bg);
	border-color: var(--lfc-bg);
}

.wp-block-lfc-cta-banner__button--outline:hover,
.wp-block-lfc-cta-banner__button--outline:focus-visible {
	background: var(--lfc-bg);
	color: var(--lfc-navy);
	transform: translateY(-2px);
}

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

/* ================================================
   --variant-mini : compact button-row-only variant.
   Transparent background, reduced padding, buttons
   inline centered. Used to add CTAs inside content
   sections without adding a coloured band.
   ================================================ */
.wp-block-lfc-cta-banner--variant-mini {
	/* Tighter top padding so the button sits close to the text above. */
	padding: var(--lfc-space-2) var(--lfc-container-pad) var(--lfc-space-lg);
	color: inherit;
	/* Reset the clamp() font-size cascade so buttons use their own base size. */
	font-family: inherit;
	font-size: inherit;
	/* background-color flows from the inline wrapper style (set per instance
	   to match the parent section's bgColor). */
}

.wp-block-lfc-cta-banner--variant-mini .wp-block-lfc-cta-banner__inner {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--lfc-space-3);
	max-width: none;
}

@media ( max-width: 640px ) {
	.wp-block-lfc-cta-banner--variant-mini {
		padding: var(--lfc-space-3) var(--lfc-container-pad);
	}
}

/* ================================================
   has-photo: split-layout variant (image + copy).
   Active ONLY when an image is set in the editor
   AND variant === 'standard'. Without `.has-photo`,
   every selector below is inert so the 12 existing
   instances are unaffected.
   ================================================ */
.wp-block-lfc-cta-banner.has-photo {
	/* Drop ALL outer padding so the photo goes edge-to-edge on mobile (no
	   teal band above) and fills its column edge-to-edge on desktop (no teal
	   band above/below). The copy-col owns the breathing room instead.
	   text-align stays inherited from the base block (default `center`),
	   so the existing `alignment` attribute keeps working from wp-admin. */
	padding: 0;
}

.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__inner {
	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;
	align-items: stretch;
	gap: var(--lfc-space-6);
}

.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__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-4);
	/* text-align and align-items inherit from base + alignment attribute. */
}

.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__heading,
.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__body {
	max-width: none;
	/* text-align inherits from copy-col (controlled by `alignment` attr). */
}

.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__photo-col {
	/* Override browser default `<figure>` margin — critical for full-bleed
	   mobile rendering with zero horizontal scroll. */
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
}

.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

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

@media ( min-width: 768px ) {
	.wp-block-lfc-cta-banner.has-photo {
		padding-left: 0;
		padding-right: 0;
	}

	.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 0;
		/* Full-bleed: photo column goes screen-edge to mid-screen, copy column
		   owns its own padding for breathing room. No max-width container. */
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__copy-col {
		/* Restore breathing room: keep horizontal padding so text doesn't kiss
		   the edge of the screen. max-width capped for readability, but
		   centred within its grid column so it doesn't drift to one side. */
		padding: var(--lfc-space-12) var(--lfc-space-12);
		max-width: 560px;
		margin-inline: auto;
	}

	.wp-block-lfc-cta-banner.has-photo .wp-block-lfc-cta-banner__photo-col {
		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-cta-banner.has-photo.is-photo-left .wp-block-lfc-cta-banner__inner {
		direction: rtl;
	}
	.wp-block-lfc-cta-banner.has-photo.is-photo-left .wp-block-lfc-cta-banner__copy-col,
	.wp-block-lfc-cta-banner.has-photo.is-photo-left .wp-block-lfc-cta-banner__photo-col {
		direction: ltr;
	}
}