/**
 * SPD Categories — Homepage categories section
 * =====================================================================
 * Phase 3b component styles. Reproduces the React "Nos Catégories de
 * Produits" section (HomePage.tsx, section 2) using the centralized SPD
 * design-system tokens for typography/radius/shadow, with React-reference-
 * exact brand colors scoped to .spd-categories only (the global SPD tokens
 * are left untouched — same approach as spd-hero.css).
 *
 * The React site is the visual source of truth.
 *
 * Loaded after spd-hero.css.
 */

.spd-categories {
	/* Section-scoped brand colors — reference the centralized UI tokens
	   (defined in spd-design-system.css) so the validated React values
	   live in one place. */
	--spd-cats-blue:       var(--spd-ui-blue);
	--spd-cats-blue-dark:   var(--spd-ui-blue-dark);
	--spd-cats-red:         var(--spd-ui-red);

	/* Neutrals (Tailwind slate scale, raw values — consistent with spd-shell.css). */
	--spd-cats-slate-50:   #F8FAFC;
	--spd-cats-slate-100: #F1F5F9;
	--spd-cats-slate-200: #E2E8F0;
	--spd-cats-slate-200-80: rgba(226, 232, 240, 0.8);
	--spd-cats-slate-400: #94A3B8;
	--spd-cats-slate-500: #64748B;
	--spd-cats-slate-800: #1E293B;
	--spd-cats-slate-900: #0F172A;
	--spd-cats-blue-40: rgba(15, 91, 148, 0.40);

	--spd-cats-focus-ring: 0 0 0 3px rgba(15, 91, 148, 0.35);

	/* Transitions — match the React Tailwind durations exactly. */
	--spd-cats-t-300: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* duration-300 */
	--spd-cats-t-150: 150ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors default */

	/* py-10 sm:py-12 | bg-white | border-b border-slate-100 */
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #fff;
	border-bottom: 1px solid var(--spd-cats-slate-100);
}

@media (min-width: 640px) {
	.spd-categories {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

/* The React uses `max-w-7xl mx-auto px-4 sm:px-6` (24px from sm up, no lg bump).
   Override the global .spd-container lg padding (32px) back to 24px inside
   this section so the grid matches the React width exactly. */
@media (min-width: 1024px) {
	.spd-categories .spd-container {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* ============================================================
   1. Section header
   ============================================================ */
.spd-categories__header {
	display: flex;
	flex-direction: column;
	gap: 8px;            /* gap-2 */
	margin-bottom: 24px; /* mb-6 */
}

@media (min-width: 640px) {
	.spd-categories__header {
		flex-direction: row;
		align-items: flex-end; /* sm:items-end */
		justify-content: space-between;
	}
}

.spd-categories__heading {
	display: block;
}

.spd-categories__eyebrow {
	display: block;
	font-size: 11px;                 /* text-[11px] */
	font-weight: var(--spd-font-weight-black); /* 900 — font-black */
	text-transform: uppercase;
	letter-spacing: var(--spd-tracking-wider); /* 0.05em — tracking-wider */
	color: var(--spd-cats-blue);
	line-height: 1;
}

.spd-categories__title {
	margin: 2px 0 0;                  /* mt-0.5 */
	font-size: 24px;                  /* text-2xl */
	font-weight: var(--spd-font-weight-black); /* 900 */
	color: var(--spd-cats-slate-900);
	letter-spacing: var(--spd-tracking-tight); /* -0.025em */
	line-height: 1.1;
}

@media (min-width: 640px) {
	.spd-categories__title {
		font-size: 30px;              /* sm:text-3xl (1.875rem) */
	}
}

.spd-categories__desc {
	margin: 4px 0 0;                  /* mt-1 */
	font-size: 12px;                  /* text-xs */
	color: var(--spd-cats-slate-500);
	line-height: var(--spd-line-height-normal);
}

@media (min-width: 640px) {
	.spd-categories__desc {
		font-size: 14px;              /* sm:text-sm */
	}
}

.spd-categories__view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;                         /* gap-1.5 */
	font-size: 12px;                  /* text-xs */
	font-weight: var(--spd-font-weight-bold); /* 700 */
	color: var(--spd-cats-blue);
	text-decoration: none;
	align-self: flex-start;          /* self-start */
	transition: color var(--spd-transition-fast);
}

.spd-categories__view-all:hover,
.spd-categories__view-all:focus-visible {
	color: var(--spd-cats-blue-dark); /* hover:text-[#0A436D] */
	text-decoration: underline;
	outline: none;
}

.spd-categories__view-all:focus-visible {
	box-shadow: var(--spd-cats-focus-ring);
	border-radius: 2px;
}

@media (min-width: 640px) {
	.spd-categories__view-all {
		font-size: 14px;              /* sm:text-sm */
		align-self: auto;             /* sm:self-auto */
	}
}

/* ArrowRight size={15} */
.spd-categories__view-all .spd-icon {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

/* ============================================================
   2. Categories grid
   ============================================================ */
.spd-categories__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* grid-cols-2 */
	gap: 12px;                             /* gap-3 */
}

@media (min-width: 640px) {
	.spd-categories__grid {
		grid-template-columns: repeat(4, 1fr); /* sm:grid-cols-4 */
		gap: 16px;                             /* sm:gap-4 */
	}
}

@media (min-width: 1024px) {
	.spd-categories__grid {
		grid-template-columns: repeat(8, 1fr); /* lg:grid-cols-8 */
	}
}

/* ============================================================
   3. Category card (the whole card is a link)
   ============================================================ */
.spd-categories__card {
	margin: 0;
	padding: 0;
}

.spd-categories__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	background-color: var(--spd-cats-slate-50); /* bg-slate-50 */
	border: 1px solid var(--spd-cats-slate-200-80); /* border border-slate-200/80 */
	border-radius: var(--spd-radius-xl); /* rounded-2xl (16px) */
	padding: 12px;                            /* p-3 */
	text-decoration: none;
	color: inherit;
	transition:
		background-color var(--spd-cats-t-300),
		border-color var(--spd-cats-t-300),
		box-shadow var(--spd-cats-t-300); /* transition-all duration-300 */
}

.spd-categories__link:hover,
.spd-categories__link:focus-visible {
	background-color: #fff;                   /* hover:bg-white */
	border-color: var(--spd-cats-blue-40);   /* hover:border-[#0F5B94]/40 */
	box-shadow: var(--spd-shadow-md);        /* hover:shadow-md */
	outline: none;
}

.spd-categories__link:focus-visible {
	box-shadow: var(--spd-shadow-md), var(--spd-cats-focus-ring);
}

/* ============================================================
   4. Circular image
   ============================================================ */
.spd-categories__image-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;     /* w-16 */
	height: 64px;    /* h-16 */
	margin-top: 4px; /* mt-1 */
	padding: 4px;    /* p-1 */
	border-radius: var(--spd-radius-full);
	border: 1px solid var(--spd-cats-slate-200); /* border border-slate-200 */
	background-color: #fff;                      /* bg-white */
	overflow: hidden;
	box-shadow: var(--spd-shadow-xs);           /* shadow-2xs ≈ shadow-xs */
	transition: transform var(--spd-cats-t-300); /* group-hover:scale-105 duration-300 */
}

.spd-categories__link:hover .spd-categories__image-wrap,
.spd-categories__link:focus-visible .spd-categories__image-wrap {
	transform: scale(1.05); /* group-hover:scale-105 */
}

@media (min-width: 640px) {
	.spd-categories__image-wrap {
		width: 72px;  /* sm:w-18 (4.5rem) */
		height: 72px; /* sm:h-18 */
	}
}

.spd-categories__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* object-cover */
	border-radius: var(--spd-radius-full);
}

