/* strandtent-kaart 1.0.0 · ReactBits RotatingText (reactbits.dev/text-animations/rotating-text) in vanilla CSS/JS.
   Behouden: het woord in de kop wisselt per letter met een 3D-flip (rotateX, perspectief 480,
   draaipunt achter de letter), gestaffeld vanuit het midden, eerst weg en dan binnen, in een
   highlightblok dat in breedte meeveert. Hier is dat woord het dagdeel en wisselen de gerechten mee.
   Kleuren alleen via --m-*-tokens; het font (Coast) levert de site. */
.msm-strandtent-kaart {
  --stk-primary: var(--m-primary, #1f6c78);
  --stk-bg: var(--m-bg, #efe3c7);
  --stk-ink: var(--m-ink, #183035);
  --stk-paper: color-mix(in srgb, var(--stk-bg) 36%, white);
  display: block;
  position: relative;
  scroll-margin-top: 110px;
  padding: clamp(64px, 9vw, 128px) 0;
  background: var(--stk-paper);
  color: var(--stk-ink);
  font-family: var(--m-font-body, Coast, Arial, sans-serif);
  font-size: 16px;
  line-height: 1.5;
}
.msm-strandtent-kaart *,
.msm-strandtent-kaart *::before,
.msm-strandtent-kaart *::after { box-sizing: border-box; }
.msm-strandtent-kaart [hidden] { display: none !important; }
.msm-strandtent-kaart :focus-visible { outline: 3px solid var(--stk-primary); outline-offset: 3px; }
.msm-strandtent-kaart .stk-inner { width: min(1240px, 100% - 32px); margin: 0 auto; }

.msm-strandtent-kaart .stk-kop {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  grid-template-areas: "eyebrow eyebrow" "titel lede";
  column-gap: clamp(24px, 5vw, 80px);
  align-items: end;
}
.msm-strandtent-kaart .stk-eyebrow { grid-area: eyebrow; margin: 0 0 16px; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.msm-strandtent-kaart h2 {
  grid-area: titel;
  margin: 0;
  font: 800 clamp(46px, 7.4vw, 108px) / 0.92 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.055em;
}
.msm-strandtent-kaart .stk-vast { display: inline; }
/* Highlightblok uit de bron: het vlak veert in breedte mee met het woord. */
.msm-strandtent-kaart .stk-rot {
  position: relative;
  display: inline-flex;
  justify-content: center;
  overflow: hidden;
  padding: 0.04em 0.2em 0.12em;
  border-radius: 0.14em;
  background: var(--stk-primary);
  color: #fff;
  vertical-align: bottom;
  white-space: nowrap;
}
.msm-strandtent-kaart .stk-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.msm-strandtent-kaart .stk-woord { display: inline-flex; white-space: pre; }
.msm-strandtent-kaart .stk-uit { position: absolute; top: 0.04em; left: 0.2em; pointer-events: none; }
.msm-strandtent-kaart .stk-char {
  display: inline-block;
  transform-origin: 50% 50% -0.45em;
  backface-visibility: hidden;
  will-change: transform;
}
.msm-strandtent-kaart .stk-lede { grid-area: lede; max-width: 36ch; margin: 0 0 8px; font-size: 17px; }

/* Dagdelen als tabs: een eiland zoals de header. */
.msm-strandtent-kaart .stk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: clamp(32px, 4vw, 52px) 0 clamp(24px, 3vw, 40px);
}
.msm-strandtent-kaart .stk-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  width: min(760px, 100%);
  padding: 5px;
  border: 1px solid #fff9;
  border-radius: 18px;
  background: color-mix(in srgb, var(--stk-bg) 80%, white);
  box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--stk-ink) 40%, transparent);
}
.msm-strandtent-kaart .stk-tab {
  display: grid;
  gap: 2px;
  min-height: 60px;
  padding: 10px 14px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--stk-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.msm-strandtent-kaart .stk-tab strong { font: 800 18px / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif); letter-spacing: -0.02em; }
