/* ============================================================
   SM Verhaal

   Een persoonlijk verhaal dat de eigen staat van dienst juist
   wegwuift. Geen kaarten, geen kolommen, geen kopjes. De lengte
   en het ritme doen het werk.

   HET MECHANISME ZIT IN DE KLEUR, NIET IN DE MAAT.
   Alle alinea's zijn even groot. De grijze dragen het verhaal,
   een handvol witte zijn de klap. Zet je nadruk met lettergrootte,
   dan krijg je een trap; zet je hem met kleur, dan krijg je een
   hartslag. Dat laatste leest rustiger en valt harder.

   Nagemeten op de bron: container 1240 breed, tekst in de linker
   helft van 620, rechterhelft bewust leeg. Kop 75px op regelhoogte
   67 (dus .89). Lopende tekst overal 20px.

   Regelhoogte staat hier op 1.5 in plaats van de 1.2 van de bron:
   onze alinea's zijn langer en 1.2 loopt dan dicht.

   Gemaakt door John Schreve | Schrevemarketing
   ============================================================ */

.sm-verhaal {
  --sm-verhaal-bg: #12303F;
  --sm-verhaal-ink: #FFFFFF;
  /* Het dofgrijs van de bron, exact gemeten: rgb(134,134,139). Eerder stond
     hier wit op 58 procent, maar dat is lichter en dan verliezen de witte
     klappen hun kracht. De vervaging IS dit grijs. */
  --sm-verhaal-grijs: rgb(134, 134, 139);

  --sm-verhaal-kolom: 620px;
  --sm-verhaal-kop-min: 40px;
  --sm-verhaal-kop-max: 75px;
  --sm-verhaal-tekst-min: 17px;
  --sm-verhaal-tekst-max: 20px;

  --sm-verhaal-boven: 110px;
  --sm-verhaal-onder: 110px;
  --sm-verhaal-zij: 24px;
  --sm-verhaal-foto-x: 50%;
  --sm-verhaal-foto-y: 50%;
  --sm-verhaal-foto-mobiel-hoogte: 340px;

  background: var(--sm-verhaal-bg);
  color: var(--sm-verhaal-ink);
  padding: var(--sm-verhaal-boven) var(--sm-verhaal-zij) var(--sm-verhaal-onder);
}

.sm-verhaal__binnen {
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------- met een foto ernaast ----------
   Zonder foto houdt de tekst zijn halve kolom en blijft de andere helft leeg,
   want die leegte is het effect. Zet je er wel beeld in, dan vult dat precies
   die helft en gaat de tekst over de volle kolombreedte. */
.sm-verhaal--met-foto .sm-verhaal__binnen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--sm-verhaal-gat, 64px);
}
.sm-verhaal--met-foto .sm-verhaal__kolom { max-width: none; }

/* ---------- foto tot de rand ----------
   Nagemeten op de bron: de foto vult de hele rechterhelft, van boven tot
   onder, zonder ronding en zonder ruimte ertussen. Dat kan niet met de
   gewone variant hierboven, want die houdt een gat en laat de foto zijn
   eigen hoogte bepalen. In deze stand levert de sectie zijn eigen padding
   in aan de fotokant en rekt de foto mee met de hoogste kolom. */
.sm-verhaal--vol {
  --sm-verhaal-gat: 0px;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}