/* Neutral circular fallback tile for categories without any image
   (not invented content — shows the category's own initial). */
.spd-categories__img-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: var(--spd-radius-full);
	background-color: var(--spd-cats-slate-50);
	color: var(--spd-cats-blue);
	font-size: 22px;
	font-weight: var(--spd-font-weight-bold);
	line-height: 1;
	text-transform: uppercase;
}

/* ============================================================
   5. Category name + product count
   ============================================================ */
.spd-categories__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;        /* line-clamp-2 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 10px 0 0;              /* mt-2.5 + reset default h3 margins */
	min-height: 30px;              /* min-h-[30px] */
	font-size: 12px;               /* text-xs */
	font-weight: var(--spd-font-weight-bold); /* 700 */
	line-height: 1.25;             /* leading-tight */
	color: var(--spd-cats-slate-800); /* slate-800 */
	text-align: center;
	transition: color var(--spd-cats-t-150);
}

.spd-categories__link:hover .spd-categories__name,
.spd-categories__link:focus-visible .spd-categories__name {
	color: var(--spd-cats-blue); /* group-hover:text-[#0F5B94] */
}

.spd-categories__count {
	display: flex;
	align-items: center;
	gap: 2px;                     /* gap-0.5 */
	margin-top: 2px;              /* mt-0.5 */
	font-size: 10px;              /* text-[10px] */
	font-weight: var(--spd-font-weight-semibold); /* 600 */
	color: var(--spd-cats-slate-400); /* slate-400 */
	transition: color var(--spd-cats-t-150);
}

.spd-categories__link:hover .spd-categories__count,
.spd-categories__link:focus-visible .spd-categories__count {
	color: var(--spd-cats-red);   /* group-hover:text-[#D93829] */
}

/* ============================================================
   6. Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.spd-categories__link,
	.spd-categories__image-wrap,
	.spd-categories__name,
	.spd-categories__count,
	.spd-categories__view-all {
		transition: none;
	}
	.spd-categories__link:hover .spd-categories__image-wrap,
	.spd-categories__link:focus-visible .spd-categories__image-wrap {
		transform: none;
	}
}