/**
 * Cocktails page listing block styles.
 * Facet dropdowns, result grid polish, and numbered pagination.
 * Tailwind utilities handle layout; this file covers the interactive bits
 * and design details Tailwind classes don't express inline.
 */

.dm-cocktails {
	--dmc-forest: var(--dm-bg-default-tertiary);
	--dmc-cream: var(--dm-bg-default-primary);
	--dmc-sun: var(--dm-fg-accent-yellow);

	/* Full-width top divider matching the header's border. Padding (not margin)
	   keeps the section's cream filling the space, so the border sits flush
	   under the section above with no white gap showing through. */
	border-top: 1px solid color-mix(in srgb, var(--dm-ext-black) 15%, transparent);
	padding-top: 1rem;
	padding-bottom: 1rem;
}

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

/* ------------------------------------------------------------------ *
 * Toolbar / dropdowns
 * ------------------------------------------------------------------ */
/* Wider spacing between the facet dropdowns (overrides the inline gap-x-6). */
.dm-cocktails-filters {
	column-gap: 2.5rem;
}

.dm-cocktails-dd {
	position: relative;
}

.dm-cocktails-dd__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--dmc-forest);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.25rem 0;
	white-space: nowrap;
}

.dm-cocktails-dd__caret {
	transition: transform 0.2s ease;
}

.dm-cocktails-dd.is-open .dm-cocktails-dd__caret {
	transform: rotate(180deg);
}

.dm-cocktails-dd__panel {
	position: absolute;
	top: calc(100% + 0.6rem);
	right: 0;
	z-index: 40;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	background: var(--dm-bg-default-white);
	border: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
	border-radius: 0.6rem;
	box-shadow: 0 12px 30px color-mix(in srgb, var(--color-forest) 15%, transparent);
	padding: 0.5rem;
}

/* First dropdown can open flush-left so it doesn't clip off-screen. */
.dm-cocktails-filters .dm-cocktails-dd:first-child .dm-cocktails-dd__panel {
	right: auto;
	left: 0;
}

