/**
 * Cocktails page — bottom sections.
 * "Curated Cocktail Collections" (dm-cur) and "Ways to enjoy mezcal" (dm-wte).
 *
 * Self-contained so it doesn't depend on Tailwind utilities that may be absent
 * from the precompiled output.css.
 */

/* ------------------------------------------------------------------ *
 * Shared section title (first phrase italic, rest roman)
 * ------------------------------------------------------------------ */
/* heading/h2: IM FELL Double Pica, 400, 52px, 110%, -1.04px (-0.02em). Base is
   roman; the leading <em> (e.g. "Curated") renders italic. */
.dm-sec-title {
	font-family: var(--font-display, serif);
	font-style: normal;
	font-weight: 400;
	color: var(--color-forest, var(--dm-fg-default-primary));
	text-align: center;
	font-size: clamp(2rem, 4.5vw, 52px);
	line-height: 1.1; /* 110% */
	letter-spacing: -0.02em; /* -1.04px at 52px */
	margin: 0 0 1.5rem;
}

.dm-sec-title em {
	font-style: italic;
}

/* heading-mobile/h2-M: IM FELL Double Pica, 36px, 110%, -0.72px. */
@media (max-width: 767px) {
	.dm-sec-title {
		font-size: 36px;
		line-height: 1.1; /* 39.6px */
		letter-spacing: -0.72px;
		color: var(--color-forest, var(--dm-fg-default-primary));
	}
}

/* ------------------------------------------------------------------ *
 * Curated Cocktail Collections
 * ------------------------------------------------------------------ */
.dm-cur {
	background: var(--color-cream);
	/* Top space lives in the cream section's padding (not wrapper margin) so it
	   can't reveal the white ancestor between blocks. */
	padding: 4rem 0 3.5rem;
}

@media (min-width: 768px) {
	.dm-cur {
		padding: 7.5rem 0 6rem;
	}
}

.dm-cur-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.dm-cur-card {
	position: relative;
	display: block;
	border-radius: 0.375rem;
	overflow: hidden;
	aspect-ratio: 360 / 480; /* = 3 / 4, per design */
	background: var(--dm-ext-greige);
}

.dm-cur-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dm-cur-card:hover .dm-cur-card__img {
	transform: scale(1.04);
}

.dm-cur-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, color-mix(in srgb, var(--dm-ext-black) 80%, transparent) 0%, color-mix(in srgb, var(--dm-ext-black) 15%, transparent) 45%, transparent 100%);
}

.dm-cur-card__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem;
}

.dm-cur-card__text {
	display: flex;
	flex-direction: column;
}

/* Card heading — heading/h5: IM FELL Double Pica, Italic, 400, 24px, 120%, var(--color-white). */
.dm-cur-card__name {
	display: block;
	font-family: var(--font-display, serif);
	font-style: italic;
	font-weight: 400;
	color: var(--dm-fg-default-white);
	font-size: 24px;
	line-height: 1.2; /* 120% */
	margin: 0 0 0.5rem;
	text-shadow: 0 1px 6px color-mix(in srgb, var(--dm-ext-black) 40%, transparent);
}

/* Card description — body/sm/regular: Roboto Condensed, 400, 14px, 140%, var(--color-white). */
.dm-cur-card__sub {
	display: block;
	font-family: var(--font-default);
	font-weight: 400;
	color: var(--dm-fg-default-white);
	font-size: 14px;
	line-height: 1.4; /* 140% */
	margin: 0;
	max-width: 26ch;
}

.dm-cur-card__arrow {
	color: var(--color-cream, var(--color-beige-dark));
	flex-shrink: 0;
	margin-bottom: 0.25rem;
	transition: transform 0.3s ease;
}

.dm-cur-card:hover .dm-cur-card__arrow {
	transform: translateX(4px);
}

/* Carousel controls (progress + arrows) — mobile only; hidden on desktop. */
.dm-cur-controls {
	display: none;
}

