/* lunchroom-takeaway 1.0.0 · map met uitwaaierende kaarten naar ReactBits Folder (vanilla).
   Maatvoering van de bron op schaal --lt-u (224 × 176, tab 20, flap vanaf 30%, papier 0,54 × 1,22).
   Kleuren en fonts via --m-*-tokens; hoeken, kanteling en papierposities zet module.js. */
.msm-lunchroom-takeaway {
  --lt-primary: var(--m-primary, #8d4e3b);
  --lt-bg: var(--m-bg, #eee8dc);
  --lt-ink: var(--m-ink, #26312b);
  --lt-u: 1.4px;
  --lt-w: calc(224 * var(--lt-u));
  --lt-h: calc(176 * var(--lt-u));
  --lt-tab: calc(20 * var(--lt-u));
  --lt-r: calc(12 * var(--lt-u));
  --lt-front-y: calc(var(--lt-tab) + var(--lt-h) * 0.3);
  --lt-front-h: calc(var(--lt-h) * 0.7);
  --lt-doc-w: calc(var(--lt-w) * 0.54);
  --lt-doc-h: calc(var(--lt-doc-w) * 1.5);
  --lt-depth: calc(1120 * var(--lt-u));
  position: relative;
  scroll-margin-top: 116px;
  overflow: clip;
  background: #ffffff;
  color: var(--lt-ink);
  padding: clamp(48px, 8vw, 104px) clamp(20px, 4vw, 60px);
  font: 400 15px/1.55 var(--m-font-body, Arial, sans-serif);
}
.msm-lunchroom-takeaway *,
.msm-lunchroom-takeaway *::before,
.msm-lunchroom-takeaway *::after { box-sizing: border-box; }

.msm-lunchroom-takeaway .lt-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}
.msm-lunchroom-takeaway .lt-eyebrow {
  margin: 0 0 14px;
  font: 600 9px/1.3 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.msm-lunchroom-takeaway h2 {
  margin: 0 0 18px;
  font: 400 clamp(44px, 5.6vw, 80px)/0.88 var(--m-font-display, "Times New Roman", serif);
  letter-spacing: -0.05em;
}
.msm-lunchroom-takeaway .lt-intro { margin: 0; max-width: 40ch; }
.msm-lunchroom-takeaway .lt-bag {
  display: block;
  width: min(220px, 60%);
  height: auto;
  margin-top: 22px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Het toneel: perspectief rond het midden van de map, ruimte boven voor de uitgewaaierde kaarten. */
.msm-lunchroom-takeaway .lt-stage {
  position: relative;
  height: calc(316 * var(--lt-u));
  perspective: var(--lt-depth);
  perspective-origin: 50% calc(100% - 20 * var(--lt-u) - var(--lt-h) / 2);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.msm-lunchroom-takeaway .lt-desk {
  position: absolute;
  left: 50%;
  bottom: calc(20 * var(--lt-u));
  width: var(--lt-w);
  height: calc(var(--lt-tab) + var(--lt-h));
  margin-left: calc(var(--lt-w) / -2);
  transform-origin: 50% calc(var(--lt-tab) + var(--lt-h) / 2);
  transform: rotateX(0deg);
  will-change: transform;
}
.msm-lunchroom-takeaway .lt-cover {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--lt-r);
}
.msm-lunchroom-takeaway .lt-cover:focus-visible {
  outline: 3px solid var(--lt-primary);
  outline-offset: 10px;
}
/* Laag 1: grondschaduw. */
.msm-lunchroom-takeaway .lt-ground {
  position: absolute;
  left: 0;
  top: calc(var(--lt-tab) + var(--lt-h) - var(--lt-h) * 0.07);
  z-index: 1;
  width: var(--lt-w);
  height: calc(var(--lt-h) * 0.14);
  border-radius: 50%;
  background: color-mix(in srgb, var(--lt-ink) 26%, transparent);
  filter: blur(calc(var(--lt-h) * 0.05));
  opacity: 0.75;
  pointer-events: none;
}
/* Laag 4: de rug met tab (pad uit de bron, 224 × 196). */
.msm-lunchroom-takeaway .lt-back {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.msm-lunchroom-takeaway .lt-shape { display: block; width: 100%; height: 100%; }
.msm-lunchroom-takeaway .lt-shape path { fill: url(#lt-back-grad); }
.msm-lunchroom-takeaway .lt-g1 { stop-color: color-mix(in srgb, var(--lt-primary) 92%, #000000); }
.msm-lunchroom-takeaway .lt-g2 { stop-color: color-mix(in srgb, var(--lt-primary) 84%, #000000); }
.msm-lunchroom-takeaway .lt-tab {
  position: absolute;
  top: 0;
  left: calc(100 * var(--lt-u));
  width: calc(92 * var(--lt-u));
  height: var(--lt-tab);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(1 * var(--lt-u));
  font: 600 calc(9.5 * var(--lt-u))/1 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  opacity: var(--lt-label, 1);
}
/* Laag 40: de voorflap, scharniert om zijn onderrand. */
.msm-lunchroom-takeaway .lt-front {
  position: absolute;
  left: 0;
  top: var(--lt-front-y);
  z-index: 40;
  width: var(--lt-w);
  height: var(--lt-front-h);
  transform-origin: 50% 100%;
  transform: perspective(var(--lt-depth)) rotateX(var(--lt-flap, 0deg));
  will-change: transform;
}
.msm-lunchroom-takeaway .lt-face {
  position: absolute;
  inset: 0;
  border-radius: var(--lt-r);
  background: linear-gradient(160deg, color-mix(in srgb, var(--lt-primary) 88%, #ffffff) 0%, var(--lt-primary) 48%, color-mix(in srgb, var(--lt-primary) 94%, #000000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.msm-lunchroom-takeaway .lt-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(rgba(255, 255, 255, var(--lt-glint, 0)), rgba(255, 255, 255, var(--lt-glint, 0))),
    rgba(0, 0, 0, var(--lt-dim, 0));
}

/* Laag 10+: de papieren, geplaatst door module.js. */
.msm-lunchroom-takeaway .lt-papers {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  perspective: var(--lt-depth);
  perspective-origin: 50% calc(var(--lt-tab) + var(--lt-h) / 2);
}
.msm-lunchroom-takeaway .lt-papers .lt-paper { pointer-events: auto; }
.msm-lunchroom-takeaway .lt-paper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: var(--lt-doc-w);
  height: var(--lt-doc-h);
  margin: 0;
  padding: calc(13 * var(--lt-u)) calc(12 * var(--lt-u));
  border: 0;
  border-radius: calc(7 * var(--lt-u));
  background: #ffffff;
  color: var(--lt-ink);
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--lt-u));
  overflow: hidden;
  cursor: pointer;
  transform-origin: 50% 50%;
  will-change: transform;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 calc((2 + var(--lt-lift, 0) * 16) * var(--lt-u)) calc((5 + var(--lt-lift, 0) * 26) * var(--lt-u)) rgba(0, 0, 0, calc(0.1 + var(--lt-lift, 0) * 0.14));
}
.msm-lunchroom-takeaway .lt-paper:focus-visible {
  outline: 2px solid var(--lt-ink);
  outline-offset: 3px;
}
.msm-lunchroom-takeaway .lt-paper[aria-pressed="true"] {
  background: color-mix(in srgb, var(--lt-primary) 12%, #ffffff);
  box-shadow:
    inset 0 0 0 calc(1.5 * var(--lt-u)) var(--lt-primary),
    0 calc((2 + var(--lt-lift, 0) * 16) * var(--lt-u)) calc((5 + var(--lt-lift, 0) * 26) * var(--lt-u)) rgba(0, 0, 0, calc(0.1 + var(--lt-lift, 0) * 0.14));
}
.msm-lunchroom-takeaway .lt-paper-photo {
  align-self: center;
  width: calc(58 * var(--lt-u));
  height: calc(58 * var(--lt-u));
  margin: calc(-3 * var(--lt-u)) 0 calc(1 * var(--lt-u));
  object-fit: contain;
  flex: 0 0 auto;
  pointer-events: none;
  -webkit-user-drag: none;
}
.msm-lunchroom-takeaway .lt-kind {
  font: 600 calc(7.5 * var(--lt-u))/1.2 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-primary);
}
.msm-lunchroom-takeaway .lt-name {
  font: 400 calc(12.5 * var(--lt-u))/1.12 var(--m-font-display, "Times New Roman", serif);
  letter-spacing: -0.02em;
}
.msm-lunchroom-takeaway .lt-price {
  margin-top: auto;
  font: 600 calc(10.5 * var(--lt-u))/1 var(--m-font-body, Arial, sans-serif);
  font-variant-numeric: tabular-nums;
}
.msm-lunchroom-takeaway .lt-state {
  font: 500 calc(7.5 * var(--lt-u))/1.2 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.06em;
  color: var(--lt-ink);
}
.msm-lunchroom-takeaway .lt-paper[aria-pressed="true"] .lt-state { color: var(--lt-primary); }

/* Samenvatting. */
.msm-lunchroom-takeaway .lt-summary {
  background: var(--lt-bg);
  border-radius: var(--m-radius, 0px);
  padding: clamp(22px, 2.6vw, 32px);
}
.msm-lunchroom-takeaway .lt-picks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.msm-lunchroom-takeaway .lt-picks li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--lt-ink) 18%, transparent);
  font-size: 14px;
  line-height: 1.35;
}
.msm-lunchroom-takeaway .lt-picks li > span {
  font: 400 20px/1 var(--m-font-display, "Times New Roman", serif);
  letter-spacing: -0.02em;
}
.msm-lunchroom-takeaway .lt-picks li > em {
  grid-column: 1;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--lt-ink) 58%, transparent);
}
.msm-lunchroom-takeaway .lt-picks li > b {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: start;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--lt-ink) 75%, transparent);
}
.msm-lunchroom-takeaway .lt-picks li.is-in > em { color: var(--lt-primary); }
.msm-lunchroom-takeaway .lt-picks li.is-in > b { color: var(--lt-ink); }
.msm-lunchroom-takeaway .lt-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--lt-ink);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.msm-lunchroom-takeaway .lt-total b {
  font: 400 30px/1 var(--m-font-display, "Times New Roman", serif);
  letter-spacing: -0.03em;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.msm-lunchroom-takeaway .lt-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--lt-ink) 75%, transparent);
}
.msm-lunchroom-takeaway .lt-cta {
  display: inline-block;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid var(--lt-ink);
  border-radius: var(--m-radius, 0px);
  color: var(--lt-ink);
  font: 600 11px/1.2 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.msm-lunchroom-takeaway .lt-cta:hover { background: var(--lt-ink); color: #ffffff; }
.msm-lunchroom-takeaway .lt-cta:focus-visible { outline: 3px solid var(--lt-primary); outline-offset: 4px; }

@media (max-width: 1060px) {
  .msm-lunchroom-takeaway { --lt-u: 1.25px; }
  .msm-lunchroom-takeaway .lt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .msm-lunchroom-takeaway .lt-stage { grid-column: 1 / -1; grid-row: 2; }
  .msm-lunchroom-takeaway .lt-bag { display: none; }
}
@media (max-width: 760px) {
  .msm-lunchroom-takeaway { --lt-u: 1.05px; scroll-margin-top: 97px; padding: 48px 18px 56px; }
  .msm-lunchroom-takeaway .lt-grid { grid-template-columns: 1fr; gap: 24px; }
  .msm-lunchroom-takeaway .lt-stage { grid-column: auto; grid-row: auto; }
  .msm-lunchroom-takeaway .lt-intro { max-width: none; }
}
@media (max-width: 400px) {
  .msm-lunchroom-takeaway {
    --lt-u: 0.92px;
    --lt-doc-h: calc(var(--lt-doc-w) * 2.2);
  }
  .msm-lunchroom-takeaway .lt-kind,
  .msm-lunchroom-takeaway .lt-name,
  .msm-lunchroom-takeaway .lt-price,
  .msm-lunchroom-takeaway .lt-state { font-size: 15px; }
  .msm-lunchroom-takeaway .lt-state { font-weight: 600; }
}

/* Rustige variant: geen kanteling en geen veren (module.js zet de waarden direct); knoppen zonder overgang. */
@media (prefers-reduced-motion: reduce) {
  .msm-lunchroom-takeaway .lt-desk,
  .msm-lunchroom-takeaway .lt-front,
  .msm-lunchroom-takeaway .lt-paper { will-change: auto; }
  .msm-lunchroom-takeaway .lt-cta { transition: none; }
}