.dm-cocktails-dd__opt {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.4rem;
	font-size: 0.92rem;
	color: var(--dmc-forest);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.dm-cocktails-dd__opt:hover {
	background: color-mix(in srgb, var(--color-forest) 6%, transparent);
}

.dm-cocktails-dd__opt input {
	accent-color: var(--dmc-forest);
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.dm-cocktails-clear {
	/* Sit at the left of the filter list rather than the right end. */
	order: -1;
	margin-right: 0.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--dmc-forest);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Mobile Filter & Sort drawer
 *
 * Desktop: the drawer wrappers are transparent (display: contents) so the
 * facet dropdowns flow inline in the toolbar exactly as before; the trigger,
 * overlay, header and footer are hidden.
 * Mobile (<768px): the toolbar collapses to a "Filters" button that opens a
 * full-height sheet where each facet becomes an accordion section.
 * ------------------------------------------------------------------ */
.dm-cocktails-filter-trigger { display: none; }
.dm-cocktails-dd__count { display: none; }
/* Mobile-only clear button in the toolbar (desktop uses the in-drawer one). */
.dm-cocktails-clear-mobile { display: none; }

.dm-cocktails-drawer,
.dm-cocktails-drawer__panel,
.dm-cocktails-drawer__body { display: contents; }

.dm-cocktails-drawer__overlay,
.dm-cocktails-drawer__header,
.dm-cocktails-drawer__footer { display: none; }

/* Scroll lock applied to <body> while the drawer is open. */
.dm-cocktails-drawer-lock { overflow: hidden; }

@media (max-width: 767px) {
	/* Toolbar: results count (left) + trigger (right) on one row. */
	.dm-cocktails-toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/* Count + clear stacked on the left of the toolbar. */
	.dm-cocktails-count-wrap {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}

	.dm-cocktails-clear-mobile {
		display: inline-block;
		font-size: 0.8rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-weight: 700;
		color: var(--dmc-forest);
		background: none;
		border: 0;
		padding: 0;
		cursor: pointer;
		text-decoration: underline;
	}

	.dm-cocktails-clear-mobile[hidden] {
		display: none;
	}

	/* Trigger button — filled forest pill "Sort & Filter". */
	.dm-cocktails-filter-trigger {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
		font-family: var(--font-default);
		font-size: 1rem;
		font-weight: 500;
		color: var(--dm-fg-default-white);
		background: var(--dmc-forest);
		border: 0;
		border-radius: 9999px;
		padding: 0.7rem 1.5rem;
		cursor: pointer;
	}

	.dm-cocktails-filter-trigger__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 9999px;
		background: var(--dmc-cream);
		color: var(--dmc-forest);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
	}

	/* Overlay + sheet */
	.dm-cocktails-drawer {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		visibility: hidden;
		pointer-events: none;
	}

	.dm-cocktails-drawer.is-open {
		visibility: visible;
		pointer-events: auto;
	}

	.dm-cocktails-drawer__overlay {
		display: block;
		position: absolute;
		inset: 0;
		background: color-mix(in srgb, var(--color-forest) 50%, transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.dm-cocktails-drawer.is-open .dm-cocktails-drawer__overlay {
		opacity: 1;
	}

	.dm-cocktails-drawer__panel {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		background: var(--dm-bg-default-white);
		transform: translateY(100%);
		transition: transform 0.3s ease;
	}

	.dm-cocktails-drawer.is-open .dm-cocktails-drawer__panel {
		transform: none;
	}

	/* Header */
	.dm-cocktails-drawer__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.25rem 1.25rem;
		border-bottom: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
		flex-shrink: 0;
	}

	/* Headings/H-XXS: Arial 20/700, 26.4px line-height. */
	.dm-cocktails-drawer__title {
		font-family: Arial, var(--font-default), sans-serif;
		font-weight: 700;
		font-size: 20px;
		line-height: 26.4px;
		letter-spacing: 0;
		color: var(--dm-ext-black);
	}

	.dm-cocktails-drawer__close {
		display: inline-flex;
		background: none;
		border: 0;
		color: var(--dm-ext-black);
		cursor: pointer;
		padding: 0.25rem;
	}

	/* Scrollable body */
	.dm-cocktails-drawer__body {
		display: block;
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0.5rem 1.25rem 1.25rem;
	}

	/* Filters become a vertical accordion list */
	.dm-cocktails-filters {
		display: block;
		column-gap: 0;
	}

	.dm-cocktails-dd {
		border-bottom: 0;
	}

	/* Paragraphs/P-L: Arial 18/400, 25.2px line-height. */
	.dm-cocktails-dd__btn {
		width: 100%;
		font-family: Arial, var(--font-default), sans-serif;
		font-size: 18px;
		font-weight: 400;
		line-height: 25.2px;
		letter-spacing: 0;
		color: var(--dm-ext-black);
		padding: 0.8rem 0;
		white-space: normal;
	}

	.dm-cocktails-dd__caret {
		margin-left: auto;
	}

	.dm-cocktails-dd__count {
		display: inline;
		color: var(--dm-ext-black);
		font-weight: 400;
	}

	.dm-cocktails-dd__count:empty {
		display: none;
	}

	/* Panel expands inline (not an absolute popover) */
	.dm-cocktails-dd__panel {
		position: static;
		min-width: 0;
		max-height: none;
		overflow: visible;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0 0 0.75rem;
	}

	/* Paragraphs/P-S: Arial 14/400, 19.6px line-height. */
	.dm-cocktails-dd__opt {
		padding: 0.2rem 0;
		font-family: Arial, var(--font-default), sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 19.6px;
		letter-spacing: 0;
		color: var(--dm-ext-black);
	}

	.dm-cocktails-dd__opt input {
		width: 1.15rem;
		height: 1.15rem;
		border-radius: 0; /* square boxes, per design */
		accent-color: var(--dm-ext-near-black);
	}

	/* Clear All sits at the bottom of the list (order:-1 is a desktop layout). */
	.dm-cocktails-clear {
		order: 0;
		display: block;
		margin: 1.25rem 0 0;
	}

	/* Sticky footer with the Apply button */
	.dm-cocktails-drawer__footer {
		display: flex;
		justify-content: center;
		padding: 1rem 1.25rem;
		border-top: 1px solid color-mix(in srgb, var(--color-forest) 12%, transparent);
		flex-shrink: 0;
	}

	/* Link - Caps: Arial 16/700, 22.4px line-height, uppercase. */
	.dm-cocktails-apply {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		width: 100%;
		max-width: 289px;
		height: 38px;
		padding: 0 1.75rem;
		font-family: Arial, var(--font-default), sans-serif;
		font-weight: 700;
		font-size: 16px;
		line-height: 22.4px;
		letter-spacing: 0;
		text-transform: uppercase;
		color: var(--dm-fg-default-white);
		background: var(--dm-ext-near-black); /* solid black, per design */
		border: 0;
		border-radius: 2px;
		cursor: pointer;
		transition: opacity 0.18s ease;
	}

	.dm-cocktails-apply:hover {
		opacity: 0.9;
	}
}

/* ------------------------------------------------------------------ *
 * Results
 * ------------------------------------------------------------------ */
.dm-cocktails-results {
	transition: opacity 0.2s ease;
}

.dm-cocktails-results[data-cocktails-loading="true"] {
	opacity: 0.45;
	pointer-events: none;
}

/* Tighter gap above the results grid (overrides mt-8 md:mt-12). */
.dm-cocktails-results {
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.dm-cocktails-results {
		margin-top: 2rem;
	}
}

/* Vertical spacing between grid rows (overrides gap-y-8 md:gap-y-12). */
.dm-cocktails-grid {
	row-gap: 2rem;
}

@media (min-width: 768px) {
	.dm-cocktails-grid {
		row-gap: 3.1rem;
	}
}

/* Card image area — 348 x 435 (Figma card). */
.dm-cocktails-card__media {
	position: relative;
	aspect-ratio: 348 / 435;
	border-radius: 0.375rem;
}

/* Client request: photos fill the whole card (cropped), no letterbox.
   Transparent PNG cut-outs keep object-contain on the white background. */
.dm-cocktails-card__media--fill img {
	object-fit: cover;
}

/* Cut-outs get a light shadow under the glass. It follows the glass's own
   outline (works for any shape); offset > blur keeps the top/sides clean. */
.dm-cocktails-card__media:not(.dm-cocktails-card__media--fill) img {
	filter: drop-shadow(0 9px 5px rgba(0, 0, 0, 0.09));
}

/* Card title — heading/h5: IM FELL Double Pica, Italic, 400, 24px, 120%. */
.dm-cocktails-card__title {
	font-family: var(--font-display, serif);
	font-style: italic;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.2; /* 120% */
	color: var(--color-forest, var(--dm-bg-default-tertiary));
	margin-top: 1rem;
	transition: color 0.2s ease;
}

/* Card description — body/sm/regular: Roboto Condensed, 400, 14px, 140%.
   Single-line, ellipsis-truncated per the Figma content spec. */
.dm-cocktails-card__desc {
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4; /* 140% */
	color: var(--color-forest, var(--dm-bg-default-tertiary));
	margin-top: 0.625rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dm-cocktails-card a:hover .dm-cocktails-card__title {
	color: var(--color-forest-light, var(--dm-ext-forest-light));
}

/* Subtle hover: the card lifts a touch and the image gains a soft shadow,
   complementing the gentle image zoom already on the thumbnail. */
.dm-cocktails-card a {
	transition: transform 0.35s var(--dm-ease, ease);
}

.dm-cocktails-card__media {
	transition: box-shadow 0.35s ease;
}

.dm-cocktails-card a:hover {
	transform: translateY(-4px);
}

.dm-cocktails-card a:hover .dm-cocktails-card__media {
	box-shadow: 0 14px 30px color-mix(in srgb, var(--color-forest) 16%, transparent);
}

/* Placeholder shown when a cocktail has no image and no asset is bundled. */
.dm-cocktails-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--font-display, serif);
	font-style: italic;
	font-size: 3rem;
	color: color-mix(in srgb, var(--color-forest) 25%, transparent);
}

/* ------------------------------------------------------------------ *
 * Pagination
 * ------------------------------------------------------------------ */
/* Tighter spacing between page numbers (overrides gap-3 md:gap-5). */
.dm-cocktails-pagination {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	max-width: 100%;
}

/* Two pagers: full list on desktop, condensed window on mobile. */
.dm-cocktails-pagination--mobile { display: none; }

@media (max-width: 767px) {
	.dm-cocktails-pagination--desktop { display: none; }
	.dm-cocktails-pagination--mobile { display: inline-flex; gap: 0.5rem; }
}

/* Skipped-range marker in the condensed pager. */
.dm-cocktails-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 2.5rem;
	color: var(--dmc-forest);
	font-size: 1.05rem;
}

