/* kookworkshop-kennis: vier artikelkaarten naar de blog. Hoofdbron ReactBitsPro Components/glyph-stream (origineel
   gecompileerd, gedeelde instantie): eerst de intro langs de h2, daarna een rustige stroom tegels in het bed achter
   de kaarten die de aanwijzer overneemt. Het canvas ligt onder de kaarten en vangt geen klikken. Kleuren via --m-*. */
.msm-kookworkshop-kennis {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 72px 16px;
  overflow-x: clip;
  background: var(--m-bg, #efe8db);
  color: var(--m-ink, #243027);
  font-family: var(--m-font-body, 'Nunito Sans', Arial, sans-serif);
  scroll-margin-top: 112px;
}
.msm-kookworkshop-kennis *,
.msm-kookworkshop-kennis *::before,
.msm-kookworkshop-kennis *::after { box-sizing: border-box; }
/* Het hele vlak van kop tot notitie is het bed van de stroom; de inhoud ligt erboven (z-index 1). */
.msm-kookworkshop-kennis .kk-wrap {
  --kgs-inset: -40px -16px;
  --kgs-z: 0;
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.msm-kookworkshop-kennis .kk-head,
.msm-kookworkshop-kennis .kk-note { position: relative; z-index: 1; }

.msm-kookworkshop-kennis .kk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 8px;
}
.msm-kookworkshop-kennis .kk-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-kennis .kk-heading {
  --kgs-inset: -14px -8px;
  --kgs-z: 2;
  position: relative;
}
.msm-kookworkshop-kennis .kk-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;
  color: var(--m-ink, #243027);
}
.msm-kookworkshop-kennis .kk-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
  border-bottom: 1px solid currentColor;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: var(--m-ink, #243027);
  text-decoration: none;
  transition: color 0.2s ease;
}
.msm-kookworkshop-kennis .kk-all svg { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.msm-kookworkshop-kennis .kk-all:hover { color: var(--m-primary, #d34d2f); }
.msm-kookworkshop-kennis .kk-all:hover svg { transform: translateX(3px); }
.msm-kookworkshop-kennis .kk-all:focus-visible { outline: 2px solid var(--m-primary, #d34d2f); outline-offset: 4px; border-radius: 2px; }

/* Kaartrij met ruimte eromheen, zodat de stroom langs de kaarten zichtbaar blijft. */
.msm-kookworkshop-kennis .kk-bed { position: relative; z-index: 1; padding: 36px 0; }
.msm-kookworkshop-kennis .kk-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.msm-kookworkshop-kennis .kk-cell { display: flex; min-width: 0; }
.msm-kookworkshop-kennis .kk-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--m-line, #ddd3c2);
  border-radius: 16px;
  background: var(--m-surface, #fffaf1);
  color: var(--m-ink, #243027);
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
.msm-kookworkshop-kennis .kk-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -24px rgb(0 0 0 / 0.35);
}
.msm-kookworkshop-kennis .kk-card:focus-visible {
  outline: 2px solid var(--m-primary, #d34d2f);
  outline-offset: 3px;
}
.msm-kookworkshop-kennis .kk-media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--m-line, #ddd3c2);
}
.msm-kookworkshop-kennis .kk-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msm-kookworkshop-kennis .kk-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; }
.msm-kookworkshop-kennis .kk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--m-muted, #667067);
}
.msm-kookworkshop-kennis .kk-cat { font-weight: 700; color: var(--m-primary, #d34d2f); }
.msm-kookworkshop-kennis .kk-dash { display: inline-block; width: 14px; height: 1.5px; background: currentColor; }
.msm-kookworkshop-kennis .kk-card-title {
  margin: 0;
  font-family: var(--m-font-display, 'Caprasimo', Georgia, serif);
  font-size: 21px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--m-ink, #243027);
  text-wrap: balance;
}
.msm-kookworkshop-kennis .kk-note { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--m-muted, #667067); }

/* Bron-CSS van glyph-stream (glyph-stream.css), gescoped. De beheerder zet de maat via de style-prop. */
.msm-kookworkshop-kennis .glyph-stream {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}
.msm-kookworkshop-kennis .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-kennis .kw-glyph { position: absolute; inset: -14px -18px; z-index: 2; }
.msm-kookworkshop-kennis .kw-glyph .glyph-stream { min-height: 0; }

@media (min-width: 640px) {
  .msm-kookworkshop-kennis { padding: 88px 24px; }
  .msm-kookworkshop-kennis .kk-title { font-size: 48px; line-height: 1.05; }
  .msm-kookworkshop-kennis .kk-heading { --kgs-inset: -16px -20px; }
}
@media (min-width: 768px) {
  .msm-kookworkshop-kennis .kk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .msm-kookworkshop-kennis { padding: 104px 32px; }
  .msm-kookworkshop-kennis .kk-title { font-size: 56px; }
  .msm-kookworkshop-kennis .kk-bed { padding: 56px 0; }
  .msm-kookworkshop-kennis .kk-wrap { --kgs-inset: -56px -32px; }
  .msm-kookworkshop-kennis .kk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-kookworkshop-kennis .kk-card,
  .msm-kookworkshop-kennis .kk-all,
  .msm-kookworkshop-kennis .kk-all svg { transition: none; }
  .msm-kookworkshop-kennis .kk-card:hover { transform: none; }
  .msm-kookworkshop-kennis .kk-all:hover svg { transform: none; }
}