/* =========================================
   Bikeshift Img Hero
   Layout via Bootstrap, alleen visuele effecten hier
   ========================================= */

.img-hero {
  background: linear-gradient(to bottom, var(--green), var(--light-green) 60%, #f7f7f7 60%);
  padding-top: 150px;
}

/* Hero afbeelding: groter voor meer content-ruimte */
.img-hero__image-wrap {
  aspect-ratio: 21 / 10;
  min-height: 520px;
}

.img-hero__image {
  object-fit: cover;
  object-position: center center;
}

/* Op mobiel: focus iets links van het midden zodat gezicht in beeld komt */
@media screen and (max-width: 767px) {
  .img-hero__image {
    object-position: 20% center;
  }
}

/* Overlay: sterkere donkering vanaf het midden voor betere leesbaarheid */
.img-hero__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 50%, transparent 100%);
}

.img-hero__h1 {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 3.25em;
  font-weight: 900;
  line-height: 1.05;
  max-width: 14em;
}

/* Outline knop: witte achtergrond met pink border */
.btnCta.btnCta--outline,
.btnCta.btnCta--outline:link,
.btnCta.btnCta--outline:visited {
  background-color: #fff !important;
  color: var(--pink) !important;
  border: 2px solid var(--pink);
  padding: 6px 13px 7px 13px;
}

.btnCta.btnCta--outline:hover,
.btnCta.btnCta--outline:focus {
  background-color: var(--pink) !important;
  color: #fff !important;
}

/* Trust badges onder de hero */
.img-hero__badge-num {
  font-size: 1.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Odometer binnen badge: kleinere schaal, geen conflict met layout */
.img-hero__badge-num[data-odometer-element] {
  display: inline-flex;
  align-items: center;
}

.img-hero__badge-divider {
  width: 1px;
  height: 2.25em;
  background-color: rgba(0, 0, 0, 0.1);
}

/* Verberg dividers op mobiel waar badges wrappen */
@media screen and (max-width: 767px) {
  .img-hero__badge-divider {
    display: none;
  }
}

/* Responsive */
@media screen and (max-width: 991px) {
  .img-hero {
    padding-top: 100px;
  }

  .img-hero__bg-split {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
  }

  .img-hero__image-wrap {
    aspect-ratio: 16 / 11;
    min-height: 480px;
  }

  .img-hero__h1 {
    font-size: 2.25em;
  }
}

@media screen and (max-width: 767px) {
  .img-hero__image-wrap {
    aspect-ratio: auto;
    min-height: 520px;
  }

  .img-hero__h1 {
    font-size: 1.875em;
  }
}

@media screen and (max-width: 479px) {
  .img-hero__bg-split {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .img-hero__image-wrap {
    min-height: 560px;
  }

  .img-hero__h1 {
    font-size: 1.625em;
  }

  .img-hero__badges {
    padding-left: 1em;
    padding-right: 1em;
  }
}

/* Verberg de laatste divider van trust badges */
.trust-badges__divider:last-child {
  display: none;
}