/*
 * Menu surfaces: template-parts/martini-list.php and template-parts/menu-section.php.
 * Enqueued on /menu/ and /martinis/ (and anywhere a page sets 'css' => 'menu').
 * Layout only; tokens and base component styles come from design-system.css.
 *
 * Rows use a dotted leader between name and price. When the price is null the
 * price span is not rendered, and the leader collapses to nothing.
 */

/* Shared row mechanics ------------------------------------------------ */
/* Menu items keep the named-area grid (tags live in a .sp-menu-item__tags
   wrapper). Martini rows are a wrapping flex row instead: their tags are
   loose siblings, and stacking several of them into one grid area painted
   them on top of each other ("Classic" over "Signature"). Flex lets the
   chips sit side by side and wrap. */
.sp-menu-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"name   leader price"
		"desc   desc   desc"
		"tags   tags   tags";
	column-gap: 10px;
	row-gap: 4px;
	align-items: baseline;
	padding: 14px 0;
	border-bottom: 1px solid var(--sp-rule-lt);
}

.sp-martini {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 10px;
	row-gap: 4px;
	padding: 14px 0;
	border-bottom: 1px solid var(--sp-rule-lt);
}

.sp-section--ink .sp-martini,
.sp-section--forest .sp-martini,
.sp-section--ink .sp-menu-item,
.sp-section--forest .sp-menu-item {
	border-bottom-color: var(--sp-rule-dk);
}

.sp-martinis,
.sp-menu-items,
.sp-menu-section__lines {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-martini__name,
.sp-menu-item__name {
	grid-area: name;
	font-family: var(--sp-display);
	font-size: clamp(21px, 2.2vw, 25px);
	font-weight: 500;
	line-height: 1.15;
}

.sp-martini__name {
	order: 1;
	font-style: italic;
}

.sp-martini__leader,
.sp-menu-item__leader {
	grid-area: leader;
	align-self: end;
	height: 1em;
	margin: 0 2px;
	border-bottom: 1px dotted currentColor;
	opacity: .45;
	transform: translateY(-0.28em);
}

.sp-martini__leader {
	order: 2;
	flex: 1 1 24px;
	min-width: 24px;
	align-self: flex-end;
	margin-bottom: 0;
	background: none;
}

/* No price: the leader has nothing to lead to. */
.sp-martini__leader:last-child,
.sp-martini__leader + .sp-martini__desc:last-child,
.sp-menu-item__leader:last-child {
	opacity: 0;
}

.sp-martini:not(:has(.sp-martini__price)) .sp-martini__leader,
.sp-menu-item:not(:has(.sp-menu-item__price)) .sp-menu-item__leader {
	visibility: hidden;
}

.sp-martini__price,
.sp-menu-item__price {
	grid-area: price;
	font-family: var(--sp-mono);
	font-size: 14px;
	letter-spacing: .04em;
	white-space: nowrap;
}

.sp-martini__price {
	order: 3;
}

.sp-martini__desc,
.sp-menu-item__desc {
	grid-area: desc;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sp-mute-lt);
}

.sp-martini__desc {
	order: 4;
	flex: 0 0 100%;
	padding-right: max(0px, calc(100% - 60ch));
}

.sp-section--ink .sp-martini__desc,
.sp-section--forest .sp-martini__desc,
.sp-section--ink .sp-menu-item__desc,
.sp-section--forest .sp-menu-item__desc {
	color: var(--sp-mute);
}

.sp-menu-item__tags {
	grid-area: tags;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 2px;
}

.sp-martini__tag {
	order: 5;
	margin-top: 2px;
}

/* Chips share the row's 10px column gap; tighten to 6px between chips. */
.sp-martini__tag + .sp-martini__tag {
	margin-left: -4px;
}

/* Martini list (front page, /martinis/) ------------------------------- */
.sp-martini-list__body {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
}

.sp-martini-list--with-image .sp-martini-list__body {
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: start;
}

.sp-martini-list__media {
	position: sticky;
	top: calc(72px + 16px);
}

.sp-menu-note {
	margin: clamp(20px, 3vw, 28px) 0 0;
	font-family: var(--sp-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sp-mute-lt);
}

.sp-section--ink .sp-menu-note,
.sp-section--forest .sp-menu-note {
	color: var(--sp-mute);
}

/* Full menu sections (/menu/) ----------------------------------------- */
.sp-menu-section {
	padding: clamp(32px, 5vw, 56px) 0;
	border-top: 1px solid var(--sp-rule-lt);
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	grid-template-areas:
		"head"
		"media"
		"lines"
		"items";
}

.sp-menu-section:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.sp-menu-section__head {
	grid-area: head;
}

