/**
 * Product-category (mezcal collection) PLP.
 * Full-bleed hero the transparent header overlays, plus the cream intro band
 * (breadcrumb + title + description). The header transparency/scroll behavior
 * itself lives in header.css (.dm-transparent-header) + header.js.
 */

/* ------------------------------------------------------------------ *
 * Hero — pulled up under the overlaid header via the shared height var.
 * ------------------------------------------------------------------ */
.dm-collection-hero {
	position: relative;
	width: 100%;
	height: 320px; /* mobile */
	margin-top: calc(-1 * var(--dm-header-h, 88px));
	overflow: hidden;
	background: var(--color-forest, var(--dm-bg-default-tertiary));
}

.dm-collection-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Top blur: softens the image directly under the overlaid nav so the white
   links stay legible over a busy hero. Masked so the blur fades out by the
   middle of the hero and the lower half stays sharp. Sits under the darkening
   gradient below, which therefore keeps its own crisp edges. */
.dm-collection-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 62%;
	z-index: 1;
	pointer-events: none;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	-webkit-mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 4%,
		rgba(0, 0, 0, 0.35) 34%,
		transparent 100%
	);
	mask-image: linear-gradient(
		180deg,
		#000 0%,
		#000 4%,
		rgba(0, 0, 0, 0.35) 34%,
		transparent 100%
	);
}

/* Darkening overlay: tames the busy/soft hero and keeps the white header legible.
   Slightly stronger at the top where the overlaid nav sits. */
.dm-collection-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--dm-ext-black) 72%, transparent) 0%,
		color-mix(in srgb, var(--dm-ext-black) 50%, transparent) 18%,
		color-mix(in srgb, var(--dm-ext-black) 22%, transparent) 45%,
		color-mix(in srgb, var(--dm-ext-black) 12%, transparent) 100%
	);
}

@media (min-width: 768px) {
	.dm-collection-hero {
		height: 420px;
	}
}

/* On the collection archive the cocktail grid sits directly under the cream
 * intro band, so drop the shared listing's top divider (and its spacer padding). */
.dm-collection .dm-cocktails {
	border-top: 0;
	padding-top: 0;
}

/* ------------------------------------------------------------------ *
 * Featured cocktail split panel (below the grid/banner).
 * ------------------------------------------------------------------ */
.dm-collection-featured {
	padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
	.dm-collection-featured {
		padding-bottom: 5rem;
	}
}

/* ------------------------------------------------------------------ *
 * Intro band — breadcrumb + title + description on cream.
 * ------------------------------------------------------------------ */
.dm-collection-intro {
	padding-top: 1.5rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	.dm-collection-intro {
		padding-top: 1.2rem;
		padding-bottom: 3.9rem;
	}
}

.dm-collection-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-family: var(--font-default);
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-forest, var(--dm-fg-default-primary));
}

.dm-collection-breadcrumb a {
	color: var(--color-forest, var(--dm-fg-default-primary));
	opacity: 0.7;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.dm-collection-breadcrumb a:hover {
	opacity: 1;
}

.dm-collection-breadcrumb__sep {
	opacity: 0.4;
}

.dm-collection-breadcrumb__current {
	font-weight: 500;
}

/* Title (left) + description (right on desktop, stacked on mobile). */
.dm-collection-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.dm-collection-intro__inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 3rem;
		margin-top: 2.5rem;
	}
}

/* heading/h1: IM FELL Double Pica, 60px, 400, 110%, -1.2px. Upright (roman) —
   the base heading style renders italic, so force normal here. */
.dm-collection-title {
	flex: 0 1 auto;
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(2.5rem, 5.4vw, 60px);
	line-height: 1.1; /* 110% -> 66px at 60px */
	letter-spacing: -0.02em; /* -1.2px at 60px */
	color: var(--dm-bg-default-tertiary);
}

/* body/md/regular: Roboto Condensed, 16px, 400, 140%. */
.dm-collection-desc {
	margin: 0;
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4; /* 140% -> 22.4px */
	color: var(--dm-bg-default-tertiary);
	max-width: 34rem;
}

@media (min-width: 768px) {
	.dm-collection-desc {
		flex: 0 1 34rem;
	}
}

/* SEO Description (collections taxonomy): editor copy under the H1.
   Body/md like .dm-collection-desc; sub-headings in the display face. */
.dm-collection-seo {
	max-width: 50rem;
	margin-top: 1.5rem;
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: var(--dm-bg-default-tertiary);
}

.dm-collection-seo > * + * {
	margin-top: 1rem;
}

.dm-collection-seo h2,
.dm-collection-seo h3,
.dm-collection-seo h4 {
	margin-top: 1.75rem;
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-weight: 400;
	line-height: 1.15;
	color: var(--dm-bg-default-tertiary);
}

.dm-collection-seo h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.dm-collection-seo h3 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); }
.dm-collection-seo h4 { font-size: 1.25rem; }

.dm-collection-seo a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dm-collection-seo ul,
.dm-collection-seo ol {
	padding-left: 1.25rem;
}

.dm-collection-seo ul { list-style: disc; }
.dm-collection-seo ol { list-style: decimal; }

.dm-collection-seo strong { font-weight: 700; }

@media (min-width: 768px) {
	.dm-collection-seo {
		margin-top: 2.5rem;
	}
}

/* ============================ Collection FAQ ============================ */

/* Extra breathing room below the FAQ before the footer. Two-class selector so it
   overrides the section's pb-8 utility regardless of stylesheet order. */
.dm-collection-faq.delmaguey-b-faq {
	padding-bottom: 3.5rem;
}

@media (min-width: 1024px) {
	.dm-collection-faq.delmaguey-b-faq {
		padding-bottom: 6rem;
	}
}

