/* ==========================================================================
   product-categories-grid.css — Bloc « Grille des Catégories Produits ».
   Layout : grille contenue (container), cartes avec image + overlay hover.
   Max 3 colonnes (1 → 2 → 3 selon viewport).
   Animation hover : CSS pur (overlay + description slide-up).
   Entrée scroll-driven : GSAP stagger reveal (product-categories-grid.js).
   ========================================================================== */

.product-categories-grid {
	position: relative;
	color: inherit;
	padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
}

.product-categories-grid.alignfull {
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}

.product-categories-grid__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

/* ----------------------------------------- Header */

.product-categories-grid__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 720px;
}

.product-categories-grid__title {
	font-family: var(--font-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	margin: 0;
	color: inherit;
	text-wrap: balance;
}

/* ----------------------------------------- Grille (max 3 colonnes) */

.product-categories-grid__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Mobile-first : 1 colonne → 2 colonnes ≥600px → 3 colonnes max ≥960px. */
	grid-template-columns: 1fr;
	gap: var(--space-md);
	width: 100%;
}

@media (min-width: 600px) {
	.product-categories-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.product-categories-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.product-categories-grid__item {
	display: flex;
	/* Essentiel : sans min-width:0, un item de grid/flex refuse de passer sous la largeur
	   intrinsèque de son contenu, ce qui fait déborder l'image sur mobile. */
	min-width: 0;
	min-height: 0;
}

/* ----------------------------------------- Carte */

.product-categories-grid__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-width: 0;
	min-height: 340px;
	aspect-ratio: 1;
	padding: var(--space-lg);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-md);
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--duration-base) var(--ease-out),
		box-shadow var(--duration-base) var(--ease-out);
}

a.product-categories-grid__card:hover,
a.product-categories-grid__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

a.product-categories-grid__card:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

/* ----------------------------------------- Media (image + overlays) */

.product-categories-grid__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: -1;
	aspect-ratio: 1;
}

.product-categories-grid__image {
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	display: block;
}

/* Dégradé permanent pour la lisibilité du titre + description sur images claires.
   Renforcé : assombrissement commence plus tôt (25%) et atteint 0.95 en bas. */
.product-categories-grid__gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(13, 13, 13, 0) 0%,
		rgba(13, 13, 13, 0.35) 25%,
		rgba(13, 13, 13, 0.75) 60%,
		rgba(13, 13, 13, 0.95) 100%
	);
	pointer-events: none;
}

/* Overlay accent révélé au hover. */
.product-categories-grid__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(13, 13, 13, 0.1) 0%,
		rgba(var(--color-accent-rgb), 0.55) 100%
	);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-out);
	pointer-events: none;
}

a.product-categories-grid__card:hover .product-categories-grid__overlay,
a.product-categories-grid__card:focus-visible .product-categories-grid__overlay {
	opacity: 1;
}

/* ----------------------------------------- Body (titre + description + flèche) */

.product-categories-grid__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.product-categories-grid__card-title {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	margin: 0;
	color: var(--color-text);
	letter-spacing: var(--ls-tight);
}

.product-categories-grid__description {
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-text);
	opacity: 0.9;
	overflow: hidden;
	/* Ombre légère pour garantir la lisibilité sur images claires malgré le dégradé. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	/* Mobile / appareils tactiles : masqué — seul le titre reste visible.
	   Sur desktop (hover capable), réaffiché et révélé au survol (voir media query ci-dessous). */
	display: none;
}

.product-categories-grid__description p {
	margin: 0;
}

.product-categories-grid__arrow {
	display: inline-flex;
	color: var(--color-text);
	transition: transform var(--duration-base) var(--ease-out);
}

a.product-categories-grid__card:hover .product-categories-grid__arrow,
a.product-categories-grid__card:focus-visible .product-categories-grid__arrow {
	transform: translateX(6px);
}

/* ----------------------------------------- Hover : description slide-up (desktop pointer fin) */

@media (hover: hover) and (pointer: fine) {
	.product-categories-grid__description {
		display: block;
		max-height: 0;
		opacity: 0;
		transform: translateY(12px);
		transition:
			max-height var(--duration-base) var(--ease-out),
			opacity var(--duration-base) var(--ease-out),
			transform var(--duration-base) var(--ease-out);
	}

	a.product-categories-grid__card:hover .product-categories-grid__description,
	a.product-categories-grid__card:focus-visible .product-categories-grid__description {
		/* Hauteur généreuse pour accueillir des descriptions plus longues (4-8 lignes)
		   sans rogner le texte. Au-delà, on s'appuie sur le card lui-même. */
		max-height: 320px;
		opacity: 0.92;
		transform: translateY(0);
	}
}

/* ----------------------------------------- États initiaux pour l'animation GSAP */

.product-categories-grid[data-categories-grid] .product-categories-grid__header,
.product-categories-grid[data-categories-grid] [data-category-card] {
	opacity: 0;
	transform: translateY(32px);
}

.product-categories-grid.is-animated .product-categories-grid__header,
.product-categories-grid.is-animated [data-category-card] {
	opacity: 1;
	transform: none;
}

/* ----------------------------------------- Responsive (ajustements typographiques & tailles cartes) */

@media (max-width: 599px) {
	.product-categories-grid__card {
		/* Garde 1:1 sur mobile : les images sources sont typiquement carrées (large 1024x1024).
		   Un ratio 16/10 forçait `object-fit: cover` à rogner le haut/bas de l'image. */
		min-height: 0;
		aspect-ratio: 1;
		padding: var(--space-md);
	}

	.product-categories-grid__title {
		font-size: var(--fs-2xl);
	}
}

/* ----------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.product-categories-grid[data-categories-grid] .product-categories-grid__header,
	.product-categories-grid[data-categories-grid] [data-category-card] {
		opacity: 1;
		transform: none;
	}

	.product-categories-grid__card,
	.product-categories-grid__overlay,
	.product-categories-grid__description,
	.product-categories-grid__arrow {
		transition: none !important;
	}

	a.product-categories-grid__card:hover,
	a.product-categories-grid__card:focus-visible {
		transform: none;
	}

	a.product-categories-grid__card:hover .product-categories-grid__arrow,
	a.product-categories-grid__card:focus-visible .product-categories-grid__arrow {
		transform: none;
	}
}