.sp-menu-section__name {
	font-family: var(--sp-display);
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 500;
	line-height: 1;
	margin: 0 0 10px;
}

.sp-menu-section__intro {
	margin: 0;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.6;
	color: var(--sp-mute-lt);
}

.sp-menu-section__media {
	grid-area: media;
}

.sp-menu-section__lines {
	grid-area: lines;
}

.sp-menu-section__line {
	font-family: var(--sp-display);
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 500;
	padding: 12px 0;
	border-bottom: 1px solid var(--sp-rule-lt);
}

.sp-menu-items {
	grid-area: items;
}

@media (min-width: 900px) {
	.sp-menu-section--with-image {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		/* A fourth 1fr row absorbs the photo's height. Without it the grid
		   spreads the tall sticky photo's size across the auto rows and
		   drops a one-item list to the bottom of the section. */
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas:
			"head  media"
			"lines media"
			"items media"
			".     media";
		column-gap: clamp(32px, 5vw, 64px);
		/* Row gap off: the empty "lines" row otherwise costs two gaps (about
		   90px) between a section head and its first item. Spacing is
		   carried by margins on the rows that actually render. */
		row-gap: 0;
		align-content: start;
	}

	.sp-menu-section--with-image .sp-menu-section__head {
		margin-bottom: clamp(20px, 2.5vw, 28px);
	}

	.sp-menu-section--with-image .sp-menu-section__lines:not(:empty) {
		margin-bottom: 20px;
	}

	.sp-menu-section--with-image .sp-menu-section__media {
		position: sticky;
		top: calc(72px + 16px);
		align-self: start;
	}

	/* Section photo as a tall menu-card plate (4:5) instead of a small 3:2
	   thumbnail floating in an empty column. */
	.sp-menu-section--with-image .sp-menu-section__media .sp-media::before {
		padding-top: 125%;
	}
}

/* Item photo (small square, left of the name) */
.sp-menu-item--with-image {
	grid-template-columns: 72px auto 1fr auto;
	grid-template-areas:
		"media name   leader price"
		"media desc   desc   desc"
		"media tags   tags   tags";
}

.sp-menu-item__media {
	grid-area: media;
	align-self: start;
	display: block;
	width: 72px;
	border-radius: 3px;
	overflow: hidden;
}

/* Jump nav (page-menu.php may render one; keep it aligned with the sections) */
.sp-menu-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.sp-menu-jump .sp-chip {
	text-decoration: none;
}

/* Sample rows: quiet marker for staff and reviewers, invisible to guests. */
[data-sample="1"] .sp-menu-item__name::after,
[data-sample="1"] .sp-martini__name::after {
	content: "";
}

@media (max-width: 899px) {
	.sp-martini-list--with-image .sp-martini-list__body {
		grid-template-columns: 1fr;
	}
	.sp-martini-list__media {
		position: static;
	}
}

/* ---------------------------------------------------------------------
 * page-menu.php additions: intro prose, sticky section nav, menu card
 * foot, "how it works" groups prose, related links row. Layout only;
 * scoped to body.sp-page-menu. Tokens from design-system.css.
 * ------------------------------------------------------------------ */

/* Intro prose */
.sp-page-menu .sp-menu-intro .sp-prose > .sp-h2 {
	margin-bottom: clamp(16px, 2vw, 24px);
}

/* .sp-prose gives every non-first h2 a 1.4em top margin; when an eyebrow
   precedes the h2 that margin opens a 70px hole between the two. */
.sp-page-menu .sp-prose > .sp-eyebrow + .sp-h2,
.sp-page-menu .sp-prose > .sp-eyebrow + h2 {
	margin-top: 0;
}

.sp-page-menu .sp-menu-intro .sp-prose > p + p {
	margin-top: 1.1em;
}

/* Sticky section nav: sits under the fixed site nav, scrolls sideways on
 * narrow screens, never wraps the page horizontally. */
.sp-page-menu .sp-menu-nav {
	position: sticky;
	top: var(--sp-nav-h);
	z-index: 20;
	background: var(--sp-cream);
	color: var(--sp-ink);
	border-top: 1px solid var(--sp-rule-lt);
	border-bottom: 1px solid var(--sp-rule-lt);
}

.sp-page-menu .sp-menu-nav .sp-container {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 52px;
}

.sp-page-menu .sp-menu-nav__label {
	flex: 0 0 auto;
	margin: 0;
	color: var(--sp-brass-2);
}

.sp-page-menu .sp-menu-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.sp-page-menu .sp-menu-nav__list::-webkit-scrollbar {
	display: none;
}

.sp-page-menu .sp-menu-nav__item {
	flex: 0 0 auto;
	margin: 0;
}

