/* ==========================================================================
   Menu (catalog) — scoped under #menu, classes prefixed .mn-
   One even grid of comparable tiles (2 → 3 → 4 columns). The "a medida"
   note always closes the grid and spans whatever the last row leaves open.
   ========================================================================== */
#menu {
  --mn-gap-x: .75rem;
  --mn-gap-y: 1.75rem;
  --mn-radius: 12px;
  --mn-cols: 2;
  --mn-ratio: 1 / 1;
  /* One "shoot" for mixed photos, kept light so food still looks crisp and juicy:
     1. screen a warm cocoa at half strength: blacks land on the same soft brown without a haze,
     2. multiply a faint cream: pure whites sit in the page's cream instead of glaring blue-white. */
  --mn-lift: rgb(40, 21, 21);
  --mn-lift-k: .45;
  --mn-wash: rgb(252, 243, 238);
  position: relative;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 5rem) clamp(1.5rem, .75rem + 2.5vw, 3.5rem); /* the next section brings its own top air */
  background: var(--color-bg);
}
#menu .mn-wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
}

/* ---- Head --------------------------------------------------------------- */
#menu .mn-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-1); }
#menu .mn-eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
  font: var(--fw-medium) var(--text-2xs)/1.3 var(--font-sans);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--color-text-brand);
}
#menu .mn-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .55; }
#menu .mn-title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.45rem + 1.9vw, 3.25rem);
  font-weight: var(--fw-regular);
  line-height: 1.04;
  letter-spacing: -.026em;
  color: var(--color-text-brand);
  text-wrap: balance;
  max-width: 15ch;
}
#menu .mn-title em { font-style: italic; font-weight: var(--fw-regular); }

/* ---- Grid --------------------------------------------------------------- */
#menu .mn-grid {
  display: grid;
  grid-template-columns: repeat(var(--mn-cols), minmax(0, 1fr));
  gap: var(--mn-gap-y) var(--mn-gap-x);
  margin: var(--space-6) 0 0; padding: 0; list-style: none;
}
#menu .mn-item { display: flex; min-width: 0; }

/* ---- Card --------------------------------------------------------------- */
/* Photo on top, text below; the footer (price | add) is pushed to the floor so every footer
   hairline in a row lines up and the space above it reads as a margin, not a hole. */
#menu .mn-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#menu .mn-media {
  position: relative;
  aspect-ratio: var(--mn-ratio);
  overflow: hidden;
  border-radius: var(--mn-radius);
  background: var(--c-cream-200);
  isolation: isolate;
  transition: transform var(--dur-instant) var(--ease-out);
}
/* Loading: a quiet cream plate with the wordmark, no shimmer (motion budget). */
#menu .mn-media::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/wordmark.svg") center / 42% auto no-repeat;
  opacity: .14;
}
#menu .mn-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--mn-x, 50%) var(--mn-y, 50%);
  transform: scale(var(--mn-z, 1));
  transform-origin: var(--mn-x, 50%) var(--mn-y, 50%);
  opacity: 0;
  /* Same base for every frame: a touch of snap, colour left as shot. */
  filter: var(--mn-tone, contrast(1.04) saturate(1.02));
  transition: opacity var(--dur-base) var(--ease-out);
}
#menu .mn-media.is-loaded img { opacity: 1; }
/* Softer source frames get a light unsharp mask before the tone (see ART.crisp in menu.js). */
#menu .mn-media--crisp img { filter: url(#mn-crisp) var(--mn-tone, contrast(1.04) saturate(1.02)); }
#menu .mn-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#menu .mn-media.is-broken::before { opacity: .4; }
#menu .mn-media.is-broken img { display: none; }
#menu .mn-grade,
#menu .mn-media::after {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
#menu .mn-grade { background: var(--mn-lift); mix-blend-mode: screen; }
#menu .mn-media::after {
  content: "";
  border-radius: inherit;
  background: var(--mn-wash);
  mix-blend-mode: multiply;
}
#menu .mn-media.is-loaded .mn-grade { opacity: var(--mn-lift-k); }
#menu .mn-media.is-loaded::after { opacity: 1; }

/* Body */
/* Fixed line boxes: the name is one line and the line is exactly two, on every card at every width,
   so the price hairlines of a row line up because the content does, not because of flex filler. */
#menu .mn-body {
  container: mnbody / inline-size;
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
#menu .mn-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 11cqi, 1.1875rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#menu .mn-open {
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left; letter-spacing: inherit;
  text-decoration: underline; text-decoration-color: transparent;
  text-decoration-thickness: 1px; text-underline-offset: .2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
/* The name is the card's button: its hit area stretches over the whole tile (photo included). */
#menu .mn-open::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--mn-radius); }
#menu .mn-open:focus-visible { outline: none; }
#menu .mn-card:has(.mn-open:focus-visible) .mn-media { box-shadow: var(--focus-ring); }
#menu .mn-card:has(.mn-open:focus-visible) .mn-open { text-decoration-color: currentColor; }
@media (hover: hover) {
  #menu .mn-card:hover .mn-open { text-decoration-color: var(--color-line-strong); }
}
#menu .mn-card:active:not(:has(.mn-add:active)) .mn-media { transform: scale(.985); }

