/* strandtent-zon 1.0.0 · ReactBits SlicedWaves (reactbits.dev/backgrounds/sliced-waves) plus CountUp
   (reactbits.dev/text-animations/count-up) in vanilla canvas 2d en CSS/JS.
   Behouden: golven van licht die in staande balken zijn versneden en in perspectief staan, met een
   scherptediepte die meeveert naar een brandpunt; hier is dat brandpunt de gekozen dag. De tijd rolt
   per cijferkolom door. Kleuren alleen via --m-*-tokens. */
.msm-strandtent-zon {
  --stz-primary: var(--m-primary, #1f6c78);
  --stz-bg: var(--m-bg, #efe3c7);
  --stz-ink: var(--m-ink, #183035);
  --stz-night: color-mix(in srgb, var(--stz-ink) 86%, var(--stz-primary));
  display: block;
  position: relative;
  scroll-margin-top: 110px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--stz-night) 0%, color-mix(in srgb, var(--stz-ink) 62%, var(--stz-primary)) 46%, var(--stz-night) 100%);
  color: var(--stz-bg);
  font-family: var(--m-font-body, Coast, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
}
.msm-strandtent-zon *,
.msm-strandtent-zon *::before,
.msm-strandtent-zon *::after { box-sizing: border-box; }
.msm-strandtent-zon :focus-visible { outline: 3px solid var(--stz-bg); outline-offset: 3px; }

/* De zee bij laag licht: canvas met de balken, een warme gloed op de horizon. */
.msm-strandtent-zon .stz-zee {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 820px;
  padding: clamp(72px, 9vw, 120px) 0 28px;
}
.msm-strandtent-zon .stz-zee::before {
  content: "";
  position: absolute;
  inset: 30% -10% 10%;
  z-index: -2;
  background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--stz-bg) 26%, transparent), transparent 70%);
}
.msm-strandtent-zon .stz-canvas { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; color: var(--stz-bg); border-top-color: color-mix(in srgb, var(--stz-primary) 72%, white); outline-color: color-mix(in srgb, var(--stz-bg) 55%, white); }
.msm-strandtent-zon .stz-top,
.msm-strandtent-zon .stz-dagen,
.msm-strandtent-zon .stz-onder { width: min(1240px, 100% - 32px); margin-inline: auto; }
.msm-strandtent-zon .stz-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: start;
}
.msm-strandtent-zon .stz-eyebrow { margin: 0 0 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; }
.msm-strandtent-zon h2 {
  margin: 0;
  color: #fff;
  font: 800 clamp(46px, 7vw, 104px) / 0.86 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.msm-strandtent-zon .stz-lede { max-width: 36ch; margin: 20px 0 0; font-size: 17px; }
.msm-strandtent-zon .stz-tijd { text-align: right; padding-top: 22px; }
.msm-strandtent-zon .stz-tijd p { margin: 0; }
.msm-strandtent-zon .stz-tijd-label { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.msm-strandtent-zon .stz-klok {
  color: #fff;
  font: 800 clamp(64px, 10vw, 148px) / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.msm-strandtent-zon .stz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.msm-strandtent-zon .stz-roll { display: inline-flex; white-space: pre; }
.msm-strandtent-zon .stz-slot { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: top; }
.msm-strandtent-zon .stz-strip { display: flex; flex-direction: column; will-change: transform; }
.msm-strandtent-zon .stz-strip > span { display: block; height: 1.2em; }
.msm-strandtent-zon .stz-bron { max-width: 30ch; margin-left: auto !important; font-size: 13px; opacity: 0.8; }

/* Zeven avonden langs de horizon; de gekozen avond trekt het licht naar zich toe. */
.msm-strandtent-zon .stz-dagen {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-self: end;
}
.msm-strandtent-zon .stz-dagen button {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 78px;
  padding: 10px 4px;
  border: 1px solid color-mix(in srgb, var(--stz-bg) 26%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--stz-ink) 42%, transparent);
  color: var(--stz-bg);
  font: inherit;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}
.msm-strandtent-zon .stz-dagen button:hover { border-color: color-mix(in srgb, var(--stz-bg) 60%, transparent); }
.msm-strandtent-zon .stz-dagen button:active { transform: scale(0.97); }
.msm-strandtent-zon .stz-dagen button[aria-checked="true"] { background: var(--stz-bg); color: var(--stz-ink); border-color: var(--stz-bg); }
.msm-strandtent-zon .stz-dagen span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.msm-strandtent-zon .stz-dagen strong { font: 800 26px / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif); letter-spacing: -0.03em; }
.msm-strandtent-zon .stz-dagen small { font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.8; }
.msm-strandtent-zon .stz-dagen i { font-style: normal; }
.msm-strandtent-zon .stz-dagen .stz-kort { display: none; }

.msm-strandtent-zon .stz-onder { padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 9vw, 120px); }
.msm-strandtent-zon .stz-advies {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "tekst" "knop" "status";
  gap: 18px;
  justify-items: start;
  padding-bottom: clamp(28px, 4vw, 48px);
  border-bottom: 1px solid color-mix(in srgb, var(--stz-bg) 22%, transparent);
}
.msm-strandtent-zon .stz-advies-tekst {
  grid-area: tekst;
  margin: 0;
  max-width: 34ch;
  color: #fff;
  font: 800 clamp(24px, 2.8vw, 38px) / 1.04 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.035em;
}
.msm-strandtent-zon .stz-go {
  grid-area: knop;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--stz-bg);
  color: var(--stz-ink);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.msm-strandtent-zon .stz-go:hover { background: #fff; }
.msm-strandtent-zon .stz-status { grid-area: status; min-height: 1.5em; margin: 0; font-size: 14px; opacity: 0.9; }
.msm-strandtent-zon .stz-status strong { color: #fff; }

.msm-strandtent-zon .stz-drankjes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 0;
  list-style: none;
}
.msm-strandtent-zon .stz-drank figure { margin: 0; }
.msm-strandtent-zon .stz-drank img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 26px color-mix(in srgb, black 40%, transparent));
}
.msm-strandtent-zon .stz-drank figure { position: relative; }
.msm-strandtent-zon .stz-drank figure::before {
  content: "";
  position: absolute;
  inset: 8% 8% 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--stz-bg) 30%, transparent), transparent);
  filter: blur(6px);
}
.msm-strandtent-zon .stz-drank figcaption { position: relative; display: grid; gap: 6px; padding: 8px 4% 0; }
.msm-strandtent-zon .stz-drank figcaption strong { color: #fff; font: 800 clamp(22px, 2.2vw, 30px) / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif); letter-spacing: -0.03em; }
.msm-strandtent-zon .stz-drank figcaption span { max-width: 32ch; }
.msm-strandtent-zon .stz-drank figcaption b { font-size: 16px; font-variant-numeric: tabular-nums; }
.msm-strandtent-zon .stz-drank figcaption i { margin-left: 6px; font-size: 10px; font-style: normal; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }

@media (max-width: 860px) {
  .msm-strandtent-zon .stz-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .msm-strandtent-zon .stz-tijd { text-align: left; padding-top: 0; }
  .msm-strandtent-zon .stz-bron { margin-left: 0 !important; }
}
@media (max-width: 640px) {
  .msm-strandtent-zon .stz-zee { min-height: 780px; padding-top: 72px; }
  .msm-strandtent-zon .stz-dagen .stz-lang { display: none; }
  .msm-strandtent-zon .stz-dagen .stz-kort { display: inline; }
  .msm-strandtent-zon h2 { font-size: clamp(42px, 12.5vw, 60px); }
  .msm-strandtent-zon .stz-lede { font-size: 16px; }
  .msm-strandtent-zon .stz-klok { font-size: 76px; }
  .msm-strandtent-zon .stz-dagen { gap: 3px; }
  .msm-strandtent-zon .stz-dagen button { min-height: 70px; padding: 8px 0; border-radius: 10px; }
  .msm-strandtent-zon .stz-dagen span { font-size: 9px; letter-spacing: 0.06em; }
  .msm-strandtent-zon .stz-dagen strong { font-size: 19px; }
  .msm-strandtent-zon .stz-dagen small { font-size: 10px; letter-spacing: -0.02em; }
  .msm-strandtent-zon .stz-go { justify-self: stretch; justify-content: space-between; }
  .msm-strandtent-zon .stz-drankjes { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .msm-strandtent-zon .stz-drank figure { display: grid; grid-template-columns: 46% minmax(0, 1fr); gap: 12px; align-items: center; }
  .msm-strandtent-zon .stz-drank figcaption { padding: 0; }
  .msm-strandtent-zon .stz-drank figure::before { inset: 6% 58% 6% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-strandtent-zon .stz-dagen button,
  .msm-strandtent-zon .stz-go { transition: none; }
}