/**
 * LFBC Card — Feature pattern
 *
 * Single feature card with portrait image, eyebrow, title, and intro.
 * The whole card is a "stretched link": editors set a Custom URL link
 * on the image block, and an invisible ::after on that <a> covers the
 * entire card so a click anywhere triggers it. The intro paragraph is
 * raised above the overlay so its text remains user-selectable. The
 * image's Alt text doubles as the link's accessible name, so editors set
 * it to match the title. (Linking the image rather than the heading
 * keeps the title plain editable text — an inline link wrapping a whole
 * heading is painful to edit and vanishes if the text is deleted.)
 *
 * Decorative elements (floral logo top-right, arrow bottom-right) are
 * rendered as CSS pseudo-elements / background-image. They are not in
 * the DOM and so can't be accidentally deleted by an editor.
 *
 * Layout
 *   Mobile (default, < 1024px section width):
 *     Card rounded 40px. flex-direction: column — image on top,
 *     body below. Floral logo sits inline with the eyebrow (top-right
 *     of body). Arrow at bottom-right of body.
 *   Desktop (≥ 1024px section width):
 *     Card rounded 80px. flex-direction: row — image left, body right.
 *     Image rounded only on the left corners. Floral logo absolutely
 *     positioned in the body's top-right corner. Arrow at bottom-right.
 *
 * Breakpoint
 *   container-type is on .lfbc-card-feature so the layout responds to
 *   the section's own width — matches hero/features/5050 patterns so
 *   editor canvas previews are stable regardless of sidebar state.
 */

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

.lfbc-card-feature__card {
	position: relative;
	background-color: var(--wp--preset--color--white);
	border-radius: 40px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/*box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);*/
	transition: box-shadow 200ms ease-out;
}

.lfbc-card-feature__card:has(.lfbc-card-feature__image a[href], .lfbc-card-feature__title a[href]):hover,
.lfbc-card-feature__card:has(.lfbc-card-feature__image a[href], .lfbc-card-feature__title a[href]):focus-within {
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* Image cell — full-width on mobile, rounded only at top to match the
   card's rounded corners. */
.lfbc-card-feature__image {
	margin: 0;
	width: 100%;
}

/* The image's link (the card's stretched-link source) wraps the <img>.
   Make it a block box that fills the image cell so the img sizing chain
   (height: 100% on desktop) still resolves against the figure. */
.lfbc-card-feature__image a {
	display: block;
	height: 100%;
	line-height: 0;
}

/* Height is fluid (not a flat 274px) because this card has no max-width
   cap — its own width tracks the section width directly below the
   1024px container-query breakpoint. A flat height held constant while
   width grows all the way to ~1023px would stretch the crop to an
   extreme letterboxed ratio and cut off subjects' heads. clamp() floors
   at 274px (the original crop, held for container widths up to ~571px)
   and scales up via cqi (1cqi = 1% of this element's own container's
   inline size, i.e. .lfbc-card-feature, which the image's width matches
   almost exactly here), capped at 460px so the ratio never exceeds
   ~2.2:1 before the 1024px handoff to the aspect-ratio-based desktop
   rule. */
.lfbc-card-feature__image img {
	display: block;
	width: 100%;
	height: clamp(274px, 48cqi, 460px);
	object-fit: cover;
	border-radius: 0;
}

/* Captions are not part of this card design — hide any figcaption an
   editor adds without removing it (so it remains in the DOM for
   re-enablement / future variants). */
.lfbc-card-feature__image figcaption {
	display: none;
}

/* Logo-fallback variant — used by the lfbc/featured-news block when the
   featured post has no thumbnail and the site logo stands in. A logo isn't
   a photo, so show it whole (contain) on a branded oatmeal panel with
   padding instead of cover-cropping it into a slice. */
.lfbc-card-feature--logo-fallback .lfbc-card-feature__image {
	background-color: var(--wp--preset--color--oatmeal-500);
}

.lfbc-card-feature--logo-fallback .lfbc-card-feature__image img {
	object-fit: contain;
	padding: 40px;
	box-sizing: border-box;
}

/* Body — text column. Reserves room on the right for the absolutely
   positioned floral logo (top-right) and the bottom-right arrow. */
.lfbc-card-feature__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px 20px 56px;
	box-sizing: border-box;
}

/* Floral logo — decorative, rendered as background-image. On mobile
   it sits in the top-right of the body via absolute positioning. */
