/**
 * Block: Product Slider (dhukr/product-slider).
 * Depends on tokens.css, global.css (.dh-pretitle, .dh-heading-48, .dh-btn),
 * the shared slider (slider.css) and product-card.css.
 */

/* Intro left, "See all products" right. */
.dh-product-slider__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--dh-space-24);
	margin-bottom: var(--dh-space-48);
}

.dh-product-slider__intro {
	display: flex;
	flex-direction: column;
	gap: var(--dh-space-12);
}

.dh-product-slider__title {
	color: var(--dh-color-heading);
	text-transform: uppercase;
}

.dh-product-slider__slider {
	--dh-slider-per-view: 4;
}

/*
 * With a promo: track (3 cards) + fixed promo column, controls full width below.
 * The promo column is one card wide: (100% - 3 gaps) / 4, so the row still
 * reads as 4 equal columns.
 */
.dh-product-slider__slider--has-promo {
	--dh-slider-per-view: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) calc((100% - 3 * var(--dh-slider-gap)) / 4);
	grid-template-areas:
		"track promo"
		"controls controls";
	column-gap: var(--dh-slider-gap);
}

.dh-product-slider__slider--has-promo > .dh-slider__track {
	grid-area: track;
}

.dh-product-slider__slider--has-promo > .dh-slider__controls {
	grid-area: controls;
}

/* Cards in view share the height; buttons line up at the bottom. */
.dh-product-slider__slide {
	display: flex;
}

.dh-product-slider__slide > .dh-product-card {
	width: 100%;
}

/* Promo card: fixed grid item, stretches to the height of the track. */
.dh-product-slider__promo {
	grid-area: promo;
	min-width: 0;
}

/* Orange block in place of the product image. */
.dh-product-slider__promo-box {
    position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 316 / 180;
	padding: var(--dh-space-24);
	font-family: var(--dh-font-display);
	font-size: var(--dh-fs-heading-32);
	line-height: var(--dh-lh-heading);
	letter-spacing: var(--dh-ls-button);
	color: var(--dh-color-heading);
	text-align: center;
	text-transform: uppercase;
	background-color: var(--dh-color-accent);
	border-radius: var(--dh-radius-button);
}

.dh-product-slider__promo-img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-product-slider__promo-box--has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: var(--dh-overlay-promo);
}

.dh-product-slider__promo-box-title {
	position: relative;
	z-index: 2;
}

.dh-product-slider__promo-box--has-image .dh-product-slider__promo-box-title {
	color: var(--dh-color-bg);
}

.dh-product-slider__promo-btn {
	margin-top: auto;
}

@media screen and (max-width: 1200px) {
	.dh-product-slider__slider {
		--dh-slider-per-view: 2;
	}

	/* One card + promo, both half width. */
	.dh-product-slider__slider--has-promo {
		--dh-slider-per-view: 1;
		grid-template-columns: minmax(0, 1fr) calc((100% - var(--dh-slider-gap)) / 2);
	}
}

@media only screen and (max-width: 768px) {
	.dh-product-slider__head {
		margin-bottom: var(--dh-space-32);
	}

	.dh-product-slider__slider,
	.dh-product-slider__slider--has-promo {
		--dh-slider-per-view: 1.2;
	}

	/* Single column: track, controls, then promo full width. */
	.dh-product-slider__slider--has-promo {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"track"
			"controls"
			"promo";
	}

	.dh-product-slider__promo {
		margin-top: var(--dh-space-32);
	}
}