/* S5 — Bewijs / testimonials (cream)
   Kopgroep links · navy duo-bewijspaneel + Google-rij · paper CTA-balk.
   Kop = standaard navy Anton + oranje punt (sitebrede kop-behandeling).

   BIJ 2026-08-20. De twee videokaarten zijn eruit tot de opnames er zijn; het
   paneel dat ervoor in de plaats staat is het GEDEELDE svc-proof-contract uit
   css/sections/svc-proof.css, hetzelfde blok als op ws5 en rpo5. Wat hieronder
   nieuw is, is alleen de Google-beoordeling: een pil ONDER het paneel, in het
   lichte vlak, tussen het paneel en de CTA-balk (.s5-google).

   DE .s5-card- EN .s5-watch-REGELS BLIJVEN STAAN, EN DAT IS EEN KEUZE. Ze
   stijlen op dit moment niets, want de kaarten staan alleen nog verbatim in het
   commentaar van sections/s5.html. Ze komen terug zodra de video's er zijn, en
   dan hoort de opmaak er nog te zijn zoals hij was; weghalen en later
   herbouwen levert gegarandeerd een andere kaart op. */

/* ---------- Ritme: strak binnen het lichte middenrif (Timo 2026-07-10) ---------- */

.s5.section {
  padding-block: var(--space-section-s);
}

/* ---------- Dots-decor (terugkerend thema) ---------- */

.s5 .container {
  position: relative;
}
.s5 .s5-dots {
  top: 6px;
  right: 64px;
}

/* ---------- Kopgroep ---------- */

.s5 .s5-head {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.s5 .s5-head .eyebrow {
  margin-bottom: 18px;
}
.s5 .s5-title-line {
  display: block;
}
.s5 .s5-lead {
  max-width: 46ch;
  margin-top: 24px;
}

/* ---------- Bewijspaneel (gedeeld svc-proof-contract) ---------- */

/* Het paneel zelf komt volledig uit css/sections/svc-proof.css; de homepage
   voegt er niets aan toe. Sinds de Google-pil ERONDER staat in plaats van erin
   (Timo 2026-08-20) is ook de `:last-child`-correctie op de rechterfiguur weer
   overbodig: het laatste kind van het paneel is opnieuw de tweede figure, dus
   de gedeelde regel klopt vanzelf. */

/* ---------- Google-beoordeling: pil onder het paneel ---------- */

.s5 .s5-google {
  margin-top: 22px;
  /* flex + fit-content en NIET inline-flex. Inline-flex maakt de pil inline-level,
     en dan zet de regelbox van de container er onzichtbare regelafstand omheen:
     gemeten werd de afstand tot het paneel 13px in plaats van de ingestelde 22, en
     tot de CTA-balk 37 in plaats van 32. Als blok kloppen de marges precies, en
     fit-content houdt hem toch net zo breed als zijn inhoud. */
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 11px 22px;
  /* Zelfde materiaal als de CTA-balk eronder, zodat de sectie leest als
     navy blok -> wit chipje -> witte band. */
  background: var(--surface-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  color: var(--text-strong);
  text-decoration: none;
  transition: border-color .25s ease;
}

.s5 .s5-google:hover {
  border-color: var(--orange-500);
}

/* Sterren: exact het footer-recept (.footer-stars in s10.css, .oa-footer-stars
   in o11.css), een maat groter omdat ze hier niet in een contactlijst staan
   maar de opening van een eigen element zijn. */
.s5 .s5-google-stars {
  display: inline-flex;
  gap: 2px;
  flex: none;
  color: var(--orange-500);
}
.s5 .s5-google-stars svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  display: block;
}

/* Cijfer en aantal wikkelen als eenheid. Losse broers en zussen breken op een
   smal scherm los van elkaar en dan staat "5 reviews" met een verweesde middot
   op een eigen regel. Het omhulsel draagt zelf geen tekst en is dus geen extra
   CMS-veld. */
.s5 .s5-google-score {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.s5 .s5-google-cijfer {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}

/* Het aantal staat stil achter het cijfer. Het scheidingsteken is een ::before
   en geen tekst in de HTML, om dezelfde reden als bij de oude .s5-watch-time:
   alles wat tekst is wordt een CMS-veld, en een middot die de klant kan
   wijzigen is een veld te veel. Ruimte aan BEIDE kanten, want de gap van de rij
   zit tussen de flexkinderen en niet binnen .s5-google-score. */
.s5 .s5-google-aantal {
  font-size: 13px;
  color: var(--text-muted);
}
.s5 .s5-google-aantal::before {
  content: "·";
  margin-inline: 8px;
  color: color-mix(in srgb, var(--text-muted) 60%, transparent);
}

/* Verticaal streepje tussen het cijfer en de link. Een leeg element en geen
   ::after op de score, want op mobiel valt de link naar een eigen regel en dan
   moet het streepje meeverdwijnen -- dat gaat met display:none op het element
   zelf, niet op andermans pseudo-element. */
.s5 .s5-google-scheider {
  flex: none;
  width: 1px;
  height: 18px;
  background: var(--line);
}

.s5 .s5-google-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.s5 .s5-google-link .arr {
  display: inline-flex;
  transition: transform .18s ease;
}
.s5 .s5-google-link .arr svg {
  display: block;
}
.s5 .s5-google:hover .arr {
  transform: translate(2px, -2px);   /* diagonaal, past bij de ↗ */
}
@media (prefers-reduced-motion: reduce) {
  .s5 .s5-google,
  .s5 .s5-google-link .arr { transition: none; }
  .s5 .s5-google:hover .arr { transform: none; }
}

/* ---------- Videokaarten (rusten tot de opnames er zijn, zie het kopcommentaar) ---------- */

.s5 .s5-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-sm);
  margin-top: var(--gap-sm);
}

