/**
 * LFBC 50/50 pattern
 *
 * Two-column "feature card": title + intro + optional tertiary links +
 * buttons on one side, framed image on the other. Used by both
 * `5050-image-right` and `5050-image-left` pattern variants — they share
 * DOM structure (text-first, image-second for reading order) and differ
 * only by the `lfbc-5050--image-right` / `lfbc-5050--image-left`
 * modifier class on the outer section, plus the LH vs RH frame block
 * style applied to the image.
 *
 * Layout
 *   Mobile (default, < 1024px section width):
 *     flex-direction: column-reverse — image stacks on top, text below.
 *     Card rounded 40px. Smaller card padding. Centered alignment.
 *   Desktop (≥ 1024px section width):
 *     Image-right: flex-direction: row — text left, image right.
 *     Image-left:  flex-direction: row-reverse — text right, image left.
 *     Card rounded 80px. Asymmetric padding (12px on the image side,
 *     80px on the text side) per the Figma. 80px gap between columns.
 *
 * Breakpoint
 *   Container-type is on `.lfbc-5050` so the layout responds to the
 *   section's own width — matches the hero pattern's approach so the
 *   editor canvas previews correctly regardless of sidebar state.
 */

.lfbc-5050 {
	container-type: inline-size;
	padding: 16px 0;
}

.lfbc-5050__card {
	background-color: var(--wp--preset--color--white);
	border-radius: 40px;
	display: flex;
	flex-direction: column-reverse; /* mobile: image-on-top, text-below */
	align-items: center;
	gap: 20px;
	padding: 20px;
}

.lfbc-5050__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	width: 100%;
	padding: 16px 20px 0;
	box-sizing: border-box;
}

.lfbc-5050__title {
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.lfbc-5050__intro {
	margin: 0;
	line-height: 1.5;
}

/* Tertiary Links — optional section. Editors can delete the whole
   .lfbc-5050__tertiary group if they don't need it. */
.lfbc-5050__tertiary {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 5px;
	width: 100%;
}

.lfbc-5050 .wp-block-separator.has-alpha-channel-opacity {
	display: none;
}

.lfbc-5050__tertiary-rule.wp-block-separator {
	display: block !important;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--oatmeal-700);
	border-color: var(--wp--preset--color--oatmeal-700) !important;
	margin: 0;
	opacity: 1;
	width: 100%;
}

.lfbc-5050__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-400);
	line-height: 1.42;
	/* Mobile shrink — design shows 13px on mobile, 20px on desktop. */
	font-size: 13px;
}

/* Tertiary link list. Visual styling (color, weight, arrow) comes from the
   shared `is-style-arrow-links` core/list style in assets/css/typography.css.
   This pattern only needs to force the list to fill the text column. */
.lfbc-5050__links {
	width: 100%;
	padding: 0;
	padding-inline-start: 0 !important;
	padding-bottom: 30px;
}

.lfbc-5050__buttons.wp-block-buttons {
	gap: 12px;
	margin-top: 4px;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

/* Mobile: full-width buttons. */
.lfbc-5050__buttons {
	padding-bottom: 20px;
}

.lfbc-5050__buttons .wp-block-button {
	width: 100%;
}

.lfbc-5050__buttons .wp-block-button .wp-block-button__link {
	width: fit-content;
	min-width: 225px;
	margin: 0 auto;
	justify-content: center;
	align-items: center;
	display: flex;
}

/* Image cell. The framed image (rh-/lh-*-border block style) sets its
   own max-width and aspect; we just let it sit in the flex slot. On
   mobile, allow it to scale down to fit the card padding. */
.lfbc-5050__image {
	margin: 0;
	max-width: 334px; /* mobile cap from design */
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Desktop: section ≥ 1024px wide. Card flips to a horizontal row.
 * ------------------------------------------------------------------------- */
@container (min-width: 1024px) {

	.lfbc-5050 {
		padding: 20px 40px;
	}

	.lfbc-5050__card {
		border-radius: 80px;
		flex-direction: row;
		align-items: stretch;
		gap: 80px;
		/* image-right default: 80px on text side (left), 12px on image side (right) */
		padding: 12px 12px 20px 80px;
	}

	.lfbc-5050--image-left .lfbc-5050__card {
		/* DOM stays text-then-image (semantic reading order); flip visual. */
		flex-direction: row-reverse;
		/* Asymmetric padding mirrors: 80px on text side (now visually right), 12px on image side (now visually left). */
		padding: 12px 80px 20px 12px;
	}

	.lfbc-5050__text {
		flex: 1 0 0;
		align-items: flex-start;
		text-align: left;
		justify-content: center;
		gap: 5px;
		padding: 24px 0;
	}

	.lfbc-5050__title {
		line-height: 1;
	}

	.lfbc-5050__intro {
		font-size: 18px;
	}

	.lfbc-5050__tertiary {
		gap: 20px;
		padding-top: 20px;
	}

	.lfbc-5050__eyebrow {
		font-size: 20px;
		letter-spacing: 0.05em;
	}

	.lfbc-5050__links a {
		font-size: 20px;
		line-height: 1.3;
	}

	.lfbc-5050 .wp-block-separator.has-alpha-channel-opacity {
		display: block;
	}

	.lfbc-5050__buttons.wp-block-buttons {
		flex-direction: row;
		align-items: center;
		width: auto;
		gap: 12px;
	}

	.lfbc-5050__buttons .wp-block-button {
		width: auto;
	}

	.lfbc-5050__buttons .wp-block-button .wp-block-button__link {
		width: auto;
	}

	.lfbc-5050__image {
		/* shrink: 1 lets the framed image scale down below 694px when the
		   section gets cramped (≈1024–1170px), instead of punching out of
		   the card. Above that width there's positive free space, so the
		   image stays pinned at its 694px max. min-width: 0 overrides the
		   default min-width:auto floor so it can actually shrink. */
		flex: 0 1 auto;
		min-width: 0;
		align-self: center;
		max-width: 694px;
	}
}