/* =============================================================
   SM Portret-hero
   Groot uitgeknipt portret met de tekens-regen erachter, links de
   kop en de knoppen; daaronder de video, de logo's en het werk.
   Kleuren, letters, de regen en de videokaart komen uit de
   boog-hero (sm-boog-hero.css): de buitenste laag is ook .sm-bh.
   ============================================================= */
.sm-ph {
  --ph-lime: #d2f65a;
  --ph-inkt: #060708;
  --ph-rand: rgba(255, 255, 255, .26);
  --ph-vlak: rgba(255, 255, 255, .05);
  --ph-breed: 1212px;
  position: relative; overflow: hidden;
}
.sm-bh.sm-ph[data-thema="licht"] {
  --ph-lime: #0f8f74;
  --ph-inkt: #ffffff;
  --ph-rand: rgba(13, 21, 18, .18);
  --ph-vlak: rgba(244, 246, 245, .7);
}

/* ---------- de hero ---------- */
.sm-ph-hero {
  position: relative; isolation: isolate; display: flex; align-items: center;
  min-height: min(100svh, 940px); padding: 128px 0 64px;
}
/* de regen over de hele hero, het sterkst rechts achter het portret; links rustig achter de tekst */
.sm-ph .art--regen {
  --regen: var(--accent); --regen-kop: #ffffff;
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 40%, #000 68%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2) 40%, #000 68%);
}
.sm-bh.sm-ph[data-thema="licht"] .art--regen { --regen-kop: #0d1512; }
.sm-ph .art--regen canvas { display: block; width: 100%; height: 100%; }
/* onderaan loopt de hero zacht over in de achtergrond */
.sm-ph-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* het portret: rechts, op de grond van de hero, met een groene gloed erachter */
.sm-ph-foto {
  position: absolute; z-index: 1; bottom: 0; height: 92%;
  right: max(-60px, (100% - var(--ph-breed)) / 2 - 110px);
  display: flex; align-items: flex-end; justify-content: center; pointer-events: none;
}
.sm-ph-foto::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 6%; bottom: 18%; z-index: -1;
  border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  filter: blur(18px);
}
.sm-ph-foto img.sm-ph-img {
  display: block; height: 100%; width: auto; max-width: none; object-fit: contain;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
}

.sm-ph-in { position: relative; z-index: 3; width: min(var(--ph-breed), 100% - 64px); margin-inline: auto; }
.sm-ph-sub {
  margin: 0 0 22px; font-family: var(--mono); font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: .01em;
  color: var(--ink); text-wrap: balance;
}
.sm-ph-sub > span:not(.sm-ph-slash) { white-space: nowrap; }
.sm-ph-slash { color: var(--ph-lime); }
.sm-ph .sm-ph-kop {
  max-width: 760px; margin: 0; font-size: clamp(2.3rem, 5.4vw, 4.85rem); font-weight: 700;
  line-height: .96; letter-spacing: -.045em; color: var(--ink); text-wrap: balance;
}
.sm-ph .sm-ph-kop em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--ph-lime); }
.sm-ph-rij {
  display: grid; grid-template-columns: minmax(0, 380px) auto; align-items: center; gap: 40px;
  max-width: 780px; margin-top: 48px;
}
.sm-ph-tekst { margin: 0; font-size: 16px; line-height: 1.6; color: var(--gedempt); text-wrap: pretty; }
.sm-ph-knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* de hoofdknop: groene tegel met een donker pijlblokje. Hover zoals het voorbeeld:
   de tegel wordt gebroken wit, het pijltje schuift eruit en een tweede schuift erin;
   indrukken maakt hem iets kleiner. Op de telefoon speelt hetzelfde bij een tik
   (.is-tik, gezet door sm-portret-hero.js). */
