/* Blocs : cartes et carte */

.ww-cards__items {
	--ww-gap: var(--ww-gap, var(--ww-space-6));
}

.ww-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--ww-card-bg, transparent);
	border-radius: var(--ww-radius);
	overflow: hidden;
	transition: transform var(--ww-duration) var(--ww-ease), box-shadow var(--ww-duration) var(--ww-ease);
}

.ww-cards--card .ww-card {
	background: var(--ww-card-bg, var(--ww-color-light));
	box-shadow: var(--ww-shadow);
}

.ww-cards--bordered .ww-card {
	background: var(--ww-card-bg, var(--ww-color-light));
	border: var(--ww-border);
}

.ww-cards--hover .ww-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--ww-shadow-lg);
}

.ww-cards--equal .ww-card { height: 100%; }

.ww-card__media img {
	display: block;
	width: 100%;
}

.ww-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ww-space-3);
	flex: 1;
}

.ww-cards--card .ww-card__body,
.ww-cards--bordered .ww-card__body,
.ww-cards--overlay .ww-card__body {
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.ww-cards--plain .ww-card__body { padding-top: var(--ww-space-4); }

.ww-card__badge {
	align-self: flex-start;
	padding: 0.25em 0.75em;
	background: var(--ww-badge-bg, var(--ww-color-highlight));
	color: var(--ww-badge-color, var(--ww-on-highlight));
	border-radius: var(--ww-radius-pill);
	font-size: var(--ww-text-xs);
	font-weight: 700;
}

.ww-align-center .ww-card__badge { align-self: center; }

.ww-card__title {
	margin: 0;
	font-size: var(--ww-text-lg);
}

.ww-card__title a { text-decoration: none; }

/* Toute la carte devient cliquable quand le titre porte un lien. */
.ww-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ww-card__text {
	margin: 0;
	opacity: 0.85;
}

.ww-card__footer {
	margin: auto 0 0;
	position: relative;
	z-index: 1;
}

/* Variante « texte sur l'image » */
.ww-cards--overlay .ww-card { justify-content: flex-end; min-height: 320px; }

.ww-cards--overlay .ww-card__media {
	position: absolute;
	inset: 0;
}

.ww-cards--overlay .ww-card__media img {
	height: 100%;
	object-fit: cover;
}

.ww-cards--overlay .ww-card__body {
	position: relative;
	color: var(--ww-color-light);
	background: linear-gradient(to top, rgba(20, 22, 26, 0.85) 20%, rgba(20, 22, 26, 0));
}