/* pizzeria-steen 1.0.0 · bento-raster van ingrediënttegels met spotlight, gloeiende rand en tilt
   (ReactBits MagicBento), plus een resultaattegel met gestapelde pizzalagen. */
.msm-pizzeria-steen {
  --ps-ink: var(--m-ink, #211711);
  --ps-paper: var(--m-bg, #f4ead8);
  --ps-red: var(--m-primary, #c84a28);
  --ps-line: color-mix(in srgb, var(--m-ink, #211711) 20%, transparent);
  --ps-muted: color-mix(in srgb, var(--m-ink, #211711) 66%, transparent);
  --ps-gutter: clamp(18px, 3.3vw, 52px);
  --ps-spring: cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  scroll-margin-top: 112px;
  background: var(--ps-paper);
  color: var(--ps-ink);
  font: 400 15px/1.5 var(--m-font-body, Arial, Helvetica, sans-serif);
  padding: clamp(56px, 8vw, 112px) var(--ps-gutter) clamp(36px, 5vw, 72px);
  -webkit-tap-highlight-color: transparent;
}
.msm-pizzeria-steen *, .msm-pizzeria-steen *::before, .msm-pizzeria-steen *::after { box-sizing: border-box; }

.msm-pizzeria-steen .ps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px clamp(28px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(26px, 4vw, 48px);
}
.msm-pizzeria-steen .ps-eyebrow { grid-column: 1 / -1; margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.msm-pizzeria-steen h2 { margin: 0; font: 400 clamp(40px, 6.2vw, 92px)/.92 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -.05em; }
.msm-pizzeria-steen h2 em { font-style: italic; font-weight: 400; }
.msm-pizzeria-steen .ps-verdict--head { align-self: end; max-width: 44ch; padding-bottom: 6px; }

.msm-pizzeria-steen .ps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 178px;
  grid-auto-flow: row dense;
  gap: 12px;
}
.msm-pizzeria-steen .ps-cell { position: relative; min-width: 0; min-height: 0; }
.msm-pizzeria-steen .ps-cell--result { grid-column: 3 / span 2; grid-row: 1 / span 2; }

.msm-pizzeria-steen .ps-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: color-mix(in srgb, var(--m-bg, #f4ead8) 70%, #ffffff);
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--m-ink, #211711) 55%, transparent);
  transform: perspective(900px) rotateX(var(--ps-rx, 0deg)) rotateY(var(--ps-ry, 0deg)) scale(var(--ps-press, 1));
  transition: background-color .35s ease;
  user-select: none;
  -webkit-user-select: none;
}
.msm-pizzeria-steen .ps-tile { cursor: pointer; }
.msm-pizzeria-steen .ps-tile:focus-visible { outline: 3px solid var(--ps-red); outline-offset: 3px; }
.msm-pizzeria-steen .ps-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--m-primary, #c84a28) 15%, var(--m-bg, #f4ead8)); }

/* Spotlight, rand en gloed: de posities komen als --ps-x/--ps-y per kaart uit het script. */
.msm-pizzeria-steen .ps-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--ps-x, -999px) var(--ps-y, -999px), color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-hot, 0) * 16%), transparent) 0%, color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-hot, 0) * 9%), transparent) 35%, transparent 72%);
}
.msm-pizzeria-steen .ps-rim { position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 0 1px var(--ps-line), inset 0 1px 0 rgba(255, 255, 255, .55); }
.msm-pizzeria-steen .ps-tile[aria-pressed="true"] .ps-rim { box-shadow: inset 0 0 0 1.5px var(--ps-red); }
.msm-pizzeria-steen .ps-border {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 1.5px;
  pointer-events: none;
  background:
    radial-gradient(220px circle at var(--ps-x, -999px) var(--ps-y, -999px), color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-near, 0) * 90%), transparent) 0%, color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-near, 0) * 45%), transparent) 45%, transparent 75%),
    radial-gradient(circle at var(--ps-wx, -999px) var(--ps-wy, -999px), transparent calc(var(--ps-wr, 0px) - 100px), color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-wa, 0) * 30%), transparent) calc(var(--ps-wr, 0px) - 50px), color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-wa, 0) * 95%), transparent) calc(var(--ps-wr, 0px) - 6px), transparent var(--ps-wr, 0px));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Ingrediënttegel */
