/* aannemer-route 1.0.0 · ReactBits PillNav (reactbits.dev/components/pill-nav) plus CountUp
   (reactbits.dev/text-animations/count-up) in vanilla CSS/JS.
   Behouden: per keuze een cirkelvulling die vanuit de onderrand omhoog rijst (diameter uit de diagonaal van de pil)
   terwijl het label omrolt, de actieve keuze die de vulling vasthoudt, en een selectie die met twee veren
   (voorrand en achterrand) naar de gekozen keuze schuift. De hoekvorm volgt de rechte lijnen van de Bouwkader-schil. */
.msm-aannemer-route {
  --adr-a: var(--m-primary, #d85a2a);
  --adr-i: var(--m-ink, #1d211e);
  --adr-b: var(--m-bg, #eee9df);
  --adr-caps: "Arial Narrow", Arial, sans-serif;
  --adr-paper: color-mix(in srgb, var(--adr-b) 46%, #fff);
  --adr-grid: color-mix(in srgb, var(--adr-i) 7%, transparent);
  --adr-hair: color-mix(in srgb, var(--adr-i) 20%, transparent);
  --adr-muted: color-mix(in srgb, var(--adr-i) 64%, transparent);
  --adr-pill-h: 54px;
  display: block;
  position: relative;
  overflow-x: clip;
  scroll-margin-top: 110px;
  padding: clamp(64px, 9vw, 120px) 0 clamp(64px, 9vw, 128px);
  background:
    linear-gradient(var(--adr-grid) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, var(--adr-grid) 1px, transparent 1px) 0 0 / 32px 100%,
    var(--adr-paper);
  color: var(--adr-i);
  font: 400 16px/1.55 var(--m-font-body, Arial, sans-serif);
}
.msm-aannemer-route *,
.msm-aannemer-route *::before,
.msm-aannemer-route *::after { box-sizing: border-box; }
.msm-aannemer-route [hidden] { display: none !important; }
.msm-aannemer-route :focus-visible { outline: 3px solid var(--adr-a); outline-offset: 3px; }
.msm-aannemer-route .adr-inner { max-width: 1280px; margin: 0 auto; padding: 0 4vw; }

.msm-aannemer-route .adr-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: 4vw;
  align-items: end;
}
.msm-aannemer-route .adr-eyebrow {
  align-self: start;
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.msm-aannemer-route .adr-eyebrow span + span { color: var(--adr-i); }
.msm-aannemer-route h2 {
  margin: 0;
  font: 400 clamp(40px, 5.4vw, 76px) / 0.98 var(--m-font-display, Georgia, serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.msm-aannemer-route .adr-lede { margin: 0; max-width: 34ch; font-size: 15px; }

/* Keuzebalk en teller */
.msm-aannemer-route .adr-kies {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
  margin: clamp(32px, 4vw, 52px) 0 clamp(26px, 3vw, 36px);
  padding-bottom: 22px;
  border-bottom: 4px solid var(--adr-i);
}
.msm-aannemer-route .adr-pills {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 22px 8px;
  padding-bottom: 18px;
}
.msm-aannemer-route .adr-pill {
  --adr-roll: calc(var(--adr-pill-h) / 2 + 0.7em);
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--adr-pill-h);
  padding: 0 22px;
  overflow: hidden;
  border: 1px solid var(--adr-i);
  border-radius: 0;
  background: var(--adr-paper);
  color: var(--adr-i);
  font: 700 13px / 1 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.msm-aannemer-route .adr-pill:focus-visible { outline-offset: 4px; }
.msm-aannemer-route .adr-face { display: inline-block; transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.msm-aannemer-route .adr-face-alt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transform: translateY(var(--adr-roll));
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.msm-aannemer-route .adr-fill {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: -1;
  width: var(--adr-fill, 240%);
  height: var(--adr-fill, 240%);
  margin: calc(var(--adr-fill, 240%) / -2) 0 0 calc(var(--adr-fill, 240%) / -2);
  border-radius: 50%;
  background: var(--adr-a);
  transform: scale(0);
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.msm-aannemer-route .adr-pill[data-hover] .adr-face,
.msm-aannemer-route .adr-pill[aria-selected="true"] .adr-face { transform: translateY(calc(var(--adr-roll) * -1)); transition-duration: 0.5s; }
.msm-aannemer-route .adr-pill[data-hover] .adr-face-alt,
.msm-aannemer-route .adr-pill[aria-selected="true"] .adr-face-alt { transform: translateY(0); transition-duration: 0.5s; }
.msm-aannemer-route .adr-pill[data-hover] .adr-fill,
.msm-aannemer-route .adr-pill[aria-selected="true"] .adr-fill { transform: scale(1); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.msm-aannemer-route .adr-pill[aria-selected="true"] { border-color: var(--adr-a); cursor: default; }

/* De selectie: een laserlijn die met twee veren naar de gekozen keuze schuift. */
.msm-aannemer-route .adr-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--adr-a);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--adr-a) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 50%;
  will-change: transform, width;
}
.msm-aannemer-route:not([data-ready]) .adr-laser { display: none; }

.msm-aannemer-route .adr-teller { display: grid; justify-items: end; gap: 6px; text-align: right; }
.msm-aannemer-route .adr-count { display: flex; align-items: flex-end; gap: 12px; margin: 0; }
.msm-aannemer-route .adr-num {
  display: inline-flex;
  font: 900 clamp(84px, 10vw, 148px) / 1 var(--adr-caps);
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.msm-aannemer-route .adr-roll { display: inline-flex; white-space: pre; user-select: none; }
.msm-aannemer-route .adr-slot { position: relative; display: inline-block; height: 1.05em; line-height: 1.05em; overflow: hidden; }
.msm-aannemer-route .adr-strip { display: flex; flex-direction: column; will-change: transform; }
.msm-aannemer-route .adr-strip > span { display: block; height: 1.05em; }
.msm-aannemer-route .adr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.msm-aannemer-route .adr-unit {
  padding-bottom: 0.9em;
  color: var(--adr-i);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.msm-aannemer-route .adr-count-note { max-width: 30ch; margin: 0; color: var(--adr-muted); font-size: 12px; }

/* Eén route */
.msm-aannemer-route .adr-route { outline: none; }
.msm-aannemer-route:not([data-ready]) .adr-route + .adr-route { margin-top: 64px; padding-top: 40px; border-top: 4px solid var(--adr-i); }
.msm-aannemer-route .adr-gevoel {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  max-width: 920px;
  margin: 0 0 28px;
  font: 400 clamp(20px, 2.1vw, 27px) / 1.25 var(--m-font-display, Georgia, serif);
}
.msm-aannemer-route .adr-gevoel span {
  padding-top: 0.55em;
  color: var(--adr-i);
  font: 700 10px / 1 var(--m-font-body, Arial, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.msm-aannemer-route .adr-balk { margin: 0 0 clamp(30px, 4vw, 48px); }
.msm-aannemer-route .adr-weken,
.msm-aannemer-route .adr-segs { display: grid; grid-template-columns: repeat(var(--weeks, 10), minmax(0, 1fr)); }
.msm-aannemer-route .adr-weken span {
  padding: 0 0 6px 6px;
  border-left: 1px solid var(--adr-hair);
  color: var(--adr-muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.msm-aannemer-route .adr-segs { gap: 2px; }
.msm-aannemer-route .adr-seg {
  grid-column: var(--from) / var(--end);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  overflow: hidden;
  background: var(--adr-i);
  color: var(--adr-b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 0 50%;
}
.msm-aannemer-route .adr-seg b { color: var(--adr-a); }
.msm-aannemer-route .adr-seg:nth-child(2) { background: color-mix(in srgb, var(--adr-i) 72%, var(--adr-b)); }
.msm-aannemer-route .adr-seg:nth-child(3) { background: color-mix(in srgb, var(--adr-i) 30%, var(--adr-b)); color: var(--adr-i); }
.msm-aannemer-route .adr-seg:nth-child(4) { background: color-mix(in srgb, var(--adr-i) 13%, var(--adr-b)); color: var(--adr-i); }
.msm-aannemer-route .adr-seg:nth-child(n + 2) b { color: inherit; }

.msm-aannemer-route .adr-fasen {
  display: grid;
  grid-template-columns: repeat(var(--fasen, 4), minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.msm-aannemer-route .adr-fase { min-width: 0; border-top: 1px solid var(--adr-i); padding-top: 14px; }
.msm-aannemer-route .adr-beeld {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--adr-b) 80%, transparent), transparent) 50% 62% / 92% 70% no-repeat, var(--adr-b);
}
.msm-aannemer-route .adr-beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.16));
}
.msm-aannemer-route .adr-week {
  display: flex;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.msm-aannemer-route .adr-week b { color: var(--adr-i); }
.msm-aannemer-route .adr-fase h3 {
  margin: 0 0 12px;
  font: 900 clamp(24px, 2.3vw, 32px) / 0.95 var(--adr-caps);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.msm-aannemer-route .adr-mat {
  display: grid;
  gap: 3px;
  margin: 0 0 10px;
  padding: 9px 0;
  border-top: 1px solid var(--adr-hair);
  border-bottom: 1px solid var(--adr-hair);
  font-size: 14px;
  font-weight: 700;
}
.msm-aannemer-route .adr-mat span {
  color: var(--adr-muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.msm-aannemer-route .adr-fase > p:last-child { margin: 0; font-size: 14px; }

@media (max-width: 900px) {
  .msm-aannemer-route .adr-kop { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .msm-aannemer-route .adr-eyebrow { display: flex; gap: 14px; }
}
@media (max-width: 760px) {
  .msm-aannemer-route .adr-kies { display: grid; gap: 22px; }
  .msm-aannemer-route .adr-pills { display: grid; grid-template-columns: 1fr 1fr; }
  .msm-aannemer-route .adr-pill { padding: 0 10px; font-size: 12px; letter-spacing: 0.05em; }
  .msm-aannemer-route .adr-teller { justify-items: start; text-align: left; }
  .msm-aannemer-route .adr-gevoel { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .msm-aannemer-route .adr-gevoel span { padding-top: 0; }
  .msm-aannemer-route .adr-seg { justify-content: center; padding: 0; font-size: 0; }
  .msm-aannemer-route .adr-seg b { font-size: 10px; }
  .msm-aannemer-route .adr-weken span { padding-left: 3px; font-size: 9px; }
  .msm-aannemer-route .adr-fasen {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    padding-bottom: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .msm-aannemer-route .adr-fase { scroll-snap-align: start; }
}
@media (max-width: 520px) {
  .msm-aannemer-route .adr-inner { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .msm-aannemer-route .adr-face,
  .msm-aannemer-route .adr-face-alt,
  .msm-aannemer-route .adr-fill { transition: none !important; }
}