/* =========================================================
   Ravintolamoduuli – menu. Käyttää vain teeman tokeneita.
   ========================================================= */
.menu-jump { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.75rem; }
.menu-jump a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.menu-jump a:hover { text-decoration-color: var(--accent); }

.menu-cat {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.75rem); border-top: 1px solid var(--line);
}
.menu-cat-head { align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.menu-cat-photo { width: min(100%, 300px); aspect-ratio: 1; border-radius: var(--hero-radius, 50%); overflow: hidden; margin-bottom: 1.5rem; box-shadow: 0 0 0 8px color-mix(in srgb, var(--text) 4%, transparent); }
.menu-cat-photo img { width: 100%; height: 100%; object-fit: cover; }
.menu-cat-head h3 { font-size: var(--step-2); }
.menu-cat-head p { margin-top: 0.6rem; color: var(--text-muted); max-width: 26rem; }

.dish-list { list-style: none; margin: 0; padding: 0; }
.dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding-block: 1.15rem; border-bottom: 1px dashed var(--line-strong); }
.dish:has(.dish-no) { grid-template-columns: 2.6rem minmax(0, 1fr) auto; }
.dish:first-child { padding-top: 0.2rem; }
.dish-no {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent); font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dish-main { display: flex; gap: 1rem; align-items: flex-start; }
.dish-thumb { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.dish-name { font-family: var(--font-display); font-weight: var(--display-weight, 650); font-size: var(--step-1); line-height: 1.3; }
.dish-desc { margin-top: 0.3rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.55; max-width: 38rem; }
.dish-price { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.3; }
.dish-tag {
  display: inline-block; vertical-align: 0.2em; margin-left: 0.35rem; padding: 0.12rem 0.55rem; border-radius: 999px;
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
}

@media (max-width: 900px) {
  .menu-cat { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .menu-cat-head { position: static; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 1.25rem; align-items: center; }
  .menu-cat-head:not(:has(.menu-cat-photo)) { display: block; }
  .menu-cat-photo { width: 112px; margin: 0; grid-row: span 2; }
  .menu-cat-head p { margin-top: 0.3rem; }
}
@media (max-width: 640px) {
  .dish:has(.dish-no) { grid-template-columns: 2.3rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .dish { gap: 0.75rem; }
  .dish-no { width: 2rem; height: 2rem; font-size: 0.78rem; }
  .dish-thumb { width: 60px; height: 60px; }
  .dish-main { gap: 0.75rem; }
  /* Pitkät kuvaukset vievät mobiilissa paljon tilaa (VK: menu = puolet sivusta).
     Älä kuitenkaan katkaise niitä ilman "näytä lisää" -toimintoa: ainesosat ja
     allergeenit eivät saa kadota näkyvistä. Lyhennä mieluummin tekstiä. */
}

/* ---------- Asettelukirjasto (teema.asettelu.menu) ---------- */
/* menu: paperi – ravintolan painetun listan näköinen: keskitetty paperiarkki per kategoria, otsikko punaisin versaalein, kaksi palstaa (Kampai 2026) */
.as-menu-paperi .menu .section-head { text-align: center; margin-inline: auto; }
.as-menu-paperi .menu .eyebrow { justify-content: center; }
.as-menu-paperi .menu-jump { justify-content: center; }
.as-menu-paperi .menu-cat {
  display: block; max-width: 60rem; margin: 0 auto 2rem; border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(1.75rem, 1.25rem + 2vw, 3rem) clamp(1.1rem, 0.75rem + 3vw, 3.5rem);
  background: color-mix(in srgb, var(--bg) 45%, #fff); box-shadow: 0 30px 60px -48px var(--shadow-deep);
}
.as-menu-paperi .menu-cat-head { position: static; text-align: center; margin-bottom: 1.75rem; }
.as-menu-paperi .menu-cat-head h3 { color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }
.as-menu-paperi .menu-cat-head p { margin-inline: auto; }
.as-menu-paperi .menu-cat-photo { width: 100%; aspect-ratio: 3 / 1; border-radius: 3px; margin: 0 0 1.5rem; box-shadow: none; }
@media (min-width: 820px) {
  .as-menu-paperi .dish-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .as-menu-paperi .dish:first-child { padding-top: 1.15rem; }
}
.as-menu-paperi .cta-band { max-width: 60rem; margin-inline: auto; }
@media (max-width: 900px) {
  .as-menu-paperi .menu-cat-head { display: block; }
  .as-menu-paperi .menu-cat-photo { width: 100%; margin: 0 0 1.25rem; }
}