/**
 * Product Ingredients Swipe Component
 * Displays key ingredients in a horizontal scrolling 2x2 grid layout
 */

/* Container */
.product-ingredients-section {
	background-color: #f9f9f9;
	border-radius: 8px;
	padding-bottom: 0 !important;
}

/* Heading Alignment */
.product-ingredients-section .wp-block-heading {
	padding-left: clamp(16px, 3vw, 24px);
	margin-bottom: clamp(8px, 1vw, 12px) !important;
}

.ingredients-swipe-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-top: 0 !important;
	margin-block-start: 0 !important;
	padding-top: 0;
}

/* Swipe Wrapper - Horizontal Scroll */
.ingredients-swipe-wrapper {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
	scrollbar-width: thin;
	scrollbar-color: #cbd5e0 #f7fafc;
	padding: 0 clamp(16px, 3vw, 24px) 10px clamp(16px, 3vw, 24px);
}

/* Custom Scrollbar for Webkit Browsers */
.ingredients-swipe-wrapper::-webkit-scrollbar {
	height: 8px;
}

.ingredients-swipe-wrapper::-webkit-scrollbar-track {
	background: #f7fafc;
	border-radius: 10px;
}

.ingredients-swipe-wrapper::-webkit-scrollbar-thumb {
	background: #cbd5e0;
	border-radius: 10px;
}

.ingredients-swipe-wrapper::-webkit-scrollbar-thumb:hover {
	background: #a0aec0;
}

/* Individual Ingredient Card */
.ingredient-card {
	flex: 0 0 auto;
	width: clamp(240px, 30vw, 280px);
	min-width: clamp(240px, 30vw, 280px);
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: clamp(14px, 2vw, 20px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ingredient-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* 2x2 Grid Layout */
.ingredient-grid {
	display: grid;
	grid-template-columns: clamp(45px, 8vw, 60px) 1fr;
	grid-template-rows: auto 1fr;
	gap: clamp(8px, 1.5vw, 12px) clamp(10px, 2vw, 16px);
	align-items: start;
}

/* Icon - Spans 2 rows, centered vertically */
.ingredient-icon {
	grid-column: 1;
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ingredient-icon img {
	width: clamp(45px, 8vw, 60px);
	height: clamp(45px, 8vw, 60px);
	object-fit: contain;
	border-radius: 8px;
}

.ingredient-icon-placeholder {
	width: clamp(45px, 8vw, 60px);
	height: clamp(45px, 8vw, 60px);
	background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e0 100%);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ingredient-icon-placeholder::before {
	content: "";
	width: 30px;
	height: 30px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23718096" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg>') no-repeat center;
	background-size: contain;
}

/* Content Column */
.ingredient-content {
	grid-column: 2;
	grid-row: 1 / 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Ingredient Name - Row 1 */
.ingredient-name {
	font-size: clamp(14px, 2vw, 16px);
	font-weight: 600;
	line-height: 1.3;
	color: #1a202c;
	margin: 0;
	padding: 0;
}

/* Benefits - Row 2 */
.ingredient-benefits {
	font-size: clamp(12px, 1.8vw, 14px);
	font-weight: 400;
	line-height: 1.5;
	color: #4a5568;
	margin: 0;
	padding: 0;
}

/* No Ingredients Message */
.no-ingredients {
	text-align: center;
	color: #718096;
	font-size: 14px;
	padding: 20px;
	font-style: italic;
}

/* Responsive Design */

/* Mobile - Hide scrollbar for cleaner look */
@media (max-width: 480px) {
	.ingredients-swipe-wrapper::-webkit-scrollbar {
		display: none;
	}

	.ingredients-swipe-wrapper {
		scrollbar-width: none;
	}
}

/* Scroll Hint - Optional fade effect at edges */
.ingredients-swipe-container::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 100%;
	background: linear-gradient(to left, #f9f9f9, transparent);
	pointer-events: none;
}

/* Remove fade when scrolled to end */
.ingredients-swipe-wrapper.scrolled-end ~ .ingredients-swipe-container::after {
	display: none;
}

/* Accessibility - Focus States */
.ingredient-card:focus-within {
	outline: 2px solid #4299e1;
	outline-offset: 2px;
}