/*
 * `blog/lies` — trois articles a lire ensuite, choisis par categorie et
 * mots-cles communs (Support\BlogPosts::related).
 *
 * La carte est celle de `blog/archive` (`compositions/blog/carte.php`) : ses
 * regles sont les memes, sous la racine de ce produit — BlogLiesTest garde
 * que les deux feuilles ne divergent pas.
 */
.ivy-blog--lies {
	display: grid;
	gap: 2.5rem;
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--lies .ivy-blog__head {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto;
	align-items: end;
	gap: 1rem 2rem;
}

.ivy-blog--lies .ivy-blog__eyebrow {
	grid-column: 1;
	margin: 0;
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ivy-eyebrow-color, var( --ivy-muted, currentColor ) );
}

.ivy-blog--lies .ivy-blog__all {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
}

.ivy-blog--lies .ivy-blog__title {
	grid-column: 1;
	margin: 0;
	color: var( --ivy-title-color, var( --ivy-ink, currentColor ) );
}

.ivy-blog--lies .ivy-blog__all {
	font-weight: 700;
	color: var( --ivy-cta-color, var( --ivy-accent, currentColor ) );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ivy-blog--lies .ivy-blog__card-read {
	font-weight: 700;
	color: var( --ivy-card_read-color, var( --ivy-accent, currentColor ) );
}

.ivy-blog--lies .ivy-blog__card-read::after {
	content: ' →';
	display: inline-block;
	transition: transform 250ms ease;
}

.ivy-blog--lies a:hover .ivy-blog__card-read::after {
	transform: translateX( 0.25rem );
}

/* --- La grille et ses cartes --- */
.ivy-blog--lies .ivy-blog__grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ivy-blog--lies .ivy-blog__card[hidden] {
	display: none;
}

.ivy-blog--lies .ivy-blog__card-link {
	display: grid;
	grid-template-rows: auto 1fr;
	block-size: 100%;
	padding: 0.625rem;
	border: 1px solid var( --ivy-line, currentColor );
	border-radius: var( --ivy-radius-surface, 1.25rem );
	background-color: var( --ivy-surface, transparent );
	color: inherit;
	text-decoration: none;
	transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.ivy-blog--lies .ivy-blog__card-link:hover {
	transform: translateY( -0.375rem );
	box-shadow: 0 1.25rem 2.5rem -1.5rem rgb( 0 0 0 / 0.25 );
	border-color: transparent;
}

.ivy-blog--lies .ivy-blog__cover {
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var( --ivy-radius-surface, 1rem );
}

.ivy-blog--lies .ivy-blog__cover:not( .ivy-blog__cover--drawn ) img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.ivy-blog--lies .ivy-blog__card-body {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: 1.125rem 0.875rem 0.75rem;
}

.ivy-blog--lies .ivy-blog__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	overflow: hidden;
	font-size: var( --ivy-font-label );
	color: var( --ivy-card_meta-color, var( --ivy-muted, currentColor ) );
}

/* Le point vit dans l'espace qui precede chaque detail : en debut de ligne,
 * il tombe hors de la boite et se coupe. Aucun point n'ouvre une ligne. */
.ivy-blog--lies .ivy-blog__card-meta > *::before {
	content: '·';
	margin-inline: -0.625rem 0.375rem;
}

.ivy-blog--lies .ivy-blog__card-cat {
	font-weight: 700;
	color: var( --ivy-card_category-color, var( --ivy-accent, currentColor ) );
}

.ivy-blog--lies .ivy-blog__card-title {
	margin: 0;
	color: var( --ivy-card_title-color, var( --ivy-ink, currentColor ) );
	transition: color 200ms ease;
}

.ivy-blog--lies .ivy-blog__card-link:hover .ivy-blog__card-title {
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--lies .ivy-blog__card-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: var( --ivy-font-body );
	color: var( --ivy-card_excerpt-color, currentColor );
}

/* --- La couverture dessinee, sans photo --- */
.ivy-blog--lies .ivy-blog__cover--drawn {
	position: relative;
	display: grid;
	align-content: end;
	gap: 0.625rem;
	padding: clamp( 1.125rem, 2.4vw, 1.75rem );
	isolation: isolate;
}

.ivy-blog--lies .ivy-blog__cover--drawn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient( 80% 90% at 100% 0%, rgb( 255 255 255 / 0.45 ), transparent 60% );
}

.ivy-blog--lies .ivy-blog__cover--v0 {
	background-color: var( --ivy-surface-soft, var( --ivy-surface, transparent ) );
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--lies .ivy-blog__cover--v1 {
	background-color: color-mix( in srgb, var( --ivy-accent, currentColor ) 12%, var( --ivy-surface, transparent ) );
	color: var( --ivy-ink, currentColor );
}

.ivy-blog--lies .ivy-blog__cover--v2 {
	background-color: var( --ivy-deep, currentColor );
	color: var( --ivy-on-deep, canvas );
}

.ivy-blog--lies .ivy-blog__cover-mono {
	position: absolute;
	inset-block-start: clamp( 1rem, 2vw, 1.5rem );
	inset-inline-end: clamp( 1rem, 2vw, 1.5rem );
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: 50%;
}

.ivy-blog--lies .ivy-blog__cover-cat {
	font-size: var( --ivy-font-label );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --ivy-accent, currentColor );
}

.ivy-blog--lies .ivy-blog__cover--v2 .ivy-blog__cover-cat {
	color: var( --ivy-accent-on-deep, currentColor );
}

.ivy-blog--lies .ivy-blog__cover-words {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-family: var( --ivy-hl-font-family, inherit );
	font-size: var( --ivy-font-step );
	line-height: 1.15;
}


@media ( max-width: 1024px ) {
	.ivy-blog--lies .ivy-blog__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 640px ) {
	.ivy-blog--lies .ivy-blog__head {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ivy-blog--lies .ivy-blog__all {
		grid-column: 1;
		grid-row: auto;
		justify-self: start;
	}

	.ivy-blog--lies .ivy-blog__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ivy-blog--lies .ivy-blog__card-link,
	.ivy-blog--lies .ivy-blog__card-read::after {
		transition: none;
	}
}