/* =========================================================================
   Aanbod op Working together (13 november 2026), geladen door work.html.
   Hugo keurde het ontwerp goed op 13 november ("Ja dit is gaaf"); de
   proefpagina voorstel-aanbod.html met v3-aanbod-voorstel.css blijft lokaal.

   Hugo, 13 nov: "De 3 opties moeten er echt uitspringen", daarna: "de pakketten
   moeten er meer premium uit zien (misschien als boek net als bij edities)" en
   "Niet afwisselend genoeg met ook de lichtere kleuren".
   Daarom: elk pakket als gebonden rapport met een eigen omslagkleur (licht
   papier, roest, lichtgroen) op het donkere vlak, en daaronder een licht
   papieren vlak voor de uitleg. De boeken zijn gerenderd zoals de edities
   (bron: Publicatie/Branding/aanbod-boeken-13nov2026/boeken.cjs).
   Geen kaders, lijnen, etiketten of pijltjes.
   ========================================================================= */

.of-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3.5vw,56px);align-items:start}
.of{display:block;color:inherit;text-decoration:none}
.of:focus-visible{outline:2px solid #e0653a;outline-offset:6px}
/* De PNG heeft lucht rond het boek en een schaduw eronder; trek hem tegen de tekst aan. */
.of-doc{display:block;width:min(112%,340px);margin:-4% 0 -3% -9%}
.of-doc img{display:block;width:100%;height:auto;transition:transform .4s ease}
.of:hover .of-doc img,.of:focus-visible .of-doc img{transform:translateY(-12px)}
.of-txt{display:block}
.of h3{font-size:clamp(23px,2vw,28px);line-height:1.12;letter-spacing:-.012em;font-weight:500;color:#f6f3ec;margin:0 0 8px}
.of-line{font-size:16.5px;line-height:1.5;color:#dde3df;margin:0 0 12px;max-width:30ch;min-height:3em}
/* Hugo, 13 nov: "de prijzen, kan je die een ander font geven?" De prijs staat in de cursieve
   snede van Source Serif 4, zoals de regel op de omslagen; de toelichting erachter blijft recht. */
.of-price{font-family:var(--disp);font-style:italic;font-weight:400;font-size:clamp(27px,2.5vw,35px);line-height:1.2;color:#eaa982;margin:0}
.of-price span{font-style:normal;font-size:16px;color:var(--brand-tint)}
.work-page .sv-top .sv-head{margin-bottom:clamp(8px,1.5vw,20px)}
.work-page .sv-top .sv-foot{margin-top:clamp(44px,5.5vw,72px)}

/* Onder de vouw: elk pakket een eigen vlak over de hele breedte, in de kleur van
   zijn omslag: teardown papier, sprint roest, diligence lichtgroen. Links naam,
   prijs en een alinea; rechts een pagina uit het werk. Geen rij gelijke blokken
   en geen wit vlak meer (Hugo, 13 nov). De kleur loopt door tot de schermrand
   via een pseudo-element, zodat de opmaak van de pagina zelf gelijk blijft. */
.sv-page section.wk{background:transparent;padding:0;position:relative;z-index:0;overflow:clip}
.sv-page section.wk .wk-row{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  column-gap:clamp(32px,6vw,104px);align-items:center;padding:clamp(72px,9vw,132px) 0;border:none}
.sv-page section.wk .wk-row::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;z-index:-1}
.sv-page section.wk .wk-side{display:block}
.sv-page section.wk .wk-side h3{font-size:clamp(34px,3.6vw,52px);line-height:1.04;letter-spacing:-.02em;font-weight:500;margin:0 0 14px}
.sv-page section.wk .wk-price{margin:0 0 22px;font-size:16px}
.sv-page section.wk .wk-price strong{font-family:var(--disp);font-style:italic;font-size:clamp(27px,2.5vw,34px);font-weight:400}
.sv-page section.wk .wk-when{max-width:46ch;font-size:17.5px;line-height:1.65;margin:0}
.sv-page section.wk .wk-more{margin-top:20px}
/* Het voorbeeld is een opengeslagen rapport met eigen schaduw (PNG); iets over de rand voor diepte. */
.wk-shot{display:block;width:118%;margin:-6% -12% -6% -6%}
.wk-shot img{display:block;width:100%;height:auto}
.wk-shot a{display:block}

/* Teardown: papier */
.sv-page section.wk #demand-side-teardown::before{background:#f1ebdf}
.sv-page section.wk #demand-side-teardown h3,.sv-page section.wk #demand-side-teardown .wk-when{color:#141917}
.sv-page section.wk #demand-side-teardown .wk-price{color:#3a4744}
.sv-page section.wk #demand-side-teardown .wk-price strong{color:#a83c19}
.sv-page section.wk #demand-side-teardown .wk-more{color:#a83c19}
/* Sprint: roest */
/* Hugo, 13 nov: "het oranje is opeens wel fel". Daarom een diepere tint met een verloop, geen vlak fel roest. */
.sv-page section.wk #positioning-sprint::before{background:linear-gradient(155deg,#8f3518 0%,#7a2c15 55%,#5f2212 100%)}
.sv-page section.wk #positioning-sprint h3,.sv-page section.wk #positioning-sprint .wk-when{color:#fbf5ea}
.sv-page section.wk #positioning-sprint .wk-price{color:#f6d9c9}
.sv-page section.wk #positioning-sprint .wk-price strong{color:#fbf5ea}
.sv-page section.wk #positioning-sprint .wk-more{color:#fbf5ea}
/* Diligence: lichtgroen */
.sv-page section.wk #demand-side-diligence::before{background:#c3d3cf}
.sv-page section.wk #demand-side-diligence h3,.sv-page section.wk #demand-side-diligence .wk-when{color:#0e3236}
.sv-page section.wk #demand-side-diligence .wk-price{color:#2f4f50}
.sv-page section.wk #demand-side-diligence .wk-price strong{color:#0e3236}
.sv-page section.wk #demand-side-diligence .wk-more{color:#123f43}

@media (max-width:900px){
  .of-list{grid-template-columns:1fr;gap:36px}
  .of{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:14px;align-items:center}
  .of-doc{width:170px;margin:0 0 0 -16px}
  .of-line{max-width:none;min-height:0}
  .sv-page section.wk .wk-row{grid-template-columns:1fr;row-gap:40px;padding:64px 0}
  .wk-shot{width:112%;margin:-4% -6% -4% -6%}
}
@media (prefers-reduced-motion:reduce){
  .of-doc img{transition:none}
  .of:hover .of-doc img,.of:focus-visible .of-doc img{transform:none}
}

/* Homepage: dezelfde boeken op het lichte vlak. De tekstkleuren volgen de kleuren van de pagina,
   zodat ze in de donkere weergave vanzelf licht worden. */
.of-licht .of h3{color:var(--ink)}
.of-licht .of-line{color:var(--soft)}
.of-licht .of-price{color:var(--accent)}
.of-licht .of-price span{color:var(--grey)}