/**
 * Post card styles
 *
 * Frame of the `owlic/post-card` block, drawn after the cards of the blog grid:
 * a card with a light border, the image inset and rounded, the text
 * underneath. The card carries the background, the radius and the spacing
 * itself, so the stock blocks it composes stay unmodified — a post with no
 * featured image simply renders one block less.
 *
 * The block styles only lay the card out: `horizontal` puts the image on the
 * left, square; `featured` spreads it over the whole card and lays the text on
 * it, in a panel. The colours come from the section holding the card: white
 * on a light one, vert-forêt on a dark one, whatever the style.
 *
 * Loaded on the front with the block and in the editor canvas
 * (inc/Assets/BlockStylesheets.php).
 */

.wp-block-owlic-post-card {
	/* Local spacing, fluid from 8px on a phone to 12px on a wide screen. The
	   inset is where the text starts, the padding of the text group added; the
	   button spans the card and pads its label to the same inset. */
	--post-card-padding: clamp(0.5rem, 0.4034rem + 0.396vw, 0.75rem);
	--post-card-inset: calc(var(--post-card-padding) + var(--wp--preset--spacing--12));
	position: relative;
	display: flex;
	flex-direction: column;
	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%;
	padding: var(--post-card-padding);
	border: 1px solid var(--post-card-border-color, var(--wp--custom--color--border));
	border-radius: var(--wp--preset--border-radius--card);
	background-color: var(--post-card-background, var(--wp--custom--color--surface-raised));
}

/* 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 styles
   of that class assume a row with the block gap, though: they centre the
   children, let them wrap and space them by 0, the theme's block gap. They
   print after this sheet, hence the class in the selector. */
.wp-block-owlic-post-card.is-layout-flex {
	align-items: stretch;
	flex-wrap: nowrap;
	gap: var(--post-card-padding);
}

/* Featured image: inset in the card, with a radius of its own. */
.wp-block-owlic-post-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--sm);
}

.wp-block-owlic-post-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. 3:2 is the ratio of the featured
	   images of the blog. An aspect ratio set on the block wins, as an inline
	   style. */
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Text group: 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-post-card > .wp-block-group {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
	padding: var(--wp--preset--spacing--12);
}

.wp-block-owlic-post-card .wp-block-post-date {
	margin: 0;
	color: var(--post-card-date-color, var(--wp--preset--color--gray-600));
}

.wp-block-owlic-post-card .wp-block-post-title {
	margin: 0;
	font-weight: 500;
}

.wp-block-owlic-post-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: 0;
	padding: 0;
}

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

.wp-block-owlic-post-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 and of the card, edge to edge —
	   setting the width on the button itself would only shift it left. It
	   leans into the bottom padding the same way. */
	width: auto;
	margin: auto calc(var(--post-card-inset) * -1) calc(var(--post-card-padding) * -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. */
	padding-top: var(--wp--preset--spacing--12);
}

/* 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 clips its own
   content — and anchors to the card.

   It reads as a ghost button on the card, its label lined up with the text.
   The colours are set on the link itself, as the dark sections hand their
   buttons the gradient on the link too, and the hover animation positions it
   with a class of its own. The heaviest of those theme rules, a dark cover's,
   weighs three classes: four here. */
.wp-block-owlic-post-card .wp-block-post-excerpt__more-text > .wp-block-post-excerpt__more-link.wp-block-button__link {
	position: static;
	width: 100%;
	padding-inline: var(--post-card-inset);
	--button-background-color: transparent;
	--button-color: var(--post-card-button-color, var(--wp--preset--color--foreground));
	--button-icon-background-color: var(--post-card-icon-background-color, var(--wp--preset--color--beige-light));
	--button-icon-color: var(--post-card-button-color, var(--wp--preset--color--foreground));
}

.wp-block-owlic-post-card .wp-block-post-excerpt__more-link:active {
	transform: none;
}

