/*
 * Carte de résultat pleine largeur pour les listes d'articles (recherche,
 * archive, accueil du blog) : bandeau violet avec catégorie à gauche,
 * titre/extrait/lien au centre, image à droite.
 */
.solea-post-list .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.solea-post-list .wp-block-post-template > li {
	margin: 0;
}

.solea-post-card {
	display: flex;
	align-items: stretch;
	min-height: 180px;
	border-radius: 24px;
	overflow: hidden;
	background: var(--wp--preset--color--brand-purple-dark);
	color: var(--wp--preset--color--base);
}

.solea-post-card.solea-card-clickable {
	cursor: pointer;
}

.solea-post-card > * {
	margin-block-start: 0 !important;
}

/* Alterne les deux teintes de violet du thème d'une carte à l'autre. */
.solea-post-list .wp-block-post-template > li:nth-child(even) .solea-post-card {
	background: var(--wp--preset--color--brand-purple);
}

.solea-post-card__label {
	flex: 0 0 20%;
	position: relative;
	display: flex;
	align-items: center;
	padding: 32px 24px 32px 40px;
}

.solea-post-card__label::after {
	content: "";
	position: absolute;
	top: 15%;
	right: 0;
	width: 1px;
	height: 70%;
	background: rgba(255, 255, 255, 0.2);
}

/* La colonne label affiche l'accroche (solea/post-tagline) à la place de la
 * catégorie ; on la limite à 4 lignes pour garder des cartes de hauteur
 * homogène quelle que soit la longueur de l'accroche. */
.solea-post-card__label .solea-post-tagline {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-weight: 800;
	font-size: 1.375rem;
	line-height: 1.4;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}

.solea-post-card__content {
	flex: 1 1 auto;
	min-width: 0;
	padding: 32px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.solea-post-card__content > * {
	margin-block-start: 0 !important;
}

.solea-post-card__content .wp-block-post-title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.solea-post-card__content .wp-block-post-title a {
	color: var(--wp--preset--color--base) !important;
	text-decoration: none;
}

.solea-post-card__content .wp-block-post-excerpt {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.125rem;
	font-weight: 400;
}

.solea-post-card__content .wp-block-post-excerpt p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.solea-post-card__content .wp-block-read-more {
	color: var(--wp--preset--color--base) !important;
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
}

.solea-post-card__content .wp-block-read-more:hover {
	text-decoration: underline;
}

/* solea/post-tagline (comme core/post-featured-image) ne rend rien pour les
 * pages ou les articles sans accroche renseignée : sans cette règle, le
 * conteneur .solea-post-card__label reste dans le DOM (vide) et réserve tout
 * de même sa largeur, ce qui laisse une colonne creuse sur les résultats de
 * recherche concernant des pages (ex. gabarit page-service) — contrairement
 * aux cartes du blog où seuls des articles avec accroche sont listés.
 * :has(*) cible l'absence d'enfant élément, en ignorant les nœuds texte
 * (retours à la ligne) laissés par le HTML des blocs. */
.solea-post-card__label:not(:has(*)) {
	display: none;
}

/* core/post-featured-image ne rend rien si l'article n'a pas d'image mise en
 * avant : la colonne disparaît simplement, le contenu garde toute la place.
 *
 * Double sélecteur (.solea-post-card .solea-post-card__image) pour l'emporter
 * sur la marge par défaut de <figure> posée par le CSS natif du bloc
 * (.wp-block-post-featured-image, même spécificité, mais chargé après) :
 * cette marge réduisait la hauteur du <figure> par rapport à la carte,
 * laissant un espace vide en haut/bas de l'image. Position absolute + inset:0
 * fait remplir l'image exactement la boîte du <figure> quel que soit son
 * ratio d'origine, sans dépendre du bon calcul du stretch flex.
 */
.solea-post-card .solea-post-card__image {
	position: relative;
	flex: 0 0 260px;
	align-self: stretch;
	margin: 0;
}

.solea-post-card .solea-post-card__image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* templates/search.html reorders the card (image | label | content) so the
 * featured image reads on the left, matching the search results maquette
 * instead of the archive/home card's image-on-the-right layout. */
.solea-post-card--search .solea-post-card__image {
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
	.solea-post-card--search .solea-post-card__image {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}
}

/* Message "aucun résultat" (templates/search.html) affiché à la place de la liste de cartes. */
.solea-post-list .wp-block-query-no-results {
	padding: 24px;
	border-radius: 16px;
	background: var(--wp--preset--color--brand-surface);
	color: var(--wp--preset--color--brand-text-muted);
}

@media (max-width: 768px) {
	.solea-post-card {
		flex-wrap: wrap;
	}

	.solea-post-card__label {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		padding: 16px 20px;
		flex: 1;
	}

	.solea-post-card__label::after {
		content: none;
	}

	.solea-post-card__image {
		order: -1;
	}

	.solea-post-card__content {
		flex: 1 1 100%;
		padding: 16px 20px;
	}

	.solea-post-card .solea-post-card__image {
		flex: 1 1 100%;
		height: 160px;
	}
}