/* Square dividers — the DaisyUI .collapse component adds a border-radius that
   makes the bottom rule curl up at the ends; keep the FAQ rows sharp. */
.dm-collection-faq .collapse {
	border-radius: 0;
}

/* Top rule on the first item so the list is closed at the top too (each item
   already carries a full-width bottom border). Matches border-forest/20. */
.dm-collection-faq .repeater-wrapper > .collapse:first-child {
	border-top: 1px solid color-mix(in srgb, var(--color-forest) 20%, transparent);
}

/* Content wrapper — the divider (border-b) runs full width, but the question row
   and answer text are capped at 800px and centred. Set in plain CSS because the
   theme ships a pre-built Tailwind (no JIT), so arbitrary utilities such as
   `max-w-[800px]` are not compiled. */
.dm-collection-faq .dm-collection-faq__row,
.dm-collection-faq .dm-collection-faq__a {
	width: 100%;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

/* A little more vertical breathing room on each question row. */
.dm-collection-faq .dm-collection-faq__row {
	padding-top: 1.75rem;
	padding-bottom: 1.75rem;
}

@media (max-width: 767px) {
	.dm-collection-faq .dm-collection-faq__row {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
}

/* Section heading — heading/h2: IM FELL Double Pica, 400, 52px, 110%, -1.04px
   (-0.02em). Base is roman; only the leading <em> (first word, e.g. "Vida")
   renders italic — matching the shared .dm-sec-title pattern and the design. */
.dm-collection-faq__title {
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(2rem, 4.5vw, 52px);
	line-height: 1.1; /* 110% -> 57.2px */
	letter-spacing: -0.02em; /* -1.04px at 52px */
	color: var(--dm-bg-default-tertiary);
	text-align: center;
}

.dm-collection-faq__title em {
	font-style: italic;
}

/* Mobile heading-mobile/h2-M: 36px, 110%, -0.72px. */
@media (max-width: 767px) {
	.dm-collection-faq__title {
		font-size: 36px;
		letter-spacing: -0.72px;
	}
}

/* Question — heading/h5: IM FELL Double Pica, upright (normal), 400, 24px, 120%. */
.dm-collection-faq .dm-collection-faq__q {
	font-family: var(--font-display, "IM FELL Double Pica", serif);
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2; /* 120% -> 28.8px */
	color: var(--dm-bg-default-tertiary);
}

/* Answer — body/lg/regular: Roboto Condensed, 400, 18px, 140%. */
.dm-collection-faq .dm-collection-faq__a {
	font-family: var(--font-default, "Roboto Condensed", sans-serif);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4; /* 140% -> 25.2px */
	color: var(--dm-bg-default-tertiary);
}

/* ---- Small desktop (1024-1280): match the Figma board ---------------- *
 * Figma "PLP (category) - Small Desktop" (2021:19403):
 *   Collection Header (2021:19432)  hero, 320 tall under the 124 overlaid nav
 *   breadcrumbs (2021:19433)        py-16, 8 apart; links full, current 70%
 *   Collection Header (2021:19434)  pt-24 pb-64, title | description in two
 *                                   equal columns 24 apart, description max 500
 *   featured section (2021:19470)   pt-40 pb-80, same panel as the home board
 *   FAQ (2021:19479)                py-80, 40 under the title, 800 rows py-24
 * The filter bar + product grid live in mezcales-listing.css.
 * Must stay at the end of the file: a media query adds no specificity. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-collection-hero {
		height: 320px;
	}

	.dm-collection-intro {
		padding-top: 16px;
		padding-bottom: 64px;
	}

	.dm-collection-intro > .mx-auto,
	.dm-collection-featured > .mx-auto {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
	}

	.dm-collection-breadcrumb a {
		opacity: 1;
	}

	.dm-collection-breadcrumb__sep {
		opacity: 1;
	}

	.dm-collection-breadcrumb__current {
		font-weight: 400;
		opacity: 0.7;
	}

	/* 16 under the breadcrumb + the header's 24 top padding. */
	.dm-collection-intro__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-top: 40px;
	}

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

	.dm-collection-desc {
		max-width: 500px;
	}

	/* Featured cocktail: two classes so these outrank the inline rounded-xl /
	   md:px-14 md:py-16 utilities regardless of stylesheet order. */
	.dm-collection-featured {
		padding-top: 0;                 /* the listing's 80 bottom already spaces it */
		padding-bottom: 80px;
	}

	.dm-collection-featured .dm-cocktails-featured {
		border-radius: 4px;             /* radius/r-xs */
	}

	.dm-collection-featured .dm-cocktails-featured__media {
		min-height: 432px;              /* 540 wide at 1280, aspect 500/400 */
	}

	.dm-collection-featured .dm-cocktails-featured__body {
		padding: 24px 48px;
	}

	/* FAQ */
	.dm-collection-faq.delmaguey-b-faq {
		padding-bottom: 80px;
	}

	.dm-collection-faq__title {
		font-size: 52px;
	}

	/* Rows are the full 800 on the board, so no inner gutter here (the 1080
	   container is wider than 800 throughout this range). */
	.dm-collection-faq .dm-collection-faq__row,
	.dm-collection-faq .dm-collection-faq__a {
		padding-left: 0;
		padding-right: 0;
	}

	/* Header row: py-24 around a 32px chevron box = 80 tall. */
	.dm-collection-faq .dm-collection-faq__row {
		padding-top: 24px;
		padding-bottom: 24px;
		gap: 10px;
	}

	.dm-collection-faq .dm-collection-faq__q {
		padding-right: 0;
	}

	.dm-collection-faq__row > span:last-child {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
	}
}