.msm-strandtent-kaart .stk-tab span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
@media (hover: hover) {
  .msm-strandtent-kaart .stk-tab[aria-selected="false"]:hover { background: color-mix(in srgb, white 70%, transparent); }
}
.msm-strandtent-kaart .stk-tab[aria-selected="true"] { background: var(--stk-ink); color: var(--stk-bg); }
.msm-strandtent-kaart .stk-pauze {
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid currentColor;
  background: none;
  color: var(--stk-ink);
  font: 700 12px / 1 var(--m-font-body, Coast, Arial, sans-serif);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.75;
}
.msm-strandtent-kaart .stk-pauze:hover { opacity: 1; }

/* Twee gerechten per dagdeel, groot en vrijstaand op een zandkleurig blad. */
.msm-strandtent-kaart .stk-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}
.msm-strandtent-kaart .stk-panel + .stk-panel { margin-top: 72px; }
.msm-strandtent-kaart[data-ready] .stk-panel + .stk-panel { margin-top: 0; }
.msm-strandtent-kaart .stk-panel-kop {
  grid-column: 1 / -1;
  margin: 0;
  font: 800 clamp(30px, 4vw, 48px) / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.04em;
}
.msm-strandtent-kaart[data-ready] .stk-panel-kop {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.msm-strandtent-kaart .stk-gerecht { margin: 0; min-width: 0; }
.msm-strandtent-kaart .stk-gerecht:nth-of-type(2) { margin-top: clamp(0px, 7vw, 96px); }
.msm-strandtent-kaart .stk-beeld {
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.msm-strandtent-kaart .stk-beeld::before {
  content: "";
  position: absolute;
  inset: 34% 4% 6%;
  z-index: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--stk-bg) 70%, white), var(--stk-bg));
  box-shadow: inset 0 1px 0 #fff9;
}
.msm-strandtent-kaart .stk-beeld img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 24px color-mix(in srgb, var(--stk-ink) 22%, transparent));
}
.msm-strandtent-kaart .stk-tekst { max-width: 46ch; padding: 22px 4% 0; }
.msm-strandtent-kaart h4 {
  margin: 0 0 10px;
  font: 800 clamp(26px, 2.6vw, 36px) / 0.98 var(--m-font-display, Coast, "Trebuchet MS", sans-serif);
  letter-spacing: -0.04em;
}
.msm-strandtent-kaart .stk-tekst p { margin: 0 0 14px; }
.msm-strandtent-kaart .stk-prijs { display: flex; align-items: baseline; gap: 10px; }
.msm-strandtent-kaart .stk-prijs b { font: 800 22px / 1 var(--m-font-display, Coast, "Trebuchet MS", sans-serif); color: var(--stk-primary); }
.msm-strandtent-kaart .stk-prijs span { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.65; }

@media (max-width: 860px) {
  .msm-strandtent-kaart .stk-kop { grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "titel" "lede"; }
  .msm-strandtent-kaart .stk-lede { margin-top: 18px; }
}
@media (max-width: 640px) {
  .msm-strandtent-kaart h2 { font-size: clamp(42px, 12.5vw, 60px); }
  .msm-strandtent-kaart .stk-tabs { gap: 2px; padding: 4px; border-radius: 16px; }
  .msm-strandtent-kaart .stk-tab { min-height: 54px; padding: 8px 6px; text-align: center; }
  .msm-strandtent-kaart .stk-tab strong { font-size: 15px; }
  .msm-strandtent-kaart .stk-tab span { font-size: 9px; letter-spacing: 0.02em; }
  .msm-strandtent-kaart .stk-panel { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .msm-strandtent-kaart .stk-gerecht:nth-of-type(2) { margin-top: 0; }
  .msm-strandtent-kaart .stk-tekst { padding: 14px 4px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-strandtent-kaart .stk-tab { transition: none; }
}