/*
 * serviceHero — de openingssectie van een dienstenpagina.
 *
 * Links de kop, de inleiding met streepje, de USP's, de knop en het
 * Google-cijfer; rechts een video die 80px buiten zijn kolom uitsteekt, met de
 * stempel eronder; daaronder de pijl. Maten 1-op-1 van
 * https://www.samdesign.nl/website-laten-maken/ (R9), gemeten op 1440, 1024,
 * 767 en 390px.
 *
 * Er is een tweede vorm: staat er een beeld in plaats van een video, dan is de
 * kolom smaller en blijft hij binnen de rij. Die staat op de
 * webdesign-<stad>-pagina's (CLAUDE.md §30).
 *
 * Twee rijen met 164px ertussen, net als bij heroSection: de kolommen en
 * daaronder de pijl. Vanaf 1024px naar beneden vallen de video en de stempel
 * weg en staat de tekstkolom gecentreerd — dan is die 164 nog 40.
 */

.serviceHero {
  margin-top: 80px;
}

.serviceHeroInner {
  display: flex;
  flex-wrap: wrap;
  row-gap: 164px;
}

.serviceHeroInner > * {
  width: 100%;
}

/*
 * 610 + 60 + 610 = 1280, precies de container. De basis is 610 met krimp, zodat
 * dezelfde kolom onder 768px meegaat naar de 400 van containerNarrow.
 */
.serviceHeroRow {
  display: flex;
  column-gap: 60px;
}

/*
 * De stempel hangt hieraan; vandaar position: relative.
 *
 * `min-width: 0` haalt de `auto` weg die een flexitem standaard heeft: zonder
 * dat groeit de kolom mee met het langste woord in de kop, en dat is geen
 * theorie. "Webdevelopment:" is op 100px 783,8px breed, dus stond de tekstkolom
 * van /webdevelopment/ (§36) op 783,8 in plaats van 610 en brak de kop na twee
 * regels waar samdesign.nl er drie heeft. Daar loopt het woord gewoon over de
 * kolomrand heen, en dat doet het hiermee ook. De andere heroes merken er niets
 * van: hun langste woord past ruim binnen de 610.
 */
.serviceHeroContent {
  position: relative;
  flex: 0 1 610px;
  min-width: 0;
}

.serviceHeroTitle {
  max-width: var(--serviceHeroTitleWidth, none);
  margin-bottom: 20px;
}

.serviceHeroIntro {
  margin-bottom: 24.8px;
}

/*
 * Het streepje links van de inleiding is in de vorm met een beeld 114px hoog en
 * telt niet mee in de breedte. Op samdesign.nl is het daar een pseudo-element op
 * de alinea zelf — 1×114px, absoluut, links boven — en geen `border-left`; de
 * alinea heeft er alleen 30px marge naast. Nagemeten op /webdesign-amsterdam/,
 * /website-laten-maken-utrecht/, /website-scan/, /webdesign-pakketten/ en
 * /beste-website-bouwer-van-nederland/: overal 114.
 *
 * Dat scheelt twee dingen. De lijn loopt niet mee met een langere inleiding —
 * met de rand van `.sectionIntro` werd hij zo hoog als de tekst. En de tekst is
 * 320 breed in plaats van 319, want een border telt wél mee in de breedte. Die
 * ene pixel kostte op 390px een hele regel op /webdesign-pakketten/ (§37).
 *
 * De hero met een video (/website-laten-maken/) blijft de rand van
 * `.sectionIntro` houden; die is daar niet nagemeten.
 */
.serviceHeroHasImage .serviceHeroIntro {
  position: relative;
  border-left: 0;
}

.serviceHeroHasImage .serviceHeroIntro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 114px;
  background: currentColor;
}

/* ------------------------------------------------------------------
   USP's
   ------------------------------------------------------------------ */

.serviceHeroUsps {
  margin-left: 30px;
  margin-bottom: 28.6px;
}

.serviceHeroUsps ul {
  display: flex;
  flex-wrap: wrap;
  column-gap: 50px;
  row-gap: 10px;
}

