/* ==========================================================================
   Mijn werk: klantverhalen op de homepage en de casepagina's (29 oktober 2026)

   De werkrij schuift ook op mobiel van links naar rechts, zoals de reviews op
   de site van Believe. Ares: "niet alles onder elkaar zetten", want vier kaarten
   onder elkaar worden een eindeloze scroll. Op mobiel steekt de volgende kaart
   een stukje in beeld, zodat je ziet dat er meer is.
   ========================================================================== */

/* ---------- de rij ---------- */

.werkrij { position: relative; }

.werkrij__baan {
  --werkrij-gap: var(--sp-1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: var(--werkrij-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-block: 4px var(--sp-1);
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding-inline: 0;
}
.werkrij__baan::-webkit-scrollbar { display: none; }
.werkrij__baan > li { scroll-snap-align: start; display: flex; }

/* Op mobiel loopt de rij door tot de rand van het scherm, zodat de volgende
   kaart echt uit beeld lijkt te komen en niet tegen de marge afknapt. */
@media (max-width: 599px) {
  .werkrij__baan {
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
  }
}
@media (min-width: 600px) {
  .werkrij__baan { grid-auto-columns: calc((100% - var(--werkrij-gap)) / 2.15); }
}
@media (min-width: 1024px) {
  .werkrij__baan { grid-auto-columns: calc((100% - 2 * var(--werkrij-gap)) / 3); }
}

.werkrij__bediening {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
}
/* Past alles in beeld, dan valt de bediening weg. */
.werkrij--past .werkrij__bediening { display: none; }
.werkrij__stippen { display: flex; }
/* Klikvlak van 24 bij 24 pixels (WCAG 2.5.8), de zichtbare stip is kleiner. */
.werkrij__stip {
  width: 24px; height: 24px;
  border: 0; padding: 0;
  background: none;
  cursor: pointer;
  display: grid; place-items: center;
}
.werkrij__stip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.werkrij__stip[aria-current="true"]::before { background: var(--color-accent); width: 22px; border-radius: 4px; }
.werkrij__pijlen { display: flex; gap: 8px; }
.werkrij__pijl {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border-input);
  background: var(--color-surface);
  color: var(--color-text);
  display: grid; place-items: center;
  cursor: pointer;
}
.werkrij__pijl[aria-disabled="true"] { opacity: .35; cursor: default; }
/* Op mobiel schuif je met je duim; de pijlen vallen daar weg, ook omdat de
   avatar rechtsonder er anders overheen ligt. */
@media (max-width: 599px) { .werkrij__pijlen { display: none; } }
.werkrij__pijl svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.werkrij__stip:focus-visible, .werkrij__pijl:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

/* ---------- de kaarten ---------- */

.werkkaart {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-kaart);
  overflow: hidden;
  position: relative;
}
.werkkaart__beeld { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-block-end: 1px solid var(--color-border); background: var(--color-bg); }
.werkkaart__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.werkkaart__tekst { display: flex; flex-direction: column; gap: var(--sp-0); padding: var(--sp-2); flex: 1; }
.werkkaart__tekst p { margin: 0; }
.werkkaart__meer { margin-block-start: auto; padding-block-start: var(--sp-0); }
/* De hele kaart is klikbaar via de link, zonder een tweede link in de tab-volgorde. */
.werkkaart__meer a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.werkkaart:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.werkkaart__meer a:focus-visible { outline: none; }

.werkkaart__wie { display: flex; align-items: center; gap: var(--sp-0); }
.werkkaart__wie img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.werkkaart__naam { font-weight: 600; display: block; }
.werkkaart__rol { font: var(--type-body-sm); opacity: .82; display: block; }
.werkkaart--citaat .werkkaart__meer a { color: var(--color-text-inverse); }

/* ---------- voor en na ---------- */

.voorna {
  --pos: 50%;
  position: relative;
  margin-inline: 0;
  margin-block-end: 0;
  border-radius: var(--r-kaart);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
  touch-action: pan-y;
}
.voorna img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.voorna__na { position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 0 0 var(--pos)); }
/* Op mobiel is het hele scherm te klein om te lezen. Beide beelden zoomen even
   ver in op de linkerbovenhoek, zodat ze over elkaar blijven passen. */
