/**
 * LFBC LP-Hero pattern (shared)
 *
 * One stylesheet powers three patterns: `lp-hero-image-left` and
 * `lp-hero-image-right` (banners with a photograph) and `lp-hero-no-image`
 * (text-only banner). They share root class `.lfbc-lp-hero` and the same
 * eyebrow / title / body styling — they differ only in layout, controlled
 * by these modifiers on the outer section:
 *
 *   .lfbc-lp-hero--image-left   text right of image (lp-hero-image-left)
 *   .lfbc-lp-hero--image-right  text left of image (lp-hero-image-right)
 *   .lfbc-lp-hero--no-image     no image; 2-col head + body on desktop, 1-col on mobile
 *
 * Layout uses a container query on `.lfbc-lp-hero` (full-bleed, equal to
 * viewport width) so the editor canvas previews correctly regardless of
 * sidebar state — matches the hero/5050 pattern approach.
 */

.lfbc-lp-hero {
	container-type: inline-size;
}

/* -------------------------------------------------------------------------
 * Shared content styling — eyebrow, title, body.
 * ------------------------------------------------------------------------- */

.lfbc-lp-hero__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--soft-black-500);
	line-height: 1.42;
	border-left: 8px solid var(--wp--preset--color--nootka-rose-900);
	padding-left: 16px;
	/* Design: mobile 13px, desktop 16px. */
	font-size: 13px;
}

.lfbc-lp-hero__title {
	margin: 0;
	line-height: 0.96;
	letter-spacing: -0.01em;
	/* Soft pollen-tinted glow behind the white title, per Figma effect
	   "pollen shadow" (color #ae7d2a, radius 25, spread 2). CSS drop-shadow
	   has no spread; the visual is close enough. */
	filter: drop-shadow(0 0 12.5px #ae7d2a);
}

.lfbc-lp-hero__body,
.lfbc-lp-hero--no-image > .lfbc-lp-hero__inner .wp-block-paragraph:not(.lfbc-lp-hero__eyebrow),
.lfbc-lp-hero__text p.wp-block-paragraph:not(.lfbc-lp-hero__eyebrow) {
	margin: 0;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--soft-black-500);
	font-size: var(--wp--preset--font-size--body-base) !important;
}

.lfbc-lp-hero__buttons.wp-block-buttons {
	gap: 12px;
	margin-top: 4px;
}

/* -------------------------------------------------------------------------
 * Image variant — mobile (default): image stacks above text.
 * ------------------------------------------------------------------------- */

.lfbc-lp-hero--image-left .lfbc-lp-hero__inner,
.lfbc-lp-hero--image-right .lfbc-lp-hero__inner {
	display: flex;
	flex-direction: column; /* image on top, text below (matches DOM order) */
}

.lfbc-lp-hero__media {
	margin: 0;
	width: 100%;
}

.lfbc-lp-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.lfbc-lp-hero--image-left .lfbc-lp-hero__text,
.lfbc-lp-hero--image-right .lfbc-lp-hero__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 40px 24px 48px;
}

/* -------------------------------------------------------------------------
 * No-image variant — mobile (default): single column.
 * ------------------------------------------------------------------------- */

.lfbc-lp-hero--no-image .lfbc-lp-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 48px 24px 56px;
}

.lfbc-lp-hero--no-image .lfbc-lp-hero__head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* -------------------------------------------------------------------------
 * Desktop (≥ 1024px): horizontal layouts.
 * ------------------------------------------------------------------------- */

