/* pizzeria-deeg 1.0.0 · vier kaarten die bij scrollen op elkaar stapelen (ReactBits ScrollStack)
   met oplopende cijfers (ReactBits CountUp). Sticky stapelt; het script schaalt en dimt. */
.msm-pizzeria-deeg {
  --pd-ink: var(--m-ink, #211711);
  --pd-paper: var(--m-bg, #f4ead8);
  --pd-red: var(--m-primary, #c84a28);
  --pd-line: color-mix(in srgb, var(--m-ink, #211711) 22%, transparent);
  --pd-muted: color-mix(in srgb, var(--m-ink, #211711) 66%, transparent);
  --pd-gutter: clamp(18px, 3.3vw, 52px);
  --pd-stack: 112px;
  --pd-offset: 22px;
  position: relative;
  scroll-margin-top: 112px;
  background: #ffffff;
  color: var(--pd-ink);
  font: 400 15px/1.5 var(--m-font-body, Arial, Helvetica, sans-serif);
  padding: clamp(56px, 8vw, 112px) var(--pd-gutter) clamp(16px, 3vw, 40px);
}
.msm-pizzeria-deeg *, .msm-pizzeria-deeg *::before, .msm-pizzeria-deeg *::after { box-sizing: border-box; }

.msm-pizzeria-deeg .pd-head {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.msm-pizzeria-deeg .pd-eyebrow { grid-column: 1 / -1; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.msm-pizzeria-deeg h2 {
  margin: 0;
  font: italic 400 clamp(44px, 7vw, 104px)/.9 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -.055em;
}
.msm-pizzeria-deeg .pd-intro { margin: 0 0 8px; max-width: 38ch; color: var(--pd-muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.55; }

.msm-pizzeria-deeg .pd-stack { position: relative; }
.msm-pizzeria-deeg .pd-slot {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--pd-stack) + var(--i, 0) * var(--pd-offset));
  z-index: calc(var(--i, 0) + 1);
}
.msm-pizzeria-deeg .pd-slot + .pd-slot { margin-top: clamp(40px, 7vh, 80px); }
.msm-pizzeria-deeg .pd-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
  min-height: clamp(300px, 46vh, 420px);
  padding: clamp(24px, 3.6vw, 52px);
  background: var(--pd-paper);
  color: var(--pd-ink);
  border: 1px solid var(--pd-line);
  box-shadow: 0 -12px 40px -18px rgba(0, 0, 0, .22), 0 26px 48px -26px rgba(0, 0, 0, .28);
  transform-origin: 50% 0;
  will-change: transform;
  overflow: hidden;
}
.msm-pizzeria-deeg .pd-card--2 { background: color-mix(in srgb, var(--m-primary, #c84a28) 16%, var(--m-bg, #f4ead8)); }
.msm-pizzeria-deeg .pd-card--3 { background: var(--pd-ink); color: var(--pd-paper); border-color: transparent; }
.msm-pizzeria-deeg .pd-card--4 { background: var(--pd-red); color: var(--pd-paper); border-color: transparent; }
.msm-pizzeria-deeg .pd-shade { position: absolute; inset: 0; z-index: 3; background: #000000; opacity: var(--pd-dim, 0); pointer-events: none; }

.msm-pizzeria-deeg .pd-figure { display: grid; gap: 14px; align-content: start; min-width: clamp(150px, 20vw, 280px); }
.msm-pizzeria-deeg .pd-number {
  display: block;
  font: 400 clamp(66px, 10vw, 150px)/.85 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -.06em;
  font-variant-numeric: tabular-nums;
}
.msm-pizzeria-deeg .pd-count { display: inline-block; min-width: 1.2em; }
.msm-pizzeria-deeg .pd-unit { display: block; margin-top: 10px; font: italic 400 clamp(18px, 2vw, 28px)/1.1 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -.02em; }
.msm-pizzeria-deeg .pd-step { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: 1; }
.msm-pizzeria-deeg .pd-copy h3 { margin: 0 0 12px; font: italic 400 clamp(26px, 3vw, 42px)/1 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -.03em; }
.msm-pizzeria-deeg .pd-copy p { margin: 0; max-width: 46ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; }
.msm-pizzeria-deeg .pd-card--4 .pd-copy p,
.msm-pizzeria-deeg .pd-card--4 .pd-step { color: #ffffff; }
.msm-pizzeria-deeg .pd-cutout { display: block; width: clamp(120px, 18vw, 250px); aspect-ratio: 1; object-fit: contain; }
.msm-pizzeria-deeg .pd-end { height: clamp(100px, 26vh, 260px); }

@media (max-width: 820px) {
  .msm-pizzeria-deeg { --pd-stack: 96px; --pd-offset: 16px; }
  .msm-pizzeria-deeg .pd-head { grid-template-columns: 1fr; align-items: start; }
  .msm-pizzeria-deeg .pd-card { grid-template-columns: minmax(0, 1fr); grid-template-areas:"figure" "image" "copy"; gap: 16px; min-height: 0; padding: 24px 22px 26px; }
  .msm-pizzeria-deeg .pd-figure { grid-area: figure; min-width: 0; gap: 8px; }
  .msm-pizzeria-deeg .pd-copy { grid-area: copy; }
  .msm-pizzeria-deeg .pd-number { font-size: clamp(60px, 18vw, 92px); }
  .msm-pizzeria-deeg .pd-unit { display: inline; margin: 0 0 0 .3em; font-size: 18px; }
  .msm-pizzeria-deeg .pd-cutout { grid-area: image; position: static; justify-self: end; width: clamp(92px, 30vw, 124px); opacity: .9; }
  .msm-pizzeria-deeg .pd-copy p { max-width: none; }
  .msm-pizzeria-deeg .pd-slot + .pd-slot { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-pizzeria-deeg .pd-card { transform: none !important; --pd-dim: 0 !important; }
}