/* tennis-golfclub-banen: Baan, glas en green. Block-port van ReactBitsPro Blocks/showcase-2 (Tailwind vertaald,
   gescoped onder de root). De gedeelde glyph-orb (React Bits Pro, origineel gecompileerd) staat naast de h2. */
.msm-tennis-golfclub-banen {
  position: relative;
  overflow-x: clip;
  padding: 48px 16px;
  background: var(--m-surface, #f3f6f1);
  color: var(--m-ink, #173228);
  font-family: var(--m-font-body, "Public Sans", system-ui, sans-serif);
  scroll-margin-top: 112px;
}
.msm-tennis-golfclub-banen *,
.msm-tennis-golfclub-banen *::before,
.msm-tennis-golfclub-banen *::after { box-sizing: border-box; }
.msm-tennis-golfclub-banen .tgb-inner { max-width: 1400px; margin: 0 auto; width: 100%; }

/* Kop: max-w-xl, kleine regel (text-sm/base, mb-4), h2 (3xl/4xl/5xl, medium, tracking-tight, leading 1.15) */
.msm-tennis-golfclub-banen .tgb-head { max-width: 36rem; }
.msm-tennis-golfclub-banen .tgb-kicker {
  margin: 0 0 16px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--m-muted, #5a6b61);
}
.msm-tennis-golfclub-banen .tgb-titlerow { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; }
.msm-tennis-golfclub-banen .tgb-title {
  margin: 0;
  font-family: var(--m-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-weight: 500;
  font-size: 2.125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--m-ink, #173228);
  text-wrap: balance;
}
/* Ronde knop: px-8 py-3.5, rounded-full, schaal 1,05 bij hover en 0,95 bij tik (spring via module.js) */
.msm-tennis-golfclub-banen .tgb-button {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--m-ink, #173228);
  color: var(--m-surface, #f3f6f1);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.2s;
}
.msm-tennis-golfclub-banen .tgb-button:hover { background: color-mix(in srgb, var(--m-ink, #173228) 86%, var(--m-surface, #f3f6f1)); }
.msm-tennis-golfclub-banen .tgb-button:focus-visible,
.msm-tennis-golfclub-banen .tgb-card:focus-visible {
  outline: 2px solid var(--m-primary, #d76635);
  outline-offset: 3px;
}

/* Plaats van de gedeelde glyph-orb: 72 px, vanaf 768 px 96 px; zonder actieve bol een stilstaande SVG-bal */
.msm-tennis-golfclub-banen .tg-orb-slot {
  position: relative;
  flex: none;
  display: block;
  width: 72px;
  height: 72px;
  color: color-mix(in srgb, var(--m-muted, #5a6b61) 70%, transparent);
}
.msm-tennis-golfclub-banen .tg-orb-slot svg { display: block; width: 100%; height: 100%; }
/* Bron-CSS van glyph-orb (glyph-orb.css), gescoped */
.msm-tennis-golfclub-banen .glyph-orb { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 240px; overflow: hidden; }
.msm-tennis-golfclub-banen .glyph-orb__content { position: relative; z-index: 10; width: 100%; height: 100%; }

/* Groepen Tennis en Golf */
.msm-tennis-golfclub-banen .tgb-group { margin-top: 40px; scroll-margin-top: 112px; }
.msm-tennis-golfclub-banen .tgb-grouptitle {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-family: var(--m-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.msm-tennis-golfclub-banen .tgb-grouptitle span {
  font-family: var(--m-font-body, "Public Sans", system-ui, sans-serif);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--m-muted, #5a6b61);
}

/* Strook: -mx-4/6/8, overflow-hidden, py-20; kaarten flex items-end gap-6 */
.msm-tennis-golfclub-banen .tgb-viewport {
  position: relative;
  margin: 0 -16px;
  padding: 24px 16px 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.msm-tennis-golfclub-banen .tgb-track {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;
}
.msm-tennis-golfclub-banen .tgb-card {
  position: relative;
  flex: none;
  width: 280px;
  border-radius: 16px;
  user-select: none;
  -webkit-user-select: none;
}
.msm-tennis-golfclub-banen .tgb-figure { margin: 0; }
/* Wisselende hoogtes uit de bron: 400, 450, 420 en 380 px */
.msm-tennis-golfclub-banen .tgb-frame {
  height: 400px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tgb-tint, var(--m-surface, #f3f6f1));
}
.msm-tennis-golfclub-banen .tgb-card:nth-child(4n + 2) .tgb-frame { height: 450px; }
.msm-tennis-golfclub-banen .tgb-card:nth-child(4n + 3) .tgb-frame { height: 420px; }
.msm-tennis-golfclub-banen .tgb-card:nth-child(4n + 4) .tgb-frame { height: 380px; }
.msm-tennis-golfclub-banen .tgb-tint--surface { --tgb-tint: var(--m-surface, #f3f6f1); }
.msm-tennis-golfclub-banen .tgb-tint--line { --tgb-tint: var(--m-line, #c4d0c2); }
.msm-tennis-golfclub-banen .tgb-tint--bg { --tgb-tint: var(--m-bg, #dfe7dc); }
.msm-tennis-golfclub-banen .tgb-tint--grass { --tgb-tint: color-mix(in srgb, var(--m-accent2, #3f6e4b) 20%, var(--m-surface, #f3f6f1)); }
.msm-tennis-golfclub-banen .tgb-frame img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}
.msm-tennis-golfclub-banen .tgb-card--scene .tgb-frame img { object-fit: cover; object-position: top; }
.msm-tennis-golfclub-banen .tgb-card--model .tgb-frame img { object-fit: contain; padding: 18px; }
.msm-tennis-golfclub-banen .tgb-name {
  margin-top: 12px;
  font-family: var(--m-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
}

/* Drie regels per kaart (zonder JavaScript en bij reduced motion) */
.msm-tennis-golfclub-banen .tgb-facts,
.msm-tennis-golfclub-banen .tgb-info-facts { margin: 8px 0 0; display: grid; gap: 6px; }
.msm-tennis-golfclub-banen .tgb-facts div,
.msm-tennis-golfclub-banen .tgb-info-facts div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.msm-tennis-golfclub-banen dt {
  font-size: 0.75rem;
  line-height: 1.35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m-muted, #5a6b61);
}
.msm-tennis-golfclub-banen dd { margin: 0; font-size: 0.875rem; line-height: 1.35rem; }

/* Vast vak onder de strook (aria-live): de kaart die je aanwijst of met Tab focust */
.msm-tennis-golfclub-banen .tgb-info {
  max-width: 44rem;
  min-height: 9.5rem;
  padding: 16px 20px;
  border: 1px solid var(--m-line, #c4d0c2);
  border-radius: 12px;
  background: var(--m-bg, #dfe7dc);
}
.msm-tennis-golfclub-banen .tgb-info[hidden] { display: none; }
.msm-tennis-golfclub-banen .tgb-info-name {
  margin: 0;
  font-family: var(--m-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
  font-weight: 600;
  font-size: 1.25rem;
}

/* Live (JavaScript, geen reduced motion): eindeloze strook die drijft en te slepen is */
.msm-tennis-golfclub-banen.is-live .tgb-viewport {
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 56px;
  margin-top: -40px;
  cursor: grab;
  touch-action: pan-y;
}
.msm-tennis-golfclub-banen.is-live .tgb-viewport.is-dragging { cursor: grabbing; }
.msm-tennis-golfclub-banen.is-live .tgb-track { will-change: transform; }
.msm-tennis-golfclub-banen.is-live .tgb-facts { display: none; }
.msm-tennis-golfclub-banen.is-live .tgb-card { transform-style: preserve-3d; }

@media (min-width: 640px) {
  .msm-tennis-golfclub-banen { padding: 48px 24px; }
  .msm-tennis-golfclub-banen .tgb-kicker { font-size: 1rem; line-height: 1.5rem; }
  .msm-tennis-golfclub-banen .tgb-title { font-size: 2.625rem; }
  .msm-tennis-golfclub-banen .tgb-titlerow { margin-bottom: 40px; }
  .msm-tennis-golfclub-banen .tgb-button { font-size: 1rem; }
  .msm-tennis-golfclub-banen .tgb-viewport { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
  .msm-tennis-golfclub-banen .tgb-card { width: 320px; }
}
@media (min-width: 768px) {
  .msm-tennis-golfclub-banen .tgb-title { font-size: 3.5rem; }
  .msm-tennis-golfclub-banen .tg-orb-slot { width: 96px; height: 96px; }
}
@media (min-width: 1024px) {
  .msm-tennis-golfclub-banen { padding: 64px 32px; }
  .msm-tennis-golfclub-banen .tgb-viewport { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-tennis-golfclub-banen .tgb-button { transition: none; }
}