/* ---------- Design tokens ---------- */
:root {
  --deep: #17392F;
  --deep-dark: #0E251E;
  --deep-light: #285a49;
  --accent: #D2743F;
  --accent-light: #eda171;
  --cream: #FAF7F1;
  --cream-dark: #F0EADE;
  --ink: #232323;
  --muted: #6b7280;
  --line: #e5ded0;
  --green: #3f7d5c;
  --white: #ffffff;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(23, 57, 47, 0.08);
  --shadow-lg: 0 20px 50px rgba(23, 57, 47, 0.16);
  --font-head: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--deep); text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--deep);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.muted { color: var(--muted); }
.icon { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--deep-dark); box-shadow: 0 6px 16px rgba(210, 116, 63, 0.35); }
.btn-primary:hover { background: var(--accent-light); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.55); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.btn-invert { background: var(--deep-dark); color: #fff; }
.btn-invert:hover { background: var(--deep); }
.btn-sm { padding: 0.6em 1.2em; font-size: 0.85rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-family: var(--font-head); font-size: 1.05rem; color: var(--deep); white-space: nowrap; }
.brand-text small { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; }
.brand-text.light strong { color: #fff; }

.main-nav { display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; justify-content: flex-end; }
.header-row { gap: 1rem; }
.brand { flex: 0 1 auto; min-width: 0; }
.main-nav a { font-weight: 500; font-size: 0.95rem; color: var(--deep); position: relative; padding: 0.3em 0; white-space: nowrap; }
.main-nav a.active, .main-nav a:hover { color: var(--accent); }
.main-nav a.nav-cta {
  background: var(--deep); color: #fff; padding: 0.55em 1.3em; border-radius: 999px;
}
.main-nav a.nav-cta:hover { background: var(--deep-light); color: #fff; }

/* Acht menu-items plus "Lid worden" passen niet in de 1120px van de gewone
   container: dan valt de knop naar een tweede regel. De balk mag daarom breder
   zijn dan de tekst eronder, en het menu staat wat strakker. Onder 1100px neemt
   de menuknop het over en mag alles weer ruim staan. */
@media (min-width: 1101px) {
  .site-header .container { max-width: 1200px; }
  .header-row { gap: 1rem; }
  .main-nav { gap: 0.9rem; flex-wrap: nowrap; }
  .main-nav a { font-size: 0.88rem; }
  .main-nav a.nav-cta { margin-left: 0.4rem; padding: 0.55em 1.2em; }
}

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--deep); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep-dark) 100%);
  color: #fff;
  padding: 5.5rem 0 6rem;
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.hero-pattern { position: absolute; inset: 0; opacity: 0.5; z-index: 1; pointer-events: none; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
  color: var(--accent-light); font-weight: 600; margin-bottom: 1em;
}
.hero h1 { color: #fff; }
.hero-sub { font-size: 1.15rem; color: rgba(255,255,255,0.85); max-width: 520px; }
.hero-actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }

