/* ============================================================
   Werkwijze (werkwijze.html) — pagina-specifieke stijl
   Bouwt op DESIGNSYSTEEM v2 in assets/css/style.css (tokens, .card, .callout, .status-note, .photo-slot).
   ============================================================ */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ww-wrap { max-width: var(--wide); }
.ww-faq { max-width: 760px; }

/* ── Page-hero: drie kernfeiten ── */
.page-hero .ww-facts {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
  margin-top: var(--space-m);
}
.ww-facts li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--step--1); font-weight: 600; font-family: var(--font-head); color: var(--ink);
}
.ww-facts svg { color: var(--action); flex-shrink: 0; }

/* ── Overzicht van de drie stappen ── */
.ww-overview {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s);
  margin-bottom: var(--space-xl);
}
.ww-overview__link {
  display: flex; align-items: center; gap: var(--space-s);
  height: 100%; min-height: 64px;
  padding: var(--space-s) var(--space-m);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink);
  transition: border-color 150ms ease;
}
.ww-overview__link:hover { border-color: rgba(46,125,79,.45); }
.ww-overview__link:hover .ww-overview__title { color: var(--action); }
.ww-overview__num {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--action); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-variant-numeric: tabular-nums;
}
.ww-overview__text { display: flex; flex-direction: column; gap: .1rem; }
.ww-overview__title { font-family: var(--font-head); font-weight: 700; font-size: var(--step-0); line-height: 1.25; }
.ww-overview__meta { font-size: var(--step--2); color: var(--text-muted); }

/* ── Uitgewerkte stappen: tijdlijn ── */
.ww-steps { display: flex; flex-direction: column; gap: var(--space-xl); }
.ww-step {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-m);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.ww-step:not(:last-child)::before {           /* verbindingslijn naar de volgende stap */
  content: ''; position: absolute; left: 23px; top: 56px;
  bottom: calc(-1 * var(--space-xl) + 8px); width: 2px; background: var(--border);
}
.ww-step__num {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--action); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}
.ww-step__body { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.ww-duo .card { min-width: 0; }
.ww-step__kicker {
  font-family: var(--font-head); font-size: var(--eyebrow); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #256B42;
  margin-bottom: var(--space-3xs); padding-top: .35rem;
}
.ww-step__body > h3 { margin-bottom: var(--space-xs); }
.ww-step__body > p { color: var(--text-muted); max-width: var(--measure); }
.ww-step__body > p a, .ww-terms a, .faq-body a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; }
.ww-step__body h4 { margin: var(--space-m) 0 var(--space-xs); }

/* Vinklijsten */
.ww-list { display: flex; flex-direction: column; gap: var(--space-2xs); }
.ww-list li { display: flex; gap: .6rem; align-items: flex-start; color: var(--text-muted); }
.ww-list svg { color: var(--action); flex-shrink: 0; margin-top: .25em; }
.ww-list strong { color: var(--ink); font-weight: 600; }
.ww-list--compact li { font-size: var(--step--1); }
.ww-list--compact { margin-bottom: var(--space-s); }

.ww-note { margin-top: var(--space-s); font-size: var(--step--1); }
.ww-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m);
  margin-top: var(--space-m);
}
.ww-actions .btn--link { min-height: 44px; }

/* Foto-plek (opname) */
.ww-photo { margin: var(--space-m) 0; max-width: 720px; }

/* Twee kaarten naast elkaar (opname / oplevering) */
.ww-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-s);
  margin-top: var(--space-m);
}
.ww-duo .card { display: flex; flex-direction: column; }
.ww-card-title {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-size: var(--step-1); margin: 0 0 var(--space-xs) !important;
}
.ww-card-title svg { color: var(--action); flex-shrink: 0; }
.ww-card-title .optional { font-family: var(--font-body, inherit); font-size: var(--step--1); }
.ww-small { font-size: var(--step--1); color: var(--text-muted); margin-bottom: var(--space-2xs); }
.ww-small strong { color: var(--ink); }
.ww-time {
  display: flex; align-items: center; gap: .45rem;
  margin-top: auto; padding-top: var(--space-xs);
  font-family: var(--font-head); font-weight: 600; font-size: var(--step--1); color: var(--ink);
}
.ww-time svg { color: var(--action); flex-shrink: 0; }
.ww-duo .status-note { margin-top: var(--space-xs); }
.ww-tip { margin-top: var(--space-m); }
.ww-tip a { color: var(--action); }

.ww-after {
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s);
  margin-top: var(--space-xl); padding-top: var(--space-m);
  border-top: 1px solid var(--border); color: var(--text-muted);
}
.ww-after .btn--link { min-height: 44px; }

/* ── Eerlijke afspraken ── */
.ww-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
.ww-promises .card { padding: var(--space-m); }
.ww-promises__icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: rgba(46,125,79,.1); color: var(--action); margin-bottom: var(--space-xs);
}
.ww-promises__title { font-size: var(--step-1); margin-bottom: var(--space-3xs); }
.ww-promises p { font-size: var(--step--1); color: var(--text-muted); }
.ww-terms { margin-top: var(--space-m); font-size: var(--step--1); color: var(--text-muted); max-width: var(--measure); }

/* ── Verder lezen ── */
.ww-reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-s); }
.ww-reads .card { padding: var(--space-m); color: var(--ink); }
.ww-reads__title { font-size: var(--step-1); margin-bottom: var(--space-2xs); }
.ww-reads p { font-size: var(--step--1); color: var(--text-muted); }
.ww-source { margin-top: var(--space-m); }

/* ── FAQ ── */
.ww-faq__more { margin-top: var(--space-l); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); }
.ww-faq__more p { color: var(--text-muted); }

/* ── Mobiel ── */
@media (max-width: 760px) {
  .ww-overview { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .ww-step { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-s); }
  .ww-step__num { width: 36px; height: 36px; font-size: var(--step-0); }
  .ww-step:not(:last-child)::before { left: 17px; top: 44px; }
  .ww-step__kicker { padding-top: .5rem; }
  .ww-duo, .ww-promises, .ww-reads { grid-template-columns: 1fr; }
}

/* Geen browsernummering: de nummers staan in de bolletjes */
.ww-overview, .ww-steps, .ww-list, .ww-promises, .ww-facts { list-style: none; padding-left: 0; margin-left: 0; }