/* cocktailbar-gasten 1.0.0 · voorbeeldreacties waarvan de eerste woorden met een echo binnenkomen
   (naar ReactBits EchoText). Kleuren en fonts alleen via --m-*-tokens; tinten met color-mix. */
.msm-cocktailbar-gasten {
  --cq-ink: var(--m-ink, #f5e9df);
  --cq-bg: var(--m-bg, #140f16);
  --cq-hot: var(--m-primary, #ef936f);
  --cq-line: color-mix(in srgb, var(--m-ink, #f5e9df) 16%, transparent);
  --cq-muted: color-mix(in srgb, var(--m-ink, #f5e9df) 66%, transparent);
  position: relative;
  display: block;
  scroll-margin-top: 112px;
  overflow-x: clip;
  background: color-mix(in srgb, var(--cq-ink) 3%, var(--cq-bg));
  color: var(--cq-ink);
  font: 400 16px/1.55 var(--m-font-body, Arial, sans-serif);
  padding: clamp(80px, 10vw, 148px) clamp(16px, 4vw, 56px);
  border-top: 1px solid var(--cq-line);
}
.msm-cocktailbar-gasten *,
.msm-cocktailbar-gasten *::before,
.msm-cocktailbar-gasten *::after { box-sizing: border-box; }
.msm-cocktailbar-gasten .cq-inner { max-width: 1180px; margin: 0 auto; }
.msm-cocktailbar-gasten .cq-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  column-gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.msm-cocktailbar-gasten .cq-eyebrow {
  grid-column: 1 / -1;
  display: flex;
  gap: 18px;
  margin: 0 0 22px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cq-muted);
}
.msm-cocktailbar-gasten .cq-eyebrow span + span::before { content: "/"; margin-right: 18px; color: var(--cq-hot); }
.msm-cocktailbar-gasten h2 {
  margin: 0;
  max-width: 10ch;
  font: 900 clamp(60px, 9vw, 124px)/0.8 var(--m-font-display, Impact, sans-serif);
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.msm-cocktailbar-gasten .cq-intro { margin: 0 0 6px; max-width: 40ch; color: var(--cq-muted); font-size: clamp(15px, 1.3vw, 17px); }

.msm-cocktailbar-gasten .cq-list { list-style: none; margin: 0; padding: 0; display: grid; }
.msm-cocktailbar-gasten .cq-item { padding: clamp(36px, 4.5vw, 60px) 0; border-top: 1px solid var(--cq-line); }
.msm-cocktailbar-gasten .cq-item:last-child { border-bottom: 1px solid var(--cq-line); }
.msm-cocktailbar-gasten .cq-quote { width: min(100%, 880px); margin: 0; }
.msm-cocktailbar-gasten .cq-item:nth-child(even) .cq-quote { margin-left: auto; }
.msm-cocktailbar-gasten blockquote { margin: 0; }
.msm-cocktailbar-gasten blockquote p { margin: 0; }
.msm-cocktailbar-gasten .cq-lead {
  position: relative;
  display: block;
  margin-bottom: 18px;
  font: 900 clamp(46px, 6.6vw, 92px)/0.88 var(--m-font-display, Impact, sans-serif);
  letter-spacing: -0.045em;
  text-wrap: balance;
  contain: layout style;
}
.msm-cocktailbar-gasten .cq-front { position: relative; z-index: 2; display: block; }
.msm-cocktailbar-gasten .cq-echo {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.msm-cocktailbar-gasten .cq-rest { display: block; max-width: 44ch; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: color-mix(in srgb, var(--cq-ink) 84%, transparent); }
.msm-cocktailbar-gasten figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 22px;
  font-size: 13px;
  color: var(--cq-muted);
}
.msm-cocktailbar-gasten .cq-tag {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--cq-hot) 60%, transparent);
  color: var(--cq-hot);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.msm-cocktailbar-gasten .cq-who { color: var(--cq-ink); font-weight: 700; }
.msm-cocktailbar-gasten .cq-glass a { color: var(--cq-ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--cq-hot) 70%, transparent); text-underline-offset: 4px; }
.msm-cocktailbar-gasten .cq-glass a:hover { color: var(--cq-hot); }
.msm-cocktailbar-gasten .cq-glass a:focus-visible { outline: 2px solid var(--cq-ink); outline-offset: 3px; }

@media (max-width: 860px) {
  .msm-cocktailbar-gasten .cq-head { grid-template-columns: 1fr; }
  .msm-cocktailbar-gasten .cq-intro { margin-top: 22px; }
}
@media (max-width: 760px) {
  .msm-cocktailbar-gasten { scroll-margin-top: 96px; }
  .msm-cocktailbar-gasten .cq-lead { font-size: clamp(40px, 12vw, 56px); margin-bottom: 14px; }
  .msm-cocktailbar-gasten figcaption { gap: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-cocktailbar-gasten .cq-echo { display: none; }
}