/* ==========================================================================
   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 ANY COLUMN ON THIS PAGE. 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, and on the two abonnering cards the client
   read them as stray lines above the headings. #priser gets a real outline
   instead, further down. */
.benefit-columns--none .benefit{
  border-block-start:0;
  padding-block-start:0;
}

/* --- A column whose content is a LIST (bullet-items) ------------------------
   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);
}

/* --- A column whose content is a set of RECORDS (row-items) -----------------
   A sitting is three facts of different weight: which sitting it is, when it
   starts, what it costs. On one dotted line they read as equals and the eye
   has to parse the separators to find the price; stacked, they rank. The
   price keeps a line of its own even when it is the only thing on it.

   Unused parts collapse, which is what lets the same shape carry Måndag's two
   plain notes and every drinks package's list. */
.benefit__meta{
  max-inline-size:none;
  font-size:var(--type-lead);
  line-height:var(--line-height-normal);
  font-weight:var(--font-body-medium);
  color:var(--text-body);
}
.benefit__meta:empty{display:none}

.benefit__rows{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  inline-size:100%;
  max-inline-size:var(--measure-short);
}
.benefit__row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.05rem;
  inline-size:100%;
}
.benefit__row-title{
  display:block;
  font-size:var(--type-md);
  line-height:var(--line-height-normal);
  font-weight:var(--font-body-medium);
  color:var(--text-heading);
}
.benefit__row-note{
  display:block;
  font-size:var(--type-body);
  line-height:var(--line-height-relaxed);
  color:var(--text-muted);
}
.benefit__row-price{
  display:block;
  font-size:var(--type-body);
  line-height:var(--line-height-relaxed);
  font-weight:var(--font-body-medium);
  color:var(--text-body);
}
.benefit__row-title:empty,
.benefit__row-note:empty,
.benefit__row-price:empty{display:none}

/* --- The four list sections: #menyn, #priser, #dryck, #abonnering -----------
   EVERY COLUMN SETS LEFT, under its own name. The lists used to be centred as
   blocks under a centred title, which put each category's markers at a
   different x and left the diamonds wandering down the page — the client drew
   a line through them to show it. sections.css already sets this form left;
   this file only has to stop overriding it.

   THE ROW IS STILL CENTRED, which is a different thing and is what fixed the
   earlier "ser ut som att det är långt åt vänster": five categories wrap to
   3 + 2, and the short second row is centred under the first instead of
   pressed against the left edge with an empty third of the page beside it.

   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. */

/* 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 a 3 + 1. */
#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. */
#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));
  }
}

/* --- #priser: one outlined card per day -------------------------------------
   The outline is what makes a day a unit. Sage rather than ink: four boxed
   columns in heading colour would be the loudest thing on a page whose only
   other lines are hairlines.

   align-items:stretch so the four cards in a row are the same height even
   though Söndag holds one sitting and Tisdag–fredag two; sections.css starts
   the grid at `start`, which would leave three cards of different depths. */
#priser .benefit-columns__row{
  gap:var(--space-tight);
  align-items:stretch;
}
#priser .benefit{
  padding:var(--space-tight);
  border:var(--border-width-main) solid var(--border-color-hairline);
}
#priser .benefit__rows{
  gap:var(--space-tight);
  max-inline-size:none;
}

/* --- #dryck: the package price under its name ------------------------------
   Each drink keeps the menu's diamond. It arrives as a row rather than a
   bullet because the package's price is a row-items field, and a row's `note`
   is the part that carries a plain line. */
#dryck .benefit__row-note{
  position:relative;
  padding-inline-start:1.4ch;
  color:var(--text-body);
}
#dryck .benefit__row-note::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.62em;
  inline-size:.3em;
  block-size:.3em;
  background:currentColor;
  transform:rotate(45deg);
}

/* --- 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. align-items:start holds the heading at the
   top of its half rather than centring it against a taller neighbour.

   THE CARDS STACK. Side by side they were two short columns with a page's
   worth of empty space under them; one above the other they read as two tiers
   of the same thing, which is what they are. The single column is declared
   outside the query as well, because the auto-fit rule in sections.css would
   otherwise give two tracks as soon as the row is wide enough for them. */
.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);
}
.benefit-columns--split .benefit-columns__row{
  grid-template-columns:minmax(0, 1fr);
}

@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;
  }
}

/* ==========================================================================
   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;
}