/* zwemschool-kennis: block-port van ReactBitsPro Blocks/blog-10 (archief met onderwerpenrail). Tailwind-klassen
   vertaald naar gescopete CSS; kleuren alleen via --m-*-tokens. */
.msm-zwemschool-kennis{--zk-p:var(--m-primary,#ef6e4a);--zk-bg:var(--m-bg,#dfeff0);--zk-ink:var(--m-ink,#123b45);--zk-s:var(--m-surface,#f8ffff);--zk-mu:var(--m-muted,#53747b);--zk-a:var(--m-accent2,#2f7f8c);--zk-l:var(--m-line,#c2dcdf);--zk-ease:cubic-bezier(.22,1,.36,1);position:relative;scroll-margin-top:112px;padding:clamp(64px,8vw,96px) 16px;background:var(--zk-s);color:var(--zk-ink);font-family:var(--m-font-body,"Noto Sans","Segoe UI",system-ui,sans-serif);font-size:16px;line-height:1.55}
.msm-zwemschool-kennis *{box-sizing:border-box}
.msm-zwemschool-kennis .zk-wrap{width:min(1400px,100%);margin:0 auto}

/* Raster: één kolom met gap 40 px, vanaf lg 240 px en de rest met gap 64 px; de zijkolom plakt (top 32 px) */
.msm-zwemschool-kennis .zk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
.msm-zwemschool-kennis .zk-aside{min-width:0}
.msm-zwemschool-kennis .zk-kicker{margin:0 0 8px;color:var(--zk-mu);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.msm-zwemschool-kennis .zk-title{margin:0;font:700 clamp(30px,3vw,36px)/1.15 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:-.02em;color:var(--zk-ink);text-wrap:balance}
.msm-zwemschool-kennis .zk-intro{margin:12px 0 0;color:var(--zk-mu);font-size:14px;line-height:1.6;text-wrap:pretty}

/* De bal: host voor de gedeelde orbital-type-instantie; zonder canvas een stilstaande schijf met het woord */
.msm-zwemschool-kennis .zk-orb{position:relative;display:grid;place-items:center;width:140px;height:140px;margin-bottom:20px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--zk-a) 70%,var(--zk-s)),var(--zk-a) 55%,var(--zk-ink) 100%);isolation:isolate}
.msm-zwemschool-kennis .zk-orb-word{position:relative;z-index:1;color:var(--zk-s);font:700 17px/1 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.msm-zwemschool-kennis .zk-orb.is-live .zk-orb-word{display:none}
.msm-zwemschool-kennis .zk-orb.is-live{background:color-mix(in srgb,var(--zk-a) 92%,var(--zk-ink))}
.msm-zwemschool-kennis .zk-orb .orbital-type{position:absolute;inset:0;isolation:isolate;width:100%;height:100%;min-height:0;overflow:hidden}
.msm-zwemschool-kennis .zk-orb .orbital-type__content{position:relative;z-index:10;width:100%;height:100%}

/* Onderwerpenrail: horizontaal scrollend op mobiel, onder elkaar vanaf lg; selectie via tekstgewicht en achtergrond */
.msm-zwemschool-kennis .zk-topics{display:flex;gap:6px;margin-top:32px;padding-bottom:4px;overflow-x:auto;scrollbar-width:thin}
.msm-zwemschool-kennis .zk-topic{flex:0 0 auto;display:flex;align-items:center;min-height:40px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:var(--zk-mu);font:inherit;font-size:14px;line-height:1.2;text-align:left;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.msm-zwemschool-kennis .zk-topic:hover{background:color-mix(in srgb,var(--zk-bg) 60%,var(--zk-s));color:var(--zk-ink)}
.msm-zwemschool-kennis .zk-topic[aria-selected="true"]{background:var(--zk-bg);color:var(--zk-ink);font-weight:700}
.msm-zwemschool-kennis .zk-topic:focus-visible{outline:2px solid var(--zk-ink);outline-offset:2px}
.msm-zwemschool-kennis .zk-status{margin:12px 0 0;color:var(--zk-mu);font-size:13px}

/* De stapel: omrand, rounded-3xl, rijen gescheiden door lijnen; elke rij is één link met tekst links en beeld rechts */
.msm-zwemschool-kennis .zk-main{min-width:0}
.msm-zwemschool-kennis .zk-stack{overflow:hidden;border:1px solid var(--zk-l);border-radius:24px}
.msm-zwemschool-kennis .zk-row{display:grid;grid-template-columns:minmax(0,1fr);background:var(--zk-s);color:inherit;text-decoration:none;transition:background-color .2s}
.msm-zwemschool-kennis .zk-row[hidden]{display:none}
.msm-zwemschool-kennis .zk-row+.zk-row{border-top:1px solid var(--zk-l)}
.msm-zwemschool-kennis .zk-row:hover{background:color-mix(in srgb,var(--zk-bg) 45%,var(--zk-s))}
.msm-zwemschool-kennis .zk-row:focus-visible{outline:2px solid var(--zk-ink);outline-offset:-2px}
.msm-zwemschool-kennis .zk-media{position:relative;height:224px;overflow:hidden;background:color-mix(in srgb,var(--zk-bg) 60%,var(--zk-s))}
.msm-zwemschool-kennis .zk-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s var(--zk-ease)}
.msm-zwemschool-kennis .zk-row:hover .zk-media img{transform:scale(1.04)}
.msm-zwemschool-kennis .zk-body{display:flex;flex-direction:column;padding:24px}
.msm-zwemschool-kennis .zk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;color:var(--zk-mu);font-size:12px}
.msm-zwemschool-kennis .zk-cat{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--zk-bg) 80%,var(--zk-s));color:var(--zk-ink);font-weight:600}
.msm-zwemschool-kennis .zk-row-title{margin:32px 0 0;max-width:672px;font:700 clamp(24px,2.4vw,30px)/1.2 var(--m-font-display,"Baloo 2","Trebuchet MS",sans-serif);letter-spacing:-.02em;color:var(--zk-ink);text-wrap:balance;transition:color .2s}
.msm-zwemschool-kennis .zk-row:hover .zk-row-title{color:var(--zk-a)}
.msm-zwemschool-kennis .zk-excerpt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:12px 0 0;max-width:576px;color:var(--zk-mu);font-size:clamp(14px,1.1vw,16px);line-height:1.6}
.msm-zwemschool-kennis .zk-more{display:inline-flex;align-items:center;gap:8px;margin-top:32px;color:var(--zk-ink);font-size:14px;font-weight:700}
.msm-zwemschool-kennis .zk-nudge{display:inline-flex;transition:transform .2s var(--zk-ease)}
.msm-zwemschool-kennis .zk-nudge svg{width:16px;height:16px}
.msm-zwemschool-kennis .zk-row:hover .zk-nudge{transform:translate(2px,-2px)}
.msm-zwemschool-kennis .zk-note{margin:24px 0 0;color:var(--zk-mu);font-size:13px}
.msm-zwemschool-kennis .zk-all{color:var(--zk-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.msm-zwemschool-kennis .zk-all:hover{color:var(--zk-a)}
.msm-zwemschool-kennis .zk-all:focus-visible{outline:2px solid var(--zk-ink);outline-offset:2px;border-radius:4px}

@media (min-width:640px){
  .msm-zwemschool-kennis{padding-left:24px;padding-right:24px}
  .msm-zwemschool-kennis .zk-media{height:256px}
  .msm-zwemschool-kennis .zk-body{padding:32px}
}
@media (min-width:768px){
  .msm-zwemschool-kennis .zk-row{grid-template-columns:minmax(0,1fr) 38%}
  .msm-zwemschool-kennis .zk-media{order:2;height:auto;min-height:300px}
  .msm-zwemschool-kennis .zk-body{order:1}
  .msm-zwemschool-kennis .zk-row-title{margin-top:56px}
}
@media (min-width:1024px){
  .msm-zwemschool-kennis{padding-left:32px;padding-right:32px}
  .msm-zwemschool-kennis .zk-grid{grid-template-columns:240px minmax(0,1fr);gap:64px}
  .msm-zwemschool-kennis .zk-aside{position:sticky;top:32px;align-self:start}
  .msm-zwemschool-kennis .zk-topics{flex-direction:column;gap:4px;padding-bottom:0;overflow:visible}
  .msm-zwemschool-kennis .zk-topic{border-radius:8px;padding:8px 10px}
  .msm-zwemschool-kennis .zk-body{padding:40px}
}
@media (max-width:767px){
  .msm-zwemschool-kennis .zk-orb{width:96px;height:96px;margin-bottom:16px}
  .msm-zwemschool-kennis .zk-orb-word{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .msm-zwemschool-kennis .zk-topic,.msm-zwemschool-kennis .zk-row,.msm-zwemschool-kennis .zk-media img,.msm-zwemschool-kennis .zk-row-title,.msm-zwemschool-kennis .zk-nudge,.msm-zwemschool-kennis .zk-orb-word{transition:none}
  .msm-zwemschool-kennis .zk-row:hover .zk-media img{transform:none}
  .msm-zwemschool-kennis .zk-row:hover .zk-nudge{transform:none}
}