/* ==========================================================================
   VOODOO VODKA — routes/cocktails.css
   Rev6 · Grand Design §4.5 — "The House Pours" hour spreads.

   Loaded after pages.css on /cocktails only (inc/enqueue.php →
   vv_route_css_slug). Owns the compact hero, the sticky Hour Rail
   (jump-nav/filter + quiet effort/glass toolbar), and the five full-bleed
   Hour Spreads. Reuses the existing card anatomy (.vv-cocktail-card*, in
   pages.css) unchanged — only the surrounding structure is new.

   Restraint: the one warm note per frame is the hour hue, and it lands only
   as a hairline (card top rule), a small pill dot, and the Hour Stamp rule —
   never a wash. Motion is limited to the shared FLIP reflow and slow scroll.
   ========================================================================== */

:root {
	--vv-ck-rail-h: 66px;   /* single-row rail (desktop) — sizing reference     */
}

/* --- Compact hero --------------------------------------------------------- */
.vv-ck-hero {
	text-align: center;
	padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 3.5rem);
}
.vv-ck-hero .vv-measure { margin-inline: auto; }
.vv-ck-hero__title {
	font-family: var(--vv-font-display);
	font-weight: 400;
	font-size: clamp(2.6rem, 6vw, 4.5rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: var(--vv-bone);
	margin: 0.2em 0 0;
}
.vv-ck-hero__sub {
	font-family: var(--vv-font-body, var(--vv-font-ritual));
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--vv-bone-70);
	max-width: 46ch;
	margin: 1.1em auto 0;
}

/* --- Sticky Hour Rail ----------------------------------------------------- */
.vv-hour-rail {
	position: sticky;
	top: var(--vv-nav-height);
	z-index: 40;
	background: color-mix(in srgb, var(--vv-ink) 92%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	        backdrop-filter: blur(14px) saturate(140%);
	border-top: 1px solid var(--vv-border-gold);
	border-bottom: 1px solid var(--vv-border-gold);
}
/* The header is position:fixed and gets pushed down by the WP admin bar when
   logged in; the sticky rail must clear it too, or the header overlaps the rail.
   Mirrors the .vv-ritual-filters admin-bar offset. */
body.admin-bar .vv-hour-rail { top: calc(var(--vv-nav-height) + 32px); }
.vv-hour-rail__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(12px, 3vw, 32px);
	min-height: var(--vv-ck-rail-h);
	padding-block: 8px;
}

/* Pills — jump-nav (All) / filter (a specific hour) */
.vv-hour-rail__pills {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
}
.vv-hour-rail__pills::-webkit-scrollbar { display: none; }

.vv-hour-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 8px 16px;
	scroll-snap-align: start;
	font-family: var(--vv-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vv-bone-70);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--vv-dur-fast) var(--vv-ease-out-expo),
	            background var(--vv-dur-fast) var(--vv-ease-out-expo),
	            border-color var(--vv-dur-fast) var(--vv-ease-out-expo);
}
/* The hour hue rides only as a small leading dot (no wash). */
.vv-hour-pill[data-vv-hour-pill]:not([data-vv-hour-pill="all"])::before {
	content: "";
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--vv-hour, var(--vv-brass));
	flex: 0 0 auto;
}
.vv-hour-pill:hover { color: var(--vv-bone); border-color: var(--vv-bone-30); }
.vv-hour-pill.is-active {
	color: var(--vv-ink);
	background: var(--vv-bone);
	border-color: var(--vv-bone);
}
.vv-hour-pill:focus-visible {
	outline: 2px solid var(--vv-marigold);
	outline-offset: 2px;
}

