/**
 * Critère card styles
 *
 * Frame of the `owlic/critere-card` block: the card carries the background, the
 * radius and the spacing itself, so the four stock blocks it composes stay
 * unmodified — a card whose critère has no featured image simply renders one
 * block less.
 *
 * Loaded on the front with the block and in the editor canvas
 * (inc/critere-card.php).
 */

/* The card stands out from the section holding it: white, or beige on a white
   section. Each section with a background sets the colour, so the closest one
   decides — cards in a beige group inside a white section stay white. A cover
   carries its background on its overlay span. */
.has-background:not(.has-white-background-color),
.wp-block-cover:has(> .wp-block-cover__background:not(.has-white-background-color)) {
	--critere-card-background: var(--wp--custom--color--surface-raised);
}

.has-white-background-color,
.wp-block-cover:has(> .wp-block-cover__background.has-white-background-color) {
	--critere-card-background: var(--wp--custom--color--surface-sunken);
}

.wp-block-owlic-critere-card {
	position: relative;
	display: flex;
	flex-direction: column;
	/* The card carries `is-layout-flex` so the theme keeps its flow margins off
	   its children — that exclusion is what the layout classes drive. The core
	   base styles of that class assume a row, though: they centre the children
	   and let them wrap, which would shrink the image and the text group to
	   their content width. */
	align-items: stretch;
	flex-wrap: nowrap;
	box-sizing: border-box;
	/* Fills its grid cell, so cards in a row share one height and their buttons
	   line up whatever the excerpt length. */
	height: 100%;
	/* Clips the card to its radius, and bounds the click overlay below. */
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--card);
	background-color: var(--critere-card-background, var(--wp--custom--color--surface-raised));
	/* The excerpt link reads as a ghost button on the card, as on post cards. */
	--button-background-color: transparent;
	--button-color: var(--wp--preset--color--foreground);
}

/* Featured image: full bleed, rounded at the top only. */
.wp-block-owlic-critere-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--card) var(--wp--preset--border-radius--card) 0 0;
}

.wp-block-owlic-critere-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	/* Cards sit side by side in a grid: without a ratio of their own, images of
	   different heights would break the row. An aspect ratio set on the block
	   wins, as an inline style. */
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Mascotte: sits against the right edge of the image and hangs past its bottom.
   The Figma card measures that inset at 14px; 24px is the value kept here, and
   it drives both the gap to the right edge and the overhang.

   It takes no room in the flow — its own negative margins cancel its height —
   so the badge below still measures from the bottom edge of the image. */
.wp-block-owlic-critere-card .wp-block-owlic-critere-mascotte {
	--owlic-mascotte-size: 93px;
	--owlic-mascotte-overhang: 24px;
	position: relative;
	z-index: 1;
	align-self: flex-end;
	width: var(--owlic-mascotte-size);
	margin-right: var(--owlic-mascotte-overhang);
}

/* The overhang only makes sense against an image — without one, the mascotte
   would hang above the top of the card, as the badge would. */
.wp-block-owlic-critere-card .wp-block-post-featured-image + .wp-block-owlic-critere-mascotte {
	margin-top: calc(var(--owlic-mascotte-overhang) - var(--owlic-mascotte-size));
	margin-bottom: calc(var(--owlic-mascotte-overhang) * -1);
}

/* The text group carries the positioning context: the `critere` block style
   pins `is-style-critere-heading` — the badge — to its top edge, so the badge
   straddles the bottom of the image without a margin of its own. The group also
   holds the inner spacing of the card.

   Flex rather than the group's own layout, so the children stay full width and
   the excerpt can push the button to the bottom edge. */
.wp-block-owlic-critere-card .is-style-critere {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24) var(--wp--preset--spacing--24);
}

.wp-block-owlic-critere-card .wp-block-post-title {
	margin: 0;
}

.wp-block-owlic-critere-card .wp-block-post-excerpt {
	/* Fills the rest of the group, so the button can hold the bottom edge. */
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: var(--wp--preset--spacing--8) 0 0;
	padding: 0;
}

.wp-block-owlic-critere-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

article.wp-block-owlic-critere-card .wp-block-post-excerpt__more-text {
	/* An auto width stretched by negative inline margins is what widens the
	   button past the padding of the group, so it spans the card edge to edge —
	   setting the width on the button itself would only shift it left. */
	width: auto;
	margin-inline: calc(var(--wp--preset--spacing--24) * -1);
	/* Buttons line up across a row of cards whatever the excerpt length; the
	   padding keeps a gap above when the excerpt fills the card. */
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--16);
}

/* The button covers the whole card, so the card is clickable as a block.

   The link stays `static` so its overlay escapes the button, which carries an
   `overflow: hidden` of its own. The overlay then belongs to the nearest
   positioned ancestor — the text group, since `is-style-critere` positions it
   to hold the badge — which would leave the image and the mascotte outside the
   click target. Hence an inset far larger than any card, bounded by the
   `overflow: hidden` of the card itself. */
.wp-block-owlic-critere-card .wp-block-post-excerpt__more-link {
	position: static;
	width: 100%;
}

/* The arrow leans into the padding of the button, as the size variants of the
   theme's own buttons do. Scoped to the card: elsewhere the button keeps its
   stock spacing. */
.wp-block-owlic-critere-card .wp-block-button__icon--right {
	margin-right: calc(var(--wp--preset--spacing--12) * -1);
}

article.wp-block-owlic-critere-card .wp-block-post-excerpt__more-link::after {
	content: "";
	position: absolute;
	inset: -100vmax;
	z-index: 2;
}

/* The focus ring belongs to the card, since the whole card is the target. */
.wp-block-owlic-critere-card .wp-block-post-excerpt__more-link:focus-visible {
	outline: none;
}

.wp-block-owlic-critere-card:has(.wp-block-post-excerpt__more-link:focus-visible) {
	outline: 2px dotted var(--outline-color, var(--wp--preset--color--black));
	outline-offset: 3px;
}