/**
 * LFBC Card — Regular pattern
 *
 * Standard content card: landscape image, title, intro paragraph, and
 * an optional "Open Call" badge in the footer. 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 image's Alt text doubles as the link's
 * accessible name, so editors set it to match the title; the title stays
 * plain editable text. Same approach as card-feature.
 *
 * The arrow at the bottom-right is a CSS pseudo (mask-image so we can
 * recolor a single SVG via background-color). The badge is an optional
 * paragraph — delete the .lfbc-card-regular__badge block if the card
 * doesn't need one.
 *
 * Sizing (mobile-first)
 *   Mobile (default): card caps at 250px wide, centered. Matches the
 *     390px-screen spec.
 *   ≥ 640px viewport (sm+): cap is lifted; card fills its container.
 *     When this pattern is used inside the future "card-regular-grid"
 *     section pattern, that section's CSS grid sets the cell width
 *     (2-up at sm, 3-up at lg).
 */

.lfbc-card-regular {
	padding: 20px 0;
	display: flex;
	justify-content: center;
}

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

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

/* Image — locked to the design's 320:204 landscape aspect; rounded
   top corners come from the card's overflow:hidden + border-radius. */
.lfbc-card-regular__image {
	margin: 0;
	width: 100%;
}

/* The image's link (the card's stretched-link source) wraps the <img>.
   Make it a block box so it doesn't add inline whitespace and the img
   sizing rules below apply unchanged. */
.lfbc-card-regular__image a {
	display: block;
	line-height: 0;
}

.lfbc-card-regular__image img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 162px;
	aspect-ratio: 403 / 257;
	object-fit: cover;
	border-radius: 0;
}

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

/* Body — title + intro. Grows to fill available vertical space so the
   footer pins to the bottom when cards share row height (used in the
   grid section pattern). */
.lfbc-card-regular__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 24px 16px;
}

.lfbc-card-regular__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.
   The anchor is statically positioned, so its absolute ::after resolves
   against .lfbc-card-regular__card and covers the whole card. Intro and
   badge are raised above so their hit areas / text selection stay
   intact. */
.lfbc-card-regular__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. Safe to remove once no card uses a title
   anchor. */
.lfbc-card-regular__title a {
	color: inherit;
	text-decoration: none;
}

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

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

.lfbc-card-regular__intro {
	position: relative;
	z-index: 2; /* sits 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);
}

/* Optional "Open Call" pill badge. Pinned to the bottom-left of the
   card. Delete the paragraph block to omit it. */
.lfbc-card-regular__badge {
	position: relative;
	z-index: 2; /* above the stretched-link overlay */
	margin: 0 auto 24px 24px; /* bottom-left, leaves room on the right for the CSS arrow */
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 100px;
	background-color: var(--wp--preset--color--nootka-rose-900);
	color: var(--wp--preset--color--white);
	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;
	transition: background-color 200ms ease-out;
}

.lfbc-card-regular__card:has(.lfbc-card-regular__image a[href], .lfbc-card-regular__title a[href]):hover .lfbc-card-regular__badge,
.lfbc-card-regular__card:has(.lfbc-card-regular__image a[href], .lfbc-card-regular__title a[href]):focus-within .lfbc-card-regular__badge {
	background-color: var(--wp--preset--color--poppy-900);
}

/* When the badge is absent, the body's padding alone provides the
   bottom whitespace. When the badge is present, push it up against
   the bottom of the card. The flex column already does this via
   margin-bottom on the badge + body's flex-grow. */

/* Arrow — bottom-right, mask-image so the single shared SVG can be
   recolored via background-color. */
.lfbc-card-regular__card::after {
	content: "";
	position: absolute;
	bottom: 24px;
	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-regular__card:hover::after,
.lfbc-card-regular__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-regular__card:not(:has(.lfbc-card-regular__image a[href], .lfbc-card-regular__title a[href]))::after {
	display: none;
}

/* Reserve bottom space for the CSS arrow so it never overlaps the
   intro / badge. 24px arrow size + 24px bottom inset + 8px breathing
   room ≈ 56px on mobile, scales up at sm+. */
.lfbc-card-regular__card {
	padding-bottom: 56px;
}

/* -------------------------------------------------------------------------
 * ≥ 640px viewport (sm+). Raise the cap to the desktop max of 426px
 * (matches the design). The section grid (or whatever parent layout
 * block places this) sets the actual cell width; the card never
 * grows beyond 426px even when the cell is wider.
 * ------------------------------------------------------------------------- */
@media (min-width: 640px) {

	.lfbc-card-regular__card {
		max-width: 426px;
		padding-bottom: 72px;
	}

	.lfbc-card-regular__body {
		gap: 8px;
		padding: 20px 32px 16px;
	}

	.lfbc-card-regular__badge {
		margin: 0 auto 32px 32px;
	}

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

@media (min-width: 1024px) {
		.lfbc-card-regular__image img {
			max-height: 272px;
		}
}

/* -------------------------------------------------------------------------
 * Buttons inside the card (client opt-in). Editors may drop any
 * `core/buttons` block (Primary, Ghost, Small, or the 5050 variant) into
 * the card. Two problems to solve for the narrow card:
 *   1. Some button rules set a wide min-width (e.g. 5050.css pins 225px),
 *      which overflows the card's ~202px mobile content box. We reset it
 *      and let buttons stack full-width.
 *   2. The image's stretched-link ::after (z-index 1) covers the whole
 *      card and would swallow button clicks — so we raise the buttons
 *      above it, matching the intro/badge z-index.
 * We also trim padding / font-size as the card gets tighter so longer
 * labels don't wrap awkwardly.
 * ------------------------------------------------------------------------- */
.lfbc-card-regular__card .wp-block-buttons {
	position: relative;
	z-index: 2; /* above the image's stretched-link ::after (z-index 1) */
	width: 100%;
	margin-top: 0;
}

/* When the buttons block is dropped straight into the card (a sibling of
   __body rather than inside it), it needs the body's horizontal insets so
   it lines up with the title/intro. Harmless when nested inside __body. */
.lfbc-card-regular__card > .wp-block-buttons {
	padding-inline: 24px;
	padding-bottom: 24px;
}

.lfbc-card-regular__card .wp-block-buttons .wp-block-button {
	width: 100%;
}

.lfbc-card-regular__card .wp-block-buttons .wp-block-button .wp-block-button__link {
	width: 100%;
	min-width: 0; /* reset wide mins (e.g. 5050.css's 225px) that overflow the card */
	margin: 0;
	/* Default button padding is 14px 20px (theme.json); tighten so long
	   labels don't wrap awkwardly inside the ~202px mobile content box. */
	padding: 10px 14px;
	font-size: 14px;
}

@media (min-width: 640px) {

	.lfbc-card-regular__card > .wp-block-buttons {
		padding-inline: 32px;
		padding-bottom: 32px;
	}

	/* Card cap rises to 426px — room to restore near-default button sizing. */
	.lfbc-card-regular__card .wp-block-buttons .wp-block-button .wp-block-button__link {
		padding: 12px 18px;
		font-size: 16px;
	}
}

/* ≥1024px: full-width buttons look stretched on the wide card, so pull
   them in to 90% and centre them. Below this they stay 100%. */
@media (min-width: 1024px) {

	.lfbc-card-regular__card .wp-block-buttons .wp-block-button .wp-block-button__link {
		width: 90%;
		margin: 0 auto;
	}
}