@media (max-width: 599px) {
  .voorna { aspect-ratio: 4 / 5; }
  .voorna img { width: 250%; max-width: none; height: auto; inset: 0 auto auto 0; object-fit: initial; }
}
.voorna__lijn {
  position: absolute; inset-block: 0; left: var(--pos);
  width: 3px; margin-left: -1.5px;
  background: var(--color-bg-inverse);
  pointer-events: none;
}
.voorna__greep {
  position: absolute; top: 50%; left: var(--pos);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  display: grid; place-items: center;
}
.voorna__greep svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.voorna__label {
  position: absolute; top: var(--sp-0);
  padding: 4px 10px;
  border-radius: var(--r-klein);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: var(--type-label);
  pointer-events: none;
}
.voorna__label--voor { left: var(--sp-0); }
.voorna__label--na { right: var(--sp-0); }
.voorna__schuif {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  cursor: ew-resize;
}
.voorna:has(.voorna__schuif:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.voorna-bijschrift { font: var(--type-caption); color: var(--color-text-subtle); margin-block-start: var(--sp-0); }

/* ---------- de stappen van Excel naar Studio (eigen naam: .tijdlijn bestaat al in verhaal.css) ---------- */

.bouwstappen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bouwstappen li {
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-kaart);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--sp-0);
}
.bouwstappen li p { margin: 0; }
.bouwstap__wanneer { font: var(--type-eyebrow); color: var(--color-accent-text); }

/* ---------- het grote citaat ---------- */

.citaat-groot { display: grid; gap: var(--sp-2); align-items: center; }
.citaat-groot img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.citaat-groot blockquote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.citaat-groot blockquote p { font: italic 500 var(--fs-2)/var(--lh-snug) var(--font-body); margin: 0; }
.citaat-groot cite { font-style: normal; font: var(--type-body); opacity: .82; }
@media (min-width: 861px) {
  .citaat-groot { grid-template-columns: auto 1fr; gap: var(--sp-3); }
  .citaat-groot img { width: 220px; height: 220px; }
}

.kort-citaat { margin-inline: 0; margin-block-end: 0; padding-inline-start: var(--sp-1); border-inline-start: 3px solid var(--color-accent); }
.kort-citaat p { font: var(--type-lead); font-style: italic; margin: 0; }
.kort-citaat cite { display: block; font-style: normal; font: var(--type-body-sm); color: var(--color-text-subtle); margin-block-start: 6px; }

@media (prefers-reduced-motion: no-preference) {
  .werkrij__baan { scroll-behavior: smooth; }
}

/* ---------- fictieve gegevens (29 oktober 2026) ----------
   Ares: het moet heel duidelijk zijn dat namen en cijfers in de schermen niet
   echt zijn. Daarom een label op elk scherm, een melding bovenin de casepagina
   en een bijschrift dat begint met "Fictieve gegevens". */
