/**
 * Cards Components
 * Tous les styles de cartes (catégorie, produit, info, témoignage)
 *
 * REFACTORISÉ : Suppression des duplications
 * - Transition smooth : utilise var(--transition-smooth)
 * - flex-direction: column : à remplacer par classes .flex-col-* dans templates
 * - text-transform + letter-spacing : à remplacer par .text-uppercase-spaced dans templates
 *
 * @package TacticHall
 */

/* ==========================================================================
   Cards Catégorie - Style Figma avec overlay dégradé
   ========================================================================== */

.category-card {
	position: relative;
	height: 280px;
	overflow: hidden;
	border: var(--border-primary);
	background: var(--color-smoke);
	transition: transform var(--transition-smooth);
}

.category-card__link {
	display: block;
	position: absolute;
	inset: 0;
	text-decoration: none;
	color: inherit;
}

.category-card__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--transition-smooth);
}

/* Overlay dégradé noir sombre */
.category-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
			rgba(0, 0, 0, 0.3) 0%,
			rgba(0, 0, 0, 0.6) 100%);
	transition: background var(--transition-smooth);
}

/* Utilise .flex-col dans le template avec gap: 12px inline si nécessaire */
.category-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 2rem;
	color: white;
	text-align: center;
	z-index: 1;
}

/* Utilise .text-uppercase-spaced dans le template */
.category-card__title {
	font-family: var(--wp--preset--font-family--stencil);
	font-size: 1.75rem; /* Agrandi de 1.5rem à 1.75rem (28px) */
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	transition: transform var(--transition-smooth);
}

/* Bouton flèche CTA - visible au hover */
.category-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--color-white);
	border: var(--border-primary);
	border-radius: 0;
	color: var(--color-black);
	opacity: 0;
	transform: translateY(10px);
	transition: all var(--transition-smooth);
}

.category-card__cta svg {
	width: 24px;
	height: 24px;
}

.category-card:hover .category-card__cta {
	background: var(--color-black);
	color: var(--color-white);
	border-color: var(--color-black);
}

/* Hover effects - SMOOTH & FLUIDE */
.category-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

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

.category-card:hover .category-card__overlay {
	background: linear-gradient(180deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(0, 0, 0, 0.8) 100%);
}

.category-card:hover .category-card__title {
	transform: translateY(-4px);
}

.category-card:hover .category-card__cta {
	opacity: 1;
	transform: translateY(0);
}

.category-card:hover .category-card__count {
	opacity: 1;
}

/* ==========================================================================
   Cards Information - Style Figma
   ========================================================================== */

/* Utilise .flex-col dans le template */
.info-card {
	background: white;
	border: var(--border-primary);
	padding: var(--spacing-md);
	/* 1.5rem */
	min-height: 212px;
	display: flex;
	flex-direction: column;
}

.info-card__number {
	width: 48px;
	height: 48px;
	background: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 400;
	margin-bottom: 1.5rem;
}

.info-card__title {
	font-size: 1rem;
	font-weight: 400;
	margin: 0 0 0.75rem 0;
	color: var(--color-black);
}

.info-card__description {
	font-size: 0.875rem;
	line-height: 1.43;
	color: var(--color-steel);
	margin: 0;
}

/* ==========================================================================
   Cards Produit - Style WooCommerce avec hover smooth
   ========================================================================== */

/* Utilise .flex-col dans le template */
.product-card {
	position: relative;
	background: white;
	border: var(--border-primary);
	overflow: hidden;
	transition: all var(--transition-smooth);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.product-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Badge (promo ou rupture) - Utilise .text-uppercase-spaced dans le template */
.product-card__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 2;
	background: var(--color-black);
	color: var(--color-white);
}

.product-card__badge--sale {
	background: var(--color-black);
	color: var(--color-white);
}

.product-card__badge--out-of-stock {
	background: var(--color-steel);
	color: var(--color-white);
}

/* Image produit - Format paysage 5:4 pour images produits */
.product-card__image-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 5 / 4; /* Format paysage (largeur > hauteur) */
	overflow: hidden;
	border-bottom: var(--border-primary);
	background: var(--color-smoke);
}

.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--transition-smooth);
}

/* Contenu produit - Utilise .flex-col-xs dans le template */
.product-card__content {
	padding: var(--spacing-sm);
	/* 1rem */
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	/* 0.5rem */
	flex: 1;
}

.product-card__meta {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Utilise .text-uppercase-spaced dans le template */
.product-card__meta-item {
	font-size: 0.75rem;
	color: var(--color-steel);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	background: var(--color-smoke);
	border: var(--border-light);
}

.product-card__title {
	font-family: var(--wp--preset--font-family--helvetica-neue);
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	margin: 0;
	color: var(--color-black);
	transition: color 0.3s ease;
}

.product-card__price {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-black);
}

.product-card__price del {
	opacity: 0.5;
	font-size: 1rem;
	margin-right: 0.5rem;
}

.product-card__price ins {
	text-decoration: none;
}

/* Bouton CTA - Prend toute la largeur au fond de la carte - Utilise .text-uppercase-spaced dans le template */
.product-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.25rem;
	width: 100%;
	background: var(--color-black);
	color: var(--color-white);
	border-top: var(--border-primary);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	opacity: 0;
	transform: translateY(10px);
	transition: all var(--transition-smooth);
}

.product-card__cta-icon {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
}

/* Hover effects - LÉGERS (pas d'ombre abusée, léger scale) */
.product-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.product-card:hover .product-card__image {
	transform: scale(1.03);
}

.product-card:hover .product-card__title {
	color: var(--color-gunmetal);
}

.product-card:hover .product-card__cta {
	opacity: 1;
	transform: translateY(0);
}

.product-card:hover .product-card__cta-icon {
	transform: translateX(4px);
}

/* Responsive : Bouton toujours visible sur mobile */
@media (max-width: 768px) {
	.product-card__cta {
		opacity: 1;
		transform: translateY(0);
	}
}