.sp-page-menu .sp-menu-nav__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 12px;
	font-family: var(--sp-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sp-ink);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: border-color var(--sp-fast) var(--sp-ease), color var(--sp-fast) var(--sp-ease);
}

.sp-page-menu .sp-menu-nav__link:hover,
.sp-page-menu .sp-menu-nav__link:focus-visible {
	color: var(--sp-brass-2);
	border-bottom-color: var(--sp-brass);
}

@media (max-width: 599px) {
	.sp-page-menu .sp-menu-nav__label {
		display: none;
	}
}

/* Anchor targets land below the two stacked bars. */
.sp-page-menu .sp-menu-section {
	scroll-margin-top: calc(var(--sp-nav-h) + 68px);
}

/* Menu card (cream) */
.sp-page-menu .sp-menu-card__note {
	margin: 0 0 clamp(24px, 3vw, 40px);
}

.sp-page-menu .sp-menu-card__foot {
	margin-top: clamp(32px, 5vw, 56px);
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--sp-rule-lt);
}

.sp-page-menu .sp-menu-card__dietary {
	margin: 0 0 12px;
	max-width: 60ch;
	font-size: 15px;
	line-height: 1.55;
	color: var(--sp-mute-lt);
}

.sp-page-menu .sp-menu-card__foot .sp-menu-note {
	margin-top: 0;
}

/* How the menu works: the groups paragraph under the why grid */
.sp-page-menu .sp-menu-how__groups {
	margin-top: clamp(32px, 4vw, 48px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--sp-rule-dk);
}

/* Related links row */
.sp-page-menu .sp-page-links .sp-section__head {
	margin-bottom: clamp(16px, 2vw, 24px);
}

.sp-page-menu .sp-page-links__row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sp-page-menu .sp-page-links__row .sp-chip {
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.sp-page-menu .sp-menu-nav__link {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
 * Martini rows with a photo (page rhythm 2026-09-02): 96px square thumbnail
 * on the left, the subtitle as a small mono line under the name. The row
 * keeps its wrapping-flex mechanics; the thumb is a fixed-width first item
 * and the text items are pushed into a right-hand block via a grid.
 * ------------------------------------------------------------------ */
.sp-martini__sub {
	order: 2;
	flex: 0 0 100%;
	margin-top: -2px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sp-accent);
}

.sp-martini__sub + .sp-martini__leader { order: 3; }

.sp-martini--thumb {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	grid-template-areas:
		"thumb name"
		"thumb sub"
		"thumb desc"
		"thumb tags";
	column-gap: 18px;
	row-gap: 4px;
	align-items: start;
	padding: 16px 0;
	scroll-margin-top: calc(var(--sp-nav-h, 72px) + 24px);
}

.sp-martini--thumb .sp-martini__thumb {
	grid-area: thumb;
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--sp-ink, #0f1412);
}

.sp-martini--thumb .sp-martini__thumb picture,
.sp-martini--thumb .sp-martini__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-martini--thumb .sp-martini__name  { grid-area: name; }
.sp-martini--thumb .sp-martini__sub   { grid-area: sub; }
.sp-martini--thumb .sp-martini__desc  { grid-area: desc; padding-right: 0; max-width: 60ch; }
.sp-martini--thumb .sp-martini__leader,
.sp-martini--thumb .sp-martini__price { display: none; }
.sp-martini--thumb .sp-martini__tags  { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sp-martini--thumb .sp-martini__tag   { margin: 0; }
.sp-martini--thumb .sp-martini__tag + .sp-martini__tag { margin-left: 0; }

@media (min-width: 700px) {
	.sp-martini--thumb { grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; }
}

/* Two lists on one cream card (classics, then the house list) */
.sp-martini-list + .sp-martini-list { margin-top: clamp(32px, 5vw, 56px); }

/* Page rhythm (2026-09-02): one-thought hero, H1 on one line at desktop and
   two on phones (the keyword-bearing H1 runs past the 24ch house cap). */
.sp-page-menu .sp-hero__h1 {
	font-size: clamp(38px, 5.4vw, 76px);
	max-width: 20ch;
}

@media (min-width: 1024px) {
	.sp-page-menu .sp-hero__h1 {
		max-width: 34ch;
	}
}

@media (min-width: 1024px) {
	/* The fritters glass sits centre-frame; the copy moves right so the
	   plate stays clear of the type, and the scrim's soft band follows. */
	.sp-page-menu .sp-hero__content { text-align: right; }
	.sp-page-menu .sp-hero__content > * { margin-left: auto; }
	.sp-page-menu .sp-hero__cta { justify-content: flex-end; }
	.sp-page-menu .sp-hero__shade { transform: scaleX(-1); }
}