/* ==========================================================================
   Piren — the Julbord page.

   PAGE-SCOPED, like events.css, forms.css and prose.css: only julbord.html
   and en/julbord.html link it. It is read AFTER sections.css and BEFORE
   layout.css, which is what lets it retune benefit-columns for this page
   without touching the component's own sheet or affecting any other page
   that uses it.

   WHAT USED TO BE HERE. Until 2 Sept this file was a small palette of oak,
   linen, spruce and candlelight for a hand-drawn SVG of the julbord seen from
   above — a table with four numbered stops and a dashed route around it. That
   drawing is replaced by an actual photograph of the map, kept in the CMS, so
   the palette and every SVG rule went with it. Both halves are in the parent
   of commit "buffet-map: show the photographed map from the CMS"; restore
   them together or not at all.
   ========================================================================== */

/* ==========================================================================
   buffet-map — the photographed map of the julbord.
   ========================================================================== */

.buffet-map{
  container-type:inline-size;
  container-name:buffetmap;
}

.buffet-map__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 event-list 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);
}

/* Centred, like every other section intro on the site (lunch-week,
   menu-cards, benefit-columns, closing-cta). */
.buffet-map__intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-hair);
  text-align:center;
}
.buffet-map__heading{
  font-family:var(--font-display);
  font-weight:var(--font-display-bold);
  font-size:var(--type-h2);
  line-height:var(--line-height-tight);
  color:var(--text-heading);
}
.buffet-map__lead{
  max-inline-size:var(--measure-prose);
  font-size:var(--type-lead);
  line-height:var(--line-height-normal);
}
.buffet-map__lead:empty{display:none}

/* Capped so the map does not outgrow the text column above it on a wide
   screen. */
.buffet-map__figure{
  margin:0;
  inline-size:100%;
  max-inline-size:64rem;
  margin-inline:auto;
}

/* THE RATIO IS DECLARED HERE BECAUSE THE TEMPLATE CANNOT KNOW IT. A CMS
   binding writes src and alt but no width/height, so without this the picture
   has no height until it decodes and everything below it jumps when it does —
   on a lazily loaded image that lands mid-scroll, which is the worst version
   of that bug. 5504x3072 is the source photograph; keep the two in step if the
   image is ever replaced with a differently shaped one. */
.buffet-map__image{
  inline-size:100%;
  block-size:auto;
  aspect-ratio:5504 / 3072;
  object-fit:cover;
  display:block;
}

/* ==========================================================================
   benefit-columns, retuned for this page.
   ========================================================================== */

/* NO HAIRLINE ABOVE THE MENU CATEGORIES. sections.css gives every
   marker="none" column a rule along its top, which suited the five-column
   menu when its content was a sentence. As bullet lists the rules turned the
   section into a grid of boxes. The split layout below puts them back,
   because there the two columns ARE cards and want an edge. */
.benefit-columns--none .benefit{
  border-block-start:0;
  padding-block-start:0;
}

/* A menu category is a list of things. The marker is the brand's rotated
   square, drawn as a pseudo-element so it costs no request and scales with
   its own text — the same mark .menu-item__bullets and .julbord-hero__fact
   use, so all three read as one family.

   MOVE THIS TO sections.css the moment a second page uses bullet-items. It
   is a component style living in a page sheet, which is only defensible
   while exactly one page renders it. */
.benefit__bullets{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  max-inline-size:var(--measure-short);
}
.benefit__bullets li{
  position:relative;
  padding-inline-start:1.4ch;
  font-size:var(--type-body);
  line-height:var(--line-height-relaxed);
  color:var(--text-body);
}
.benefit__bullets li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.62em;
  inline-size:.3em;
  block-size:.3em;
  background:currentColor;
  transform:rotate(45deg);
}

/* --- The three list sections: #menyn, #priser, #dryck -----------------------
   The client's note was that the food "ser ut som att det är långt åt vänster",
   and that the drinks packages should run after one another rather than
   stranding one on its own. Two separate causes, fixed separately below.

   KEYED ON THE SECTION IDs, not on new component params. `section-id` is
   already passed per instance and is the SAME on both language pages
   (menyn / priser / dryck), so one rule covers Swedish and English. A
   `columns` param on benefit-columns would have been the tidier-looking move,
   but its styling would still have had to live in this page-scoped sheet, and
   a param that silently does nothing on every other page is a worse trap than
   an id selector that is obviously local.

   #priser is centred along with the other two even though the client only
   named the food and the drinks: it sits between them, and one left-set
   section between two centred ones reads as a mistake rather than a choice. */

/* 1. THE COLUMN CONTENT WAS LEFT-SET under a centred heading and lead. */
#menyn .benefit,
#priser .benefit,
#dryck .benefit{
  align-items:center;
  text-align:center;
}

