/* ==========================================================================
   Blok: waarom V-Roofing. Maat voor maat uit het prototype (sectie 5): donkere sectie met optionele
   achtergrondfoto (70 % zwart), kop links, witte pijlerkaarten rechts en een fotoband met rechte randen.
   ========================================================================== */

.block-usp-pillars {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Met fotoband sluit de band aan op de onderrand van de sectie */
.block-usp-pillars:not(.block-usp-pillars--no-band) {
  padding-bottom: 0;
}

.block-usp-pillars__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.block-usp-pillars__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-black) 70%, transparent);
}

.block-usp-pillars__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-usp-pillars__grid {
  display: grid;
  row-gap: var(--sp-12);
}

.block-usp-pillars__lead {
  margin-top: var(--sp-5);
  color: var(--color-silver);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.block-usp-pillars__link {
  margin-top: var(--sp-8);
}

.block-usp-pillars__items {
  display: grid;
  gap: var(--sp-12) var(--sp-8);
}

.block-usp-pillars__item {
  padding: var(--sp-6);
  background: var(--color-white);
  color: var(--color-black);
}

.block-usp-pillars__icon {
  width: var(--sp-6);
  height: var(--sp-6);
  fill: var(--color-primary-dark);
}

.block-usp-pillars__item h3 {
  margin-top: var(--sp-5);
}

.block-usp-pillars__item p {
  margin-top: var(--sp-3);
  color: var(--color-gray);
}

.block-usp-pillars__band-wrap {
  margin-top: var(--sp-16);
}

.block-usp-pillars__band {
  height: 14rem;
  overflow: hidden;
  background: var(--color-charcoal-2);
}

.block-usp-pillars__band-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}

@media (min-width: 40em) {
  .block-usp-pillars__items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .block-usp-pillars__band {
    height: 18rem;
  }
}

@media (min-width: 64em) {
  .block-usp-pillars__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sp-8);
  }

  .block-usp-pillars__head {
    grid-column: span 4;
  }

  .block-usp-pillars__items {
    grid-column: span 8;
    padding-left: var(--sp-8);
  }

  .block-usp-pillars__item {
    padding: var(--sp-8);
  }

  .block-usp-pillars__band-wrap {
    margin-top: var(--sp-24);
  }

  .block-usp-pillars__band {
    height: 360px;
  }
}