.sm-verhaal--vol .sm-verhaal__binnen {
  max-width: none;
  align-items: stretch;
}
.sm-verhaal--vol .sm-verhaal__kolom {
  align-self: center;
  padding: var(--sm-verhaal-boven) 0 var(--sm-verhaal-onder);
}
.sm-verhaal--vol .sm-verhaal__foto,
.sm-verhaal--vol .sm-verhaal__foto picture { height: 100%; }
.sm-verhaal--vol .sm-verhaal__foto img {
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
/* Foto links betekent dat de sectie aan die kant zijn padding inlevert. */
.sm-verhaal--vol.sm-verhaal--foto-links { padding-right: var(--sm-verhaal-zij); padding-left: 0; }

/* ---------- foto als brede sectie-achtergrond ----------
   De tekst blijft gewone HTML en bepaalt de hoogte. De foto ligt daarachter,
   van rand tot rand. Op smallere schermen gaat hij weer terug in de stroom. */
.sm-verhaal--achtergrond {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
}
.sm-verhaal--achtergrond .sm-verhaal__binnen {
  display: block;
  max-width: 1240px;
  padding: 0 var(--sm-verhaal-zij);
}
.sm-verhaal--achtergrond .sm-verhaal__kolom {
  position: relative;
  z-index: 1;
  max-width: var(--sm-verhaal-kolom);
  padding: var(--sm-verhaal-boven) 0 var(--sm-verhaal-onder);
}
.sm-verhaal--achtergrond .sm-verhaal__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.sm-verhaal--achtergrond .sm-verhaal__foto picture,
.sm-verhaal--achtergrond .sm-verhaal__foto img {
  width: 100%;
  height: 100%;
}
.sm-verhaal--achtergrond .sm-verhaal__foto img {
  object-fit: cover;
  object-position: var(--sm-verhaal-foto-x) var(--sm-verhaal-foto-y);
  border-radius: 0;
}
.sm-verhaal--achtergrond.sm-verhaal--vervaag::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .96) 0%,
    rgba(0, 0, 0, .90) 24%,
    rgba(0, 0, 0, .70) 40%,
    rgba(0, 0, 0, .40) 50%,
    rgba(0, 0, 0, .18) 55%,
    transparent calc(var(--sm-verhaal-vaag, 55%) + 10%)
  );
}

@media (max-width: 900px) {
  /* Gestapeld heeft rekken geen zin: dan bepaalt de foto weer zijn eigen hoogte. */
  .sm-verhaal--vol { padding: var(--sm-verhaal-boven) var(--sm-verhaal-zij) 0; }
  .sm-verhaal--vol .sm-verhaal__kolom { padding: 0 0 var(--sm-verhaal-onder); }
  .sm-verhaal--vol .sm-verhaal__foto img { height: auto; }
}

/* ---------- de foto laten oplossen in de achtergrond ----------
   Een foto tegen een donkere sectie geeft een harde naad. Met een masker
   loopt de rand die naar de tekst wijst uit in niets, zodat het beeld in
   de achtergrond zakt in plaats van er als blok tegenaan te liggen.

   Bewust een masker en geen verloop-laag eroverheen: een overlay moet de
   exacte achtergrondkleur raden en verraadt zich zodra die kleur wijzigt.
   Een masker maakt de foto zelf doorzichtig, dus het klopt altijd.

   --sm-verhaal-vaag = waar het oplossen begint. Op 55% is de helft van de
   foto vol en lost de rest op. Lager betekent eerder beginnen, dus vager. */
