/* strandtent-paviljoen 1.0.0 · ReactBits ScrollVelocity (reactbits.dev/text-animations/scroll-velocity) in vanilla SVG/JS.
   Behouden: lopende tekstbanden in tegengestelde richting waarvan snelheid en richting meegaan met de
   verend gladgestreken scrollsnelheid. De vervorming is hier geen skew maar de golf zelf: de tekst loopt
   over een golvend pad dat hoger wordt naarmate je sneller scrolt. Kleuren alleen via --m-*-tokens. */
.msm-strandtent-paviljoen {
  --stp-primary: var(--m-primary, #1f6c78);
  --stp-bg: var(--m-bg, #efe3c7);
  --stp-ink: var(--m-ink, #183035);
  display: block;
  position: relative;
  scroll-margin-top: 110px;
  padding: clamp(28px, 4vw, 48px) 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--stp-primary) 0%, color-mix(in srgb, var(--stp-primary) 82%, var(--stp-ink)) 100%);
  color: var(--stp-bg);
  font-family: var(--m-font-body, Coast, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.55;
}
.msm-strandtent-paviljoen *,
.msm-strandtent-paviljoen *::before,
.msm-strandtent-paviljoen *::after { box-sizing: border-box; }

.msm-strandtent-paviljoen .stp-band { position: relative; height: clamp(120px, 15vw, 220px); }
.msm-strandtent-paviljoen .stp-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.msm-strandtent-paviljoen .stp-pad { fill: none; stroke: none; }
.msm-strandtent-paviljoen .stp-tekst {
  font: 800 clamp(64px, 8.4vw, 124px) / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.04em;
  fill: var(--stp-bg);
  dominant-baseline: central;
  white-space: pre;
}
/* Terugtrekkende golf: dezelfde woorden, verbleekt als nat zand. */
.msm-strandtent-paviljoen .stp-tekst--lijn { fill: color-mix(in srgb, var(--stp-bg) 26%, transparent); }

.msm-strandtent-paviljoen .stp-inner { width: min(1240px, 100% - 32px); margin: 0 auto; padding: clamp(24px, 4vw, 56px) 0; }
.msm-strandtent-paviljoen .stp-kop {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  grid-template-areas: "eyebrow eyebrow" "titel lede";
  column-gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.msm-strandtent-paviljoen .stp-eyebrow { grid-area: eyebrow; margin: 0 0 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.msm-strandtent-paviljoen h2 {
  grid-area: titel;
  margin: 0;
  color: #fff;
  font: 800 clamp(44px, 6.6vw, 96px) / 0.86 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.msm-strandtent-paviljoen .stp-lede { grid-area: lede; max-width: 40ch; margin: 0 0 6px; font-size: 17px; }

/* Het seizoen als drie stukken langs één horizon. */
.msm-strandtent-paviljoen .stp-seizoen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.msm-strandtent-paviljoen .stp-blok { position: relative; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--stp-bg) 45%, transparent); }
.msm-strandtent-paviljoen .stp-blok::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--stp-bg);
}
.msm-strandtent-paviljoen .stp-maand {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--stp-bg) 55%, transparent);
  font: 800 clamp(44px, 5vw, 76px) / 0.9 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.05em;
}
.msm-strandtent-paviljoen h3 {
  margin: 0 0 10px;
  color: #fff;
  font: 800 clamp(22px, 2vw, 28px) / 1.05 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.03em;
}
.msm-strandtent-paviljoen .stp-blok p:last-child { margin: 0; max-width: 40ch; }

@media (max-width: 860px) {
  .msm-strandtent-paviljoen .stp-kop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "titel" "lede"; }
  .msm-strandtent-paviljoen .stp-lede { margin-top: 18px; }
  .msm-strandtent-paviljoen .stp-seizoen { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 640px) {
  .msm-strandtent-paviljoen .stp-band { height: 112px; }
  .msm-strandtent-paviljoen .stp-tekst { font-size: 60px; }
  .msm-strandtent-paviljoen h2 { font-size: clamp(42px, 12.5vw, 60px); }
}