/* AcroVex Planning: gedeelde productnavigatie, opening en afsluiter voor alle vijf pagina's. */

/* ---------- Productnavigatie ---------- */
.productnav { border-bottom: 1px solid var(--lijn); }
.productnav__lijst {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 56px;
  margin-block: 0;
  padding-block: 0;
  list-style: none;
  column-gap: 32px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  white-space: nowrap;
}
.productnav__lijst::-webkit-scrollbar { display: none; }
.productnav__lijst li { display: flex; flex: none; }
.productnav__lijst a {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-inline: 8px;
  color: var(--steen-licht);
  font: 500 13px/18px var(--mono);
  letter-spacing: 0.08em;
  text-decoration: underline 1px transparent;
  text-underline-offset: 7px;
  text-transform: uppercase;
  transition: color 150ms var(--ease), text-decoration-color 150ms var(--ease);
}
.productnav__lijst a[aria-current="page"] { color: var(--papier); text-decoration-color: var(--papier); }
.productnav__lijst a:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .productnav__lijst a:hover:not([aria-current]) { color: var(--papier); text-decoration-color: var(--koper); }
}
@media (max-width: 767px) {
  .productnav__lijst { column-gap: 24px; scroll-snap-type: x mandatory; }
  .productnav__lijst li { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .productnav__lijst a { transition: none; }
}

/* ---------- Gedeelde raster- en tekstklassen ---------- */
.c-g { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
.c-g > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 900px) { .c-g { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.t40 { font-size: clamp(32px, 27.77px + 1.127vw, 40px); line-height: 1.2; font-weight: 500; letter-spacing: -0.02em; color: var(--papier); }
.t24 { font-size: 24px; line-height: 34px; font-weight: 400; letter-spacing: -0.01em; color: var(--steen); }
.toon-1 { color: var(--papier); }
.zacht-licht { color: var(--steen-licht); }
.onderschrift { font-size: 16px; line-height: 24px; color: var(--steen); }
.naam {
  --vak: 100vw;
  display: block;
  font-size: min(88px, calc((var(--vak) - 2 * var(--m)) / var(--k, 6)));
  line-height: 0.955;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--papier);
}
.naam--rp { --k: 10.2; }

/* ---------- Gedeelde opening ---------- */
.balk--rp {
  min-height: 240px;
  padding-block: 48px 64px;
  row-gap: 32px;
  align-items: end;
}
.balk--rp .rl-h1 {
  max-width: 16em;
  font-size: clamp(38px, 31.66px + 1.69vw, 56px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.balk--rp .balk__tekst .t24 { margin-top: 24px; max-width: 32em; }
main.planning:not(.rp-c) .balk--rp .balk__tekst .t24 { font-size: clamp(18px, 17.3px + 0.188vw, 20px); line-height: 1.45; }
.balk--rp .balk__stand { margin-top: 16px; }
.balk--rp .balk__actie { align-self: end; }
.demo-regel { margin-top: 12px; }

@media (min-width: 900px) {
  .balk--rp { min-height: 320px; padding-top: 56px; align-items: start; }
  .balk--rp > .naam { grid-column: 1 / -1; }
  .balk--rp > .rl-h1 { grid-column: 1 / -1; }
  .balk--rp .balk__tekst { grid-column: 1 / 9; }
  .balk--rp .balk__tekst .t24 { margin-top: 0; }
  .balk--rp .balk__actie { grid-column: 10 / 13; align-self: start; }
}
/* ---------- Gedeelde tekstsectie ---------- */
.planning-notities { padding-top: var(--sectie); row-gap: 24px; }
.planning-notities__tekst { display: grid; row-gap: 24px; }
.planning-notities__tekst > * { margin-top: 0; }
@media (min-width: 900px) {
  .planning-notities > .h2 { grid-column: 1 / 5; }
  .planning-notities__tekst { grid-column: 5 / 13; }
}

/* ---------- Gedeelde afsluiter ---------- */
.planning-slot { padding-block: var(--ruim); row-gap: 32px; }
.planning-slot__tekst .regel { max-width: 34em; margin-top: 16px; }
.planning-slot__tekst .acties { margin-top: 32px; }
.planning-slot__tekst > .link { margin-top: 24px; }
.planning-slot__tekst > .links { margin-top: 24px; }
.planning-slot__extra { margin-top: 24px; }
@media (min-width: 900px) {
  .planning-slot__tekst { grid-column: 1 / 9; }
}