/* Feuille « maillage » : chargée uniquement si un bloc de maillage (wl-seo) s'affiche (BLOCK_STYLES, inc/assets.php). */

/* ==========================================================================
   Blocs de maillage : articles liés, pages liées (sections pleine largeur)
   et service associé (carte en fin d'article)
   ========================================================================== */

.wl-links {
	padding: var(--wp--preset--spacing--80) var(--wp--style--root--padding-right) var(--wp--preset--spacing--80) var(--wp--style--root--padding-left);
}

.wl-links__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

:root .wl-links__inner > * {
	margin: 0;
}

.wl-links__heading {
	max-width: 44rem;
}

.wl-links__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	padding: 0;
	list-style: none;
}

:root .wl-links__grid {
	margin-top: var(--wp--preset--spacing--30);
}

/* Carte entière cliquable (lien étiré du titre). */
.wl-links__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wl-line);
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--color--base);
	transition: border-color var(--wl-ease), box-shadow var(--wl-ease), transform var(--wl-ease);
}

.wl-links__card:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 45%, transparent);
	box-shadow: var(--wp--custom--shadow--medium);
	transform: translateY(-2px);
}

.wl-links__card:has(a:focus-visible) {
	outline: 2px solid var(--wl-focus);
	outline-offset: 3px;
}

.wl-links__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Sans image à la une : dégradé de marque sur grille (comme les cartes du blog). */
.wl-links__media--empty {
	aspect-ratio: 16 / 10;
	background:
		linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 2rem 2rem,
		linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px) 0 0 / 2rem 2rem,
		radial-gradient(circle at 80% 20%, rgb(94 230 255 / 0.35), transparent 50%),
		var(--wp--preset--gradient--marque-fonce);
}

.wl-links__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
}

:root .wl-links__body > * {
	margin: 0;
}

.wl-links__meta,
.wl-links__text {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.wl-links__title {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.02em;
}

.wl-links__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wl-links__card .wl-links__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wl-links__card .wl-links__title a:focus-visible {
	outline: none;
}

.wl-links__card:hover .wl-links__title a {
	color: var(--wp--preset--color--accent);
}

/* Pages liées : flèche en pied de carte. */
.wl-links--pages .wl-links__body::after {
	content: "→";
	content: "→" / "";
	margin-top: auto;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	transition: translate var(--wl-ease);
}

.wl-links--pages .wl-links__card:hover .wl-links__body::after {
	translate: 4px 0;
}

/* Service associé : carte dans la colonne de l'article, sans marge latérale propre. */
.wl-links--service {
	padding: 0;
}

:root .wl-links--service {
	margin-top: var(--wp--preset--spacing--60);
}

.wl-links--service .wl-links__inner {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent) 30%, transparent);
	border-radius: var(--wp--custom--radius--large);
	background:
		radial-gradient(28rem circle at 100% 0%, color-mix(in srgb, var(--wp--preset--color--accent-soft) 90%, transparent), transparent 70%),
		var(--wp--preset--color--base);
}

.wl-links--service .wl-links__heading {
	font-size: var(--wp--preset--font-size--x-large);
}

.wl-links__offer {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

:root .wl-links__offer > * {
	margin: 0;
}

:root .wl-links__offer .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}

.wl-links__offer .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.wl-links__card:hover {
		transform: none;
	}
}