/* Quiet effort/glass toolbar */
.vv-hour-rail__facets {
	display: flex;
	align-items: center;
	gap: clamp(10px, 2vw, 20px);
	flex: 0 0 auto;
}
.vv-facet {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.vv-facet__label {
	font-family: var(--vv-font-ui);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--vv-bone-50);
}
.vv-facet__select {
	font-family: var(--vv-font-ui);
	font-size: 12px;
	color: var(--vv-bone);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--vv-bone-30);
	padding: 8px 4px;
	min-height: 44px;
	cursor: pointer;
	transition: border-color var(--vv-dur-fast) var(--vv-ease-out-expo);
}
.vv-facet__select:hover { border-bottom-color: var(--vv-bone); }
.vv-facet__select:focus-visible { outline: 2px solid var(--vv-marigold); outline-offset: 2px; }
.vv-facet__select option { color: var(--vv-ink); }
.vv-facet__reset {
	font-family: var(--vv-font-ui);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vv-bone-50);
	background: transparent;
	border: 0;
	min-height: 44px;
	padding: 0 4px;
	cursor: pointer;
	transition: color var(--vv-dur-fast) var(--vv-ease-out-expo);
}
.vv-facet__reset:hover { color: var(--vv-marigold-deep); }
.vv-facet__reset:focus-visible { outline: 2px solid var(--vv-marigold); outline-offset: 2px; }

/* --- Hour Spreads --------------------------------------------------------- */
.vv-ck-spreads { display: block; }
.vv-ck-spread {
	/* Land clear of the fixed nav + sticky rail when jumped/deep-linked. */
	scroll-margin-top: calc(var(--vv-nav-height) + var(--vv-ck-rail-h) + 12px);
	padding-block: clamp(2.5rem, 7vh, 5.5rem) 0;
}
.vv-ck-spread:first-child { padding-top: clamp(1.5rem, 4vh, 3rem); }

/* Full-bleed 21:9 hour plate with the Hour Stamp + motto in the safe zone */
.vv-ck-plate {
	position: relative;
	width: 100%;
	overflow: hidden;
	isolation: isolate;
}
.vv-ck-plate__img,
.vv-ck-plate .vv-imgslot--empty {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
}
/* Bottom scrim so the caption holds contrast over future photography. */
.vv-ck-plate::after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(21,16,14,0.72) 0%, rgba(21,16,14,0.12) 34%, transparent 60%);
}
.vv-ck-plate__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 2;
	padding: clamp(16px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.vv-ck-plate__caption .vv-hour-stamp { justify-content: flex-start; }
.vv-ck-plate__caption .vv-hour-stamp::before { display: none; }  /* left-anchored, single trailing rule */
.vv-ck-plate__motto {
	font-family: var(--vv-font-ritual);
	font-style: italic;
	font-size: clamp(1.35rem, 3vw, 2.4rem);
	line-height: 1.15;
	color: var(--vv-bone);
	max-width: 24ch;
	margin: 0;
	text-shadow: 0 1px 24px rgba(21,16,14,0.5);
}

/* That hour's recipes — 4-up cards */
.vv-ck-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(16px, 2vw, 28px);
	margin-top: clamp(20px, 3vw, 36px);
}
@media (max-width: 1024px) { .vv-ck-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .vv-ck-cards { grid-template-columns: 1fr; } }

/* Filter/jump visibility toggles (set by hour-rail.js / gallery-filter.js) */
.vv-ck-spread.vv-hour-hidden,
.vv-ck-spread.vv-facet-empty { display: none; }

/* Empty-facet state — sits inside the spreads flow */
.vv-cocktails__empty { padding-block: clamp(3rem, 10vh, 7rem); }

/* --- Mobile: rail wraps to two rows -------------------------------------- */
@media (max-width: 720px) {
	.vv-hour-rail { top: var(--vv-nav-height-mobile); }
	body.admin-bar .vv-hour-rail { top: calc(var(--vv-nav-height-mobile) + 46px); }
	.vv-hour-rail__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding-block: 10px;
	}
	.vv-hour-rail__facets { justify-content: space-between; }
	.vv-facet__label { display: none; }  /* the select's own options read as the label */
	.vv-ck-spread {
		scroll-margin-top: calc(var(--vv-nav-height-mobile) + 128px);
	}
}

/* --- Reduced motion — the FLIP is already skipped in JS; keep hover calm --- */
@media (prefers-reduced-motion: reduce) {
	.vv-hour-pill,
	.vv-facet__select,
	.vv-facet__reset { transition: none; }
}