/* muziekschool-hero 1.0.0 · block-port van React Bits Pro hero-4 voor Toonkamer, met het ongewijzigd gecompileerde
   Pro-component concentric-tides achter het tekstblok en een motion-port van Pro user-cursor boven de beeldenstroom.
   Kleuren alleen via --m-*; fonts uit assets/fonts.css (de site laadt dat bestand). */
.msm-muziekschool-hero {
  --mh-pad: 16px;
  --mh-ink: var(--m-ink, #242126);
  --mh-bg: var(--m-bg, #eee8dc);
  --mh-surface: var(--m-surface, #fffaf2);
  --mh-muted: var(--m-muted, #69616b);
  --mh-line: var(--m-line, #dbd5ca);
  --mh-primary: var(--m-primary, #cf4f3f);
  /* Label en knopvlak: --m-primary iets verdiept met --m-ink, zodat tekst in --m-surface leesbaar blijft. */
  --mh-fill: color-mix(in srgb, var(--m-primary, #cf4f3f) 86%, var(--m-ink, #242126));
  --mh-size: 30px;
  --mh-tile-w: 280px;
  --mh-tile-h: 280px;
  --mh-wide-w: 224px;
  --mh-fade-w: 96px;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0 0 48px;
  /* #top (merknaam, Terug naar boven) landt helemaal bovenaan, onder de sticky balk. */
  scroll-margin-top: 120px;
  background: var(--mh-bg);
  color: var(--mh-ink);
  font-family: var(--m-font-body, 'Montserrat', ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.msm-muziekschool-hero *,
.msm-muziekschool-hero *::before,
.msm-muziekschool-hero *::after { box-sizing: border-box; }

/* Tekstblok: max-w-4xl, mx-auto, mb-28, space-y-6/8. De kop staat vanaf md op één regel, dus het blok groeit mee
   met de kop en blijft gecentreerd. */
.msm-muziekschool-hero .mh-top {
  position: relative;
  isolation: isolate;
  padding: 48px var(--mh-pad) 112px;
}
.msm-muziekschool-hero .mh-tides {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.msm-muziekschool-hero.is-tides .mh-tides { opacity: 1; }
/* Originele concentric-tides.css, gescoped. */
.msm-muziekschool-hero .concentric-tides {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 240px;
  overflow: hidden;
}
.msm-muziekschool-hero .concentric-tides__content { position: relative; z-index: 10; width: 100%; height: 100%; }

.msm-muziekschool-hero .mh-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: fit-content;
  max-width: min(100%, 1400px);
  margin: 0 auto;
}
.msm-muziekschool-hero .mh-kicker {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mh-ink);
}
.msm-muziekschool-hero .mh-head { display: flex; flex-direction: column; gap: 12px; }
.msm-muziekschool-hero .mh-title,
.msm-muziekschool-hero .mh-second {
  margin: 0;
  font-family: var(--m-font-display, 'Fraunces', ui-serif, Georgia, serif);
  font-weight: 400;
  font-size: var(--mh-size);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.msm-muziekschool-hero .mh-title { color: var(--mh-ink); }
.msm-muziekschool-hero .mh-second { color: var(--mh-muted); }
.msm-muziekschool-hero .mh-actions { display: flex; }
.msm-muziekschool-hero .mh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--mh-ink);
  color: var(--mh-surface);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.2s ease;
}
.msm-muziekschool-hero .mh-btn:hover { transform: scale(1.02); background: color-mix(in srgb, var(--m-ink, #242126) 86%, var(--m-surface, #fffaf2)); }
.msm-muziekschool-hero .mh-btn:active { transform: scale(0.98); }

/* Beeldenstroom over de volle breedte: tegels met gap 16, rounded-lg en rand; de lijst drie keer achter elkaar. */
.msm-muziekschool-hero .mh-stream { position: relative; }
.msm-muziekschool-hero .mh-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.msm-muziekschool-hero .mh-track::-webkit-scrollbar { display: none; }
.msm-muziekschool-hero.is-looping .mh-track { overflow: hidden; }
.msm-muziekschool-hero .mh-tile {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--mh-tile-w);
  height: var(--mh-tile-h);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--m-line, #dbd5ca) 80%, transparent);
  border-radius: 8px;
  background: var(--mh-surface);
  color: var(--mh-ink);
  text-decoration: none;
}
.msm-muziekschool-hero .mh-tile-wide { width: var(--mh-wide-w); }
.msm-muziekschool-hero .mh-tile picture,
.msm-muziekschool-hero .mh-tile img { display: block; width: 100%; height: 100%; }
.msm-muziekschool-hero .mh-tile img { object-fit: cover; }
.msm-muziekschool-hero .mh-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--m-ink, #242126) 0%, transparent);
  transition: background-color 0.3s ease;
}
.msm-muziekschool-hero .mh-tile:hover::after { background: color-mix(in srgb, var(--m-ink, #242126) 10%, transparent); }
.msm-muziekschool-hero .mh-tile:focus-visible { outline: 3px solid var(--mh-primary); outline-offset: -3px; }
.msm-muziekschool-hero .mh-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 6px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--m-surface, #fffaf2) 92%, transparent);
  color: var(--mh-ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
/* Met de eigen aanwijzer (fijne pointer) noemt het label de les; het bijschrift verschijnt dan alleen bij focus. */
.msm-muziekschool-hero .mh-stream.is-cursor .mh-caption { opacity: 0; transform: translateY(4px); }
.msm-muziekschool-hero .mh-stream.is-cursor .mh-tile:focus-visible .mh-caption { opacity: 1; transform: none; }
.msm-muziekschool-hero .mh-stream.is-cursor,
.msm-muziekschool-hero .mh-stream.is-cursor a { cursor: none; }
.msm-muziekschool-hero .mh-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--mh-fade-w);
  pointer-events: none;
}
.msm-muziekschool-hero .mh-fade-l { left: 0; background: linear-gradient(to right, var(--mh-bg), color-mix(in srgb, var(--m-bg, #eee8dc) 0%, transparent)); }
.msm-muziekschool-hero .mh-fade-r { right: 0; background: linear-gradient(to left, var(--mh-bg), color-mix(in srgb, var(--m-bg, #eee8dc) 0%, transparent)); }

/* user-cursor: de laag volgt de aanwijzer, vangt geen klikken en is aria-hidden. */
.msm-muziekschool-hero .mh-cursor { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.msm-muziekschool-hero .mh-follow {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  transform: translate(-9999px, -9999px);
}
.msm-muziekschool-hero .mh-pop { opacity: 0; }
.msm-muziekschool-hero .mh-arrow { display: block; width: 28px; height: 28px; }
.msm-muziekschool-hero .mh-arrow path {
  fill: var(--mh-primary);
  stroke: color-mix(in srgb, var(--m-ink, #242126) 18%, transparent);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.msm-muziekschool-hero .mh-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 5.04px 12.04px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--mh-fill);
  color: var(--mh-surface);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--m-ink, #242126) 15%, transparent);
  transform: translate(25.2px, 11.6px);
}

/* Eigen toevoeging (WCAG 2.2.2): pauzeknop rechtsonder de stroom. */
.msm-muziekschool-hero .mh-under {
  display: flex;
  justify-content: flex-end;
  max-width: calc(1400px + 2 * var(--mh-pad));
  margin: 0 auto;
  padding: 12px var(--mh-pad) 0;
}
.msm-muziekschool-hero:not(.is-looping) .mh-under { display: none; }
.msm-muziekschool-hero .mh-pause {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--mh-line);
  border-radius: 999px;
  background: var(--mh-surface);
  color: var(--mh-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.msm-muziekschool-hero .mh-pause svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.msm-muziekschool-hero .mh-pause .mh-ic-play { display: none; fill: currentColor; stroke-width: 1.4; }
.msm-muziekschool-hero .mh-pause[aria-pressed="true"] { border-color: var(--mh-ink); }
.msm-muziekschool-hero .mh-pause[aria-pressed="true"] .mh-ic-play { display: block; }
.msm-muziekschool-hero .mh-pause[aria-pressed="true"] .mh-ic-pause { display: none; }
.msm-muziekschool-hero .mh-btn:focus-visible,
.msm-muziekschool-hero .mh-pause:focus-visible { outline: 2px solid var(--mh-primary); outline-offset: 3px; }

@media (min-width: 640px) {
  .msm-muziekschool-hero {
    --mh-pad: 24px;
    --mh-size: 36px;
    --mh-tile-w: 360px;
    --mh-tile-h: 360px;
    --mh-wide-w: 640px;
    --mh-fade-w: 128px;
  }
  .msm-muziekschool-hero .mh-text { gap: 32px; }
  .msm-muziekschool-hero .mh-kicker { font-size: 16px; }
  .msm-muziekschool-hero .mh-head { gap: 16px; }
  .msm-muziekschool-hero .mh-btn { padding: 14px 32px; font-size: 16px; }
}
@media (min-width: 768px) {
  /* Vanaf md op één regel: de maat schaalt mee met de breedte en stopt op 7xl. */
  .msm-muziekschool-hero { --mh-size: min(72px, 5.6vw); --mh-tile-w: 440px; --mh-tile-h: 400px; --mh-wide-w: 711px; }
  .msm-muziekschool-hero .mh-title,
  .msm-muziekschool-hero .mh-second { white-space: nowrap; }
}
@media (min-width: 1024px) {
  .msm-muziekschool-hero { --mh-pad: 32px; --mh-tile-w: 520px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-muziekschool-hero .mh-btn,
  .msm-muziekschool-hero .mh-tile::after,
  .msm-muziekschool-hero .mh-caption,
  .msm-muziekschool-hero .mh-tides { transition-duration: 0.01ms; }
  .msm-muziekschool-hero .mh-btn:hover,
  .msm-muziekschool-hero .mh-btn:active { transform: none; }
}