@media (max-width: 767px) {
	/* Grid becomes a horizontal, peek-scroll slider. Bleeds edge-to-edge so the
	   next card peeks off-screen instead of being hard-cut. */
	.dm-cur .dm-cur-grid,
	.dm-wte .dm-wte-grid {
		display: flex;
		grid-template-columns: none;
		gap: 1rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 -1rem;
		padding: 0 1rem;
		scroll-padding-left: 1rem;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dm-cur .dm-cur-grid::-webkit-scrollbar,
	.dm-wte .dm-wte-grid::-webkit-scrollbar {
		display: none;
	}

	.dm-cur .dm-cur-card,
	.dm-wte .dm-wte-card {
		flex: 0 0 auto;
		width: 82%;
		scroll-snap-align: start;
	}

	/* Move the "Learn More" button up under the heading on mobile. */
	.dm-wte > div {
		display: flex;
		flex-direction: column;
	}

	.dm-wte .dm-sec-title { order: 0; text-align: left; }
	.dm-wte .dm-wte-more { order: 1; margin-bottom: 2rem; justify-content: flex-start; }
	.dm-wte .dm-wte-slider { order: 2; }

	.dm-cur-controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
		margin-top: 2.5rem;
	}

	/* Progress track with a movable thumb (JS sets width/left). */
	.dm-cur-progress {
		position: relative;
		flex: 1;
		height: 2px;
		background: color-mix(in srgb, var(--color-forest) 20%, transparent);
		border-radius: 2px;
	}

	.dm-cur-progress__bar {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 30%;
		background: var(--color-forest, var(--dm-bg-default-tertiary));
		border-radius: 2px;
		transition: left 0.2s ease, width 0.2s ease;
	}

	.dm-cur-nav {
		display: flex;
		gap: 0.75rem;
		flex-shrink: 0;
	}

	.dm-cur-navbtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		border: 1px solid var(--dm-border-default-dark-strong);
		background: none;
		color: var(--color-forest, var(--dm-fg-default-primary));
		cursor: pointer;
	}
}

/* ------------------------------------------------------------------ *
 * Ways to enjoy mezcal
 * ------------------------------------------------------------------ */
.dm-wte {
	background: var(--dm-bg-default-secondary);
	padding: 6rem 0 4.75rem;
}

.dm-wte-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	margin-bottom: 2.5rem;
}

.dm-wte-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dm-wte-card__media {
	display: block;
	position: relative;
	aspect-ratio: 360 / 288; /* = 5 / 4, per design */
	border-radius: 0.375rem;
	overflow: hidden;
	background: var(--dm-ext-greige);
	margin-bottom: 1rem;
}

.dm-wte-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dm-wte-card:hover .dm-wte-card__img {
	transform: scale(1.04);
}

/* Pill label — body/xs/strong: Roboto Condensed, 500, 12px, 140%, var(--color-white). */
.dm-wte-card__pill {
	display: inline-block;
	background: var(--dm-ext-pill-blue);
	color: var(--dm-fg-default-white);
	font-family: var(--font-default);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4; /* 140% */
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 0.25rem;
	margin-bottom: 0.85rem;
}

.dm-wte-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* Card title — heading/h6: IM FELL Double Pica, normal, 400, 20px, 120%. */
.dm-wte-card__title {
	font-family: var(--font-display, serif);
	font-style: normal;
	font-weight: 400;
	color: var(--color-forest, var(--dm-fg-default-primary));
	font-size: 20px;
	line-height: 1.2; /* 120% */
	margin: 0;
}

.dm-wte-card__arrow {
	color: var(--color-forest, var(--dm-fg-default-primary));
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.dm-wte-card:hover .dm-wte-card__arrow {
	transform: translateX(4px);
}

.dm-wte-more {
	display: flex;
	justify-content: center;
}

/* Learn More — forest pill, white text, Roboto Condensed 16px regular, compact. */
.dm-wte-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
	color: var(--dm-fg-default-white);
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	padding: 0.75rem 2.25rem;
	border-radius: 9999px;
	min-width: 125px;
	min-height: 48px;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
	.dm-cur-grid,
	.dm-wte-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.dm-cur-grid {
		gap: 1.5rem;
	}

	.dm-wte-grid {
		gap: 2.5rem;
	}
}

/* ---- Small desktop (1024-1280): drinks collection pages ---------------
 * No Figma board; shared 1280 rules. Scoped to .dm-collection
 * (taxonomy-collections.php), which renders these sections inline. The
 * hero + intro band are covered in collection-plp.css. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	/* The capped 1080 container already provides the 100px gutter. */
	.dm-collection .dm-cocktails > .mx-auto,
	.dm-collection .dm-cur > .mx-auto {
		padding-inline: 0;
	}

	.dm-collection .dm-cocktails {
		padding-bottom: 80px;
	}

	.dm-collection .dm-cocktails-grid {
		column-gap: 24px;
		row-gap: 40px;
	}

	.dm-collection .dm-cur {
		padding: 80px 0;
	}

	.dm-collection .dm-sec-title {
		font-size: 46px;
	}

	.dm-collection .dm-cur-grid {
		gap: 24px;
	}

	.dm-collection .dm-cur-card {
		border-radius: 4px;
	}
}