.werkkaart__beeld, .scene__beeld--fictief { position: relative; }
.fictief {
  position: absolute; top: var(--sp-0); left: var(--sp-0);
  padding: 4px 10px;
  border-radius: var(--r-klein);
  background: var(--goud-700);
  color: var(--white);
  font: var(--type-label);
  letter-spacing: .02em;
  pointer-events: none;
  z-index: 1;
}
.fictief--onder { top: auto; bottom: var(--sp-0); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.fictief-melding {
  margin: 0;
  padding: var(--sp-0) var(--sp-1);
  border-radius: var(--r-knop);
  border: 1px solid var(--color-text-inverse);
  font: var(--type-body-sm);
}

/* ---------- v14: compacte kaarten en casepagina (31 oktober 2026) ----------
   Na het onderzoek naar bureaus als Webbit21 en Pailot: één kaart per case
   met de uitkomst als titel, en een casepagina van ongeveer drie schermen. */
@media (min-width: 1024px) {
  .werkrij--twee .werkrij__baan { grid-auto-columns: calc((100% - var(--werkrij-gap)) / 2); }
}
.werkkaart__klein-citaat { margin: 0; display: flex; flex-direction: column; gap: var(--sp-0); }
.werkkaart__klein-citaat p { margin: 0; font: var(--type-body); font-style: italic; }
.werkkaart__klein-citaat p::before { content: '“'; }
.werkkaart__klein-citaat p::after { content: '”'; }
.werkkaart__klein-citaat .werkkaart__wie img { width: 40px; height: 40px; }
.werkkaart__klein-citaat .werkkaart__rol { color: var(--color-text-subtle); opacity: 1; }

/* De teller bovenaan de casepagina: eerst en nu naast elkaar. */
.teller { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.teller__vak { display: flex; flex-direction: column; gap: 2px; }
.teller__label { font: var(--type-eyebrow); opacity: .82; }
.teller__getal { font: var(--type-h2); }
.teller__vak--nu .teller__getal { color: var(--color-action); }
.teller__pijl { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }

.case-twee { display: grid; gap: var(--sp-3); }
@media (min-width: 861px) { .case-twee { grid-template-columns: 1fr 1fr; align-items: start; } }
.case-punten { margin-inline: 0; margin-block-end: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-0); }
.case-punten li { padding-inline-start: var(--sp-1); position: relative; }
.case-punten li::before { content: ''; position: absolute; inset-inline-start: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }

.case-schermen { list-style: none; margin-inline: 0; margin-block-end: 0; padding: 0; display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.case-schermen figure { margin: 0; position: relative; border: 1px solid var(--color-border); border-radius: var(--r-kaart); overflow: hidden; background: var(--color-surface); }
.case-schermen img { display: block; width: 100%; height: auto; }
.case-schermen figcaption { padding: var(--sp-0) var(--sp-1); font: var(--type-body-sm); border-block-start: 1px solid var(--color-border); }

/* De teller staat sinds 31 oktober bij de uitdaging, op een licht vlak. */
.teller--licht .teller__vak--nu .teller__getal { color: var(--color-accent-text); }

/* ---------- 31 oktober 2026, na de frisse review ----------
   Elk citaat van een klant tussen aanhalingstekens en cursief (Ares). */
.citaat-groot blockquote p::before,
.kort-citaat p::before { content: '“'; }
.citaat-groot blockquote p::after,
.kort-citaat p::after { content: '”'; }
.citaat-groot blockquote p::before { margin-inline-start: -0.4em; }

/* De melding over fictieve gegevens op een licht vlak, onder "Over Karen". */
.fictief-melding--licht { border-color: var(--color-border-input); max-inline-size: 52ch; }

/* Op mobiel schuiven de drie schermen opzij, net als de kaarten op de homepage,
   in plaats van drie schermen onder elkaar. */
@media (max-width: 599px) {
  .case-schermen {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--sp-0);
  }
  .case-schermen > li { scroll-snap-align: start; }
}

/* ---------- Believe, 1 november 2026 ----------
   Bij een website gaat het om de hele vormgeving, en de nieuwe homepage van Believe
   staat gecentreerd. Op mobiel daarom het hele scherm in plaats van de ingezoomde
   linkerbovenhoek. */
@media (max-width: 599px) {
  .voorna--heel { aspect-ratio: 16 / 10; }
  .voorna--heel img { width: 100%; height: 100%; inset: 0; object-fit: cover; }
}

/* ---------- voor en na, 1 november 2026 (stresstest) ----------
   Met JavaScript vangt de figuur muis en vinger op (mijn-werk.js) en is het
   schuifje er alleen nog voor het toetsenbord. Zonder JavaScript blijft het
   zoals het was. */
.voorna--js { cursor: ew-resize; }
.voorna--js .voorna__schuif { pointer-events: none; }
/* Met Tab naar het schuifje blijft de bovenkant van de figuur onder de vaste
   menubalk, met dezelfde afstand als bij een anker ([id] in site.css). */
.voorna__schuif { scroll-margin-block: calc(var(--sp-4) + var(--sp-1)) var(--sp-1); }
/* De greep blijft bij 0 en 100 heel in beeld; de lijn zelf loopt tot de rand. */
.voorna__greep { left: clamp(22px, var(--pos), calc(100% - 22px)); }
/* Inzoomen met twee vingers blijft mogelijk op de schermen met kleine tekst. */
.voorna { touch-action: pan-y pinch-zoom; }