/* ============================================================
   ListingHive Pro V24 — Grille "Toutes les catégories"
   ------------------------------------------------------------
   Feuille de style autonome et indépendante du thème parent et de
   HivePress : elle ne redéfinit et n'écrase aucune classe native,
   elle stylise uniquement les éléments propres à ce système
   (préfixe "lhpv24-"). Reprend automatiquement les couleurs du
   thème via les variables CSS globales déjà définies par ailleurs
   dans ce thème enfant (--color-primary / --color-secondary),
   avec des valeurs de repli si elles ne sont pas définies, pour
   que ce fichier reste utilisable même seul.
   ============================================================ */

/* ============================================================
   ListingHive Pro V24 — Grille "Toutes les catégories"
   ------------------------------------------------------------
   Feuille de style autonome et indépendante du thème parent et de
   HivePress : elle ne redéfinit et n'écrase aucune classe native,
   elle stylise uniquement les éléments propres à ce système
   (préfixe "lhpv24-"). Reprend automatiquement les couleurs du
   thème via les variables CSS globales déjà définies par ailleurs
   dans ce thème enfant (--color-primary / --color-secondary),
   avec des valeurs de repli si elles ne sont pas définies, pour
   que ce fichier reste utilisable même seul.
   ============================================================ */

.lhpv24-category-section {
	--lhpv24-primary: var(--color-primary, #3b45c4);
	--lhpv24-secondary: var(--color-secondary, #c9a84c);
	--lhpv24-radius: 16px;
	--lhpv24-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--lhpv24-gap: 1.75rem;

	/* ------------------------------------------------------------
	   PERSONNALISATION FACILE DU NOMBRE DE COLONNES
	   Modifiez simplement les valeurs ci-dessous (une par palier
	   d'écran) : tout le reste de la grille s'adapte automatiquement,
	   aucune autre ligne de CSS à toucher.
	   ------------------------------------------------------------ */
	--lhpv24-cols-desktop: 4;          /* Ordinateur (≥ 992px) */
	--lhpv24-cols-large-tablet: 3;     /* Grande tablette (768–991px) */
	--lhpv24-cols-small-tablet: 2;     /* Petite tablette (576–767px) */
	--lhpv24-cols-mobile: 2;           /* Mobile (400–575px) */
	--lhpv24-cols-tiny: 1;             /* Très petit écran (< 400px) */

	margin: 3rem 0;
}

.lhpv24-category-section__title {
	margin: 0 0 1.5rem;
	font-family: var(--font-heading, inherit);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #14161f;
	text-align: center;
}

/* ------------------------------------------------------------
   Grille responsive (Desktop First, du plus grand au plus petit
   écran, conformément aux 5 paliers demandés) :
   - Ordinateur (≥ 992px)        : 4 colonnes
   - Grande tablette (768–991px) : 3 colonnes
   - Petite tablette (576–767px) : 2 colonnes
   - Mobile (400–575px)          : 2 colonnes
   - Très petit écran (< 400px)  : 1 colonne
   Toujours une VRAIE grille (CSS Grid) : jamais de simple liste
   verticale. Aucune limite de nombre de catégories : la grille
   s'étend naturellement sur autant de lignes que nécessaire.
   ------------------------------------------------------------ */
.lhpv24-category-grid {
	display: grid;
	grid-template-columns: repeat(var(--lhpv24-cols-desktop), minmax(0, 1fr));
	gap: var(--lhpv24-gap);
}

/* Grande tablette : 768px à 991px */
@media only screen and (max-width: 61.9375em) {
	.lhpv24-category-grid {
		grid-template-columns: repeat(var(--lhpv24-cols-large-tablet), minmax(0, 1fr));
		--lhpv24-gap: 1.5rem;
	}
}

/* Petite tablette : 576px à 767px */
@media only screen and (max-width: 47.9375em) {
	.lhpv24-category-grid {
		grid-template-columns: repeat(var(--lhpv24-cols-small-tablet), minmax(0, 1fr));
		--lhpv24-gap: 1.25rem;
	}
}

/* Mobile : 400px à 575px (même nombre de colonnes que la petite
   tablette par défaut, mais un palier dédié et personnalisable
   séparément si besoin). */
@media only screen and (max-width: 35.9375em) {
	.lhpv24-category-grid {
		grid-template-columns: repeat(var(--lhpv24-cols-mobile), minmax(0, 1fr));
		--lhpv24-gap: 1rem;
	}
}

/* Très petit écran : moins de 400px */
@media only screen and (max-width: 24.9375em) {
	.lhpv24-category-grid {
		grid-template-columns: repeat(var(--lhpv24-cols-tiny), minmax(0, 1fr));
		--lhpv24-gap: 0.875rem;
	}
}

/* ------------------------------------------------------------
   Carte de catégorie : fond blanc, ombre légère, coins légèrement
   arrondis, animation de survol douce. La couleur principale du
   thème reste présente (nom au survol + halo de bordure), sans
   jamais dépendre d'une seule teinte codée en dur.
   ------------------------------------------------------------ */
.lhpv24-category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid rgba(15, 23, 39, 0.07);
	border-radius: var(--lhpv24-radius);
	overflow: hidden;
	text-decoration: none !important;
	box-shadow: 0 1px 2px rgba(15, 23, 39, 0.04), 0 6px 16px rgba(15, 23, 39, 0.05);
	transition: transform 0.35s var(--lhpv24-ease), box-shadow 0.35s var(--lhpv24-ease), border-color 0.35s var(--lhpv24-ease);

	/* Départ pour l'apparition en fondu au scroll (voir categories.js). */
	opacity: 0;
	transform: translateY(16px);
}

.lhpv24-category-card.lhpv24-is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s var(--lhpv24-ease), transform 0.6s var(--lhpv24-ease), box-shadow 0.35s var(--lhpv24-ease), border-color 0.35s var(--lhpv24-ease);
}