.msm-pizzeria-steen .ps-cutout { position: relative; z-index: 2; display: block; width: clamp(32px, 3.5vw, 48px); aspect-ratio: 1; margin: 16px 16px 0; object-fit: contain; filter: none; opacity: 1; transition: transform .6s var(--ps-spring); }
.msm-pizzeria-steen .ps-tile[aria-pressed="true"] .ps-cutout { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.msm-pizzeria-steen .ps-tile-text { position: relative; z-index: 2; display: grid; gap: 3px; margin: auto 16px 16px; }
.msm-pizzeria-steen .ps-tile-name { font: 400 clamp(19px, 1.7vw, 24px)/1.1 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -.02em; }
.msm-pizzeria-steen .ps-tile-desc { font-size: 12px; line-height: 1.4; color: var(--ps-muted); }
.msm-pizzeria-steen .ps-check {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--ps-red);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s ease, transform .5s var(--ps-spring);
}
.msm-pizzeria-steen .ps-tile[aria-pressed="true"] .ps-check { opacity: 1; transform: none; }

/* Resultaattegel */
.msm-pizzeria-steen .ps-card--result { background: var(--ps-ink); color: var(--ps-paper); }
.msm-pizzeria-steen .ps-card--result .ps-rim { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-bg, #f4ead8) 18%, transparent); }
.msm-pizzeria-steen .ps-card--result .ps-light { background: radial-gradient(320px circle at var(--ps-x, -999px) var(--ps-y, -999px), color-mix(in srgb, var(--m-primary, #c84a28) calc(var(--ps-hot, 0) * 28%), transparent) 0%, transparent 72%); }
.msm-pizzeria-steen .ps-result {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(10px, 1.4vw, 18px);
}
.msm-pizzeria-steen .ps-pizza { position: relative; width: 100%; height: 100%; margin: 0 auto; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .45)); }
.msm-pizzeria-steen .ps-pizza-photo { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; opacity: 1; scale: 1.18; transition: opacity .25s ease; }
.msm-pizzeria-steen .ps-pizza[aria-busy="true"] .ps-pizza-photo { opacity: .72; }
.msm-pizzeria-steen .ps-photo-status { position: absolute; inset: auto 10px 8px; padding: 5px 8px; background: color-mix(in srgb, var(--m-ink, #211711) 82%, transparent); color: var(--m-bg, #f4ead8); font-size: 11px; line-height: 1.3; text-align: center; opacity: 0; pointer-events: none; }
.msm-pizzeria-steen .ps-pizza[aria-busy="true"] .ps-photo-status, .msm-pizzeria-steen .ps-pizza[data-photo-error="true"] .ps-photo-status { opacity: 1; }
.msm-pizzeria-steen .ps-verdict { display: grid; gap: 10px; align-content: center; }
.msm-pizzeria-steen .ps-kicker { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.msm-pizzeria-steen .ps-name { margin: 0; font: italic 400 clamp(24px, 2.6vw, 38px)/1.05 var(--m-font-display, Georgia, "Times New Roman", serif); letter-spacing: -.03em; }
.msm-pizzeria-steen .ps-chosen { margin: 0; font-size: 13px; line-height: 1.5; opacity: .82; }
.msm-pizzeria-steen .ps-cta {
  justify-self: start;
  margin-top: 6px;
  padding: 13px 17px;
  background: var(--ps-red);
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: transform .4s var(--ps-spring);
}
.msm-pizzeria-steen .ps-cta:hover { transform: translateY(-2px); }
.msm-pizzeria-steen .ps-cta:focus-visible { outline: 3px solid var(--ps-paper); outline-offset: 3px; }
.msm-pizzeria-steen .ps-foot { margin: 22px 0 0; font-size: 12px; color: var(--ps-muted); }

@media (max-width: 980px) {
  .msm-pizzeria-steen .ps-head { grid-template-columns: 1fr; align-items: start; }
  .msm-pizzeria-steen .ps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 164px; }
  .msm-pizzeria-steen .ps-cell--result { grid-column: 1 / span 3; grid-row: span 2; min-height: 340px; }
}
@media (max-width: 600px) {
  .msm-pizzeria-steen .ps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .msm-pizzeria-steen .ps-cell--result { grid-column: 1 / span 2; grid-row: span 2; }
  .msm-pizzeria-steen .ps-cell--result { min-height: 300px; }
  .msm-pizzeria-steen .ps-result { padding: 12px; }
  .msm-pizzeria-steen .ps-cutout { width: 28px; margin: 12px 12px 0; }
  .msm-pizzeria-steen .ps-tile-text { margin: auto 12px 12px; }
  .msm-pizzeria-steen .ps-tile-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-pizzeria-steen .ps-card { transform: none !important; transition: none; }
  .msm-pizzeria-steen .ps-cutout, .msm-pizzeria-steen .ps-check, .msm-pizzeria-steen .ps-pizza-photo, .msm-pizzeria-steen .ps-cta { transition: opacity .2s ease; transform: none !important; }
}