/* usage-guide.css — depends on: el-tokens, el-base */
.usage-guide{
container: parent / inline-size;
}
.product-usage__container {
	display: flex;
	flex-direction: column;
	gap: var(--el-space-6);
	container-type: inline-size;
max-width:1400px !important;
}

/* row layout once the container has room — see note on --el-container */
@container parent (min-width: 1400px) {
	.product-usage__container {
		flex-direction: row;
		align-items: stretch;
	}
	.mixing-guide {
		flex: 0 0 420px;
	}
	.usage-cards {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* ---- dosage guide card -------------------------------------------------- */

.mixing-guide {
	background: var(--el-color-surface);
	border: var(--el-card-border);
	border-radius: var(--el-radius);
	box-shadow: var(--el-card-shadow);
	padding: var(--el-space-6);
}

.mixing-guide > p {
	font-family: var(--el-font-body);
	font-size: var(--el-text-base);
	line-height: var(--el-leading-snug);
	color: var(--el-color-text-soft);
	margin: 0 0 var(--el-space-5);
}

.usage-data {
	display: flex;
	gap: var(--el-space-3);
	align-items: flex-start;
	padding: var(--el-space-3) 0;
	border-top: 1px solid var(--el-color-border);
}

/* icon wrapper — image-based icon variant (restored) */
.usage-data-image__container {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: var(--el-radius-sm);
	overflow: hidden;
}
.usage-data-image__container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* icon wrapper — inline SVG variant, if/when render.php switches to icon_key */
.usage-data-icon {
	display: flex;
	width: 22px;
	height: 22px;
	color: var(--el-color-action);
	flex-shrink: 0;
}
.usage-data-icon svg { width: 100%; height: 100%; }

.usage-data-content__container h3 {
	font-family: var(--el-font-display);
	font-size: var(--el-text-sm);
	font-weight: var(--el-weight-semibold);
	color: var(--el-color-text);
	margin: 0 0 2px;
}

.usage-data-content__container p {
	font-family: var(--el-font-body);
	font-size: var(--el-text-sm);
	color: var(--el-color-text-muted);
	margin: 0;
}

/* ---- mix it your way ---------------------------------------------------- */

.usage-cards h3 {
	text-align: center;
	margin: 0 0 var(--el-space-4);
}

.dosage-cards__container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--el-space-3);
}

/* ---- dosage card aspect ratio + mobile swipe strip — three tiers -------- */

.dosage-card {
	position: relative;
	border-radius: var(--el-radius-lg);
	overflow: hidden;
	aspect-ratio: 5 / 4; /* default: the 700–1400 middle tier */
}

.dosage-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dosage-card::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

.dosage-card__overlay {
	position: absolute;
	bottom: var(--el-space-2);
	left: var(--el-space-2);
	right: var(--el-space-2);
	z-index: 2;
	color: var(--el-white);
	font-family: var(--el-font-body);
	font-size: var(--el-text-xs);
	font-weight: var(--el-weight-semibold);
	line-height: var(--el-leading-snug);
}

/* tier 1: below 700 — square, and the photo row becomes a swipeable strip */
@container usage-guide (max-width: 700px) {
	.dosage-card {
		aspect-ratio: 1 / 1;
	}
	.dosage-cards__container {
		grid-auto-flow: column;
		grid-auto-columns: 70%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 calc(var(--el-space-5) * -1);
		padding: 0 var(--el-space-5) var(--el-space-2);
	}
}

/* tier 3: 1400+ — square again, alongside the row layout switch */
@container usage-guide (min-width: 1400px) {
	.dosage-card {
		aspect-ratio: 1 / 1;
	}
}
/* ---- mobile ---------------------------------------------------------- */

@container (max-width: 640px) {
	.dosage-cards__container {
		grid-auto-flow: column;
		grid-auto-columns: 70%;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 calc(var(--el-space-5) * -1);
		padding: 0 var(--el-space-5) var(--el-space-2);
	}
	.dosage-card {
		aspect-ratio: 1 / 1;
	}
}