/* THE LIST KEEPS ITS OWN LEFT EDGE. Centring the lines themselves would start
   every item at a different x and scatter the diamond markers down a ragged
   edge — which is exactly why sections.css set this form left to begin with.
   So only the list BLOCK is centred: fit-content plus auto margins puts it in
   the middle of its column while the items stay lined up under one another. */
#menyn .benefit__bullets,
#priser .benefit__bullets,
#dryck .benefit__bullets{
  inline-size:fit-content;
  max-inline-size:100%;
  margin-inline:auto;
  text-align:start;
}

/* 2. THE LAST ROW ORPHANED. auto-fit fills whatever row it is given, so five
      categories became 3 + 2 and four packages became 3 + 1, each with the
      leftovers pressed against the left edge and a column of nothing to their
      right. That empty right-hand third is the "långt åt vänster".

      FLEX FOR #menyn, GRID FOR THE OTHER TWO, and the difference matters:
      only flex centres an incomplete final row. Five items cannot divide
      evenly into anything, so the menu will always have a short last row and
      needs it centred; four items can, so the other two sections are given an
      explicit column count that goes 4 -> 2 + 2 -> 1 and never produces the
      3 + 1 the client saw. */
#menyn .benefit-columns__row{
  display:flex;
  flex-flow:row wrap;
  justify-content:center;
}
/* GROW, BUT CAPPED. A plain 1fr would let a short last row stretch across the
   whole width and leave nothing to centre, which is the bug being fixed. A
   fixed basis with no growth has the opposite problem: it decides three-up
   purely by basis width, so 26rem held three columns only above ~1420px and
   dropped a 1200px laptop to 2 + 2 + 1 for no reason.

   So: a 21rem basis decides how many fit, and max-inline-size decides how wide
   they may then become. Three columns hold from ~1190px up; above that they
   grow to 26rem and stop, so the short second row is still narrower than the
   row and still has something to centre within. */
#menyn .benefit{
  flex:1 1 21rem;
  max-inline-size:26rem;
}

#priser .benefit-columns__row,
#dryck .benefit-columns__row{
  grid-template-columns:minmax(0, 1fr);
}
@container benefits (min-width: 46rem){
  #priser .benefit-columns__row,
  #dryck .benefit-columns__row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@container benefits (min-width: 72rem){
  /* "Om alla kan komma efter varandra": at full width the four packages are
     one row, read left to right in price order. */
  #priser .benefit-columns__row,
  #dryck .benefit-columns__row{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  /* ONE TITLE WRAPS HERE AND THE OTHERS DO NOT — "Alkoholfritt · 275 kr", and
     "Alcohol-free · 275 kr" on the English page — which started that one
     package's list a line below its three neighbours' and broke the row's
     shared baseline. Reserving two lines for every title in this section costs
     nothing on the titles that already wrap and squares the row for the ones
     that do not.

     Only inside this query: at two-up and one-up the columns are wide enough
     that every title fits on one line, and the reserved second line would be a
     gap under each of them for no reason. #priser is left out for the same
     reason — its titles are weekdays and never wrap.

     The em value is the fallback for browsers without the lh unit; this
     section's titles set line-height 1, so the two agree. */
  #dryck .benefit__title{
    min-block-size:2em;
    min-block-size:2lh;
  }
}

/* --- The split layout ------------------------------------------------------
   Heading and lead on the left, the columns on the right: one statement in
   two halves rather than a title sitting over a list.

   Grid on the inner wrapper, so the existing markup needs no wrapper of its
   own — the intro takes the first column and the row takes the second, and
   the notes and actions span both. Below 52rem it is a single column again,
   which is the same shape as the stacked layout. */
.benefit-columns--split .benefit-columns__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-snug);
  align-items:start;
}
.benefit-columns--split .benefit-columns__intro{
  align-items:flex-start;
  text-align:start;
}
.benefit-columns--split .benefit-columns__lead{
  max-inline-size:var(--measure-short);
}
/* The two cards keep their hairline: side by side in their own column they
   are a pair of options, and the rule is what makes them read as two. */
.benefit-columns--split .benefit{
  padding-block-start:var(--space-hair);
  border-block-start:var(--border-width-main) solid var(--text-heading);
}

@container benefits (min-width: 52rem){
  .benefit-columns--split .benefit-columns__inner{
    grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
    gap:var(--space-loose);
  }
  .benefit-columns--split .benefit-columns__notes,
  .benefit-columns--split .benefit-columns__actions{
    grid-column:1 / -1;
  }
  /* Two columns inside the right-hand half, whatever the floor says: the
     half is already narrower than the page, so auto-fit would drop them to
     one and leave the left column staring at a single card. */
  .benefit-columns--split .benefit-columns__row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   julbord-hero, retuned for this page.
   ========================================================================== */

/* NO RULE ABOVE THE OFFER. sections.css sets a hairline over the early-bird
   callout to separate it from the facts above; with the facts now sitting
   directly above it the two rules stacked up and the hero read as a form. */
.julbord-hero__offer{
  border-block-start:0;
  padding-block-start:0;
}