/* muziekschool-lesschrift: block-port van ReactBitsPro Blocks/bento-24.
   Tailwind-klassen uit de bron vertaald naar gescopete CSS; kleuren via --m-*.
   Lettergroottes van de tegel (10 en 11 px) staan hier op ongeveer 1,25 keer, zodat het lesschrift leesbaar blijft. */
.msm-muziekschool-lesschrift {
  --ls-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ls-soft: color-mix(in srgb, var(--m-line, #dbd5ca) 62%, var(--m-surface, #fffaf2));
  --ls-hover: color-mix(in srgb, var(--m-bg, #eee8dc) 45%, var(--m-surface, #fffaf2));
  --ls-active: color-mix(in srgb, var(--m-bg, #eee8dc) 92%, var(--m-surface, #fffaf2));
  --ls-ring: color-mix(in srgb, var(--m-ink, #242126) 45%, transparent);
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 72px 16px;
  background: var(--m-bg, #eee8dc);
  color: var(--m-ink, #242126);
  font-family: var(--m-font-body, "Montserrat", "Segoe UI", system-ui, sans-serif);
  scroll-margin-top: 112px;
}
.msm-muziekschool-lesschrift *,
.msm-muziekschool-lesschrift *::before,
.msm-muziekschool-lesschrift *::after { box-sizing: border-box; }
.msm-muziekschool-lesschrift p,
.msm-muziekschool-lesschrift h2,
.msm-muziekschool-lesschrift h3,
.msm-muziekschool-lesschrift ul,
.msm-muziekschool-lesschrift ol { margin: 0; }
.msm-muziekschool-lesschrift ul,
.msm-muziekschool-lesschrift ol { padding: 0; list-style: none; }
.msm-muziekschool-lesschrift [hidden] { display: none !important; }
.msm-muziekschool-lesschrift .ms-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Opbouw van de sectie: kop links, kaart rechts vanaf 1100 px */
.msm-muziekschool-lesschrift .ls-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}
.msm-muziekschool-lesschrift .ls-head { max-width: 34rem; }
.msm-muziekschool-lesschrift .ls-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-accent2, #7a3833);
}
.msm-muziekschool-lesschrift .ls-title {
  margin-top: 14px;
  font-family: var(--m-font-display, "Fraunces", Georgia, serif);
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.msm-muziekschool-lesschrift .ls-intro {
  margin-top: 18px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--m-muted, #69616b);
}

/* Kaart: rounded-3xl, rand, min. 380 px */
.msm-muziekschool-lesschrift .ls-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 920px;
  min-height: 380px;
  overflow: hidden;
  border: 1px solid var(--m-line, #dbd5ca);
  border-radius: 24px;
  background: var(--m-surface, #fffaf2);
}
.msm-muziekschool-lesschrift .ls-stage {
  position: relative;
  container-type: inline-size;
  min-height: 220px;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 12px 12px 0;
}

/* Ingeschoven venster: inset-x-3 top-3, rounded-xl, rand, schaduw. De onderkant loopt weg onder de fade. */
.msm-muziekschool-lesschrift .ls-window {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: -16px;
  overflow: hidden;
  border: 1px solid var(--m-line, #dbd5ca);
  border-radius: 12px;
  background: var(--m-surface, #fffaf2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.12);
}
.msm-muziekschool-lesschrift.is-js [data-ls-enter]:not(.is-in) { opacity: 0; }

.msm-muziekschool-lesschrift .ls-left {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-bottom: 1px solid var(--ls-soft);
}
.msm-muziekschool-lesschrift .ls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.msm-muziekschool-lesschrift .ls-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--m-ink, #242126);
}
.msm-muziekschool-lesschrift .ls-label svg { flex: none; color: var(--m-accent2, #7a3833); }
.msm-muziekschool-lesschrift .ls-time {
  flex: none;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--m-muted, #69616b);
}

/* Golfvorm: 48 staafjes, gap 2 px, h-10 en vanaf container 2xl h-16 */
.msm-muziekschool-lesschrift .ls-wave {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
  height: 40px;
  margin-top: 14px;
}
.msm-muziekschool-lesschrift .ls-b {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--m-line, #dbd5ca);
  transform-origin: center;
  transform: scaleY(var(--s, var(--v)));
  /* motion: keyframes van 0,2 s met de standaard easeInOut */
  transition: transform 0.2s cubic-bezier(0.42, 0, 0.58, 1);
}
.msm-muziekschool-lesschrift .ls-b.is-played { background: var(--m-ink, #242126); }

.msm-muziekschool-lesschrift .ls-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.msm-muziekschool-lesschrift .ls-play {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--m-ink, #242126);
  color: var(--m-surface, #fffaf2);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.msm-muziekschool-lesschrift .ls-play:hover { transform: scale(1.05); }
.msm-muziekschool-lesschrift .ls-play:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--m-surface, #fffaf2), 0 0 0 4px var(--ls-ring); }
.msm-muziekschool-lesschrift .ls-play .ls-ico-play { margin-left: 2px; }
.msm-muziekschool-lesschrift .ls-play:not(.is-paused) .ls-ico-play,
.msm-muziekschool-lesschrift .ls-play.is-paused .ls-ico-pause { display: none; }
.msm-muziekschool-lesschrift .ls-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}
.msm-muziekschool-lesschrift .ls-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--m-line, #dbd5ca);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--m-muted, #69616b);
}

/* Oefenlijst met vierkante vinkvakjes; de bron toont hem pas vanaf 2xl, hier altijd (het is inhoud) */
.msm-muziekschool-lesschrift .ls-tasks { padding-top: 20px; }
.msm-muziekschool-lesschrift .ls-small {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-muted, #69616b);
}
.msm-muziekschool-lesschrift .ls-tasklist { display: grid; gap: 8px; margin-top: 8px; }
.msm-muziekschool-lesschrift .ls-taskrow {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--m-ink, #242126) 85%, var(--m-surface, #fffaf2));
}
.msm-muziekschool-lesschrift .ls-check {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--m-line, #dbd5ca) 70%, var(--m-muted, #69616b));
  border-radius: 4px;
}
.msm-muziekschool-lesschrift .ls-taskrow.is-done .ls-check {
  border-color: var(--m-ink, #242126);
  background: var(--m-ink, #242126);
}
.msm-muziekschool-lesschrift .ls-taskrow.is-done .ls-check::after {
  content: "";
  width: 7px;
  height: 4px;
  transform: translateY(-1px) rotate(-45deg);
  border-bottom: 1.5px solid var(--m-surface, #fffaf2);
  border-left: 1.5px solid var(--m-surface, #fffaf2);
}
.msm-muziekschool-lesschrift .ls-taskrow.is-done .ls-task { text-decoration: line-through; opacity: 0.6; }

/* Rechts: notities als knoppen */
.msm-muziekschool-lesschrift .ls-right {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
}
.msm-muziekschool-lesschrift .ls-rhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--m-muted, #69616b);
}
.msm-muziekschool-lesschrift .ls-rtitle { font-weight: 600; }
.msm-muziekschool-lesschrift .ls-lines { display: grid; gap: 4px; }
.msm-muziekschool-lesschrift .ls-line {
  display: flex;
  gap: 11px;
  width: 100%;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.msm-muziekschool-lesschrift .ls-line:hover { background: var(--ls-hover); }
.msm-muziekschool-lesschrift .ls-line.is-active { background: var(--ls-active); }
.msm-muziekschool-lesschrift .ls-line:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ls-ring); }
.msm-muziekschool-lesschrift .ls-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--m-line, #dbd5ca);
  border-radius: 6px;
  background: var(--m-bg, #eee8dc);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--m-ink, #242126);
}
.msm-muziekschool-lesschrift .ls-line.is-active .ls-avatar {
  box-shadow: 0 0 0 1px var(--ls-active), 0 0 0 3px var(--m-ink, #242126);
}
.msm-muziekschool-lesschrift .ls-lbody { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.msm-muziekschool-lesschrift .ls-lmeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--m-ink, #242126) 85%, var(--m-surface, #fffaf2));
}
.msm-muziekschool-lesschrift .ls-at { font-variant-numeric: tabular-nums; color: var(--m-muted, #69616b); }
.msm-muziekschool-lesschrift .ls-ghost { visibility: hidden; }
.msm-muziekschool-lesschrift .ls-layer { position: absolute; top: 0; right: 0; left: 0; }
.msm-muziekschool-lesschrift .ls-ltext {
  position: relative;
  display: block;
  min-height: 2.6rem;
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--m-muted, #69616b);
}
.msm-muziekschool-lesschrift .ls-line.is-active .ls-ltext { color: var(--m-ink, #242126); }
.msm-muziekschool-lesschrift .ls-caret {
  display: inline-block;
  width: 2px;
  height: 0.875rem;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--m-ink, #242126);
  animation: ls-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes ls-pulse { 50% { opacity: 0.5; } }

.msm-muziekschool-lesschrift .ls-notes {
  margin-top: 16px;
  padding: 12px 9px 56px;
  border-top: 1px solid var(--ls-soft);
}
.msm-muziekschool-lesschrift .ls-ntext {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.625;
  color: color-mix(in srgb, var(--m-ink, #242126) 85%, var(--m-surface, #fffaf2));
}
.msm-muziekschool-lesschrift .ls-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.75rem;
  color: var(--m-muted, #69616b);
}
.msm-muziekschool-lesschrift .ls-saved svg { flex: none; }

/* Fade naar de kaartkleur onderaan het venster (h-16) */
.msm-muziekschool-lesschrift .ls-fade {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(to top, var(--m-surface, #fffaf2), color-mix(in srgb, var(--m-surface, #fffaf2) 0%, transparent));
}

.msm-muziekschool-lesschrift .ls-foot { padding: 8px 24px 24px; }
.msm-muziekschool-lesschrift .ls-ftitle {
  font-family: var(--m-font-display, "Fraunces", Georgia, serif);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.msm-muziekschool-lesschrift .ls-ftext {
  margin-top: 6px;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--m-muted, #69616b);
}

/* Container 2xl (42rem): twee kolommen, 44 procent en de rest */
@container (min-width: 42rem) {
  .msm-muziekschool-lesschrift .ls-window { flex-direction: row; }
  .msm-muziekschool-lesschrift .ls-left {
    width: 44%;
    flex-shrink: 0;
    border-bottom: 0;
    border-right: 1px solid var(--ls-soft);
  }
  .msm-muziekschool-lesschrift .ls-wave { height: 64px; }
}

@media (min-width: 768px) {
  .msm-muziekschool-lesschrift { padding: 96px 32px; }
}
@media (min-width: 1100px) {
  .msm-muziekschool-lesschrift .ls-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: 64px;
    align-items: center;
  }
  .msm-muziekschool-lesschrift .ls-card { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .msm-muziekschool-lesschrift .ls-caret { animation: none; }
  .msm-muziekschool-lesschrift .ls-b,
  .msm-muziekschool-lesschrift .ls-play,
  .msm-muziekschool-lesschrift .ls-line { transition: none; }
  .msm-muziekschool-lesschrift .ls-play:hover { transform: none; }
}