/* WeComm HTML Manager : CSS de STRUCTURE du blog (phase 18, spec § 4.3).
 * Grille, espacements, états. Aucune identité : couleurs, polices, rayons viennent des variables --wc-*
 * (tokens du client, lot 3), avec un repli neutre pour fonctionner sans kit. Pas de JS requis. */

.wc-posts {
	--wchm-gap: var(--wc-space, 1.5rem);
	display: grid;
	grid-template-columns: repeat(var(--wc-cols, 3), minmax(0, 1fr));
	gap: var(--wchm-gap);
	margin: 0 0 var(--wchm-gap);
	font-family: var(--wc-font-body, inherit);
	color: var(--wc-color-text, inherit);
}
.wc-posts > * { min-width: 0; }

/* --- Carte --- */
.wc-card {
	display: flex;
	flex-direction: column;
	background: var(--wc-color-surface, #fff);
	border: 1px solid var(--wc-color-border, #e3e5e8);
	border-radius: var(--wc-radius, 8px);
	box-shadow: var(--wc-shadow, none);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.wc-card:hover,
.wc-card:focus-within { transform: translateY(-2px); }
.wc-card__media { display: block; line-height: 0; }
.wc-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--wc-card-ratio, 16 / 9);
	object-fit: cover;
}
.wc-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1 1 auto;
	padding: 1rem 1.15rem 1.25rem;
}
.wc-card__cat { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.wc-card__cat a { color: var(--wc-color-primary, #1d4ed8); text-decoration: none; }
.wc-card__cat a:hover { text-decoration: underline; }
.wc-card__title {
	margin: 0;
	font-family: var(--wc-font-heading, inherit);
	font-size: 1.2rem;
	line-height: 1.3;
}
.wc-card__title a { color: var(--wc-color-text, inherit); text-decoration: none; }
.wc-card__title a:hover { color: var(--wc-color-primary, #1d4ed8); }
.wc-card__meta { margin: 0; font-size: .82rem; color: var(--wc-color-text-muted, #5b6270); }
.wc-card__excerpt { margin: 0; color: var(--wc-color-text-muted, #5b6270); line-height: 1.55; }
.wc-card__more {
	margin-top: auto;
	padding-top: .35rem;
	font-weight: 600;
	color: var(--wc-color-primary, #1d4ed8);
	text-decoration: none;
}
.wc-card__more:hover { text-decoration: underline; }

/* Navigation clavier : anneau visible, contraste suffisant sur fond clair ou sombre. */
.wc-card a:focus-visible,
.wc-chip:focus-visible,
.wc-pagination a:focus-visible {
	outline: 3px solid var(--wc-color-primary, #1d4ed8);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- Variantes --- */
.wc-posts--list { grid-template-columns: minmax(0, 1fr); }
.wc-posts--list .wc-card { flex-direction: row; }
.wc-posts--list .wc-card__media { flex: 0 0 34%; max-width: 34%; }
.wc-posts--list .wc-card__img { height: 100%; aspect-ratio: auto; }

.wc-posts--compact { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.wc-posts--compact .wc-card { flex-direction: row; align-items: center; box-shadow: none; }
.wc-posts--compact .wc-card__media { flex: 0 0 5.5rem; max-width: 5.5rem; }
.wc-posts--compact .wc-card__img { aspect-ratio: 1 / 1; }
.wc-posts--compact .wc-card__body { padding: .6rem .8rem; gap: .2rem; }
.wc-posts--compact .wc-card__title { font-size: 1rem; }
.wc-posts--compact .wc-card__excerpt,
.wc-posts--compact .wc-card__more { display: none; }

.wc-posts--featured .wc-card--featured { grid-column: 1 / -1; flex-direction: row; }
.wc-posts--featured .wc-card--featured .wc-card__media { flex: 0 0 55%; max-width: 55%; }
.wc-posts--featured .wc-card--featured .wc-card__img { height: 100%; aspect-ratio: auto; }
.wc-posts--featured .wc-card--featured .wc-card__title { font-size: 1.6rem; }

/* Carte sans image : le corps occupe tout, jamais de trou. */
.wc-card--noimg .wc-card__body { padding-top: 1.25rem; }

/* --- Filtre de catégories --- */
.wc-posts__filter { grid-column: 1 / -1; }
.wc-posts__filter ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.wc-chip {
	display: inline-block;
	padding: .35rem .85rem;
	border: 1px solid var(--wc-color-border, #e3e5e8);
	border-radius: 999px;
	background: var(--wc-color-surface, #fff);
	color: var(--wc-color-text, inherit);
	font-size: .88rem;
	text-decoration: none;
}
.wc-chip:hover { border-color: var(--wc-color-primary, #1d4ed8); }
.wc-chip.is-current {
	background: var(--wc-color-primary, #1d4ed8);
	border-color: var(--wc-color-primary, #1d4ed8);
	color: var(--wc-color-primary-contrast, #fff);
}

/* --- CTA intercalé et liste vide --- */
.wc-posts__cta { grid-column: 1 / -1; }
.wc-posts__empty { grid-column: 1 / -1; margin: 0; padding: 2rem 0; text-align: center; color: var(--wc-color-text-muted, #5b6270); }

/* --- Pagination --- */
.wc-pagination { margin: var(--wc-space, 1.5rem) 0; }
.wc-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.wc-pagination__link,
.wc-pagination__gap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem; /* cible tactile suffisante */
	padding: 0 .75rem;
	border: 1px solid var(--wc-color-border, #e3e5e8);
	border-radius: var(--wc-radius, 8px);
	color: var(--wc-color-text, inherit);
	text-decoration: none;
}
.wc-pagination__gap { border-color: transparent; }
a.wc-pagination__link:hover { border-color: var(--wc-color-primary, #1d4ed8); }
.wc-pagination__link.is-current {
	background: var(--wc-color-primary, #1d4ed8);
	border-color: var(--wc-color-primary, #1d4ed8);
	color: var(--wc-color-primary-contrast, #fff);
	font-weight: 600;
}

/* --- Liste de termes ([wc_terms]) --- */
.wc-terms { margin: 0; padding: 0; list-style: none; }
.wc-terms li { margin: 0 0 .4rem; }
.wc-terms a { color: var(--wc-color-text, inherit); text-decoration: none; }
.wc-terms a:hover,
.wc-terms a.is-current { color: var(--wc-color-primary, #1d4ed8); text-decoration: underline; }
.wc-terms__count { color: var(--wc-color-text-muted, #5b6270); font-size: .85em; }

/* --- Écrans étroits : la grille se replie quel que soit --wc-cols --- */
@media (max-width: 960px) {
	.wc-posts { grid-template-columns: repeat(min(var(--wc-cols, 3), 2), minmax(0, 1fr)); }
	.wc-posts--list,
	.wc-posts--compact { grid-template-columns: minmax(0, 1fr); }
	.wc-posts--featured .wc-card--featured { flex-direction: column; }
	.wc-posts--featured .wc-card--featured .wc-card__media { flex-basis: auto; max-width: none; }
	.wc-posts--featured .wc-card--featured .wc-card__img { height: auto; aspect-ratio: var(--wc-card-ratio, 16 / 9); }
}
@media (max-width: 640px) {
	.wc-posts { grid-template-columns: minmax(0, 1fr); }
	.wc-posts--list .wc-card { flex-direction: column; }
	.wc-posts--list .wc-card__media { flex-basis: auto; max-width: none; }
	.wc-posts--list .wc-card__img { height: auto; aspect-ratio: var(--wc-card-ratio, 16 / 9); }
}

@media (prefers-reduced-motion: reduce) {
	.wc-card { transition: none; }
	.wc-card:hover,
	.wc-card:focus-within { transform: none; }
}