.dm-cocktails-page,
.dm-cocktails-page-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.5rem;
	border-radius: 999px;
	border: 0;
	background: none;
	color: var(--dmc-forest);
	font-size: 1.05rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dm-cocktails-page:hover:not(.is-current),
.dm-cocktails-page-arrow:hover:not(.is-disabled) {
	background: color-mix(in srgb, var(--color-forest) 8%, transparent);
}

.dm-cocktails-page.is-current {
	background: var(--dmc-forest);
	color: var(--dm-fg-default-white);
	font-weight: 600;
	cursor: default;
	/* Fixed 48 x 48 circle for the active page. */
	width: 48px;
	min-width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
}

.dm-cocktails-page-arrow.is-disabled {
	opacity: 0.35;
	cursor: default;
}

/* ------------------------------------------------------------------ *
 * Featured split panel
 * ------------------------------------------------------------------ */
/* Media panel keeps a fixed 732:585 aspect ratio (per design) instead of the
   inline min-heights. The text panel beside it stretches to match. */
/* Softer, less-round corners than the inline rounded-xl. */
.dm-cocktails-featured {
	border-radius: 0.375rem;
}

.dm-cocktails-featured__media {
	/* Mobile (stacked): the ratio gives the panel its height. */
	aspect-ratio: 732 / 585;
	min-height: 0;
}

