/**
 * LFBC Card — Small pattern
 *
 * Compact content card: landscape image, a category-tag eyebrow, and a
 * title. No intro paragraph or "Open Call" badge — that's Card — Regular.
 * 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-regular /
 * card-feature.
 *
 * The arrow at the bottom-right is a CSS pseudo (mask-image so we can
 * recolor a single shared SVG via background-color).
 *
 * Sizing (mobile-first)
 *   Mobile (default): card caps at 251px wide, centered. Matches the
 *     390px-screen spec.
 *   ≥ 640px viewport (sm+): cap lifts to the 320px desktop spec, paddings
 *     and arrow grow. When this pattern is used inside a card-grid section
 *     pattern, that grid sets the cell width; the card never grows beyond
 *     320px even when the cell is wider.
 *
 * Title size comes from the display-5-responsive preset (fluid 18px → 20px),
 * applied via the has-display-5-responsive-font-size class in the pattern.
 */

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

.lfbc-card-small__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 251px;
	margin-inline: auto;
	padding-bottom: 50px; /* reserve room for the bottom-right CSS arrow */
	background-color: var(--wp--preset--color--white);
	border-radius: 40px;
	overflow: hidden;
	transition: box-shadow 200ms ease-out;
}

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

/* Image — landscape, locked to the design's 320:204 aspect; rounded top
   corners come from the card's overflow:hidden + border-radius. */
.lfbc-card-small__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-small__image a {
	display: block;
	line-height: 0;
}

.lfbc-card-small__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 320 / 204;
	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-small__image figcaption {
	display: none;
}

/* Logo-fallback variant — used by the lfbc/news-cards block when a post has
   no featured image 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. Mirrors the card-feature logo-fallback treatment. */
.lfbc-card-small--logo-fallback .lfbc-card-small__image {
	background-color: var(--wp--preset--color--oatmeal-500);
}

.lfbc-card-small--logo-fallback .lfbc-card-small__image img {
	object-fit: contain;
	padding: 24px;
	box-sizing: border-box;
}

/* Body — eyebrow + title. Grows to fill available vertical space so the
   arrow pins to the bottom when cards share row height in a grid. */
.lfbc-card-small__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 20px 16px;
}

/* Category-tag eyebrow — uppercase Noto Sans label, dusk blue. */
.lfbc-card-small__eyebrow {
	margin: 0;
	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-small__title {
	margin: 0;
	line-height: 1.3;
	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-small__card and covers the
   whole card. */
.lfbc-card-small__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-small__title a {
	color: inherit;
	text-decoration: none;
}

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

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

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

/* -------------------------------------------------------------------------
 * ≥ 640px viewport (sm+). Raise the cap to the 320px desktop spec and grow
 * paddings + arrow to match the design.
 * ------------------------------------------------------------------------- */
@media (min-width: 640px) {

	.lfbc-card-small__card {
		max-width: 320px;
		padding-bottom: 64px;
	}

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

	.lfbc-card-small__title {
		line-height: 1.2;
	}

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