.page-header {
  background: var(--deep);
  color: #fff;
  padding: 3.5rem 0 3rem;
}
.page-header h1 { color: #fff; }
.hero-sub-dark { color: rgba(255,255,255,0.8); max-width: 620px; font-size: 1.05rem; }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-alt { background: var(--cream-dark); }
.section-head { max-width: 640px; margin-bottom: 1rem; }
.lead { font-size: 1.1rem; color: var(--ink); max-width: 720px; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
.prose p { color: #3a3a3a; }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.8rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(23,57,47,0.06);
}
.highlight-card { background: linear-gradient(135deg, #fff, var(--cream-dark)); border: 1px solid var(--line); }
.highlight-card.wide { text-align: center; padding: 3rem; }

.facilities-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.facility-card {
  background: #fff; border-radius: var(--radius); padding: 1.8rem;
  box-shadow: var(--shadow); text-align: left;
}
.facility-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--deep);
}
.facility-icon .icon { margin: 0; width: 22px; height: 22px; }

.club-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.club-list li { display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0; border-bottom: 1px dashed var(--line); }
.club-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.link-arrow { font-weight: 600; color: var(--deep); }
.link-arrow:hover { color: var(--accent); }

.cta-band { background: var(--cream-dark); }
.cta-inner { text-align: center; max-width: 620px; margin: 0 auto; }

/* ---------- Schedule / agenda ---------- */
.schedule-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.schedule-card { position: relative; }
.badge {
  display: inline-block; background: var(--deep); color: #fff; font-size: 0.75rem;
  font-weight: 600; padding: 0.3em 0.9em; border-radius: 999px; margin-bottom: 0.8em;
}
.badge-accent { background: var(--accent); color: var(--deep-dark); }
.time-list { list-style: none; padding: 0; margin: 0.8em 0; }
.time-list li { display: flex; align-items: center; padding: 0.3em 0; color: #3a3a3a; font-size: 0.95rem; }
.card-contact { border-top: 1px solid var(--line); margin-top: 1em; padding-top: 1em; font-size: 0.9rem; }
.card-contact p { display: flex; align-items: center; margin: 0.3em 0; color: var(--muted); }

/* ---------- Tabs (cursussen) ---------- */
.tabs { display: flex; gap: 0.6rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.tab-btn {
  background: #fff; border: 1px solid var(--line); padding: 0.7em 1.6em; border-radius: 999px;
  font-weight: 600; cursor: pointer; color: var(--deep); font-size: 0.95rem;
}
.tab-btn.active { background: var(--deep); color: #fff; border-color: var(--deep); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.course-card dl { margin: 1em 0; }
.course-card dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-top: 0.7em; }
.course-card dd { margin: 0.15em 0 0; }
.price { font-weight: 700; color: var(--green); font-size: 1.05rem; }
.info-box { background: var(--cream-dark); border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem; }

/* ---------- Activiteiten ---------- */
/* Eén kaart per activiteit; de knop staat onderaan uitgelijnd, ook als de ene
   kaart meer tekst heeft dan de andere. */
.activity-card { display: flex; flex-direction: column; }
.activity-card .badge { align-self: flex-start; }
.activity-card h3 { margin: 0 0 0.5em; font-size: 1.2rem; }
.activity-card dl { flex: 1 0 auto; }
.activity-card .btn { align-self: flex-start; margin-top: 1.2rem; }

.contact-line { margin: 0; }
.resource-list { padding-left: 1.2em; }

/* ---------- Location ---------- */
.address-card h3 { display: flex; align-items: center; }
.address { font-size: 1.05rem; font-weight: 600; }
.note { font-style: italic; color: var(--muted); }
.map-wrap { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

/* ---------- Results ---------- */
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.result-card {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; color: var(--deep); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.result-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.result-card.disabled { color: var(--muted); cursor: default; }
.result-card .arrow { color: var(--accent); font-size: 1.2rem; }
.result-card .soon { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; padding: 0; }
.contact-list li { display: flex; flex-direction: column; padding: 0.8em 0; border-bottom: 1px dashed var(--line); }
.contact-list a { color: var(--deep); font-size: 0.9rem; }
.form-card h2 { margin-bottom: 1rem; }
.stacked-form { display: flex; flex-direction: column; gap: 1.1rem; }
.stacked-form label { display: flex; flex-direction: column; gap: 0.4em; font-weight: 600; font-size: 0.9rem; color: var(--deep); }
.stacked-form input, .stacked-form textarea {
  font-family: var(--font-body); font-size: 1rem; padding: 0.7em 0.9em;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--cream);
}
.stacked-form input:focus, .stacked-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.alert { padding: 1em 1.2em; border-radius: var(--radius-sm); margin-bottom: 1rem; font-weight: 500; }
.alert-success { background: #e4f3ea; color: var(--green); border: 1px solid #bfe3cd; }

/* ---------- Footer ---------- */
.site-footer { background: var(--deep-dark); color: rgba(255,255,255,0.75); padding: 3.5rem 0 1.5rem; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.8em; }
.site-footer a { color: rgba(255,255,255,0.75); }
.site-footer a:hover { color: var(--accent-light); }
.site-footer p { margin: 0.3em 0; font-size: 0.92rem; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.8rem;
}
.admin-link { opacity: 0.6; }
.admin-link:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .facilities-grid { grid-template-columns: repeat(2, 1fr); }
  .schedule-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); flex-direction: column; align-items: stretch;
    padding: 1rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line);
    display: none; gap: 0.2rem;
  }
  .main-nav.open { display: flex; }
  .main-nav { flex-wrap: nowrap; }
  .main-nav a { padding: 0.7em 0; }
  .main-nav a.nav-cta { text-align: center; margin-top: 0.5em; }
}
@media (max-width: 720px) {
  .facilities-grid { grid-template-columns: 1fr; }
  .hero { padding: 3.5rem 0 4rem; }
}

/* ================================================================
   Damclub Apeldoorn — aanvullende componenten
   ================================================================ */

/* ---------- Nieuws / puzzels ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.news-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.news-card .news-diagram {
  background: var(--cream-dark); padding: 1.4rem; display: flex; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.news-card .news-diagram img { width: 100%; max-width: min(240px, 100%); border-radius: var(--radius-sm); }
.news-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.news-body h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.01em; }
.news-meta { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.7em; }
.news-excerpt { color: #3a3a3a; font-size: 0.95rem; flex: 1; }
.news-card .link-arrow { margin-top: 0.8em; font-size: 0.9rem; }

/* Losse nieuwspagina */
.article { max-width: 760px; margin: 0 auto; }
.article .news-meta { margin-bottom: 1.5em; }
.diagram-figure {
  margin: 2rem 0; padding: 1.8rem; background: var(--cream-dark);
  border-radius: var(--radius); text-align: center; border: 1px solid var(--line);
}
.diagram-figure img { margin: 0 auto; max-width: min(340px, 100%); border-radius: var(--radius-sm); }
.diagram-figure figcaption {
  margin-top: 1rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: 0.88rem; color: var(--deep);
}
.article-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.9rem; }

/* ---------- Dambord-hero ---------- */

/* ---------- Lijsten met opsommingsstijl ---------- */
.check-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.check-list li { position: relative; padding: 0.45em 0 0.45em 1.8em; border-bottom: 1px dashed var(--line); color: #3a3a3a; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
}
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 0.4em 0; border-bottom: 1px dashed var(--line); }
.plain-list li:last-child { border-bottom: none; }