/*
 * Het vinkje staat als achtergrond op de li en niet als los flex-item: in een
 * flexbox verdwijnt de witruimte tussen <strong> en de tekst erachter, en dan
 * plakt "12+ jaar" aan "in het vak".
 *
 * De maten komen uit de meting: op samdesign.nl zit het vinkje in een vakje van
 * 14 bij 14 dat 4px onder de bovenkant van de regel begint, en omdat de tekening
 * 16,819 bij 11,458 is staat hij daarin gecentreerd — dus 14 bij 9,5 op 6,2px.
 *
 * De tekst begint 22,5px van links en niet 17,5. Dat vakje is daar 17,5 breed
 * (14 voor de tekening en 3,5 witruimte erachter) en tussen dat vakje en de
 * tekst staat nóg een spatie, want in de markup van Elementor staat een
 * regeleinde tussen de twee spans. Gemeten op /website-laten-maken/ én op
 * /website-laten-maken/mobiele-website-laten-maken/: de `<strong>` begint daar op
 * x 132,5 met het vinkje op 110, en het item is 178,6 breed. Met 17,5 werd dat
 * 173,6 — 5px te smal, op beide pagina's (§33).
 */
.serviceHeroUsps li {
  padding-left: 22.5px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.819' height='11.458' viewBox='0 0 16.819 11.458'%3E%3Cpath d='M5.431 82.031a1.85 1.85 0 0 1-1.273-.5L.311 77.9a.96.96 0 0 1 0-1.415 1.106 1.106 0 0 1 1.5 0l3.621 3.417 9.579-9.039a1.106 1.106 0 0 1 1.5 0 .96.96 0 0 1 0 1.415L6.7 81.533a1.85 1.85 0 0 1-1.269.498' transform='translate(0 -70.573)' fill='%23dc0155'/%3E%3C/svg%3E") left 6.2px / 14px 9.5px no-repeat;
  color: rgba(9, 32, 65, 0.5);
  font-size: 18px;
  line-height: 22px;
}

