/* ============================================================
   WMC House — menu page
   Three columns of sections on desktop, two on a tablet, one on
   a phone. Three because the dish photographs are portrait and a
   two-column measure left them either enormous or floating in
   white space, with the
   leader-dot rule doing the work. Long menus stay scannable
   because the dish is the only thing set in the display face.
   ============================================================ */

/* === Frame === */
/* Three real columns, filled by wmc_menu_balance() rather than by the browser.
   `columns: 3` could not balance these: every section is break-inside: avoid,
   and one carrying a dish photograph is an unbreakable block a few hundred
   pixels tall, so a column ran to twice the length of its neighbours. */
.mn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 4rem); margin-top: var(--s-5); }
.mn__col { min-width: 0; }
.mn__sec { break-inside: avoid; margin-bottom: var(--s-5); }

/* === Section === */
.mn__title { font-size: var(--h3-size); padding-bottom: .8rem; margin-bottom: var(--s-2); border-bottom: 1px solid var(--ink); }

/* === Item === */
.mn__item { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.mn__row { display: flex; gap: .75rem; align-items: baseline; }
.mn__dish { font-family: var(--h4-family); font-size: var(--h4-size); font-weight: var(--h4-weight); font-stretch: var(--h4-wdth); line-height: 1.3; letter-spacing: 0; }
.mn__dot { flex: 1 1 auto; height: 1px; background: var(--rule); transform: translateY(-3px); }
.mn__price { flex: 0 0 auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mn__desc { margin-top: .35rem; max-width: 46ch; color: var(--ink-soft); }

/* === Dietaries === */
.mn__diet { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.mn__diet li { padding: .2rem .5rem; border: 1px solid var(--rule); color: var(--ink-soft); }

/* === Foot === */
.mn__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }

/* === Breakpoint === */
/* Three columns need real width: below this a dish name and its price share
   about twenty characters, which is where the leader dots stop reading as
   leader dots.

   `display: contents` dissolves the column wrappers so the sections become
   direct children of .mn again and CSS multi-column can flow them. The PHP
   split is a desktop decision; narrower than that, the browser is better placed
   to make it because there are fewer columns to unbalance. */
@media (max-width: 1180px) {
	.mn { display: block; columns: 2; column-gap: clamp(1.75rem, 4vw, 4rem); }
	.mn__col { display: contents; }
}

@media (max-width: 820px) {
	.mn { columns: 1; }
}

/* === Editor-only hint === */
.mn__hint { margin-top: var(--s-3); padding: 1rem 1.25rem; border-left: 2px solid var(--accent); background: var(--ground-alt); font-size: var(--small-size); }
.mn__hint code { font-family: ui-monospace, Menlo, monospace; }

/* === Dish photo ===
   The exception, not the rule. Capped at a share of the dishes and scattered
   at random, so the page still reads as a menu rather than a delivery app.
   Sits below the description: the dish is read, then seen. */
.mn__shot { margin: var(--s-2) 0 0; max-width: 420px; }
.mn__shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); background: var(--ground-alt); }

@media (max-width: 600px) {
	.mn__shot { max-width: 100%; }
}

/* === Wine detail ===
   Vintage, vineyard and origin sit under the name where a dish would have its
   description. Wines arrive with an empty description, so without this the
   whole list renders as bare names. */
.mn__meta { color: var(--ink-soft); margin-top: .25rem; font-variant-numeric: tabular-nums; }

/* A glass-and-bottle price is two facts in one cell, so it must not wrap
   mid-pair on a phone. */
.mn__price { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
	.mn__price { white-space: normal; }
}

/* ============================================================
   Menu hero
   ============================================================

   The source banners are 3.2:1. Held at that ratio on a phone they would be a
   106px strip, so the crop tightens as the viewport narrows: the picture keeps
   presence on a small screen and opens to its full width on a desktop. The
   subject in these frames sits centre, so cropping from the sides is safe. */
.mn__hero { margin-bottom: var(--s-5); aspect-ratio: 16 / 9; overflow: hidden; background: var(--dark); }
.mn__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

@media (min-width: 700px)  { .mn__hero { aspect-ratio: 2.4 / 1; } }
@media (min-width: 1100px) { .mn__hero { aspect-ratio: 3.2 / 1; } }

/* === Printed layout (Design > Footer & map > Menu page layout) ===
   Same three columns and dish photos as the cards layout, set like the printed card: section title in the display face,
   then every dish on one line, name in capitals and the description after it,
   all in the text face at the body weight. No photos, no boxes, no leader dots. */
.mn--printed .mn__sec { margin-bottom: var(--s-4); }
.mn--printed .mn__title { font-family: var(--font-display); font-weight: var(--h2-weight); font-size: var(--h3-size); text-transform: none; letter-spacing: 0; border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s-1); }
.mn--printed .mn__item { padding: .3rem 0; border-bottom: 0; }
.mn--printed .mn__row { gap: 1.5rem; }
.mn--printed .mn__line { flex: 1 1 auto; min-width: 0; font-family: var(--font-text); font-weight: var(--body-weight); font-size: var(--body-size); line-height: 1.45; }
.mn--printed .mn__dish { display: inline; font-family: inherit; font-size: inherit; font-weight: 400; /* Regular for the capitals, readability (1.67.1); the description stays at the body weight */ font-stretch: normal; text-transform: uppercase; letter-spacing: .02em; }
.mn--printed .mn__meta, .mn--printed .mn__desc { display: inline; margin: 0 0 0 .35em; max-width: none; color: var(--ink); font-size: inherit; }
.mn--printed .mn__price { font-family: var(--font-text); font-weight: var(--body-weight); font-size: var(--body-size); color: var(--ink); }
.mn--printed .mn__diet { display: inline-flex; gap: .5rem; margin: 0 0 0 .5em; vertical-align: baseline; }
.mn--printed .mn__diet li { padding: 0; border: 0; font-weight: var(--body-weight); }
.mn--printed .mn__diet li + li::before { content: "\00B7"; margin-right: .5rem; }