/* 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-post-card .wp-block-button__icon--right {
	margin-right: calc(var(--wp--preset--spacing--12) * -1);
}

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

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

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

/* Colours of the section holding the card. Each section with a background sets
   them, so the closest one decides — cards in a light group inside a dark
   section stay light. A cover carries its background on its overlay span.

   A light section resets them to `initial`, which sends every use back to its
   fallback: white card, grey date, black focus ring. A dark section turns the
   card vert-forêt; the theme already gives that section a dark scheme, which
   the card inherits, so the title and excerpt turn white on their own. The
   date takes a light beige, the grey reading at 2.3:1 on this green. The ring
   sits outside the card, on the section: white. */
.has-background,
.wp-block-cover:has(> .wp-block-cover__background) {
	--post-card-background: initial;
	--post-card-border-color: initial;
	--post-card-date-color: initial;
	--post-card-button-color: initial;
	--post-card-icon-background-color: initial;
	--post-card-outline-color: initial;
}

.has-vert-foret-background-color,
.has-bleu-petrole-background-color,
.has-dark-teal-gradient-background,
[style*="--wp--preset--gradient--dark-teal"],
.wp-block-cover:has(> .wp-block-cover__background:is(.has-vert-foret-background-color, .has-bleu-petrole-background-color, .has-dark-teal-gradient-background)) {
	--post-card-background: var(--wp--preset--color--vert-foret);
	--post-card-date-color: var(--wp--preset--color--beige-dark);
	--post-card-button-color: var(--wp--preset--color--white);
	--post-card-icon-background-color: var(--wp--custom--color--veil-inverse);
	--post-card-outline-color: var(--wp--preset--color--white);
}

/* Horizontal: the image on the left, square, the text on the right. */
.wp-block-owlic-post-card.is-style-horizontal {
	flex-direction: row;
}

.wp-block-owlic-post-card.is-style-horizontal .wp-block-post-featured-image {
	flex: 0 0 38%;
	align-self: flex-start;
}

.wp-block-owlic-post-card.is-style-horizontal .wp-block-post-featured-image img {
	aspect-ratio: 1;
}

/* À la une: the image covers the whole card, darkened towards the bottom
   left, and the text sits on it in a panel — sand on a light section, the
   card colour on a dark one. Below the width where the
   columns stack, the panel would hide the image: the card keeps the vertical
   layout there. */
@media (min-width: 782px) {
	.wp-block-owlic-post-card.is-style-featured {
		/* Keeps the image, pushed below the panel, above the section. */
		isolation: isolate;
		overflow: hidden;
		padding: var(--wp--preset--spacing--48);
		border: 0;
		border-radius: var(--wp--preset--border-radius--lg);
		/* The panel is the card here: the text starts at its padding, fluid
		   from 12px to 24px. */
		--post-card-inset: clamp(0.75rem, 0.4604rem + 1.1881vw, 1.5rem);
	}

	.wp-block-owlic-post-card.is-style-featured .wp-block-post-featured-image {
		position: absolute;
		inset: 0;
		z-index: -1;
		border-radius: 0;
	}

	.wp-block-owlic-post-card.is-style-featured .wp-block-post-featured-image::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(213deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0) 100%);
	}

	.wp-block-owlic-post-card.is-style-featured .wp-block-post-featured-image img {
		height: 100%;
		aspect-ratio: auto;
	}

	/* The panel keeps its own height, whatever the height of the card. */
	.wp-block-owlic-post-card.is-style-featured > .wp-block-group {
		flex: none;
		width: 40%;
		padding: var(--post-card-inset);
		border-radius: var(--wp--preset--border-radius--card);
		background-color: var(--post-card-background, var(--wp--preset--color--sand));
	}

	/* 12px under the button, as on the other cards. */
	.wp-block-owlic-post-card.is-style-featured .wp-block-post-excerpt__more-text {
		margin-bottom: calc((var(--post-card-inset) - var(--wp--preset--spacing--12)) * -1);
	}

	/* The icon stands out from the sand panel in white. */
	.wp-block-owlic-post-card.is-style-featured .wp-block-post-excerpt__more-link.wp-block-button__link {
		--button-icon-background-color: var(--post-card-icon-background-color, var(--wp--preset--color--white));
	}
}