.serviceHeroUsps strong {
  font-weight: 600;
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   Knop en reviewcijfer
   ------------------------------------------------------------------ */

.serviceHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

/* Hetzelfde blokje als in de topbar en in de hero van de homepage. */
.serviceHeroRating {
  display: flex;
  align-items: center;
  column-gap: 7px;
  margin: 0 0 20px;
  color: var(--colorTopbarText);
  font-size: 16px;
  line-height: 24px;
}

.serviceHeroRating > svg {
  flex: none;
}

.serviceHeroRating > svg:first-child {
  margin-right: 3px;
}

.serviceHeroRating a {
  color: var(--colorTopbarText);
  text-decoration: underline;
}

/* ------------------------------------------------------------------
   De video
   ------------------------------------------------------------------ */

/*
 * De kolom is 610 breed maar de video 690: hij steekt 80px naar links uit, over
 * de tekstkolom heen. Vandaar de basis van 690 met een negatieve marge van 80 —
 * samen nemen ze weer 610 van de rij in.
 *
 * `overflow: hidden` snijdt de 2px af die de video links en rechts breder is dan
 * zijn vak; dat doet samdesign.nl ook, om de randen van het filmpje kwijt te
 * raken.
 */
.serviceHeroMedia {
  flex: 0 1 690px;
  margin-left: -80px;
  overflow: hidden;
}

/*
 * De verhouding staat in CSS en de afmetingen staan in de markup, dus de ruimte
 * is gereserveerd voordat het filmpje er is (§9). De 7px eraf onderaan haalt de
 * laatste beeldrij weg, net als daar.
 */
.serviceHeroVideo {
  display: block;
  width: calc(100% + 4px);
  margin: 0 -2px -7px;
  aspect-ratio: 1.77777;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------------------------------------
   Het stilstaande beeld
   ------------------------------------------------------------------ */

/*
 * De webdesign-<stad>-pagina's hebben hier een beeld in plaats van een filmpje.
 * Die kolom is 556 breed met 50px ertussen (610 + 50 + 556) en steekt niet
 * buiten de rij uit, dus geen negatieve marge en geen uitsnede: het beeld houdt
 * zijn eigen verhouding, en `width`/`height` in de markup reserveren de ruimte
 * (§9, CLS = 0).
 *
 * Vanaf 1024px naar beneden valt hij weg langs dezelfde regel als de video.
 */
.serviceHeroHasImage .serviceHeroRow {
  column-gap: 50px;
}

/*
 * De ruimte tussen de kolommen en de pijl is hier 95 en niet 164. Gemeten op
 * 1440px: /website-laten-maken/ (de hero met de video) heeft 164,
 * /webdesign-amsterdam/ en /website-laten-maken-amsterdam/ (de hero met het
 * beeld) allebei 95. Het hoort dus bij deze vorm en niet bij de pagina.
 */
@media (min-width: 1025px) {
  .serviceHeroHasImage .serviceHeroInner {
    row-gap: 95px;
  }
}

/*
 * Twee maten die net als de row-gap hierboven bij deze vorm horen en niet bij de
 * pagina: de stempel hangt 92px buiten de tekstkolom in plaats van 145, en de
 * pijl staat in het midden van de sectie in plaats van 50px daarnaast. Alle drie
 * de families die deze hero gebruiken — /webdesign-<stad>/ (§30),
 * /website-laten-maken-<stad>/ (§31) en
 * /website-laten-maken/mobiele-website-laten-maken/ (§33) — zijn op samdesign.nl
 * hetzelfde Elementor-sjabloon (27225) met dezelfde element-id's, en daar staat
 * `right: -92px` en geen padding op de pijl. De hero met de video op
 * /website-laten-maken/ merkt hier niets van.
 */
.serviceHeroHasImage .serviceHeroStamp {
  right: -92px;
}

.serviceHeroHasImage .serviceHeroArrow {
  padding-left: 0;
}

.serviceHeroMediaImage {
  flex: 0 1 556px;
  margin-left: 0;
}

.serviceHeroImage {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------
   De stempel
   ------------------------------------------------------------------ */

/*
 * Een blok zonder hoogte tegen de onderrand van de tekstkolom, dat 145px verder
 * naar rechts loopt dan die kolom. De schijf staat daar rechts in en hangt er
 * 95px bovenuit, zodat hij onder de video terechtkomt zonder iets te verschuiven.
 */
.serviceHeroStamp {
  position: absolute;
  right: -145px;
  bottom: 15px;
  left: 0;
  z-index: 1;
  height: 0;
}

.serviceHeroStamp .stamp {
  position: relative;
  right: auto;
  bottom: auto;
  width: 124px;
  height: 124px;
  margin: -95px 0 -60px auto;
}

.serviceHeroStamp .stampText {
  width: 124px;
  height: 124px;
}

/* ------------------------------------------------------------------
   De pijl naar beneden
   ------------------------------------------------------------------ */

/*
 * De pijl staat in het midden van de ruimte die na de 100px links overblijft —
 * daardoor staat hij nét niet op het midden van de sectie. Zo staat het op
 * samdesign.nl; vanaf 1024px naar beneden valt die 100px weg.
 *
 * Het icoon is inline en niet block, want de hoogte van dit blok (42,5px) is de
 * regelhoogte van de body om een inline-blok van 35px heen.
 */
.serviceHeroArrow {
  padding-left: 100px;
  text-align: center;
}

.serviceHeroArrowIcon {
  display: inline-block;
  flex: none;
  width: 35px;
  height: 35px;
  color: var(--colorNavy);
}

/* ==================================================================
   Kleiner dan 1440
   ================================================================== */

@media (max-width: 1024px) {
  .serviceHeroInner {
    row-gap: 40px;
  }

  .serviceHeroRow {
    justify-content: center;
  }

  /* Vanaf hier laat samdesign.nl de video en de stempel weg. */
  .serviceHeroMedia,
  .serviceHeroStamp {
    display: none;
  }

  .serviceHeroArrow {
    padding-left: 0;
  }
}

/*
 * Onder 768px is de witregel onder de inleiding op samdesign.nl 7,5px korter dan
 * de tekst zelf: de negatieve marge onder het tekstblok blijft daar op 30px
 * staan terwijl de alinea naar 22,5 zakt. Zonder deze regel loopt alles eronder
 * 7,5px te laag.
 */
@media (max-width: 767px) {
  .serviceHeroIntro {
    margin-bottom: 17.3px;
  }

  /*
   * Twee regels van 26px zonder ruimte ertussen: zo is de rij op samdesign.nl
   * hier 52px hoog. De 26 is de regelbox om tekst van 15/25 heen.
   */
  .serviceHeroUsps ul {
    row-gap: 0;
  }

  .serviceHeroUsps li {
    font-size: 15px;
    line-height: 26px;
  }
}