#menu .mn-short {
  --mn-lh: 1.42em;
  min-height: calc(2 * var(--mn-lh));
  margin-bottom: 11px;
  font-size: .875rem; line-height: var(--mn-lh); font-weight: var(--fw-regular); text-wrap: pretty;
  color: var(--color-text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* Footer: the price (and the size, when the product has one) on the left, the quick add on the right,
   under one hairline. The size rides on the price line and only wraps beneath it on the narrowest cards. */
#menu .mn-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  min-height: calc(10px + 36px);
  padding-top: 10px;
  border-top: 1px solid var(--color-line);
}
#menu .mn-price {
  min-width: 0;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px .6em;
  color: var(--color-text-brand);
}
#menu .mn-price__num {
  font: var(--fw-medium) 1rem/1.15 var(--font-sans);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
#menu .mn-size {
  font: var(--fw-regular) .8125rem/1.15 var(--font-sans);
  letter-spacing: .02em;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* Quick add: a 44px hit area around a 36px hairline circle that fills bordó on hover / press. */
#menu .mn-add {
  position: relative; z-index: 3; /* above the card's stretched hit area */
  flex: none;
  display: grid; place-items: center;
  width: var(--tap); height: var(--tap);
  margin: -4px -4px -4px 0; /* the visible circle aligns with the card edge */
  padding: 0; border: 0; border-radius: 50%;
  background: none;
  color: var(--color-text-brand);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#menu .mn-add::before {
  content: ""; grid-area: 1 / 1;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-burgundy-300);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}
#menu .mn-add svg { width: 18px; height: 18px; }
#menu .mn-add__icon {
  grid-area: 1 / 1; position: relative; display: grid; place-items: center;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
#menu .mn-add__icon--check { opacity: 0; }
@media (hover: hover) {
  #menu .mn-add:hover::before { background: var(--color-accent); border-color: var(--color-accent); }
  #menu .mn-add:hover { color: var(--color-text-on-brand); }
}
#menu .mn-add:active { color: var(--color-text-on-brand); }
#menu .mn-add:active::before { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); transform: scale(.94); }
#menu .mn-add.is-added { color: var(--color-text-on-brand); }
#menu .mn-add.is-added::before { background: var(--color-accent); border-color: var(--color-accent); }
#menu .mn-add.is-added .mn-add__icon--plus { opacity: 0; }
#menu .mn-add.is-added .mn-add__icon--check { opacity: 1; }
#menu .mn-add:focus-visible { outline: none; }
#menu .mn-add:focus-visible::before { box-shadow: var(--focus-ring); }
#menu .mn-add__count {
  position: absolute; top: 0; right: 0;
  display: none; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-text-on-brand);
  font: var(--fw-medium) 10.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-bg);
}
#menu .mn-add.has-qty .mn-add__count { display: grid; }
/* Already in the order: the circle stays tinted so the card remembers. */
#menu .mn-add.has-qty:not(.is-added)::before { background: var(--c-blush-100); border-color: var(--c-burgundy-300); }

/* ---- "A medida" note: closes the grid, fills the last row's gap --------- */
#menu .mn-item--note { container: mnnote / inline-size; grid-column: 1 / -1; }
#menu .mn-item--note[data-r2="1"] { grid-column: span 1; }
#menu .mn-note {
  --mn-note-pad: var(--space-5);
  position: relative;
  display: flex; flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--mn-radius);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(228, 184, 196, .16), transparent 60%),
    var(--color-surface-brand);
  color: var(--color-text-on-brand);
  /* One quiet detail, like the label on a pastry box: a cream hairline set inside the edge. */
  outline: 1px solid rgba(251, 237, 230, .2);
  outline-offset: -8px;
}
#menu .mn-note__inner {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6) var(--mn-note-pad);
}
#menu .mn-note__script {
  font-family: var(--font-script);
  font-size: 2.75rem; line-height: .85;
  color: var(--c-blush-300);
}
#menu .mn-note__copy { display: grid; gap: var(--space-2); }
#menu .mn-note__title {
  font-family: var(--font-display);
  font-size: 1.375rem; font-weight: var(--fw-regular); line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--color-text-on-brand);
  text-wrap: balance;
}
#menu .mn-note__text { text-wrap: pretty; font-size: .875rem; line-height: 1.5; font-weight: var(--fw-regular); color: var(--color-text-on-brand-muted); max-width: 34ch; }
#menu .mn-note__link {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0 1.25rem;
  border-radius: var(--radius-pill);
  background: var(--c-cream-ink);
  color: var(--c-burgundy-700);
  font: var(--fw-medium) .75rem/1 var(--font-sans);
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
#menu .mn-note__link svg { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
@media (hover: hover) {
  #menu .mn-note__link:hover { background: #fff; }
  #menu .mn-note__link:hover svg { transform: translateX(3px); }
}
#menu .mn-note__link:active { transform: translateY(1px); }
#menu .mn-note__link:focus-visible { outline: 2px solid var(--c-blush-300); outline-offset: 3px; }

