/* kookworkshop-agenda: block-port van ReactBitsPro Blocks/scheduling-7 (paneel met binnenvlak, dagstrook als
   radiogroup met vervaagde randen, raster eronder en een balk met de primaire knop), met de kop uit
   ReactBitsPro Components/glyph-stream (gedeelde instantie) en de gedeelde boekingsdemo onder #boeken.
   Tailwind-klassen en --rb-tokens van de bron vertaald naar gescopete CSS met --m-*. */
.msm-kookworkshop-agenda {
  --ka-ink: var(--m-ink, #243027);
  --ka-text2: color-mix(in srgb, var(--m-ink, #243027) 80%, transparent);
  --ka-text3: color-mix(in srgb, var(--m-ink, #243027) 66%, transparent);
  --ka-inner: var(--m-surface, #fffaf1);
  --ka-ease: cubic-bezier(0.2, 0, 0, 1);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 72px 16px;
  overflow-x: clip;
  background: var(--m-bg, #efe8db);
  color: var(--ka-ink);
  font-family: var(--m-font-body, 'Nunito Sans', Arial, sans-serif);
  scroll-margin-top: 112px;
}
.msm-kookworkshop-agenda *,
.msm-kookworkshop-agenda *::before,
.msm-kookworkshop-agenda *::after { box-sizing: border-box; }
.msm-kookworkshop-agenda [hidden] { display: none !important; }
.msm-kookworkshop-agenda .ka-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.msm-kookworkshop-agenda .ka-wrap { width: 100%; max-width: 56rem; margin: 0 auto; }

/* Sectiekop */
.msm-kookworkshop-agenda .ka-head { margin-bottom: 28px; }
.msm-kookworkshop-agenda .ka-kicker {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--m-primary, #d34d2f);
}
.msm-kookworkshop-agenda .ka-heading {
  --kgs-inset: -14px -8px;
  --kgs-z: 2;
  position: relative;
  max-width: 40rem;
}
.msm-kookworkshop-agenda .ka-title {
  margin: 0;
  font-family: var(--m-font-display, 'Caprasimo', Georgia, serif);
  font-size: 38px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ka-ink);
}
.msm-kookworkshop-agenda .ka-intro {
  max-width: 40rem;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 27px;
  color: var(--m-muted, #667067);
}

/* Workshopknoppen boven het paneel (eigen toevoeging): secundaire knoppen uit de bron, aria-pressed. */
.msm-kookworkshop-agenda .ka-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.msm-kookworkshop-agenda .ka-btn,
.msm-kookworkshop-agenda .ka-pick,
.msm-kookworkshop-agenda .ka-day,
.msm-kookworkshop-agenda .ka-seat {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition-property: color, background-color, border-color, box-shadow, outline-color, scale, filter;
  transition-duration: 120ms;
  transition-timing-function: var(--ka-ease);
}
.msm-kookworkshop-agenda .ka-btn:focus-visible,
.msm-kookworkshop-agenda .ka-pick:focus-visible,
.msm-kookworkshop-agenda .ka-day:focus-visible,
.msm-kookworkshop-agenda .ka-seat:focus-visible {
  outline: 2px solid var(--m-primary, #d34d2f);
  outline-offset: 2px;
}
.msm-kookworkshop-agenda .ka-btn:active:not(:disabled),
.msm-kookworkshop-agenda .ka-pick:active,
.msm-kookworkshop-agenda .ka-day:active:not(:disabled),
.msm-kookworkshop-agenda .ka-seat:active:not(:disabled) { scale: 0.98; transition-duration: 60ms; }
.msm-kookworkshop-agenda button:disabled { cursor: not-allowed; }

/* Secundair: rand 1 px, lichte verloopvulling bij hover. */
.msm-kookworkshop-agenda .ka-pick,
.msm-kookworkshop-agenda .is-secondary {
  border: 1px solid color-mix(in srgb, var(--m-ink, #243027) 12%, transparent);
  background: var(--ka-inner);
  color: var(--ka-ink);
  box-shadow: 0 1px 2px -1px rgb(0 0 0 / 0.12);
}
.msm-kookworkshop-agenda .ka-pick:hover,
.msm-kookworkshop-agenda .is-secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--m-ink, #243027) 32%, transparent);
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--m-ink, #243027) 3%, transparent), color-mix(in srgb, var(--m-ink, #243027) 3%, transparent));
}
.msm-kookworkshop-agenda .ka-pick:active,
.msm-kookworkshop-agenda .is-secondary:active:not(:disabled) { box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12); }
.msm-kookworkshop-agenda .is-secondary:disabled {
  border-color: color-mix(in srgb, var(--m-ink, #243027) 8%, transparent);
  color: color-mix(in srgb, var(--m-ink, #243027) 40%, transparent);
  box-shadow: none;
}

/* Primair: verloop en inset-schaduwen uit de bron, gerekend met --m-primary; tekst in --m-surface. */
.msm-kookworkshop-agenda .ka-pick[aria-pressed="true"],
.msm-kookworkshop-agenda .is-primary {
  border: 0;
  background: linear-gradient(180deg, color-mix(in oklab, var(--m-primary, #d34d2f) 84%, white), color-mix(in oklab, var(--m-primary, #d34d2f) 94%, black));
  color: var(--m-surface, #fffaf1);
  box-shadow:
    inset 0 2px 0 -1px rgb(255 255 255 / 0.2),
    inset 0 -2px 0 -1px rgb(0 0 0 / 0.3),
    inset 0 0 0 1px color-mix(in oklab, var(--m-primary, #d34d2f) 88%, black),
    0 1px 1px rgb(0 0 0 / 0.22),
    0 2px 5px -2px rgb(0 0 0 / 0.3);
}
.msm-kookworkshop-agenda .ka-pick[aria-pressed="true"]:hover,
.msm-kookworkshop-agenda .is-primary:hover:not(:disabled) { filter: brightness(1.1); background-image: linear-gradient(180deg, color-mix(in oklab, var(--m-primary, #d34d2f) 84%, white), color-mix(in oklab, var(--m-primary, #d34d2f) 94%, black)); }
.msm-kookworkshop-agenda .ka-pick[aria-pressed="true"]:active,
.msm-kookworkshop-agenda .is-primary:active:not(:disabled) {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--m-primary, #d34d2f) 88%, black), inset 0 1px 2px rgb(0 0 0 / 0.42);
}
.msm-kookworkshop-agenda .is-primary:disabled { opacity: 0.4; box-shadow: none; }

.msm-kookworkshop-agenda .ka-pick {
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}
.msm-kookworkshop-agenda .ka-btn--md {
  height: 32px;
  gap: 8px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}

/* Paneel (radius 10, rand) met binnenvlak (radius 6, eigen rand); twee kolommen vanaf lg: 260 px en de rest. */
.msm-kookworkshop-agenda .ka-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--m-ink, #243027) 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--m-surface, #fffaf1) 55%, var(--m-bg, #efe8db));
}
.msm-kookworkshop-agenda .ka-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--m-ink, #243027) 8%, transparent);
  border-radius: 6px;
  background: var(--ka-inner);
}
.msm-kookworkshop-agenda .ka-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.msm-kookworkshop-agenda .ka-info { display: flex; flex-direction: column; padding: 16px; }
.msm-kookworkshop-agenda .ka-avatar {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 9999px;
  user-select: none;
}
.msm-kookworkshop-agenda .ka-avatar-fallback {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--m-ink, #243027) 12%, transparent);
  border-radius: inherit;
  background: var(--ka-inner);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ka-ink);
}
.msm-kookworkshop-agenda .ka-host,
.msm-kookworkshop-agenda .ka-caption {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ka-text3);
}
.msm-kookworkshop-agenda .ka-host { margin-top: 12px; }
.msm-kookworkshop-agenda .ka-name {
  margin: 2px 0 0;
  font-family: var(--m-font-body, 'Nunito Sans', Arial, sans-serif);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ka-ink);
}
.msm-kookworkshop-agenda .ka-desc { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--ka-text2); }
.msm-kookworkshop-agenda .ka-details { display: grid; gap: 10px; margin: 16px 0 0; }
.msm-kookworkshop-agenda .ka-detail { display: flex; align-items: flex-start; gap: 8px; }
.msm-kookworkshop-agenda .ka-detail dt { flex-shrink: 0; padding-top: 1px; color: var(--ka-text3); }
.msm-kookworkshop-agenda .ka-detail dt svg { display: block; width: 14px; height: 14px; }
.msm-kookworkshop-agenda .ka-detail dd {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0 8px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--ka-text2);
}
.msm-kookworkshop-agenda .ka-policy { margin: auto 0 0; padding-top: 16px; font-size: 13px; line-height: 18px; color: var(--ka-text3); }

.msm-kookworkshop-agenda .ka-choose { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 16px; }
.msm-kookworkshop-agenda .ka-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Dagstrook: horizontaal scrollend, knoppen van 72 px, vervaagde randen alleen als er verder te scrollen valt. */
.msm-kookworkshop-agenda .ka-strip-wrap { position: relative; margin: 6px -4px 0; }
.msm-kookworkshop-agenda .ka-strip {
  display: flex;
  gap: 8px;
  margin-bottom: -6px;
  padding: 4px 4px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.msm-kookworkshop-agenda .ka-strip::-webkit-scrollbar { display: none; }
.msm-kookworkshop-agenda .ka-day {
  width: 72px;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  border-radius: 6px;
}
.msm-kookworkshop-agenda .ka-day-label,
.msm-kookworkshop-agenda .ka-day-free { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.msm-kookworkshop-agenda .ka-day-date { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.msm-kookworkshop-agenda .ka-day.is-secondary:not(:disabled) .ka-day-label,
.msm-kookworkshop-agenda .ka-day.is-secondary:not(:disabled) .ka-day-free { color: var(--ka-text3); }
.msm-kookworkshop-agenda .ka-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms var(--ka-ease);
}
.msm-kookworkshop-agenda .ka-fade--start { left: 0; background: linear-gradient(to right, var(--ka-inner), transparent); }
.msm-kookworkshop-agenda .ka-fade--end { right: 0; background: linear-gradient(to left, var(--ka-inner), transparent); }
.msm-kookworkshop-agenda .ka-fade.is-on { opacity: 1; }

/* Plaatsen: raster van 2 kolommen, vanaf sm 3, knoppen h-8. */
.msm-kookworkshop-agenda .ka-seats-head { margin-top: 20px; }
.msm-kookworkshop-agenda .ka-seats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.msm-kookworkshop-agenda .ka-seat {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Balk: licht vlak, radius 14, samenvatting en primaire knop. */
.msm-kookworkshop-agenda .ka-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 8px 8px 8px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--m-ink, #243027) 5%, transparent);
}
.msm-kookworkshop-agenda .ka-summary { min-width: 0; margin: 0; font-size: 13px; line-height: 18px; color: var(--ka-text2); }
.msm-kookworkshop-agenda .ka-summary strong { font-weight: 600; color: var(--ka-ink); font-variant-numeric: tabular-nums; }
.msm-kookworkshop-agenda .ka-sample { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--ka-text3); }
.msm-kookworkshop-agenda .ka-sample.is-alert { color: var(--ka-ink); }

/* Weekrooster: tabel, zonder JavaScript open. */
.msm-kookworkshop-agenda .ka-rooster { margin-top: 20px; }
.msm-kookworkshop-agenda .ka-rooster-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: var(--ka-ink);
  cursor: pointer;
}
.msm-kookworkshop-agenda .ka-rooster-toggle:focus-visible { outline: 2px solid var(--m-primary, #d34d2f); outline-offset: 2px; border-radius: 4px; }
.msm-kookworkshop-agenda .ka-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}
.msm-kookworkshop-agenda .ka-table th,
.msm-kookworkshop-agenda .ka-table td {
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--m-line, #ddd3c2);
  text-align: left;
  vertical-align: top;
}
.msm-kookworkshop-agenda .ka-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--m-muted, #667067); }
.msm-kookworkshop-agenda .ka-table tbody th { font-weight: 700; }
.msm-kookworkshop-agenda .ka-table td { color: var(--ka-text2); }

/* Boeken: het gedeelde boekingsvak. */
.msm-kookworkshop-agenda .ka-booking { margin-top: 40px; scroll-margin-top: 112px; outline: none; }

/* Bron-CSS van glyph-stream (glyph-stream.css), gescoped. De beheerder zet de maat via de style-prop. */
.msm-kookworkshop-agenda .glyph-stream {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}
.msm-kookworkshop-agenda .glyph-stream__content { position: relative; z-index: 10; width: 100%; height: 100%; }
/* Op de complete pagina deelt deze kop de instantie van de andere kookworkshopmodules; die hangt zijn laag
   (.kw-glyph) aan het kopvlak. */
.msm-kookworkshop-agenda .kw-glyph { position: absolute; inset: -14px -18px; z-index: 2; }
.msm-kookworkshop-agenda .kw-glyph .glyph-stream { min-height: 0; }

@media (min-width: 640px) {
  .msm-kookworkshop-agenda { padding: 88px 24px; }
  .msm-kookworkshop-agenda .ka-title { font-size: 48px; line-height: 1.05; }
  .msm-kookworkshop-agenda .ka-heading { --kgs-inset: -16px -20px; }
  .msm-kookworkshop-agenda .ka-seats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .msm-kookworkshop-agenda .ka-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1024px) {
  .msm-kookworkshop-agenda { padding: 104px 32px; }
  .msm-kookworkshop-agenda .ka-title { font-size: 56px; }
  .msm-kookworkshop-agenda .ka-grid { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .msm-kookworkshop-agenda .ka-btn,
  .msm-kookworkshop-agenda .ka-pick,
  .msm-kookworkshop-agenda .ka-day,
  .msm-kookworkshop-agenda .ka-seat,
  .msm-kookworkshop-agenda .ka-fade { transition: none; }
  .msm-kookworkshop-agenda .ka-btn:active:not(:disabled),
  .msm-kookworkshop-agenda .ka-pick:active,
  .msm-kookworkshop-agenda .ka-day:active:not(:disabled),
  .msm-kookworkshop-agenda .ka-seat:active:not(:disabled) { scale: 1; }
}