/* ============================================
   Homepage: hero en teamblok. Gedeelde blokken staan in components/blocks.css.
   ============================================ */

/* --- Hero ----------------------------------------------------------------- */
.h2-hero {
  padding-block: clamp(40px, 6vw, 80px);
  background: var(--color-primary);
  color: var(--color-white);
}
.h2-hero__grid { display: grid; gap: 40px; align-items: center; }
.h2-hero__title {
  margin: 0 0 20px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: clamp(38px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.h2-hero__lead {
  max-width: 34em;
  margin: 0 0 32px;
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-main);
  font-size: 18px;
  line-height: 1.7;
}
.h2-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.h2-hero__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: 700;
}
.h2-hero__phone .icon { width: 18px; height: 18px; fill: var(--color-accent); }
.h2-hero__phone:hover span { text-decoration: underline; }

.h2-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 36px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}
.h2-hero__trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 500;
}
.h2-hero__trust li > .icon { width: 16px; height: 16px; fill: var(--color-accent); }
.h2-hero__trust strong { color: var(--color-white); font-weight: 700; }
.h2-hero__reviews { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.h2-hero__reviews span { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 3px; }
.h2-hero__reviews:hover span, .h2-hero__reviews:focus-visible span { text-decoration-color: var(--color-accent); }

.h2-hero__media { position: relative; margin: 0; }
.h2-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: var(--h2-radius);
  box-shadow: var(--h2-shadow);
}
/* Mobiel en tablet: teamfoto bovenaan, rand tot rand, loopt over in de donkere achtergrond */
@media (max-width: 1023px) {
  .h2-hero { padding-top: 0; }
  .h2-hero__grid { gap: 20px; }
  .h2-hero__media { order: -1; margin-inline: calc(-1 * var(--h2-gutter)); }
  .h2-hero__media img {
    max-height: 56vh;
    object-position: 50% 50%;
    border-radius: 0;
    box-shadow: none;
  }
  .h2-hero__media::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 38%;
    background: linear-gradient(rgba(75, 78, 80, 0), var(--color-primary));
    pointer-events: none;
  }
  .h2-hero__title { margin-bottom: 14px; font-size: clamp(31px, 8.6vw, 44px); }
  .h2-hero__lead { margin-bottom: 24px; font-size: 16px; }
  .h2-hero__trust { margin-top: 28px; padding-top: 20px; }
}
@media (min-width: 1024px) {
  .h2-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
  .h2-hero__media img { aspect-ratio: 5 / 4; }
}

/* --- Team ----------------------------------------------------------------- */
.h2-team__grid { display: grid; gap: 48px; align-items: center; }
.h2-team__photos {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
}
.h2-team__photos picture { display: block; min-width: 0; }
.h2-team__photos picture:nth-child(3) { grid-column: 1 / -1; }
.h2-team__photos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--h2-radius);
}
.h2-team__p1 { aspect-ratio: 4 / 3; }
.h2-team__p2 { aspect-ratio: 4 / 3; object-position: 70% 50%; }
.h2-team__p3 { aspect-ratio: 16 / 7; object-position: 50% 60%; }

.h2-team__quote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--color-accent);
}
.h2-team__quote blockquote { margin: 0; }
.h2-team__quote p {
  margin: 0 0 6px;
  color: var(--h2-ink);
  font-family: var(--font-main);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
}
.h2-team__quote figcaption { color: var(--h2-muted); font-family: var(--font-main); font-size: 13px; }

.h2-team__person { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.h2-team__person img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--color-primary);
}
.h2-team__person p { margin: 0; color: var(--h2-muted); font-family: var(--font-main); font-size: 14px; line-height: 1.4; }
.h2-team__person strong { display: block; color: var(--h2-ink); font-size: 16px; }

@media (min-width: 1024px) {
  .h2-team__grid { grid-template-columns: 1.05fr 1fr; gap: 72px; }
}