@container (min-width: 1024px) {

	.lfbc-lp-hero__eyebrow {
		font-size: 16px;
	}

	/* Image variant: image flush to one viewport edge, text inset on the
	   opposite side. No max-width on the inner so the image can extend
	   edge-to-edge — text column caps its own width via `max-width`. */

	/* Hero is always 497px tall on desktop (matches Figma h-[496px], +1 to
	   absorb sub-pixel rounding). Overflow hides any long body copy that
	   exceeds the slot — image cropping is expected, and a too-tall text
	   column is an editorial issue to fix in copy. */
	.lfbc-lp-hero--image-left .lfbc-lp-hero__inner,
	.lfbc-lp-hero--image-right .lfbc-lp-hero__inner {
		max-height: 497px;
		overflow: hidden;
	}

	.lfbc-lp-hero--image-left .lfbc-lp-hero__inner {
		flex-direction: row;
		align-items: stretch;
		gap: 80px;
	}

	.lfbc-lp-hero--image-right .lfbc-lp-hero__inner {
		flex-direction: row-reverse;
		align-items: stretch;
		gap: 57px;
	}

	/* Figure occupies a true 50% of the section (which is full-bleed, so 50%
	   of viewport). `min-height` sits on the figure — not the img — so a
	   small source image can still fill a tall slot via `object-fit: cover`
	   below. `width: 50%` belt-and-braces against any flex-basis quirks. */
	.lfbc-lp-hero--image-left .lfbc-lp-hero__media,
	.lfbc-lp-hero--image-right .lfbc-lp-hero__media {
		flex: 0 0 50%;
		width: 50%;
		align-self: stretch;
		min-height: 497px;
	}

	/* Force img to fill the figure regardless of natural size — small
	   placeholders scale up, large uploads crop. `max-width: none` overrides
	   the inherited `max-width: 100%` from core image rules which (combined
	   with an inline width attribute on the img) could otherwise pin the
	   img to its natural width and leave letterboxing inside the figure. */
	.lfbc-lp-hero--image-left .lfbc-lp-hero__media img,
	.lfbc-lp-hero--image-right .lfbc-lp-hero__media img {
		width: 100%;
		height: 100%;
		max-width: none;
		object-fit: cover;
		/* Bias the crop toward the top of the photo. Anchoring near the
		   top trims from the bottom, keeping faces in view. */
		object-position: 50% 20%;
	}

	.lfbc-lp-hero--image-left .lfbc-lp-hero__text,
	.lfbc-lp-hero--image-right .lfbc-lp-hero__text {
		flex: 1 1 0;
		max-width: 543px;
		align-self: center;
		gap: 24px;
	}

	/* Image on the left → text sits to the right; pad against the right
	   viewport edge. */
	.lfbc-lp-hero--image-left .lfbc-lp-hero__text {
		padding: 64px 80px 64px 0;
	}

	/* Image on the right → text sits to the left; pad against the left
	   viewport edge. */
	.lfbc-lp-hero--image-right .lfbc-lp-hero__text {
		padding: 64px 0 64px 64px;
	}

	/* No-image variant: two columns (head + body) on desktop, content
	   constrained to the wide container size. When the body block is
	   deleted, `.lfbc-lp-hero__head` keeps its `flex: 1 1 0` and expands
	   to fill — giving the heading-only variant for free. */

	.lfbc-lp-hero--no-image .lfbc-lp-hero__inner {
		flex-direction: row;
		align-items: flex-end;
		gap: 40px;
		max-width: var(--wp--style--global--wide-size);
		margin: 0 auto;
		padding: 64px 120px 80px;
		box-sizing: border-box;
	}

	.lfbc-lp-hero--no-image .lfbc-lp-hero__head {
		flex: 1 1 0;
		gap: 20px;
	}

	.lfbc-lp-hero--no-image .lfbc-lp-hero__body,
	.lfbc-lp-hero--no-image > .lfbc-lp-hero__inner .wp-block-paragraph:not(.lfbc-lp-hero__eyebrow) {
		flex: 1 1 0;
		align-self: flex-start;
	}

	/* Page Hero block (lfbc/page-hero, narrow template) — top-align the
	   excerpt with the title instead of the pattern's bottom alignment.
	   Scoped to the block's own wrapper so the LP Hero pattern is unchanged. */
	.wp-block-lfbc-page-hero.lfbc-lp-hero--no-image .lfbc-lp-hero__inner {
		align-items: flex-start;
	}
}