.lfbc-card-feature__body::before {
	content: "";
	position: absolute;
	top: 5px;
	right: 20px;
	width: 44px;
	height: 44px;
	background-image: url('../../images/patterns/card-feature-logo.svg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.17));
	pointer-events: none;
}

/* Arrow — decorative pointer at bottom-right of card. mask-image
   recolors a single SVG via background-color (default soft-black,
   poppy on card hover). */
.lfbc-card-feature__card::after {
	content: "";
	position: absolute;
	bottom: 20px;
	right: 24px;
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--soft-black-500);
	-webkit-mask-image: url('../../images/patterns/icons/arrow-right.svg');
	mask-image: url('../../images/patterns/icons/arrow-right.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
	transition: background-color 200ms ease-out;
}

.lfbc-card-feature__card:hover::after,
.lfbc-card-feature__card:focus-within::after {
	background-color: var(--wp--preset--color--poppy-500);
}

/* Hide the decorative arrow when the card carries no link — neither the
   image (new linking) nor the title (legacy linking) has an <a href>.
   WP strips the <a> entirely when no URL is set, so :has() detects it. */
.lfbc-card-feature__card:not(:has(.lfbc-card-feature__image a[href], .lfbc-card-feature__title a[href]))::after {
	display: none;
}

/* Eyebrow — uppercase Noto Sans label. Padded on the right to leave
   room for the floral logo. */
.lfbc-card-feature__eyebrow {
	margin: 0;
	padding-right: 60px; /* clear the 44px logo + breathing room */
	font-family: var(--wp--preset--font-family--noto-sans);
	font-weight: 800;
	font-size: 13px;
	line-height: 1.42;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dusk-500);
}

.lfbc-card-feature__title {
	margin: 0;
	line-height: 1.2;
	color: var(--wp--preset--color--soft-black-500);
	transition: color 200ms ease-out;
}

/* Stretched link — overlay the entire card with the image's anchor so
   any click on the card fires it. The anchor is statically positioned,
   so its absolute ::after resolves against .lfbc-card-feature__card (the
   nearest positioned ancestor) and covers the whole card. The intro
   raises above to stay text-selectable. */
.lfbc-card-feature__image a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

/* Legacy support — cards placed before the image-link refactor carry the
   link as an inline <a> wrapping the title text instead of on the image
   (the pattern is copy-on-insert, so editing the pattern doesn't migrate
   existing content; the lfbc/featured-news block also renders this
   title-link structure). Keep these styled and whole-card-clickable so
   live content doesn't regress. Safe to remove once no card uses a title
   anchor. */
.lfbc-card-feature__title a {
	color: inherit;
	text-decoration: none;
}

.lfbc-card-feature__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.lfbc-card-feature__card:has(.lfbc-card-feature__image a[href], .lfbc-card-feature__title a[href]):hover .lfbc-card-feature__title,
.lfbc-card-feature__card:has(.lfbc-card-feature__image a[href], .lfbc-card-feature__title a[href]):focus-within .lfbc-card-feature__title {
	color: var(--wp--preset--color--poppy-900);
}

.lfbc-card-feature__intro {
	position: relative;
	z-index: 2; /* sits above the stretched-link overlay so text is selectable */
	margin: 0;
	line-height: 1.5;
	color: var(--wp--preset--color--soft-black-400);
	font-size: 16px; /* mobile body-s; desktop steps up to 18px below */
}

/* -------------------------------------------------------------------------
 * Desktop: section ≥ 1024px wide. Card flips to a horizontal row,
 * image rounds on the left side only, body padding grows.
 * ------------------------------------------------------------------------- */
@container (min-width: 1024px) {

	.lfbc-card-feature {
		padding: 20px 40px;
	}

	.lfbc-card-feature__card {
		border-radius: 80px;
		flex-direction: row;
		align-items: stretch;
	}

	/* Lock the figure to the design's 676 × 507 ratio. Width is 50% of
	   the card, so the figure's height is determined by aspect-ratio.
	   This sets the card's natural height; the body stretches to match
	   via align-items: stretch on the card. */
	.lfbc-card-feature__image {
		flex: 0 0 50%;
		width: 50%;
		max-width: 676px;
		aspect-ratio: 676 / 507;
	}

	.lfbc-card-feature__image img {
		height: 100%;
	}

	.lfbc-card-feature__body {
		flex: 1 1 0;
		justify-content: center;
		gap: 20px;
		padding: 40px 88px 64px 40px;
	}

	.lfbc-card-feature__body::before {
		top: 40px;
		right: 40px;
		width: 57px;
		height: 56px;
	}

	.lfbc-card-feature__card::after {
		bottom: 40px;
		right: 32px;
		width: 24px;
		height: 24px;
	}

	.lfbc-card-feature__eyebrow {
		padding-right: 80px;
	}

	.lfbc-card-feature__intro {
		font-size: 18px;
	}
}