/* ==========================================================================
   Piren — the larger-parties menu (Större sällskap).

   PAGE-SCOPED, like events.css, julbord.css and prose.css: only
   storre-sallskap.html and en/larger-parties.html link it, and they are the
   only two pages that render menu-list.

   It is deliberately thin. menu-group brings its own type, prices and
   hairlines from sections.css — everything a priced list needs is already
   there, because /menyer renders the same component. All this file owns is
   the rhythm BETWEEN groups, which menu-tabs otherwise provides through
   .menu-panel__groups.

   MOVE THIS TO sections.css if a second page ever renders menu-list. A
   component style in a page sheet is only defensible while exactly one page
   uses it.
   ========================================================================== */

.menu-list{
  container-type:inline-size;
  container-name:menulist;
}

.menu-list__inner{
  /* --rule-offset pulls the seam mark up from the content rather than
     clearing a whole section's padding, so the gap under it stays short —
     the same value menu-tabs and buffet-map use. */
  position:relative;
  --rule-offset:var(--space-snug);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-snug);
  padding-block-start:var(--space-tight);
}

/* The same gap menu-tabs puts between the groups of one menu, so a group
   reads identically whether it is behind a tab or on a page of its own. */
.menu-list__groups{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--section-y-sm);
}

.menu-list__note{
  align-self:center;
  max-inline-size:var(--measure-prose);
  font-size:var(--type-sm);
  line-height:var(--line-height-relaxed);
  text-align:center;
  color:var(--text-muted);
}
.menu-list__note:empty{display:none}