/* cocktailbar-kamer 1.0.0 · de kamer met drie plekken en glazen knoppen met een spiegelende rand
   (naar ReactBits SpecularButton). Kleuren en fonts alleen via --m-*-tokens; tinten met color-mix. */
.msm-cocktailbar-kamer {
  --cr-ink: var(--m-ink, #f5e9df);
  --cr-bg: var(--m-bg, #140f16);
  --cr-hot: var(--m-primary, #ef936f);
  --cr-line: color-mix(in srgb, var(--m-ink, #f5e9df) 16%, transparent);
  --cr-muted: color-mix(in srgb, var(--m-ink, #f5e9df) 66%, transparent);
  position: relative;
  display: block;
  scroll-margin-top: 112px;
  overflow-x: clip;
  background: var(--cr-bg);
  color: var(--cr-ink);
  font: 400 16px/1.55 var(--m-font-body, Arial, sans-serif);
  padding: clamp(80px, 10vw, 148px) clamp(16px, 4vw, 56px);
}
.msm-cocktailbar-kamer *,
.msm-cocktailbar-kamer *::before,
.msm-cocktailbar-kamer *::after { box-sizing: border-box; }
.msm-cocktailbar-kamer .cr-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  grid-template-areas: "copy stage" "choose stage";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 6vw, 96px);
}
.msm-cocktailbar-kamer .cr-copy { grid-area: copy; }
.msm-cocktailbar-kamer .cr-stage { grid-area: stage; }
.msm-cocktailbar-kamer .cr-choose { grid-area: choose; align-self: end; }
.msm-cocktailbar-kamer .cr-eyebrow {
  display: flex;
  gap: 18px;
  margin: 0 0 22px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.msm-cocktailbar-kamer .cr-eyebrow span + span::before { content: "/"; margin-right: 18px; color: var(--cr-hot); }
.msm-cocktailbar-kamer h2 {
  margin: 0 0 24px;
  font: 900 clamp(64px, 10vw, 140px)/0.8 var(--m-font-display, Impact, sans-serif);
  letter-spacing: -0.055em;
}
.msm-cocktailbar-kamer .cr-intro { margin: 0 0 32px; max-width: 40ch; color: var(--cr-muted); font-size: clamp(15px, 1.3vw, 17px); }
.msm-cocktailbar-kamer .cr-facts { margin: 0; border-top: 1px solid var(--cr-line); }
.msm-cocktailbar-kamer .cr-facts div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cr-line);
}
.msm-cocktailbar-kamer .cr-facts dt { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cr-muted); padding-top: 4px; }
.msm-cocktailbar-kamer .cr-facts dd { margin: 0; font-size: 15px; }

/* Podium met drie diorama's die in elkaar overvloeien */
.msm-cocktailbar-kamer .cr-stage { position: relative; display: grid; isolation: isolate; }
.msm-cocktailbar-kamer .cr-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 14% 4% 22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cr-hot) 20%, transparent), transparent);
  filter: blur(10px);
}
.msm-cocktailbar-kamer .cr-scene { margin: 0; min-width: 0; }
.msm-cocktailbar-kamer .cr-scene img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55));
  user-select: none;
  -webkit-user-drag: none;
}
.msm-cocktailbar-kamer .cr-scene figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 22px;
  align-items: baseline;
  margin-top: -2%;
  padding-top: 16px;
  border-top: 1px solid var(--cr-line);
}
.msm-cocktailbar-kamer .cr-scene strong { font: 900 clamp(30px, 3vw, 42px)/0.9 var(--m-font-display, Impact, sans-serif); letter-spacing: -0.035em; color: var(--cr-hot); white-space: nowrap; }
.msm-cocktailbar-kamer .cr-scene figcaption span { color: var(--cr-muted); font-size: 15px; }
.msm-cocktailbar-kamer:not([data-ready]) .cr-stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.msm-cocktailbar-kamer:not([data-ready]) .cr-scene figcaption { grid-template-columns: 1fr; }
.msm-cocktailbar-kamer[data-ready] .cr-scene {
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.55s;
  visibility: hidden;
}
.msm-cocktailbar-kamer[data-ready] .cr-scene[data-active] { opacity: 1; transform: none; visibility: visible; }

/* Glazen knoppen */
.msm-cocktailbar-kamer .cr-pick-label {
  margin: 40px 0 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.msm-cocktailbar-kamer:not([data-ready]) .cr-pick-label,
.msm-cocktailbar-kamer:not([data-ready]) .cr-places,
.msm-cocktailbar-kamer:not([data-ready]) .cr-status { display: none; }
.msm-cocktailbar-kamer .cr-places { display: flex; flex-wrap: wrap; gap: 12px; }
.msm-cocktailbar-kamer .cr-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 0;
  padding: 17px 24px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--cr-ink) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cr-ink) 12%, transparent), 0 10px 24px -14px rgba(0, 0, 0, 0.7);
  color: var(--cr-ink);
  font: 700 11px/1 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
}
.msm-cocktailbar-kamer .cr-btn:active { transform: scale(0.97); }
.msm-cocktailbar-kamer .cr-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--cr-hot) 22%, transparent); }
.msm-cocktailbar-kamer .cr-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--cr-ink) 60%, transparent); outline-offset: 4px; }
.msm-cocktailbar-kamer .cr-btn > span { position: relative; z-index: 2; }
.msm-cocktailbar-kamer .cr-light {
  position: absolute;
  inset: -24px;
  z-index: 1;
  display: block;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}
.msm-cocktailbar-kamer .cr-status { min-height: 1.5em; margin: 20px 0 0; font-size: 14px; color: var(--cr-muted); }
.msm-cocktailbar-kamer .cr-status strong { color: var(--cr-ink); font-weight: 700; }
.msm-cocktailbar-kamer .cr-go {
  display: inline-flex;
  gap: 8px;
  margin-top: 22px;
  padding: 14px 18px;
  background: var(--cr-hot);
  color: var(--cr-bg);
  font: 900 13px/1 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}
.msm-cocktailbar-kamer .cr-go:focus-visible { outline: 2px solid var(--cr-ink); outline-offset: 4px; }

@media (max-width: 860px) {
  .msm-cocktailbar-kamer .cr-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "choose"; grid-template-rows: none; }
  .msm-cocktailbar-kamer .cr-stage { margin-top: 36px; }
  .msm-cocktailbar-kamer .cr-scene figcaption { grid-template-columns: 1fr; }
  .msm-cocktailbar-kamer .cr-pick-label { margin-top: 32px; }
}
@media (max-width: 760px) {
  .msm-cocktailbar-kamer { scroll-margin-top: 96px; }
  .msm-cocktailbar-kamer .cr-facts div { grid-template-columns: 96px minmax(0, 1fr); }
  .msm-cocktailbar-kamer .cr-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .msm-cocktailbar-kamer .cr-btn { padding: 14px 6px; font-size: 10px; letter-spacing: 0.08em; white-space: normal; text-align: center; line-height: 1.2; border-radius: 14px; }
  .msm-cocktailbar-kamer:not([data-ready]) .cr-stage { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-cocktailbar-kamer[data-ready] .cr-scene { transform: none; transition: opacity 0.3s ease, visibility 0.3s; }
  .msm-cocktailbar-kamer .cr-btn { transition: none; }
  .msm-cocktailbar-kamer .cr-btn:active { transform: none; }
}