.s5 .s5-card {
  position: relative;
  display: flex;
  /* 430 -> 390 nu de pill eruit is (Timo 2026-08-18). De kaart droeg vier
     blokken boven elkaar en houdt er nog twee over; op 430 viel er een gat
     tussen de quote en de onderregel. Op 390 blijft het gezicht ruim in beeld
     en staat de quote niet meer los van de naam. */
  min-height: 390px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-950);
}

.s5 .s5-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
  /* Hover-zoom: alleen de thumb scalet, binnen het kader (overflow hidden
     op .s5-card); scrim/inner zijn siblings en blijven staan */
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

.s5 .s5-card:hover .s5-card-img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .s5 .s5-card-img { transition: none; }
  .s5 .s5-card:hover .s5-card-img { transform: none; }
}

/* Donkere overlay links, zodat quote en naam leesbaar blijven
   (iets versterkt nu de overlay meer content draagt) */
.s5 .s5-card-scrim {
  position: absolute;
  inset: 0;
  /* Twee lagen. De horizontale is de oude en draagt de quote links. De
     verticale is er sinds 18 augustus bijgekomen omdat naam en rol naar
     rechtsonder zijn verhuisd: daar hield de horizontale gradient op bij 74%,
     dus de tekst stond op de kale foto. Nu leunt hij nergens op de toevallige
     helderheid van een still, en dat blijft gelden als deze twee stills straks
     door echte klantvideo's worden vervangen. */
  background:
    linear-gradient(
      to top,
      color-mix(in srgb, var(--navy-950) 78%, transparent) 0%,
      color-mix(in srgb, var(--navy-950) 34%, transparent) 22%,
      color-mix(in srgb, var(--navy-950) 0%, transparent) 42%
    ),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--navy-950) 86%, transparent) 0%,
      color-mix(in srgb, var(--navy-950) 64%, transparent) 38%,
      color-mix(in srgb, var(--navy-950) 0%, transparent) 74%
    );
}

.s5 .s5-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 34px 44px 36px;
}

/* De pill linksboven (mini-play + VIDEOTESTIMONIAL + duur) is er op
   18 augustus 2026 uit. Hij benoemde wat je al ziet, en hij duwde de quote een
   halve kaart naar beneden. De duur leeft door als .s5-watch-time, naast de
   kijk-link. Regels staan in git. */

/* Groot decoratief dubbel aanhalingsteken (zelfde SVG als S6-quotekaart, blue-200) */
.s5 .s5-quote-mark {
  margin: 0 0 14px; /* eerste kind sinds de pill weg is */
  color: var(--blue-200);
}
.s5 .s5-quote-mark svg {
  display: block;
  width: 58px;
  height: auto;
}

.s5 .s5-quote {
  margin: 0 0 auto; /* margin-bottom auto duwt naam + play-rij naar onderen */
  max-width: 26ch;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-strong-inv);
}
.s5 .s5-quote p {
  margin: 0;
}

/* Onderrij: kijk-link links, naam en rol rechts. De HTML houdt de oude
   volgorde (naam eerst, dan de kijk-link) zodat de CMS-nummering niet
   opschuift; `order` draait alleen het beeld om. Zie het comment in s5.html. */
.s5 .s5-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap-sm);
  width: 100%;
  margin-top: 28px;
}

/* margin-left: auto en niet alleen space-between (Timo 2026-08-20). De kijk-rij is
   uit de kaart gehaald, dus deze footer heeft nog maar één kind, en space-between
   zet dat kind links terwijl de tekst erin rechts uitlijnt. De auto-marge duwt hem
   naar de rand in beide toestanden: nu alleen, en straks weer naast de kijk-rij
   zodra de video er is. */
.s5 .s5-person {
  order: 2;
  margin-left: auto;
  text-align: right;
}
.s5 .s5-person-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong-inv);
}
.s5 .s5-person-role {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted-inv);
}