/* Two-column: the halves must match height AND stay exactly 50/50.
   Keeping `aspect-ratio` here is a trap — with a stretched height and no
   definite width the ratio resolves backwards (height -> width) and the white
   panel grows past its column, painting over the text beside it. */
@media (min-width: 768px) and (max-width: 1280.98px) {
	.dm-cocktails-featured__media {
		aspect-ratio: auto;
		width: 100%;
		max-width: 100%;
		height: 100%;
		min-height: 420px;              /* floor, so it can't collapse */
	}
}

/* Featured heading — heading/h3: IM FELL Double Pica, Italic, 400, 40px,
   line-height 110%, letter-spacing -1%. Overrides the heading helper sizes. */
.dm-cocktails-featured__body .dm-featured-title {
	font-family: var(--font-display, serif);
	font-weight: 400;
	font-style: italic;
	font-size: 2rem; /* mobile */
	line-height: 1.1; /* 110% */
	letter-spacing: -0.01em; /* -1% */
	margin-bottom: 1.7rem;
}

@media (min-width: 768px) {
	.dm-cocktails-featured__body .dm-featured-title {
		font-size: 40px;
		margin-bottom: 2rem;
	}
}

/* Eyebrow label — body/xs/strong: Roboto Condensed, 500, 12px, 140%, 0%, 80%. */
.dm-cocktails-featured__body .dm-featured-eyebrow {
	font-family: var(--font-default);
	font-weight: 500;
	font-size: 12px;
	line-height: 1.4; /* 140% */
	letter-spacing: 0; /* 0% */
	opacity: 0.8;
}

/* Description — body/lg/regular: Roboto Condensed, 400, 18px, 140%, 0%. */
.dm-cocktails-featured__body .dm-featured-desc {
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4; /* 140% */
	letter-spacing: 0; /* 0% */
}

/* View Recipe button — body/md/regular: Roboto Condensed, 400, 16px, 140%, 0%,
   title case (overrides the button helper's bold/uppercase/tracking). */
.dm-cocktails-featured__body .dm-featured-btn {
	font-family: var(--font-default);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.4; /* 140% */
	letter-spacing: 0; /* 0% */
	text-transform: none;
	background-color: var(--dm-bg-default-white); /* white pill, not cream */
	/* Shorter, compact button that hugs its text (not full width),
	   with a minimum footprint of 125 x 48. */
	padding: 0.5rem 1.75rem;
	border-radius: 9999px;
	width: auto;
	max-width: none;
	min-width: 125px;
	min-height: 48px;
}

.dm-cocktails-featured__media img {
	display: block;
	max-height: 100%;
	max-width: 100%;                    /* never spill out of the panel */
	width: auto;
	margin: 0 auto;
}

/* Give the bottle/glass a little more room around it on the split panel. */
@media (min-width: 768px) and (max-width: 1280.98px) {
	.dm-cocktails-featured__media img {
		max-height: 80%;
	}
}

/* Opaque photos (JPG etc.): fill the whole white half instead of floating.
   Two classes + !important so this beats the contained rules above and the
   p-6 / object-contain utilities in the markup. */
.dm-cocktails-featured__media.is-cover > a {
	padding: 0 !important;
}

.dm-cocktails-featured__media.is-cover img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	margin: 0;
}

/* ---- Small desktop (1280+): match the Figma board -------------------- *
 * Figma "Home Page - Small Desktop" > featured section (1987:16234):
 * container 1080x432 with radius 4; the image half is aspect 500/400 (540x432
 * at 1280); the content half is px-48 py-24, vertically centred.
 *
 * Selectors are doubled up (two classes) so they outrank the single-class
 * Tailwind utilities set inline in the markup (rounded-xl, md:px-14, md:py-16)
 * regardless of stylesheet order. */
@media (min-width: 1024px) and (max-width: 1280.98px) {
	.dm-featured-cocktail-block > .mx-auto {
		/* The capped 1080 container already provides Figma's 100px gutter. */
		padding-inline: 0;
	}

	.dm-featured-cocktail-block .dm-cocktails-featured {
		border-radius: 4px;             /* radius/r-xs, not rounded-xl */
	}

	.dm-featured-cocktail-block .dm-cocktails-featured__media {
		/* 540 wide at 1280, so the 500/400 ratio gives Figma's 432 height. */
		min-height: 432px;
	}

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