/* pizzeria-oven 1.0.0 · donkere sectie met opstijgende vonken op canvas 2d (ReactBits Particles),
   copy over de houtoven, openingstijden en een cutout van de ovenmond. */
.msm-pizzeria-oven {
  --po-ink: var(--m-ink, #211711);
  --po-paper: var(--m-bg, #f4ead8);
  --po-red: var(--m-primary, #c84a28);
  --po-line: color-mix(in srgb, var(--m-bg, #f4ead8) 22%, transparent);
  --po-gutter: clamp(18px, 3.3vw, 52px);
  position: relative;
  isolation: isolate;
  scroll-margin-top: 112px;
  overflow: hidden;
  background: var(--po-ink);
  color: var(--po-paper);
  font: 400 15px/1.5 var(--m-font-body, Arial, Helvetica, sans-serif);
  padding: clamp(64px, 9vw, 128px) var(--po-gutter) clamp(56px, 7vw, 104px);
}
.msm-pizzeria-oven *, .msm-pizzeria-oven *::before, .msm-pizzeria-oven *::after { box-sizing: border-box; }
.msm-pizzeria-oven .po-sparks { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.msm-pizzeria-oven::before {
  content: "";
  position: absolute;
  inset: auto -10% -30% 30%;
  z-index: 0;
  height: 70%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--m-primary, #c84a28) 42%, transparent), transparent 72%);
  pointer-events: none;
}

.msm-pizzeria-oven .po-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.msm-pizzeria-oven .po-eyebrow { margin: 0 0 18px; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.msm-pizzeria-oven h2 {
  margin: 0 0 clamp(20px, 3vw, 34px);
  font: italic 400 clamp(52px, 8vw, 120px)/.88 var(--m-font-display, Georgia, "Times New Roman", serif);
  letter-spacing: -.055em;
}
.msm-pizzeria-oven .po-lead { margin: 0 0 16px; max-width: 42ch; font: italic 400 clamp(19px, 1.9vw, 26px)/1.35 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -.015em; }
.msm-pizzeria-oven .po-text { margin: 0 0 clamp(26px, 3vw, 40px); max-width: 52ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.6; opacity: .88; }
.msm-pizzeria-oven .po-hours { margin: 0 0 22px; max-width: 460px; border-top: 1px solid var(--po-line); }
.msm-pizzeria-oven .po-hours > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--po-line); }
.msm-pizzeria-oven .po-hours dt { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.msm-pizzeria-oven .po-hours dd { margin: 0; font: italic 400 17px/1.2 var(--m-font-display, Georgia, "Times New Roman", serif); font-variant-numeric: tabular-nums; }
.msm-pizzeria-oven .po-address { margin: 0; font-size: 13px; line-height: 1.5; opacity: .82; }
.msm-pizzeria-oven .po-address a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.msm-pizzeria-oven .po-address a:focus-visible, .msm-pizzeria-oven a:focus-visible { outline: 3px solid var(--po-paper); outline-offset: 4px; }

.msm-pizzeria-oven .po-figure { position: relative; margin: 0; display: grid; gap: 14px; justify-items: center; }
.msm-pizzeria-oven .po-mouth {
  display: block;
  width: min(92%, 480px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
}
.msm-pizzeria-oven figcaption { max-width: 34ch; text-align: center; font-size: 12px; line-height: 1.5; opacity: .72; }

@media (max-width: 860px) {
  .msm-pizzeria-oven .po-inner { grid-template-columns: 1fr; gap: 32px; }
  .msm-pizzeria-oven .po-figure { order: -1; }
  .msm-pizzeria-oven .po-mouth { width: min(76vw, 340px); }
  .msm-pizzeria-oven::before { inset: auto -20% 30% -20%; height: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-pizzeria-oven .po-sparks { opacity: .7; }
}