/**
 * Imageless-card fallback — see inc/card-fallback.php for the why.
 *
 * Near-white ground, colour-driven site mark + label. Substituted by a
 * render_block filter wherever core/post-featured-image would otherwise render
 * nothing, and emitted directly by the Load More renderers.
 *
 * The colour arrives as the inline custom property `--kd-card-fallback-color`,
 * and the SLOT GEOMETRY (aspect-ratio, radius) also arrives inline, copied off
 * the block being replaced. Almost nothing here is sized on purpose: each call
 * site (news card, featured hero, …) owns its geometry.
 */

.kd-card-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--kd-gap-normal);
	background-color: var(--kd-color-neutral-100);

	/*
	 * NOT `100%`, and NOT `auto`.
	 *
	 * The slot this element replaces is INSET, not bled (card-grid.css gives
	 * `.kd-card .kd-card__image` a side margin). `100%` resolves against the
	 * card's full width and then ADDS the margins, so the tile overflows;
	 * `auto` shrink-to-fits and its percentage-sized children collapse it to 0.
	 * `stretch` fills the containing block MINUS the margins, and is a DEFINITE
	 * size so the inline `aspect-ratio` can transfer to the height.
	 *
	 * Three declarations, each browser takes the last one it can parse: Firefox
	 * `-moz-available`, older Blink/WebKit `-webkit-fill-available`, current
	 * browsers the standard `stretch`.
	 */
	width: -moz-available;
	width: -webkit-fill-available;
	width: stretch;
	overflow: hidden;

	/*
	 * DO NOT add `container-type: inline-size` here: inline-size containment
	 * stops the contents contributing a block size, and the aspect-ratio then
	 * has nothing to transfer from — the element collapses to height 0 in the
	 * card grid. Narrow slots are handled by class scoping below instead.
	 */
}

/**
 * The mark. `card-fallback-mask.svg` is a WHITE SHAPE ON TRANSPARENCY, used as
 * an alpha mask so `background-color` supplies the colour — one asset serves
 * every category. -webkit-mask-* is still needed for Safari < 15.4.
 */
.kd-card-fallback__mark {
	width: 24%;

	/* Intrinsic ratio of the source art (331.62 × 337.07) — keeps it undistorted. */
	aspect-ratio: 331.62 / 337.07;
	background-color: var(--kd-card-fallback-color, var(--kd-color-primary));
	-webkit-mask-image: url("../../images/card-fallback-mask.svg");
	mask-image: url("../../images/card-fallback-mask.svg");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/**
 * The label — large bold text, so the 3:1 large-text contrast threshold applies
 * (>= 18.66px bold). Do not reduce size or weight without re-measuring every
 * colour in the `kds_card_fallback_colors` map.
 */
.kd-card-fallback__label {
	font-family: var(--kd-font-heading);
	font-weight: var(--kd-fw-heading);
	font-size: clamp(
		1.25rem,
		2.2vw,
		1.75rem
	); /* 20 → 28px, never below the 18.66px large-text floor */
	line-height: 1.1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
	color: var(--kd-card-fallback-color, var(--kd-color-primary));

	/* Long names must not touch the card edge. */
	max-width: 84%;
	overflow-wrap: break-word;
}