.sm-verhaal--vervaag .sm-verhaal__foto {
  -webkit-mask-image: linear-gradient(to left, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
          mask-image: linear-gradient(to left, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
}
.sm-verhaal--achtergrond.sm-verhaal--vervaag .sm-verhaal__foto {
  -webkit-mask-image: none;
          mask-image: none;
}
/* Staat de foto links, dan wijst de naad naar rechts. */
.sm-verhaal--vervaag.sm-verhaal--foto-links .sm-verhaal__foto {
  -webkit-mask-image: linear-gradient(to right, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
          mask-image: linear-gradient(to right, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
}
/* Gestapeld ligt de tekst eronder in plaats van ernaast, dus dan moet de
   onderkant oplossen en niet de zijkant. */
@media (max-width: 900px) {
  .sm-verhaal--vervaag .sm-verhaal__foto,
  .sm-verhaal--vervaag.sm-verhaal--foto-links .sm-verhaal__foto {
    -webkit-mask-image: linear-gradient(to top, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
            mask-image: linear-gradient(to top, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
  }
  .sm-verhaal--achtergrond.sm-verhaal--vervaag .sm-verhaal__foto,
  .sm-verhaal--achtergrond.sm-verhaal--vervaag.sm-verhaal--foto-links .sm-verhaal__foto {
    -webkit-mask-image: linear-gradient(to top, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
            mask-image: linear-gradient(to top, #000 var(--sm-verhaal-vaag, 55%), transparent 100%);
  }
}

/* Waar de foto op wordt bijgesneden gaat via --sm-verhaal-foto-x/y, gezet door
   "Plaats van de foto". Hier stond ooit een tweede regel met eigen variabelen
   (--sm-verhaal-punt-x/y). Die verloor altijd van regel 130 en deed dus niks.
   Weggehaald in plaats van er een derde bovenop te stapelen. */

/* ---------- kop, tekst en knop los verschuiven ----------
   Met position/top/left, NIET met transform en NIET met marge.

   Geen marge: die duwt de rest van het blok mee en verandert de hoogte van de
   sectie. Je wilt de knop kunnen optillen zonder dat de tekst erboven meegaat.

   Geen transform: de onthulling (sm-up uit de basis) animeert zelf al met
   transform. Zet je hier ook een transform neer, dan overschrijf je die en
   valt de verschijn-animatie stil. Met top/left blijven ze naast elkaar
   bestaan. */
.sm-verhaal .sm-verhaal__kop {
  position: relative;
  top: var(--sm-verhaal-kop-y, 0px);
  left: var(--sm-verhaal-kop-x, 0px);
}
.sm-verhaal__kolom > p {
  position: relative;
  top: var(--sm-verhaal-tekst-y, 0px);
  left: var(--sm-verhaal-tekst-x, 0px);
}
.sm-verhaal__slot {
  position: relative;
  top: var(--sm-verhaal-knop-y, 0px);
  left: var(--sm-verhaal-knop-x, 0px);
}

.sm-verhaal__foto { margin: 0; }
.sm-verhaal__foto picture { display: block; }
.sm-verhaal__foto img {
  display: block;
  width: 100%;
  height: auto;
  object-position: var(--sm-verhaal-foto-x) var(--sm-verhaal-foto-y);
  border-radius: var(--sm-verhaal-hoek, 14px);
}
/* Foto links betekent alleen: wissel de volgorde. De opmaak blijft gelijk. */
.sm-verhaal--foto-links .sm-verhaal__foto { order: -1; }

/* De tekst pakt de linkerhelft. Die lege rechterhelft is geen vergeten
   kolom maar het effect zelf: het verhaal krijgt lucht. */
.sm-verhaal__kolom {
  max-width: var(--sm-verhaal-kolom);
  margin-left: var(--sm-verhaal-marge-links, 0);
  margin-right: var(--sm-verhaal-marge-rechts, auto);
}

/* Twee klassen, geen tagnaam ervoor. Dat is hier het enige dat werkt:
   - kaal ".sm-verhaal__kop" (0,1,0) verliest van ".sm-verhaal p" (0,1,1),
     dan rendert de grote regel als gewone alinea.
   - "p.sm-verhaal__kop" wint dat wel, maar pakt alleen een <p>. Zet je de
     kop op h2 of h3, dan valt hij terug op de opmaak van het thema.
     Live gemeten op 11-08-2026: 48px in bijna-zwart op een donkere grond.
   - ".sm-verhaal .sm-verhaal__kop" (0,2,0) wint van allebei en geldt voor
     p, h2 en h3. */
.sm-verhaal .sm-verhaal__kop {
  margin: 0 0 var(--sm-verhaal-kop-onder, 34px);
  font-size: clamp(var(--sm-verhaal-kop-min), 7vw, var(--sm-verhaal-kop-max));
  line-height: .89;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--sm-verhaal-ink);
}

.sm-verhaal p {
  margin: 0 0 var(--sm-verhaal-alinea-onder, 20px);
  font-size: clamp(var(--sm-verhaal-tekst-min), 1.5vw, var(--sm-verhaal-tekst-max));
  line-height: var(--sm-verhaal-regelhoogte, 1.5);
  /* Bewust GEEN font-family. De tekst erft het lettertype van het thema, net
     als de kop. Zet je hier een merkletter hard neer, dan dwingt de widget die
     op elke site waar hij op staat. Wil je een ander lettertype, gebruik dan
     de typografie-instelling van de widget. */
  letter-spacing: -.2px;
  color: var(--sm-verhaal-grijs);
}

.sm-verhaal p.is-klap {
  color: var(--sm-verhaal-ink);
}

/* Wit MIDDEN in een zin, zoals de bron doet ("...that let me finally
   systemize and reclaim my freedom"). Dikgedrukt in het tekstveld wordt
   hier wit in plaats van vet: het gewicht blijft gelijk, alleen de kleur
   springt eruit. Zo zet je de klap op een zinsdeel zonder een hele
   alinea om te hoeven zetten. */
.sm-verhaal p strong,
.sm-verhaal p b {
  color: var(--sm-verhaal-ink);
  font-weight: inherit;
}

/* Twee knoppen mogen naast elkaar, maar breken netjes af op een smal scherm
   in plaats van uit te steken. */
.sm-verhaal__slot {
  margin-top: var(--sm-verhaal-knop-boven, 38px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm-verhaal-knop-gat, 14px);
}

/* ---------- effecten los uitzetten ----------
   De gedeelde knop-helper zet sm-hover-fly, sm-hschaduw-gloed en
   sm-icoon-schuif er ALTIJD op. Die helper draait op alle klantsites, dus die
   pas ik niet aan voor een keuze in deze ene widget. In plaats daarvan draait
   het slot een data-attribuut mee en zetten we het effect hier gericht terug.
   Zo blijft de helper ongemoeid en heeft John toch de knop. */
.sm-verhaal__slot[data-uit~="fly"] .sm-hover-fly:hover { transform: none; }
.sm-verhaal__slot[data-uit~="gloed"] .sm-hschaduw-gloed:hover { box-shadow: none; }
.sm-verhaal__slot[data-uit~="schuif"] .sm-icoon-schuif:hover .sm-ic-na { padding-left: 0; }
.sm-verhaal__slot[data-uit~="schuif"] .sm-icoon-schuif:hover .sm-ic-voor { padding-right: 0; }

/* Compact houdt een lang verhaal dicht bij het gemeten bronritme.
   Het zet alleen de STANDAARDWAARDEN anders; het overschrijft de marges niet
   meer rechtstreeks. Anders won compact altijd van de schuiven in de widget
   en kon John de ruimtes niet meer bijstellen. */
.sm-verhaal--compact {
  --sm-verhaal-kop-onder: 14px;
  --sm-verhaal-alinea-onder: 14px;
  --sm-verhaal-knop-boven: 24px;
}
.sm-verhaal--compact p {
  font-size: var(--sm-verhaal-tekst-max);
  line-height: var(--sm-verhaal-regelhoogte, 1.2);
}

/* Onder de 900 vervalt de halve kolom en loopt de tekst gewoon door.
   De bron stapelt daar zijn twee kolommen; omdat onze rechterhelft leeg
   is, is doorlopen hetzelfde resultaat met een regel minder. */
@media (max-width: 900px) {
  .sm-verhaal__kolom { max-width: min(100%, var(--sm-verhaal-kolom)); }
  .sm-verhaal {
    --sm-verhaal-boven: 76px;
    --sm-verhaal-onder: 76px;
  }
  /* Onder elkaar, en de foto gaat altijd onder de tekst. Ook als hij op een
     breed scherm links stond: op een telefoon lees je eerst, dan kijk je. */
  .sm-verhaal--met-foto .sm-verhaal__binnen {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .sm-verhaal--foto-links .sm-verhaal__foto { order: 0; }

  .sm-verhaal--achtergrond {
    padding: var(--sm-verhaal-boven) var(--sm-verhaal-zij) calc(var(--sm-verhaal-foto-mobiel-hoogte) - 96px);
  }
  .sm-verhaal--achtergrond .sm-verhaal__binnen {
    display: block;
    padding: 0;
  }
  .sm-verhaal--achtergrond .sm-verhaal__kolom {
    padding: 0;
  }
  .sm-verhaal--achtergrond .sm-verhaal__foto {
    position: absolute;
    inset: auto 0 24px;
    width: 100%;
    height: var(--sm-verhaal-foto-mobiel-hoogte);
    margin: 0;
  }
  .sm-verhaal--achtergrond .sm-verhaal__foto picture,
  .sm-verhaal--achtergrond .sm-verhaal__foto img {
    width: 100%;
    height: 100%;
  }
  .sm-verhaal--achtergrond.sm-verhaal--vervaag::after { display: none; }
  .sm-verhaal--compact p {
    font-size: var(--sm-verhaal-tekst-min);
    line-height: 1.45;
  }
}