/* Single-tile width (sits beside products): one centred block inside the hairline frame. */
@container mnnote (max-width: 439px) {
  #menu .mn-note__inner { justify-content: center; }
}
@container mnnote (max-width: 299px) {
  #menu .mn-note { --mn-note-pad: var(--space-4); }
  #menu .mn-note__inner { gap: var(--space-4); padding-block: var(--space-6); }
  #menu .mn-note__script { font-size: clamp(2rem, 20cqi, 2.5rem); white-space: nowrap; }
  #menu .mn-note__title { font-size: 1.25rem; }
  #menu .mn-note__text { font-size: .8125rem; }
  #menu .mn-note__link { align-self: stretch; padding: 0 .75rem; letter-spacing: .14em; }
}
/* Two-tile width in a tall row: a centred composition, script as the hero. */
@container mnnote (min-width: 440px) and (max-width: 759px) {
  #menu .mn-note__inner { justify-content: center; align-items: center; text-align: center; gap: var(--space-5); padding-block: var(--space-8); }
  #menu .mn-note__script { font-size: clamp(3.5rem, 14cqi, 5.5rem); }
  #menu .mn-note__copy { justify-items: center; }
  #menu .mn-note__title { font-size: clamp(1.5rem, 5.4cqi, 2.125rem); max-width: 16ch; }
  #menu .mn-note__text { font-size: .9375rem; text-wrap: balance; }
  #menu .mn-note__link { align-self: center; }
}
/* A full row of its own: a banner, script | copy | action. */
@container mnnote (min-width: 760px) {
  #menu .mn-note__inner {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center;
    column-gap: clamp(2rem, 5cqi, 4.5rem);
    padding: var(--space-8) clamp(2rem, 5cqi, 4rem);
  }
  #menu .mn-note__script { font-size: clamp(4rem, 8cqi, 6rem); }
  #menu .mn-note__title { font-size: clamp(1.75rem, 3cqi, 2.25rem); }
  #menu .mn-note__text { font-size: 1rem; max-width: 46ch; }
}

/* ---- Empty -------------------------------------------------------------- */
#menu .mn-empty {
  grid-column: 1 / -1;
  display: grid; justify-items: center; gap: var(--space-3);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--mn-radius);
  background: var(--c-blush-50);
  text-align: center;
}
#menu .mn-empty__script { font-family: var(--font-script); font-size: 2.75rem; line-height: 1; color: var(--c-blush-500); }
#menu .mn-empty__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-regular); color: var(--color-text-brand); }
#menu .mn-empty__text { max-width: 28ch; color: var(--color-text-muted); font-size: var(--text-sm); }
/* ---- Tablet: 3 columns --------------------------------------------------- */
@media (min-width: 700px) {
  #menu { --mn-cols: 3; --mn-gap-x: 1.25rem; --mn-gap-y: 2.5rem; --mn-radius: 14px; --mn-ratio: 4 / 5; }
  #menu .mn-head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: var(--space-8); margin-bottom: var(--space-4); }
  #menu .mn-grid { margin-top: var(--space-7); }
  /* Wide cards would set most lines on one row: a measure keeps every line a balanced two-liner. */
  /* The line uses the full card width; where it fits on one line it stays one line (no fixed measure). */
  #menu .mn-short { min-height: var(--mn-lh); }
  #menu .mn-name { font-size: clamp(1.1875rem, 10cqi, 1.3125rem); }
  #menu .mn-item--note[data-r2] { grid-column: 1 / -1; }
  #menu .mn-item--note[data-r3="1"] { grid-column: span 2; }
  #menu .mn-item--note[data-r3="2"] { grid-column: span 1; }
}

/* ---- Desktop: 4 columns -------------------------------------------------- */
@media (min-width: 1024px) {
  #menu { --mn-cols: 4; --mn-gap-x: 1.5rem; --mn-gap-y: 3rem; }
  /* One-line title: the first row of photos lands above the fold at 1280×800. */
  #menu .mn-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-3) var(--space-8); margin-bottom: var(--space-5); }
  #menu .mn-head__titles { grid-column: 1 / -1; }
  #menu .mn-title { max-width: none; font-size: clamp(2.75rem, 1.5rem + 2.4vw, 3.5rem); }
  #menu .mn-item--note[data-r3] { grid-column: 1 / -1; }
  #menu .mn-item--note[data-r4="1"] { grid-column: span 3; }
  #menu .mn-item--note[data-r4="2"] { grid-column: span 2; }
  #menu .mn-item--note[data-r4="3"] { grid-column: span 1; }
  /* Three tiles beside a single product: still a tall tile, so keep the centred poster, not the banner. */
  #menu .mn-item--note[data-r4="1"] .mn-note__inner { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: var(--space-5); }
  #menu .mn-item--note[data-r4="1"] .mn-note__script { font-size: 6.5rem; }
  #menu .mn-item--note[data-r4="1"] .mn-note__copy { justify-items: center; }
  #menu .mn-item--note[data-r4="1"] .mn-note__title { font-size: 2.25rem; }
  #menu .mn-item--note[data-r4="1"] .mn-note__link { align-self: center; }
  #menu { --mn-ratio: 1 / 1; }
}