/**
 * Cocktails Collections Slider (top section) styles.
 *
 * Self-contained so it does not depend on Tailwind utilities that may not be
 * present in the precompiled output.css (the card widths/aspect in particular).
 */

.dm-cc {
	--dmcc-cream: var(--dm-bg-default-primary);
	--dmcc-forest: var(--dm-bg-default-tertiary);
	/* Contain the slider's right-edge bleed so it never adds body scroll. */
	overflow-x: clip;
}

.dm-cc-inner {
	display: flex;
	flex-direction: column;
	gap: 2.4rem;
}

.dm-cc-left {
	display: flex;
	flex-direction: column;
}

/* Full-width breadcrumb bar directly under the header. */
.dm-cc-breadcrumb-bar {
	width: 100%;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Section body keeps the original top/bottom spacing (moved off the <section>
   so the breadcrumb bar can sit flush under the header). */
.dm-cc-body {
	padding-top: 1rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.dm-cc-body {
		padding-top: 1.5rem;
		padding-bottom: 4rem;
	}
}

.dm-cc-breadcrumb {
	color: var(--color-forest, var(--dm-fg-default-primary));
	font-size: 0.875rem; /* 14px */
}

/* Inline, pipe-separated list: e.g. "Home | Mezcal Cocktails" */
.dm-cc-breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--font-default);
	line-height: 1.4;
}

.dm-cc-breadcrumb li {
	display: inline-flex;
	align-items: center;
}

/* Pipe divider between items. */
.dm-cc-breadcrumb li:not(:last-child)::after {
	content: "|";
	margin: 0 0.6em;
	opacity: 0.45;
	font-weight: 400;
}

.dm-cc-breadcrumb a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.dm-cc-breadcrumb a:hover {
	opacity: 0.7;
}

/* Match the reference: links (e.g. Home) stay prominent, the current page is
   de-emphasized. Overrides the utility classes added by get_breadcrumb(). */
.dm-cc-breadcrumb li.opacity-60 {
	opacity: 1;
}

.dm-cc-breadcrumb li.font-bold {
	font-weight: 400;
	opacity: 0.6;
}

/* Section title — heading/h1: IM FELL Double Pica, Regular (upright), 60px,
   line-height 110%, letter-spacing -2%. Overrides the bold/italic utilities the
   heading helper adds for h1. */
.dm-cc-left .dm-cc-title {
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-style: normal;
	font-size: 2.5rem; /* mobile */
	line-height: 1.1; /* 110% */
	letter-spacing: -0.02em; /* -2% */
}

@media (min-width: 768px) {
	.dm-cc-left .dm-cc-title {
		font-size: 3.25rem; /* 52px */
	}
}

@media (min-width: 1024px) {
	.dm-cc-left .dm-cc-title {
		font-size: 60px;
	}
}

/* Sub description — body/md/regular: Roboto Condensed, 400, 16px, 140%, 0%. */
.dm-cc-intro {
	color: var(--color-forest, var(--dm-fg-default-primary));
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4; /* 140% */
	letter-spacing: 0;
	max-width: 420px;
	margin-top: 1rem;
}

.dm-cc-right {
	min-width: 0;
}

/* Horizontal peek-scroll track.
   Bleeds edge-to-edge on mobile (negative margins cancel the page gutter) so
   the peek card runs off the screen instead of being hard-cut. */
.dm-cc-slider {
	display: flex;
	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-cc-slider::-webkit-scrollbar {
	display: none;
}

/* Card */
.dm-cc-card {
	position: relative;
	flex: 0 0 auto;
	width: 70%;
	aspect-ratio: 250 / 312; /* 250 x 312 — portrait on every breakpoint */
	border-radius: 0.375rem;
	overflow: hidden;
	scroll-snap-align: start;
	display: block;
	background: var(--dm-ext-greige);
}

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

.dm-cc-card:hover .dm-cc-card__img {
	transform: scale(1.05);
}

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

.dm-cc-card__footer {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
}

/* Card label — heading/h5: IM FELL Double Pica, Italic, 24px, 120%, 0%. */
.dm-cc-card__name {
	font-family: var(--font-display, serif);
	font-style: italic;
	font-weight: 400;
	color: var(--dmcc-cream, var(--color-beige-dark));
	font-size: 24px;
	line-height: 1.2; /* 120% */
	letter-spacing: 0;
	text-shadow: 0 1px 6px color-mix(in srgb, var(--dm-ext-black) 45%, transparent);
}

.dm-cc-card__arrow {
	color: var(--dm-fg-default-white);
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

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

/* Tablet+ : fixed-width cards, header beside slider */
@media (min-width: 640px) {
	.dm-cc-card {
		width: 46%;
	}
}

@media (min-width: 768px) {
	.dm-cc-inner {
		flex-direction: row;
		align-items: stretch;
		gap: 2.5rem;
	}

	.dm-cc-left {
		width: 28%;
		flex-shrink: 0;
	}

	/* Push the intro to the bottom of the left column, as in the design. */
	.dm-cc-intro {
		margin-top: auto;
		padding-top: 2rem;
	}

	/* Right column extends to the true viewport edge so the last card peeks
	   off-screen (calc(50% - 50vw) resolves to the exact right-side gutter). */
	.dm-cc-right {
		flex: 1;
		margin-right: calc(50% - 50vw);
	}

	.dm-cc-slider {
		margin: 0;
		padding: 0 1.5rem 0 0;
	}

	.dm-cc-card {
		width: 250px; /* 250 x 312 */
		aspect-ratio: 250 / 312;
	}
}

@media (min-width: 1024px) {
	.dm-cc-card {
		width: 250px;
	}
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "PLP - Small Desktop" > Collection Section (2021:16549):
 * px-100 pt-24 pb-64 over a 12-column grid with a 24px gutter.
 *   content    col 1/span 4  -> 344 wide, title top / description bottom
 *   card list  col 5/span 8  -> 712 wide, four 166px cards 16px apart
 * 166 x (500/400) = 207.5, which is the row height on the board.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-cc-body {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
	}

	/* Breadcrumbs (2021:16548): px-100 py-16, 8px between items, 14px text. */
	.dm-cc-breadcrumb-bar > .mx-auto {
		padding-inline: 0;
	}

	.dm-cc-breadcrumb ul {
		gap: 8px;
	}

	.dm-cc-inner {
		gap: 24px;
	}

	.dm-cc-left {
		width: 344px;
		flex: 0 0 344px;
		justify-content: space-between;  /* title top, description bottom */
	}

	.dm-cc-intro {
		max-width: none;                 /* fills the 344 column */
	}

	.dm-cc-slider {
		gap: 16px;
		margin-inline: 0;
		padding-inline: 0;
	}

	.dm-cc-card {
		width: 166px;                    /* four across the 712 track */
		border-radius: 4px;              /* radius/r-xs */
	}
}