/*
 * Vitrine Soins — grille [centre_soins_categories].
 * Image de catégorie en fond (background-size:cover) + voile sombre en
 * pseudo-élément ::before (jamais un filtre sur le fichier image source),
 * texte blanc lisible par-dessus. Fallback dégradé si aucune image définie
 * sur la catégorie WooCommerce.
 *
 * Hauteur des vignettes : aspect-ratio plutôt que des min-height par
 * breakpoint. Comme toutes les vignettes d'une même ligne ont la même
 * largeur (colonnes uk-grid), un ratio fixe leur donne mécaniquement la
 * même hauteur, y compris quand un titre passe sur deux lignes — sans JS
 * ni multiplication de breakpoints.
 *
 * Overlay : opacité du voile noir pilotée par les custom properties
 * ci-dessous plutôt que par un filter/brightness sur l'image (rendu plus
 * net, pas de recalcul de l'image au hover). Comportement voulu : voile
 * plus opaque au repos (texte lisible), qui s'éclaircit au survol pour
 * révéler davantage l'image.
 */

.clc-cs-grid {
	--clc-cs-overlay-rest: 0.42;
	--clc-cs-overlay-hover: 0.22;
}

.clc-cs-card {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	border: none;
	transition: transform 0.25s ease;
}

/* Couleur + suppression du soulignement, dans tous les états du lien
   (repos, survol, focus, visité) — ciblé sur notre composant uniquement. */
.clc-cs-card,
.clc-cs-card:hover,
.clc-cs-card:focus,
.clc-cs-card:active,
.clc-cs-card:visited {
	color: #fff;
	text-decoration: none;
}

/* Neutralise le contour ajouté par UIkit
   (.uk-card-hover:not(...) { border: 2px solid transparent; }), ciblé
   uniquement sur notre composant pour ne pas toucher les autres cartes
   uk-card-hover du site. */
.clc-cs-grid .clc-cs-card.uk-card-hover {
	border: none;
}

.clc-cs-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, var(--clc-cs-overlay-rest));
	transition: background-color 0.3s ease;
}

.clc-cs-card:hover {
	transform: translateY(-2px);
}

.clc-cs-card:hover::before {
	background-color: rgba(0, 0, 0, var(--clc-cs-overlay-hover));
}

.clc-cs-card--noimg {
	background-image: linear-gradient(135deg, #2b2b2b, #55555a);
}

.clc-cs-card-inner {
	position: relative;
	z-index: 1;
}

.clc-cs-card-title {
	display: block;
	font-weight: 600;
	/* Double ombre : lisible aussi bien avec le voile à 42% (repos) qu'à 22% (hover). */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.5);
}

.clc-cs-card-accroche {
	display: block;
	margin-top: 4px;
	font-size: 0.85em;
	opacity: 0.9;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 14px rgba(0, 0, 0, 0.5);
}