/**
 * Related Products Component
 * 5 column grid using product-card component
 * Matches Figma design specifications
 */

/* ============================================
   Related Products Container
   ============================================ */

.related-products {
	margin-bottom: 64px;
}

.related-products__title {
	font-family: var(--font-heading, 'Outfit');
	font-size: 36px;
	font-weight: 400; /* Figma: Regular = 400 */
	line-height: 1.28;
	color: var(--color-black, #2C2C34);
	margin: 0 0 32px 0;
	/* Left aligned per Figma */
}

/* ============================================
   Flexible Grid (5 items default, stretches for fewer)
   Figma: flex-[1_0_0] for each card, gap 16px
   ============================================ */

.related-products__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.related-products__item {
	/* Flex grow to fill space equally */
	/* flex: 1 1 0 means grow equally, don't shrink, basis 0 */
	flex: 1 1 0;
	min-width: 200px; /* Prevent too narrow cards */
}

/* ============================================
   Responsive: Desktop 1440px
   ============================================ */

@media (max-width: 1440px) {
	.related-products__grid {
		gap: 16px;
	}

	.related-products__item {
		min-width: 220px; /* Slightly wider min for 4 cards */
	}
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.related-products {
		margin-bottom: 48px;
	}

	.related-products__title {
		font-size: 28px;
		margin-bottom: 24px;
	}

	.related-products__grid {
		gap: 16px;
	}

	.related-products__item {
		min-width: 200px;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.related-products__title {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.related-products__grid {
		gap: 12px;
	}

	.related-products__item {
		/* 2 cards per row on mobile */
		min-width: calc(50% - 6px);
		flex: 0 0 calc(50% - 6px);
	}
}

/* ============================================
   Responsive: Mobile (375px)
   ============================================ */

@media (max-width: 480px) {
	.related-products__grid {
		gap: 8px;
	}

	.related-products__item {
		/* 1 card per row on small mobile */
		min-width: 100%;
		flex: 0 0 100%;
	}
}