/* glaszetter-glassoorten 1.0.0 · zes glastegels op een snijtafel die de maquette erachter echt buigen
   (ReactBits GlassIcons, vanilla met SVG-verplaatsingskaart en backdrop-filter) en een kop waarin
   hoekhaken van woord naar woord scherpstellen (ReactBits TrueFocus). Kleuren alleen via --m-*-tokens. */
.msm-glaszetter-glassoorten {
  --gzg-ink: var(--m-ink, #10282b);
  --gzg-bg: var(--m-bg, #eff8f7);
  --gzg-primary: var(--m-primary, #087f8c);
  --gzg-line: color-mix(in srgb, var(--m-ink, #10282b) 16%, transparent);
  --gzg-muted: color-mix(in srgb, var(--m-ink, #10282b) 78%, transparent);
  --gzg-tile: clamp(70px, 8.6vw, 116px);
  --gzg-gap: calc(var(--gzg-tile) * .56);
  --gzg-radius: calc(var(--gzg-tile) * .17);
  position: relative;
  scroll-margin-top: 110px;
  padding: clamp(72px, 9vw, 132px) clamp(16px, 4vw, 56px);
  background: var(--gzg-bg);
  color: var(--gzg-ink);
  font: 500 16px/1.65 var(--m-font-body, Arial, sans-serif);
  overflow-x: clip;
}
.msm-glaszetter-glassoorten *,
.msm-glaszetter-glassoorten *::before,
.msm-glaszetter-glassoorten *::after { box-sizing: border-box; }
.msm-glaszetter-glassoorten .gzg-inner { max-width: 1240px; margin: 0 auto; }

/* Kop met TrueFocus */
.msm-glaszetter-glassoorten .gzg-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: clamp(24px, 5vw, 80px); align-items: end; }
.msm-glaszetter-glassoorten .gzg-kicker {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 22px;
  font: 600 10px/1.4 var(--m-font-body, Arial, sans-serif);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.msm-glaszetter-glassoorten .gzg-kicker span + span { padding-left: 14px; border-left: 1px solid var(--gzg-line); font-weight: 500; color: var(--gzg-muted); }
.msm-glaszetter-glassoorten .gzg-title {
  position: relative;
  margin: 0;
  font: 400 clamp(44px, 6.2vw, 92px)/1.02 var(--m-font-display, Georgia, serif);
  letter-spacing: -.02em;
}
.msm-glaszetter-glassoorten .gzg-fw { display: inline-block; transition: filter .5s ease, opacity .5s ease; }
.msm-glaszetter-glassoorten .gzg-fw.is-soft { filter: blur(5px); opacity: .62; }
.msm-glaszetter-glassoorten .gzg-frame,
.msm-glaszetter-glassoorten .gzg-focus {
  --gzg-cs: .18em;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1), width .5s cubic-bezier(.65, 0, .35, 1), height .5s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}
.msm-glaszetter-glassoorten .gzg-focus { --gzg-cs: 16px; z-index: 3; }
.msm-glaszetter-glassoorten .gzg-corner {
  position: absolute;
  width: var(--gzg-cs);
  height: var(--gzg-cs);
  border: max(2px, .035em) solid var(--gzg-primary);
  border-radius: 3px;
}
.msm-glaszetter-glassoorten .gzg-focus .gzg-corner { border-width: 2.5px; }
.msm-glaszetter-glassoorten .gzg-corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.msm-glaszetter-glassoorten .gzg-corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.msm-glaszetter-glassoorten .gzg-corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.msm-glaszetter-glassoorten .gzg-corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.msm-glaszetter-glassoorten .gzg-lede { margin: 0; max-width: 42ch; font-size: 17px; line-height: 1.7; color: var(--gzg-muted); }

/* Snijtafel met maquette */
.msm-glaszetter-glassoorten .gzg-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 68px);
}
.msm-glaszetter-glassoorten .gzg-table {
  position: relative;
  margin: 0;
  aspect-ratio: 1 / .94;
  overflow: hidden;
  border: 1px solid var(--gzg-line);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--m-ink, #10282b) 12%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(0deg, color-mix(in srgb, var(--m-ink, #10282b) 12%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, color-mix(in srgb, var(--m-ink, #10282b) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, color-mix(in srgb, var(--m-ink, #10282b) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    color-mix(in srgb, var(--m-bg, #eff8f7) 45%, #fff);
}
/* Liniaal langs de bovenrand van de tafel */
.msm-glaszetter-glassoorten .gzg-table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-ink, #10282b) 45%, transparent) 0 1px, transparent 1px 48px) 0 0 / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--m-ink, #10282b) 30%, transparent) 0 1px, transparent 1px 8px) 0 0 / 100% 7px no-repeat,
    color-mix(in srgb, var(--m-bg, #eff8f7) 70%, #fff);
  border-bottom: 1px solid var(--gzg-line);
  z-index: 1;
}
.msm-glaszetter-glassoorten .gzg-scene {
  position: absolute;
  inset: 5% 3% 3%;
  width: 94%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px color-mix(in srgb, var(--m-ink, #10282b) 22%, transparent));
}
.msm-glaszetter-glassoorten .gzg-hint {
  position: absolute;
  z-index: 4;
  left: 16px;
  bottom: 16px;
  margin: 0;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--m-bg, #eff8f7) 86%, transparent);
  font: 600 10px/1.2 var(--m-font-body, Arial, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Glastegels (worden door het script gebouwd) */
.msm-glaszetter-glassoorten .gzg-tiles {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: repeat(3, var(--gzg-tile));
  gap: calc(var(--gzg-tile) * .46 + 24px) var(--gzg-gap);
  /* De platen steken rechtsboven uit: schuif de groep iets naar links zodat het geheel in het midden staat. */
  transform: translate(calc(-50% - var(--gzg-tile) * .22), -46%);
}
.msm-glaszetter-glassoorten .gzg-tile {
  position: relative;
  width: var(--gzg-tile);
  height: var(--gzg-tile);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.msm-glaszetter-glassoorten .gzg-plate {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--m-primary, #087f8c) 70%, transparent);
  border-radius: var(--gzg-radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--m-primary, #087f8c) 42%, transparent), color-mix(in srgb, var(--m-primary, #087f8c) 6%, transparent));
  transform-origin: 100% 100%;
  will-change: transform, opacity;
}
.msm-glaszetter-glassoorten .gzg-tile:nth-child(even) .gzg-plate {
  border-color: color-mix(in srgb, var(--m-ink, #10282b) 45%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--m-ink, #10282b) 28%, transparent), color-mix(in srgb, var(--m-primary, #087f8c) 6%, transparent));
}
.msm-glaszetter-glassoorten .gzg-tile.is-active .gzg-plate {
  background: linear-gradient(135deg, var(--gzg-primary), color-mix(in srgb, var(--m-primary, #087f8c) 45%, var(--m-ink, #10282b)));
}
.msm-glaszetter-glassoorten .gzg-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--gzg-radius);
  background: linear-gradient(var(--gzg-tint, transparent), var(--gzg-tint, transparent));
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--m-ink, #10282b) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 60%, transparent);
  will-change: transform, opacity;
}
.msm-glaszetter-glassoorten .gzg-shade,
.msm-glaszetter-glassoorten .gzg-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: 100% 100%;
  pointer-events: none;
}
.msm-glaszetter-glassoorten .gzg-shade { opacity: .26; }
.msm-glaszetter-glassoorten .gzg-shine { opacity: .9; }
.msm-glaszetter-glassoorten .gzg-face {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: var(--gzg-radius);
  pointer-events: none;
  will-change: transform, opacity;
}
.msm-glaszetter-glassoorten .gzg-glyph {
  display: grid;
  place-items: center;
  width: 42%;
  height: 42%;
  color: var(--gzg-ink);
  filter: drop-shadow(0 1px 3px color-mix(in srgb, #fff 70%, transparent));
}
.msm-glaszetter-glassoorten .gzg-glyph svg { width: 100%; height: 100%; }
.msm-glaszetter-glassoorten .gzg-tile:focus-visible .gzg-face { outline: 2px solid var(--gzg-primary); outline-offset: 5px; }
.msm-glaszetter-glassoorten .gzg-label {
  position: absolute;
  z-index: 2;
  top: calc(100% + 9px);
  left: 50%;
  padding: 3px 7px;
  background: color-mix(in srgb, var(--m-bg, #eff8f7) 88%, transparent);
  color: var(--gzg-ink);
  font: 600 12px/1.2 var(--m-font-body, Arial, sans-serif);
  white-space: nowrap;
  pointer-events: none;
  opacity: var(--gzg-in, 1);
  transform: translateX(-50%);
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.msm-glaszetter-glassoorten .gzg-tile.is-active .gzg-label { background: var(--gzg-ink); color: var(--gzg-bg); }
@media (hover: hover) {
  .msm-glaszetter-glassoorten .gzg-tile:not(.is-active) .gzg-label {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s .3s;
  }
  .msm-glaszetter-glassoorten .gzg-tile:not(.is-active):hover .gzg-label,
  .msm-glaszetter-glassoorten .gzg-tile:not(.is-active):focus-visible .gzg-label {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1), visibility 0s;
  }
}
.msm-glaszetter-glassoorten .gzg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* Lijst met doorsnedes (zonder script: alle zes; met script: het paneel naast de tafel) */
.msm-glaszetter-glassoorten .gzg-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.msm-glaszetter-glassoorten .gzg-type {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--gzg-line);
  background: color-mix(in srgb, var(--m-bg, #eff8f7) 40%, #fff);
}
.msm-glaszetter-glassoorten .gzg-type[hidden] { display: none; }
.msm-glaszetter-glassoorten .gzg-cut { position: relative; }
.msm-glaszetter-glassoorten .gzg-cut img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.msm-glaszetter-glassoorten .gzg-copy { display: grid; gap: 8px; }
.msm-glaszetter-glassoorten .gzg-copy h3 { margin: 0; font: 400 24px/1.05 var(--m-font-display, Georgia, serif); letter-spacing: -.015em; }
.msm-glaszetter-glassoorten .gzg-copy p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gzg-muted); }
.msm-glaszetter-glassoorten .gzg-copy .gzg-spec {
  color: color-mix(in srgb, var(--m-primary, #087f8c) 70%, var(--m-ink, #10282b));
  font: 600 10px/1.4 var(--m-font-body, Arial, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.msm-glaszetter-glassoorten .gzg-copy .gzg-route {
  padding: 12px 14px;
  border-left: 3px solid var(--gzg-primary);
  background: color-mix(in srgb, var(--m-bg, #eff8f7) 30%, #fff);
  color: var(--gzg-ink);
}
.msm-glaszetter-glassoorten .gzg-route b { display: block; margin-bottom: 3px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }

/* Met script: één paneel als etiket naast de tafel */
.msm-glaszetter-glassoorten.is-live .gzg-list { display: block; }
.msm-glaszetter-glassoorten.is-live .gzg-type {
  grid-template-columns: 1fr;
  gap: 20px;
  padding: clamp(20px, 2.6vw, 32px);
  background: color-mix(in srgb, var(--m-bg, #eff8f7) 25%, #fff);
  outline: none;
  isolation: isolate;
}
.msm-glaszetter-glassoorten.is-live .gzg-type:focus-visible { outline: 3px solid var(--gzg-primary); outline-offset: 4px; }
.msm-glaszetter-glassoorten.is-live .gzg-cut {
  width: min(100%, 300px);
  margin: 0 auto;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--m-ink, #10282b) 6%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(0deg, color-mix(in srgb, var(--m-ink, #10282b) 6%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    color-mix(in srgb, var(--m-bg, #eff8f7) 60%, #fff);
}
.msm-glaszetter-glassoorten.is-live .gzg-cut::after {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--m-primary, #087f8c) 48%, transparent);
  pointer-events: none;
}
.msm-glaszetter-glassoorten.is-live .gzg-cut img { filter: drop-shadow(0 14px 16px color-mix(in srgb, var(--m-ink, #10282b) 20%, transparent)); }
.msm-glaszetter-glassoorten.is-live .gzg-copy { gap: 12px; }
.msm-glaszetter-glassoorten.is-live .gzg-copy h3 { font-size: clamp(30px, 3vw, 42px); }
.msm-glaszetter-glassoorten.is-live .gzg-copy p { font-size: 15px; }
.msm-glaszetter-glassoorten .gzg-count { margin: 0 0 4px; font: 600 10px/1.4 var(--m-font-body, Arial, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--gzg-muted); }

@media (max-width: 960px) {
  .msm-glaszetter-glassoorten .gzg-head { grid-template-columns: 1fr; row-gap: 18px; }
  .msm-glaszetter-glassoorten .gzg-body { grid-template-columns: 1fr; }
  .msm-glaszetter-glassoorten.is-live .gzg-type { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
}
@media (max-width: 640px) {
  .msm-glaszetter-glassoorten { scroll-margin-top: 96px; --gzg-tile: min(19vw, 76px); }
  .msm-glaszetter-glassoorten .gzg-list { grid-template-columns: 1fr; }
  .msm-glaszetter-glassoorten .gzg-table { aspect-ratio: 1 / 1.02; }
  .msm-glaszetter-glassoorten .gzg-hint { left: 10px; bottom: 10px; }
  .msm-glaszetter-glassoorten.is-live .gzg-type { grid-template-columns: 1fr; }
  .msm-glaszetter-glassoorten.is-live .gzg-cut { width: min(78%, 260px); }
  .msm-glaszetter-glassoorten .gzg-focus { --gzg-cs: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-glaszetter-glassoorten .gzg-fw,
  .msm-glaszetter-glassoorten .gzg-frame,
  .msm-glaszetter-glassoorten .gzg-focus,
  .msm-glaszetter-glassoorten .gzg-label { transition: none; }
  .msm-glaszetter-glassoorten .gzg-fw.is-soft { filter: none; opacity: 1; }
}