/* ---------- Bestuur / personen ---------- */
.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.person { background: #fff; border-radius: var(--radius); padding: 1.3rem 1.5rem; box-shadow: var(--shadow); }
.person .role { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.person .name { font-family: var(--font-head); font-size: 1.1rem; color: var(--deep); margin: 0.2em 0 0.1em; }
.person a { font-size: 0.88rem; color: var(--deep-light); }

/* ---------- Prijzen / contributie ---------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.price-card { background: #fff; border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow); border-top: 4px solid var(--accent); }
.price-card .amount { font-family: var(--font-head); font-size: 2rem; color: var(--deep); line-height: 1; margin: 0.3em 0 0.2em; }
.price-card .per { color: var(--muted); font-size: 0.85rem; }

/* ---------- Externe links / logo's ---------- */
.linkrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.linkrow a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8em;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.9em 1.2em; font-weight: 600; color: var(--deep); font-size: 0.95rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.linkrow a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.linkrow .arrow { color: var(--accent); }

/* ---------- Embeds (kalender, standen) ---------- */
.embed-frame {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: #fff; border: 1px solid var(--line);
}
.embed-frame iframe { display: block; width: 100%; border: 0; }
.embed-fallback { padding: 2.5rem; text-align: center; }

/* ---------- Sectie-anker navigatie ---------- */
.anchor-nav { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.8rem; }
.anchor-nav a {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28);
  color: #fff; padding: 0.5em 1.2em; border-radius: 999px; font-size: 0.88rem; font-weight: 500;
}
.anchor-nav a:hover { background: rgba(255,255,255,0.22); color: #fff; }
.section [id] { scroll-margin-top: 90px; }

/* ---------- Teamlijst ---------- */
.team-list { columns: 2; column-gap: 2rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.team-list li { padding: 0.35em 0; break-inside: avoid; }

@media (max-width: 860px) {
  .news-grid { grid-template-columns: 1fr; }
  .team-list { columns: 1; }
}

/* ---------- Jubileum: 100 jaar ---------- */
.jubilee-seal { width: 150px; height: 150px; display: block; }

/* Lintje boven de titel in de hero */
.jubilee-ribbon {
  display: inline-flex; align-items: center; gap: 0.6em;
  background: var(--accent); color: var(--deep-dark);
  padding: 0.45em 1.1em; border-radius: 999px;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: 1.2em;
}
.jubilee-ribbon .years { font-family: var(--font-head); font-size: 1.05rem; letter-spacing: 0; }

/* Klein merkteken naast de clubnaam in de menubalk */
.brand-jubilee {
  flex: none; margin-left: 0.2rem; align-self: center;
  background: var(--accent); color: var(--deep-dark);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.25em 0.6em; border-radius: 999px; white-space: nowrap;
}

/* Jubileumband op de homepagina, met het jubileumlogo als blikvanger */
.jubilee-band {
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep-dark) 100%);
  color: #fff; padding: 4rem 0; position: relative; overflow: hidden;
}
.jubilee-inner {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center;
  position: relative; z-index: 2;
}
.jubilee-visual img {
  width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 3px solid rgba(255,255,255,0.12);
}
.jubilee-visual .jubilee-seal { color: var(--accent-light); margin: 0 auto; }
.jubilee-band .eyebrow { color: var(--accent-light); margin-bottom: 0.6em; }
.jubilee-band h2 { color: #fff; margin-bottom: 0.5em; }
.jubilee-band p { color: rgba(255,255,255,0.85); }

@media (max-width: 860px) {
  .jubilee-inner { grid-template-columns: 1fr; gap: 2rem; }
  .jubilee-band { padding: 3rem 0; }
}
@media (max-width: 600px) {
  .brand-jubilee { display: none; }
}

/* ---------- Berichtinhoud (geïmporteerde blokken) ---------- */
.post-figure { margin: 2rem 0; }
.post-figure img { border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 auto; }
.post-figure figcaption { margin-top: 0.7em; font-size: 0.88rem; color: var(--muted); text-align: center; }
.post-quote {
  margin: 2rem 0; padding: 1.2rem 1.6rem; border-left: 4px solid var(--accent);
  background: var(--cream-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic; color: #3a3a3a;
}
.table-wrap { overflow-x: auto; margin: 1.8rem 0; }
.post-table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.post-table th, .post-table td { padding: 0.6em 0.9em; border-bottom: 1px solid var(--line); text-align: left; }
.post-table th { background: var(--cream-dark); font-family: var(--font-head); color: var(--deep); }
.post-audio { width: 100%; max-width: 420px; margin: 1.5rem 0; height: 40px; }
.post-embed { margin: 2rem 0; }
.article .check-list { margin: 1.2rem 0; }

/* Tekst met opmaak uit de bewerker. Quill zet uitlijning in een klasse, dus
   zonder deze regels staat gecentreerde tekst gewoon links. */
.article .ql-align-center { text-align: center; }
.article .ql-align-right { text-align: right; }
.article .ql-align-justify { text-align: justify; }
.article ul, .article ol { padding-left: 1.4em; margin: 1.2rem 0; }
.article ul li, .article ol li { margin: 0.3em 0; color: #3a3a3a; }
.article pre { background: var(--cream-dark); padding: 1rem 1.2rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: 0.9rem; }
.article img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1.5rem 0; }
.article table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.article table th, .article table td { border: 1px solid var(--line); padding: 0.5em 0.7em; text-align: left; }
.article table th { background: var(--cream-dark); font-weight: 600; }

/* ---------- Jaarfilter en paginering ---------- */
.year-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.year-filter a {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.45em 1.1em; font-size: 0.88rem; font-weight: 600; color: var(--deep);
}
.year-filter a:hover { border-color: var(--accent); }
.year-filter a.active { background: var(--deep); color: #fff; border-color: var(--deep); }
.year-filter .count { opacity: 0.55; font-weight: 400; font-size: 0.8em; }

.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; margin-top: 2.5rem; }
.pagination a {
  min-width: 40px; text-align: center; padding: 0.5em 0.9em; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 0.9rem; color: var(--deep);
}
.pagination a:hover { border-color: var(--accent); }
.pagination a.active { background: var(--accent); border-color: var(--accent); color: var(--deep-dark); }
.pagination .gap { color: var(--muted); padding: 0 0.2rem; }

/* Clublogo in de menubalk: staand wapenschild, hoogte bepaalt de maat */
.brand-mark { flex: none; display: flex; align-items: center; }
.brand-mark img { width: auto; height: 46px; }
@media (max-width: 600px) {
  .brand-mark img { height: 40px; }
}

/* ---------- Zeer smalle schermen (vanaf ~320px) ----------
   Rasteronderdelen krijgen standaard min-width:auto; een lang, ondeelbaar
   woord (zoals een e-mailadres) duwt de kolom dan breder dan het scherm.
   Daarom expliciet min-width:0, en lange adressen mogen afbreken.          */
.two-col > *, .news-grid > *, .course-grid > *, .people-grid > *,
.price-grid > *, .linkrow > *, .schedule-grid > *, .facilities-grid > *,
.results-grid > *, .footer-grid > * { min-width: 0; }

a[href^="mailto:"], a[href^="tel:"], .contact-list a, .person a,
.card-contact a, .site-footer a, .linkrow a { overflow-wrap: anywhere; }

/* ---------- Hero met beeld ---------- */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3.5rem;
  align-items: center; position: relative; z-index: 2;
}
.hero-grid > * { min-width: 0; }
.hero-grid .hero-inner { max-width: none; }

.hero-media { margin: 0; position: relative; }
.hero-media img, .hero-media video, .hero-media iframe {
  width: 100%; display: block; border-radius: var(--radius);
  background: rgba(0,0,0,0.15);
}
.hero-media video { height: auto; }

/* Stelling van de week */
.hero-media-stelling {
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius); padding: 1.2rem; backdrop-filter: blur(4px);
}
.hero-media-stelling img { max-width: 320px; margin: 0 auto 1rem; background: #fff; padding: 6px; }
.hero-media-stelling figcaption { display: flex; flex-direction: column; gap: 0.3rem; text-align: center; }
.hero-media-tag {
  align-self: center; background: var(--accent); color: var(--deep-dark);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.25em 0.8em; border-radius: 999px;
}
.hero-media-stelling strong { font-family: var(--font-head); font-size: 1.1rem; color: #fff; }
.hero-media-sub { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.hero-media-stelling .link-arrow { color: var(--accent-light); font-size: 0.9rem; }
.hero-media-stelling .link-arrow:hover { color: #fff; }

/* Diavoorstelling met foto's */
.hero-slideshow .slides { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero-slideshow .slides img {
  aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease;
}
.hero-slideshow .slides img:first-child { position: relative; }
.hero-slideshow .slides img.active { opacity: 1; }
.slide-dots { display: flex; gap: 0.4rem; justify-content: center; margin-top: 0.9rem; }
.slide-dots button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: rgba(255,255,255,0.35);
}
.slide-dots button.active { background: var(--accent); transform: scale(1.25); }
.slide-caption { color: rgba(255,255,255,0.75); font-size: 0.85rem; text-align: center; margin-top: 0.7rem; }

/* Video en ingesloten applet */
.hero-video video { box-shadow: var(--shadow-lg); }
.hero-embed iframe { border: 0; box-shadow: var(--shadow-lg); }
.hero-embed.is-wide iframe { aspect-ratio: 16 / 9; }
.hero-embed.is-square iframe { aspect-ratio: 1 / 1; }

/* Terugval: het dambordpatroon */
.hero-media-board { opacity: 0.9; }
.hero-media-board svg { max-width: 340px; margin: 0 auto; display: block; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-media { max-width: 460px; }
  .hero-media-stelling { max-width: 400px; }
}

/* Lange titels (eigen pagina's, berichten) mogen nooit het scherm openduwen. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
.page-header h1, .article h1 { hyphens: auto; }

/* ---------- Landingspagina: kom kennismaken ---------- */
/* De kop staat dicht tot de bezoeker er zelf om vraagt. Dezelfde menuknop als
   op een telefoon, maar dan op elke breedte: een advertentiebezoeker wordt zo
   niet weggeleid voordat hij heeft gelezen waarvoor hij kwam. */
.header-slank .nav-toggle { display: flex; }
.header-slank .main-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--cream); flex-direction: column; align-items: stretch;
  padding: 1rem 1.5rem 1.5rem; border-bottom: 1px solid var(--line);
  display: none; gap: 0.2rem; flex-wrap: nowrap;
}
.header-slank .main-nav.open { display: flex; }
.header-slank .main-nav a { padding: 0.7em 0; font-size: 0.95rem; }
.header-slank .main-nav a.nav-cta { text-align: center; margin-top: 0.5em; }
.header-slank .slank-cta { display: inline-flex; margin-left: auto; margin-right: 0.6rem; white-space: nowrap; }
.header-slank .header-row { gap: 0.6rem; }
@media (max-width: 560px) {
  .header-slank .slank-cta { display: none; }
}

.kennis-hero {
  background: linear-gradient(135deg, var(--deep) 0%, var(--deep-dark) 100%);
  color: #fff; padding: 4.5rem 0 5rem;
}
.kennis-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.kennis-hero h1 { color: #fff; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.08; margin: 0 0 1.4rem; }
.kennis-hero h1 em { font-style: normal; color: var(--accent-light); }
.kennis-eyebrow {
  display: inline-block; background: var(--accent); color: var(--deep-dark);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  padding: 0.45em 1em; border-radius: 999px; margin: 0 0 1.4rem;
}
.kennis-lead { font-size: 1.2rem; line-height: 1.6; max-width: 30rem; color: #fff; }
.kennis-intro { color: rgba(255,255,255,0.82); max-width: 30rem; }
.kennis-cta { margin-top: 0.6rem; gap: 1.4rem; }
.kennis-cta span { margin-left: 0.9rem; }
.kennis-noot { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin: 0.9rem 0 0; }

.kennis-bord-kader {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px; padding: 1.5rem;
}
.kennis-bord-top {
  display: flex; justify-content: space-between; font-size: 0.68rem;
  letter-spacing: 0.14em; color: var(--accent-light); margin-bottom: 1.1rem;
}
.kennis-bord {
  display: grid; grid-template-columns: repeat(10, 1fr); aspect-ratio: 1;
  border: 8px solid #fff; border-radius: 8px; position: relative; overflow: hidden;
}
.kennis-vak { aspect-ratio: 1; background: #e2ceb0; }
.kennis-vak.donker { background: #986632; }
.kennis-schijf {
  position: absolute; width: 8%; height: 8%; border-radius: 50%;
  background: #fdfaf0; border: 3px double #d3cebb;
  box-shadow: 0 3px 0 #929182, 0 5px 5px rgba(0,0,0,0.27);
  transition: top 0.7s ease, left 0.7s ease, opacity 0.3s;
}
.kennis-schijf.zwart { background: #18312c; border-color: #476059; box-shadow: 0 3px 0 #0b211a, 0 5px 5px rgba(0,0,0,0.27); }
/* Een dam is twee schijven op elkaar; het ringetje maakt dat zichtbaar zonder
   dat er een plaatje bij hoeft. */
.kennis-schijf.dam::after {
  content: ''; position: absolute; inset: 22%; border-radius: 50%;
  border: 2px solid rgba(23,57,47,0.55);
}
.kennis-schijf.zwart.dam::after { border-color: rgba(255,255,255,0.55); }
/* De ruimte onder het bord ligt vast. De statusregel wordt tijdens de zetten
   langer en korter, en zonder gereserveerde hoogte groeit de kaart mee en
   herschikt de tekst ernaast: dat maakt het onrustig terwijl je juist naar de
   schijven kijkt. */
.kennis-bord-onder { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-top: 1.2rem; }
.kennis-bord-onder > div { flex: 1; min-width: 0; }
.kennis-bord-onder strong { font-size: 1rem; display: block; min-height: 2.6em; }
/* De javascript meet de langste tekst en zet de echte hoogte; deze waarde is
   het vangnet voor het geval dat niet draait. */
.kennis-bord-onder p { font-size: 0.88rem; color: rgba(255,255,255,0.78); margin: 0.2rem 0 0; min-height: 4.4em; }
.kennis-bord-onder button {
  background: transparent; color: #fff; border: 1px solid #8caaa0; border-radius: 999px;
  padding: 0.7em 1.2em; font: 600 0.88rem var(--font-body); cursor: pointer; white-space: nowrap;
  /* Breed genoeg voor de langste knoptekst, anders springt hij bij elke stap. */
  min-width: 12.5rem; text-align: center; flex: none;
}
.kennis-bord-onder button:hover { background: rgba(255,255,255,0.1); }
.kennis-bord-onder button:disabled { opacity: 0.5; cursor: default; }

.kennis-band { background: var(--cream-dark); padding: 1.5rem 0; }
.kennis-band-inner { display: flex; justify-content: space-around; gap: 1.5rem; flex-wrap: wrap; font-weight: 500; }
.kennis-band-inner span::before { content: '\2713'; margin-right: 0.7em; color: var(--accent); font-weight: 700; }

.kennis-samen h2 em { font-style: normal; color: var(--accent); }
.kennis-stap-kop { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.5rem; }
.kennis-stap-kop h2 { margin: 0; }
.kennis-stap-kop p { max-width: 22rem; margin: 0; }
.kennis-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.kennis-stappen article { border-top: 1px solid var(--line); padding-top: 1.4rem; }
.kennis-stappen h3 { margin: 0.8rem 0 0.6rem; font-size: 1.25rem; }
.kennis-stappen p { margin: 0; color: #3a3a3a; }
.kennis-nummer { font: 400 1.6rem var(--font-head); color: var(--accent); }

.kennis-slot { background: var(--deep); color: #fff; padding: 4.5rem 0; }
.kennis-slot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4rem; }
.kennis-slot h2 { color: #fff; margin: 0 0 1rem; }
.kennis-slot h2 em { font-style: normal; color: var(--accent-light); }
.kennis-slot p { color: rgba(255,255,255,0.85); }
.kennis-cta-licht { background: var(--accent); color: var(--deep-dark); }
.kennis-cta-licht:hover { background: var(--accent-light); color: var(--deep-dark); }
.kennis-slot aside { border-left: 1px solid rgba(255,255,255,0.2); padding-left: 2.5rem; align-self: center; }
.kennis-slot aside h3 { color: #fff; }
.kennis-slot aside a { color: var(--accent-light); overflow-wrap: anywhere; }
.kennis-praktisch { margin-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.2); padding-top: 1.4rem; font-size: 0.92rem; }
.kennis-praktisch span { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent-light); display: block; margin-bottom: 0.8rem; }

@media (max-width: 860px) {
  .kennis-hero-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .kennis-bord-kader { max-width: 30rem; width: 100%; }
  .kennis-band-inner { flex-direction: column; gap: 0.6rem; }
  .kennis-stap-kop { display: block; }
  .kennis-stap-kop p { margin-top: 1rem; }
  .kennis-stappen { grid-template-columns: 1fr; gap: 1.6rem; }
  .kennis-slot-grid { grid-template-columns: 1fr; gap: 2rem; }
  .kennis-slot aside { border-left: 0; border-top: 1px solid rgba(255,255,255,0.2); padding: 1.6rem 0 0; }
}
/* Naast een smalle kaart houdt de knop maar honderd pixels over voor de tekst,
   en dan wordt de statusregel een kolom van acht regels. Onder deze breedte
   gaat de knop er dus onder. */
@media (max-width: 1100px) {
  .kennis-bord-onder { flex-direction: column; align-items: stretch; }
  .kennis-bord-onder button { min-width: 0; width: 100%; }
  .kennis-bord-onder strong { min-height: 0; }
}