/* Halo de bordure dégradé au survol, dans les couleurs du thème. */
.lhpv24-category-card::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 1.5px;
	border-radius: inherit;
	background-image: linear-gradient(120deg, var(--lhpv24-primary), var(--lhpv24-secondary));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.35s var(--lhpv24-ease);
	pointer-events: none;
}

.lhpv24-category-card:hover,
.lhpv24-category-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: 0 16px 32px rgba(15, 23, 39, 0.12);
}

.lhpv24-category-card:focus-visible {
	outline: 2px solid var(--lhpv24-primary);
	outline-offset: 3px;
}

.lhpv24-category-card:hover::before,
.lhpv24-category-card:focus-visible::before {
	opacity: 1;
}

/* Image : bien proportionnée (carrée), recadrée en cover, léger zoom
   au survol pour une sensation premium. */
.lhpv24-category-card__image-wrap {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--lhpv24-primary) 6%, #ffffff);
}

.lhpv24-category-card__image-wrap img.lhpv24-category-card__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center !important;
	transition: transform 0.5s var(--lhpv24-ease);
}

.lhpv24-category-card:hover .lhpv24-category-card__image {
	transform: scale(1.08);
}

/* Icône discrète indiquant que toute la carte est cliquable : un cercle
   avec une flèche, posé sur le coin de l'image, à peine visible au repos
   et qui se révèle davantage au survol — signal clair sans surcharger
   le design. */
.lhpv24-category-card__arrow {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(4px);
	color: #14161f;
	opacity: 0.85;
	transform: scale(0.9) rotate(-45deg);
	transition: opacity 0.35s var(--lhpv24-ease), transform 0.35s var(--lhpv24-ease), background-color 0.35s var(--lhpv24-ease), color 0.35s var(--lhpv24-ease);
}

.lhpv24-category-card:hover .lhpv24-category-card__arrow,
.lhpv24-category-card:focus-visible .lhpv24-category-card__arrow {
	opacity: 1;
	transform: scale(1) rotate(0deg);
	background-color: var(--lhpv24-primary);
	color: #ffffff;
}

/* Nom + compteur, sous l'image. */
.lhpv24-category-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.125rem 1.25rem;
}

.lhpv24-category-card__name {
	font-family: var(--font-heading, inherit);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	color: #14161f;
	transition: color 0.25s var(--lhpv24-ease);

	/* Toujours 2 lignes maximum : les cartes gardent une hauteur
	   uniforme quelle que soit la longueur du nom de la catégorie. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lhpv24-category-card:hover .lhpv24-category-card__name {
	color: var(--lhpv24-primary);
}

.lhpv24-category-card__count {
	font-family: var(--font-body, inherit);
	font-size: 0.8125rem;
	font-weight: 500;
	color: rgba(20, 22, 31, 0.55);
}

/* ------------------------------------------------------------
   Accessibilité : respecte la préférence "mouvement réduit".
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.lhpv24-category-card {
		opacity: 1;
		transform: none;
		transition: box-shadow 0.2s ease;
	}

	.lhpv24-category-card:hover {
		transform: none;
	}

	.lhpv24-category-card__image-wrap img.lhpv24-category-card__image {
		transition: none;
	}

	.lhpv24-category-card:hover .lhpv24-category-card__image-wrap img.lhpv24-category-card__image {
		transform: none;
	}

	.lhpv24-category-card__arrow {
		transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
		transform: none;
	}

	.lhpv24-category-card:hover .lhpv24-category-card__arrow,
	.lhpv24-category-card:focus-visible .lhpv24-category-card__arrow {
		transform: none;
	}
}