/**
 * LFBC Card — Horizontal pattern
 *
 * Small horizontal content card: image on the left (50%), title + short
 * intro on the right, and a decorative arrow at the bottom-right of the
 * card. Stacks to a vertical (image-on-top) layout when the card's
 * container is narrower than the horizontal breakpoint, so the card
 * stays readable inside 2-column / narrow placements.
 *
 * 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 stays 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 in the block editor and vanishes if the text is
 * deleted.)
 *
 * Hover: title flips to poppy-900, arrow re-tints to poppy-500, plus
 * a drop-shadow lift — mirrors the Figma "hover" variant.
 *
 * Sizing (mobile-first, per Figma)
 *   Mobile (default, container < 600px):
 *     Column. Card caps at 366px wide, centered. Image is full-width,
 *     fixed 210px tall, with rounded TOP corners (clipped by the card's
 *     overflow:hidden + 40px radius).
 *   Desktop (container ≥ 600px):
 *     Row. Card caps at 660px wide. Image is fixed to the design's
 *     330×210 (doesn't scale with the card/slot width). Image rounds only
 *     on the LEFT corners — again via the card's overflow:hidden clip.
 *
 * Breakpoint
 *   container-type is on .lfbc-card-horizontal (the section) so the
 *   layout responds to the card's own slot — matches hero / features /
 *   5050 / card-feature so editor canvas previews are stable regardless
 *   of sidebar state.
 */

.lfbc-card-horizontal {
	container-type: inline-size;
	padding: 16px 0;
	/* container-type: inline-size implies contain: inline-size, which
	   makes the section's intrinsic inline size 0 (sized as if it had
	   no contents). In a flex parent like core/row, default flex-basis
	   resolves to that 0 and the section collapses to 0 width — the
	   card visually disappears. Explicit width: 100% gives the flex
	   algorithm a definite preferred size to work from. No-op in
	   regular block flow (already the default for block-level). */
	width: 100%;
}

.lfbc-card-horizontal__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 366px;
	margin-inline: auto;
	background-color: var(--wp--preset--color--white);
	border-radius: 40px;
	overflow: hidden;
	transition: box-shadow 200ms ease-out;
}

.lfbc-card-horizontal__card:has(.lfbc-card-horizontal__image a[href], .lfbc-card-horizontal__title a[href]):hover,
.lfbc-card-horizontal__card:has(.lfbc-card-horizontal__image a[href], .lfbc-card-horizontal__title a[href]):focus-within {
	box-shadow: 0 8px 8px rgba(0, 0, 0, 0.15);
}

/* Image — full-width on mobile, fixed 210px height per Figma. Rounded
   corners come from the card's overflow:hidden + 40px radius.
   position:relative makes this the containing block for the absolutely
   positioned <img> below; overflow:hidden clips it to the figure box. */
.lfbc-card-horizontal__image {
	position: relative;
	margin: 0;
	width: 100%;
	height: 210px;
	overflow: hidden;
}

/* 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-horizontal__image a {
	display: block;
	height: 100%;
	line-height: 0;
}

/* The img is taken OUT OF FLOW and stretched to fill its figure, so it
   can never dictate the figure's height — the figure's box size is set
   purely by its own height/min-height + the flex stretch from the body.
   This is what keeps a tall source photo, a broken/missing src, or the
   inline styles WP stamps on an "is-resized" image (width/height/
   aspect-ratio) from blowing the card's height out. !important overrides
   those inline styles; object-fit: cover crops to fill.
   NOTE: the img is absolute against the FIGURE, not the (statically
   positioned) stretched-link <a> — that keeps the a::after overlay
   resolving against the whole card, not just the image. */
.lfbc-card-horizontal__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	border-radius: 0;
}

.lfbc-card-horizontal__image img[src$=".svg"] {
	object-fit: contain;
}

/* Captions aren't part of this card design — hide any figcaption an
   editor adds without removing it. */
.lfbc-card-horizontal__image figcaption {
	display: none;
}

/* Body — title + intro. Reserves bottom space for the absolutely
   positioned arrow (24px arrow + 20px bottom inset + ~8px breathing
   room ≈ 52px). */
.lfbc-card-horizontal__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 32px 32px 60px;
}

.lfbc-card-horizontal__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
   a click anywhere fires it. The anchor is statically positioned, so its
   absolute ::after resolves against .lfbc-card-horizontal__card (the
   nearest positioned ancestor) and covers the whole card. The intro
   raises above to stay selectable. */
.lfbc-card-horizontal__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). Keep these styled and whole-card-clickable so live
   content doesn't regress until it's migrated to the image-link version.
   Safe to remove once no card uses a title anchor. */
.lfbc-card-horizontal__title a {
	color: inherit;
	text-decoration: none;
}

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

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

.lfbc-card-horizontal__intro {
	position: relative;
	z-index: 2; /* above the stretched-link overlay so text is selectable */
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
	color: var(--wp--preset--color--soft-black-400);
}

/* Arrow — decorative pointer at bottom-right of the card. mask-image
   recolors a single shared SVG via background-color (soft-black default,
   poppy on hover). */
.lfbc-card-horizontal__card::after {
	content: "";
	position: absolute;
	bottom: 20px;
	right: 32px;
	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-horizontal__card:hover::after,
.lfbc-card-horizontal__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-horizontal__card:not(:has(.lfbc-card-horizontal__image a[href], .lfbc-card-horizontal__title a[href]))::after {
	display: none;
}

/* -------------------------------------------------------------------------
 * Container ≥ 600px. Card flips to a horizontal row: image left (50%),
 * body right (50%). Card cap lifts from 366px to the design's 660px.
 * ------------------------------------------------------------------------- */
@container (min-width: 600px) {

	.lfbc-card-horizontal__card {
		flex-direction: row;
		align-items: stretch;
		max-width: 660px;
	}

	/* Image cell — width fixed to the design's 330px so it never scales
	   with the card/slot width. Height floors at 210px but stretches taller
	   (via align-items: stretch on the card) when the body's text runs long,
	   so the card never shows dead space beside a tall body. object-fit:
	   cover on the img keeps it filled at any height. */
	.lfbc-card-horizontal__image {
		flex: 0 0 330px;
		width: 330px;
		height: auto;
		min-height: 210px;
	}

	.lfbc-card-horizontal__body {
		flex: 1 1 0;
		justify-content: center;
		padding: 32px 32px 60px;
	}
}