.sm-ph-knop {
  --ph-knop-hover: #f1f2ec;
  display: inline-flex; align-items: center; gap: 16px; height: 54px; padding: 0 8px 0 22px; border-radius: 14px;
  background: var(--ph-lime); color: var(--ph-inkt); font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color .3s, color .3s, box-shadow .3s, scale .12s;
}
.sm-bh.sm-ph[data-thema="licht"] .sm-ph-knop { --ph-knop-hover: #0d1512; }
.sm-ph-knop:active { scale: .97; }
.sm-ph-knop i {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; overflow: hidden;
  background: #0b0c0e; color: var(--ph-lime);
}
.sm-ph-knop svg { display: block; grid-area: 1 / 1; width: 16px; height: 16px; fill: currentColor; }
.sm-ph-pijlen svg { transition: transform .45s cubic-bezier(.3, .9, .2, 1); }
.sm-ph-pijlen svg + svg { transform: translateX(-34px); }
/* het thema geeft links bij hover een eigen kleur; de knop houdt zijn eigen tekstkleur */
.sm-ph .sm-ph-knop:hover { color: var(--ph-inkt); }
@media (hover: hover) {
  .sm-ph-knop:hover { background: var(--ph-knop-hover); }
  .sm-ph-knop:hover .sm-ph-pijlen svg { transform: translateX(34px); }
  .sm-ph-knop:hover .sm-ph-pijlen svg + svg { transform: translateX(0); }
  .sm-bh.sm-ph[data-thema="licht"] .sm-ph-knop:hover { color: #ffffff; }
}
.sm-ph-knop:focus-visible, .sm-ph-knop.is-tik { background: var(--ph-knop-hover); }
.sm-ph-knop:focus-visible .sm-ph-pijlen svg, .sm-ph-knop.is-tik .sm-ph-pijlen svg { transform: translateX(34px); }
.sm-ph-knop:focus-visible .sm-ph-pijlen svg + svg, .sm-ph-knop.is-tik .sm-ph-pijlen svg + svg { transform: translateX(0); }
.sm-bh.sm-ph[data-thema="licht"] .sm-ph-knop:is(:focus-visible, .is-tik) { color: #ffffff; }
.sm-ph-knop:focus-visible, .sm-ph-chip:focus-visible { outline: 2px solid var(--ph-lime); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-ph-pijlen svg { transition: none; }
}

/* de tweede knop is de ringknop van de rest van de site (sm-base.css en de
   .sm-bh-regels in sm-boog-hero.css); hier alleen even hoog als de hoofdknop */
.sm-ph .sm-ph-knoppen .sm-btn { min-height: 54px; }

/* de chip rechtsboven: springt naar de video */
.sm-ph-chip {
  position: absolute; z-index: 4; top: 112px; right: max(32px, (100% - var(--ph-breed)) / 2);
  display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px 0 6px; border-radius: 11px;
  background: var(--ph-vlak); box-shadow: inset 0 0 0 1px var(--ph-rand); color: var(--ink);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: box-shadow .3s;
}
.sm-ph-chip-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #3DC78F; color: var(--ph-inkt); } /* groen, niet lime: lime is voor de hoofdknoppen */
.sm-ph-chip-ico svg { display: block; width: 13px; height: 13px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .sm-ph-chip:hover { box-shadow: inset 0 0 0 1px #3DC78F; } }
:root:has(.sm-ph) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { :root:has(.sm-ph) { scroll-behavior: auto; } }

/* =========================================================
   Pagina-palet: geldt alleen op een pagina met deze hero.
   Lime voor het accentwoord in de koppen, de nummers 01, 02 ...
   bij "wat het oplevert" en (sinds 17-10-2026) de labels boven de
   secties (01 Jouw keuze, 03 Diensten, 08 Over John ...). Groen
   blijft voor het bolletje dat meeloopt met scrollen; de knoppen
   van de secties blijven zoals ze zijn.
   Lime op wit leest niet: in de lichte stand blijft alles zoals
   het was.
   ========================================================= */
body:has(.sm-ph:not([data-thema="licht"])) :is(.sm-rs-groen, .sm-uit-groen, .sm-tl-groen, .sm-tk-groen, .sm-rv-groen, .sm-in-groen, .sm-pk-kopaccent, .sm-km-kopaccent, .sm-vw-kopaccent) {
  background: none; color: #d2f65a;
}
body:has(.sm-ph:not([data-thema="licht"])) .sm-uit-nr { color: #d2f65a; }
body:has(.sm-ph:not([data-thema="licht"])) .sm-badge { --sm-badge-accent: #d2f65a; }
/* het label van "wat het oplevert" heeft een eigen vlak en rand: gelijk aan de andere labels */
body:has(.sm-ph:not([data-thema="licht"])) .sm-rs-badge { background: color-mix(in srgb, #d2f65a 9%, transparent); border-color: color-mix(in srgb, currentColor 16%, transparent); }

/* ---------- onder de hero: video, logo's, werk ---------- */
.sm-ph-video { position: relative; z-index: 3; scroll-margin-top: 96px; }
.sm-ph .sm-ph-video .smv4-vid { max-width: 980px; margin-top: 0; padding-bottom: 56px; }

.sm-ph-band {
  width: min(var(--ph-breed), 100% - 32px); margin: 0 auto 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.sm-ph-band { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.sm-ph-band img { -webkit-user-drag: none; }
/* zonder script lopen de banden met css: logo's naar links, het werk naar rechts;
   met script (.sm-ph-js) beweegt sm-portret-hero.js ze, en draaien ze om bij aanraken */
.sm-ph-loop { display: flex; width: max-content; animation: sm-ph-loop var(--ph-duur, 46s) linear infinite; }
.sm-ph-werk .sm-ph-loop { animation-direction: reverse; }
.sm-ph-js .sm-ph-loop { animation: none; will-change: transform; }
.sm-ph-reeks { display: flex; align-items: center; flex: 0 0 auto; }
@keyframes sm-ph-loop { to { translate: -50% 0; } }

.sm-ph-logos { padding: 26px 0; border-radius: 20px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.sm-bh.sm-ph[data-thema="licht"] .sm-ph-logos { background: rgba(13, 21, 18, .035); box-shadow: inset 0 0 0 1px rgba(13, 21, 18, .08); }
.sm-ph-logos .sm-ph-reeks { gap: 72px; padding-right: 72px; }
.sm-ph img.sm-ph-logo {
  display: block; flex: 0 0 auto; height: var(--h, 30px); width: auto; max-width: 260px; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .72;
}
.sm-bh.sm-ph[data-thema="licht"] img.sm-ph-logo { filter: brightness(0); opacity: .66; }

.sm-ph-werk { --ph-duur: 70s; margin-bottom: 72px; }
.sm-ph-werk .sm-ph-reeks { gap: 14px; padding-right: 14px; }
.sm-ph-kaart { flex: 0 0 auto; height: 220px; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); }
.sm-ph-kaart img { display: block; height: 100%; width: auto; max-width: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-ph-loop { animation: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-ph-band { overflow-x: auto; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-ph-reeks[aria-hidden="true"] { display: none; }
}

/* ---------- tablet liggend: smaller portret, kleinere kop ---------- */
@media (max-width: 1199px) {
  .sm-ph-foto { height: 80%; right: -40px; }
  .sm-ph .sm-ph-kop { max-width: 12ch; }
  .sm-ph-rij { grid-template-columns: 1fr; gap: 28px; max-width: 470px; }
  .sm-ph-knoppen { order: -1; }
}

/* ---------- telefoon en tablet staand: portret boven, tekst eronder ---------- */
@media (max-width: 809px) {
  /* Het portret houdt zijn maat (340 tot 540 px, zoals altijd) en staat onder de
     balk. De kop en de knoppen schuiven er net zo ver over dat de knoppen in het
     eerste scherm staan (de regel eronder mag eronder vallen), maar nooit hoger
     dan de kin (65% van de foto). Pas als dat niet past, wordt het portret
     kleiner. --ph-h = de schermhoogte; ingelogd gaat de werkbalk eraf.
     379 px = ruimte boven (72) + subregel, kop en knoppen (ongeveer 291) + 16 marge.
     De overlap gebruikt 20 px minder (359, minimaal 40): de tekst staat een tikje
     lager (John 15-10), de knoppen blijven in beeld. */
  .sm-ph-hero { --ph-h: 100svh; flex-direction: column; align-items: stretch; min-height: 0; padding: 72px 0 36px; }
  body.admin-bar .sm-ph-hero { --ph-h: calc(100svh - 46px); }
  .sm-ph .art--regen {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .18) 58%, transparent 74%);
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .18) 58%, transparent 74%);
  }
  .sm-ph-foto {
    --ph-p: min(clamp(340px, 104vw, 540px), max(160px, calc((var(--ph-h) - 379px) * 1.49)));
    position: relative; right: auto; bottom: auto; flex: none; height: var(--ph-p);
    margin: 0 auto calc(-1 * clamp(40px, calc(var(--ph-p) + 359px - var(--ph-h)), calc(var(--ph-p) * .33)));
  }
  /* de tekst kan over hals en polo vallen: de onderkant vervaagt eerder en de kleine tekst krijgt een zachte schaduw */
  .sm-ph-foto img.sm-ph-img {
    -webkit-mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .4) 84%, transparent 98%);
    mask-image: linear-gradient(180deg, #000 66%, rgba(0, 0, 0, .4) 84%, transparent 98%);
  }
  .sm-ph-sub, .sm-ph-tekst { text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
  .sm-ph-in { width: min(100% - 40px, 560px); }
  .sm-ph-chip { top: 93px; right: 20px; height: 38px; font-size: 12px; } /* 12px onder de header, die nu altijd een eigen vlak heeft */
  .sm-ph-sub { margin-bottom: 14px; font-size: 11.5px; }
  .sm-ph .sm-ph-kop { max-width: none; font-size: clamp(2.05rem, 9.4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
  .sm-ph-rij { margin-top: 26px; gap: 22px; max-width: none; }
  .sm-ph-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .sm-ph-knop { justify-content: space-between; padding-left: 16px; gap: 10px; }
  .sm-ph .sm-ph-knoppen .sm-btn { padding-inline: 12px; font-size: 15px; white-space: nowrap; }
  .sm-ph-tekst { font-size: 15px; line-height: 1.6; }
  .sm-ph-hero::after { height: 90px; }
  .sm-ph-logos { padding: 20px 0; border-radius: 16px; }
  .sm-ph-logos .sm-ph-reeks { gap: 48px; padding-right: 48px; }
  .sm-ph img.sm-ph-logo { height: calc(var(--h, 30px) * .82); }
  .sm-ph-kaart { height: 150px; border-radius: 12px; }
  .sm-ph-werk { margin-bottom: 48px; }
}
/* lage telefoonschermen: de foto wordt klein, dan valt de chip over het gezicht; de video staat er vlak onder */
@media (max-width: 809px) and (max-height: 620px) {
  .sm-ph-chip { display: none; }
}
/* smalle telefoons: de knoppen onder elkaar als ze niet naast elkaar passen */
@media (max-width: 359px) {
  .sm-ph-knoppen { grid-template-columns: 1fr; }
}