/*
 * homeHero — de openingssectie van de homepage.
 *
 * Maten 1-op-1 van samdesign.nl (R9), gemeten op 1440px. Het verticale ritme
 * daar komt uit losse widget-marges; hier staat het als één reeks.
 */

.homeHero {
  margin-top: 80px;
}

.homeHeroInner {
  display: flex;
  flex-direction: column;
  row-gap: 50px;
}

.homeHeroContent {
  max-width: 825px;
}

.homeHeroEyebrow {
  margin: 0 0 20px;
  color: #a3a6b1;
  font-size: 25px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: -1.25px;
}

.homeHeroTitle {
  margin-bottom: 20px;
}

.homeHeroIntro {
  --introWidth: 530px;

  margin-bottom: 24.8px;
}

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

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

.homeHeroUsps 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".
 */
.homeHeroUsps 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 4px / 17px 14px no-repeat;
  color: rgba(9, 32, 65, 0.5);
  font-size: 18px;
  line-height: 22px;
}

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

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

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

/*
 * Hetzelfde blokje als in de topbar. Het staat hier apart en niet in main.css
 * omdat het buiten de homepage nergens terugkomt (R8).
 */
.heroRating {
  display: flex;
  align-items: center;
  column-gap: 7px;
  margin: 0;
  color: var(--colorTopbarText);
  font-size: 16px;
  line-height: 24px;
}

.heroRating > svg:first-child {
  flex: none;
  margin-right: 3px;
}

.heroRating > svg {
  flex: none;
}

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

/* ------------------------------------------------------------------
   Pijl naar beneden en de stempel
   ------------------------------------------------------------------ */

/*
 * 20px smaller dan de container: daar staat de stempel op samdesign.nl mee
 * uitgelijnd, en de pijl staat daardoor 10px links van het midden.
 */
.homeHeroAside {
  width: calc(100% - 20px);
}

/*
 * De stempel hangt over de videoband heen. Zonder deze z-index valt hij erachter
 * en zie je er nog maar een stuk van; op samdesign.nl staat hij er helemaal
 * overheen (daar met een z-index op het widget-omhulsel).
 */
.homeHeroStamp {
  z-index: 1;
}

.homeHeroScroll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin: 4px auto;
  color: var(--colorNavy);
}

.homeHeroScroll svg {
  flex: none;
}

.homeHeroStamp {
  position: relative;
  height: 30px;
}

.homeHeroStamp .stamp {
  right: 0;
  bottom: -60px;
  width: 185px;
  height: 185px;
}

.homeHeroStamp .stampText {
  width: 185px;
  height: 185px;
}

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

@media (max-width: 767px) {
  .homeHero {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .homeHeroInner {
    row-gap: 30px;
  }

  .homeHeroUsps li {
    font-size: 15px;
    line-height: 25px;
  }
}

@media (max-width: 630px) {
  .homeHeroStamp {
    display: none;
  }
}