.s5 .s5-watch {
  order: 1;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.s5 .s5-watch .play-btn {
  align-self: center;
}
.s5 .s5-watch .play-btn {
  width: 44px;
  height: 44px;
}
.s5 .s5-watch .play-btn::after {
  border-left-width: 12px;
  border-top-width: 7px;
  border-bottom-width: 7px;
  margin-left: 3px;
}
/* De duur staat rechts van de kijk-link en beantwoordt daar de vraag die je op
   dat moment stelt: kost dit me twee minuten of tien? Bewust stil gehouden, want
   hij mag niet met de link concurreren. Het scheidingsteken is een ::before en
   geen tekst in de HTML: alles wat tekst is wordt een CMS-veld, en een middot
   die de klant kan wijzigen is een veld te veel. */
.s5 .s5-watch-time {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums; /* 01:47 en 02:13 even breed */
  color: var(--text-muted-inv);
}
.s5 .s5-watch-time::before {
  content: "·";
  margin: 0 8px 0 0;
  color: color-mix(in srgb, var(--text-muted-inv) 60%, transparent);
}

.s5 .s5-watch-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong-inv);
  text-decoration: underline;
  text-decoration-color: var(--orange-500);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- CTA-balk (paper band) ---------- */

.s5 .s5-ctabar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin-top: 32px; /* dichter op de video's (Timo 2026-07-10) */
  padding: 24px 28px 24px 32px;
  background: var(--surface-card);
  border: 1px solid var(--line-paper);
  border-radius: var(--r-band);
  box-shadow: var(--shadow-card);
}

.s5 .s5-ctabar-left {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
}

.s5 .s5-avatars {
  display: flex;
  flex: none;
}
.s5 .s5-avatars li + li {
  margin-left: -14px;
}
.s5 .s5-avatars img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  object-fit: cover;
}

.s5 .s5-ctabar-divider {
  flex: none;
  width: 1px;
  height: 44px;
  background: var(--line);
}

.s5 .s5-ctabar-title {
  font-size: 22px;
}
.s5 .s5-ctabar-sub {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
}
.s5 .s5-ctabar-sub-line {
  display: block; /* tweede regel, per PNG; op mobiel gewoon doorlopend */
}

.s5 .s5-ctabar-btn {
  flex: none;
}
.s5 .s5-ctabar-btn .arr svg {
  display: block;
}
.s5 .s5-ctabar-btn:hover .arr {
  transform: translate(2px, -2px); /* diagonaal, past bij de ↗ */
}

/* ---------- Tablet ---------- */

@media (max-width: 880px) {
  .s5 .s5-dots {
    display: none; /* zou op smal scherm door de kop lopen */
  }
  .s5 .s5-cards {
    grid-template-columns: 1fr;
  }
  .s5 .s5-card {
    min-height: 400px;
  }
  .s5 .s5-ctabar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 28px;
  }
  .s5 .s5-ctabar-btn {
    flex: initial;
  }
}

/* ---------- Mobiel ---------- */

@media (max-width: 560px) {
  /* Onderrij weer op elkaar. Op een kaart van ~342px binnenwerk staan de
     kijk-link en "Managing Director, Advion" samen tegen de rand aan, en dan
     is rechts uitlijnen geen rust maar gedrang. Volgorde terug naar die van de
     HTML: naam boven, kijk-link eronder. */
  .s5 .s5-card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 24px;
  }
  .s5 .s5-person {
    order: 0;
    /* De kolom loopt hier verticaal, dus een auto-marge links zou het blok tegen
       de rechterrand duwen in plaats van tegen de linker. Terugzetten. */
    margin-left: 0;
    text-align: left;
  }
  .s5 .s5-watch {
    order: 0;
  }

  .s5 .s5-card {
    min-height: 380px;
  }
  .s5 .s5-card-inner {
    padding: 24px 24px 26px;
  }
  .s5 .s5-quote-mark {
    margin: 0 0 12px;
  }
  .s5 .s5-quote-mark svg {
    width: 46px;
  }
  .s5 .s5-card-img {
    object-position: 72% 50%;
  }
  /* Google-pil op mobiel: de linktekst past niet meer naast sterren plus cijfer
     plus aantal (samen ~300px op een scherm van 320), dus hij zakt naar een
     tweede regel. De pil wordt dan een afgerond blok in plaats van een streep,
     en het verticale streepje ertussen slaat nergens meer op. */
  .s5 .s5-google {
    width: auto;
    padding: 14px 20px;
    border-radius: var(--r-lg);
    gap: 10px 12px;
  }
  .s5 .s5-google-scheider {
    display: none;
  }
  .s5 .s5-google-link {
    width: 100%;
  }

  .s5 .s5-ctabar {
    padding: 24px 20px;
  }
  .s5 .s5-ctabar-left {
    flex-wrap: wrap;
    gap: 16px 20px;
  }
  .s5 .s5-ctabar-divider {
    display: none;
  }
  .s5 .s5-ctabar-sub-line {
    display: inline;
  }
  .s5 .s5-ctabar-btn {
    width: 100%;
    padding-inline: 16px;
  }
}