/*
 * Page hero - compacte inner-page hero (afbeelding of gradient)
 */

.page-hero {
  padding:    var(--space-6) var(--space-4) var(--space-8);
  background: var(--color-bg-white);
}

.page-hero__card {
  position:      relative;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  min-height:    380px;
  background:    var(--color-primary);
}

.page-hero__bg {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.page-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(95deg,
                rgba(26, 31, 33, 0.85) 0%,
                rgba(26, 31, 33, 0.55) 45%,
                rgba(26, 31, 33, 0.10) 100%);
}

/* Standaard: donkere (charcoal) fallback, gelijk aan de homepage-hero */
.page-hero__bg-gradient {
  position:   absolute;
  inset:      0;
  background:
    radial-gradient(circle at 8% 50%, rgba(0, 0, 0, 0.45) 0%, transparent 60%),
    linear-gradient(135deg, #2a3133 0%, #1a1f21 100%);
}

/* Eco-variant: groene gradient (informatie/duurzaamheid) */
.page-hero__bg-gradient--eco {
  background:
    radial-gradient(circle at 8% 50%,  rgba(26, 37, 21, 0.60) 0%, transparent 60%),
    radial-gradient(circle at 78% 28%, rgba(168, 204, 79, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 18% 88%, rgba(120, 159, 30, 0.22) 0%, transparent 55%),
    radial-gradient(circle at 95% 95%, rgba(168, 204, 79, 0.10) 0%, transparent 40%),
    linear-gradient(135deg, #2a3a1f 0%, #1a2515 100%);
}

.page-hero__deco {
  position:       absolute;
  right:          56px;
  top:            50%;
  transform:      translateY(-50%);
  opacity:        0.18;
  pointer-events: none;
}

.page-hero__deco svg {
  width:  280px;
  height: 280px;
  color:  var(--color-icon-green);
}

.page-hero__content {
  position:  relative;
  padding:   80px 72px;
  max-width: 760px;
  color:     #ffffff;
}

.page-hero__eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            12px;
  font-size:      var(--text-xs);
  font-weight:    var(--font-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--color-accent-pale);
  margin-bottom:  24px;
}

.page-hero__eyebrow-line {
  width:      36px;
  height:     1px;
  background: var(--color-accent-pale);
}

.page-hero__title {
  font-family:    var(--font-heading);
  font-size:      60px;
  line-height:    1.04;
  font-weight:    var(--font-extrabold);
  letter-spacing: -1.6px;
  margin:         0 0 22px;
  color:          #ffffff;
}

.page-hero__title-accent {
  color:       var(--color-icon-green);
  font-style:  italic;
  font-weight: var(--font-bold);
}

.page-hero__text {
  font-size:   17.5px;
  line-height: var(--leading-relaxed);
  max-width:   560px;
  margin:      0;
  color:       rgba(255, 255, 255, 0.88);
}

.page-hero__ctas {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-4);
  margin-top:  var(--space-8);
}

.page-hero__cta-secondary {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         var(--space-2) var(--space-2) var(--space-1);
  color:           var(--color-text-light);
  font-size:       15px;
  font-weight:     var(--font-semibold);
  text-decoration: none;
  border-bottom:   1px solid rgba(255, 255, 255, 0.4);
  transition:      border-color var(--transition-fast),
                   color var(--transition-fast);
}

.page-hero__cta-secondary:hover {
  color:        var(--color-icon-green);
  border-color: var(--color-icon-green);
}

.page-hero__cta-secondary svg {
  width:  16px;
  height: 16px;
}

/* ----------------------------------------
 * Responsive
 * ---------------------------------------- */

@media (max-width: 960px) {
  .page-hero__content {
    padding: 56px 32px;
  }
  .page-hero__title {
    font-size:      40px;
    letter-spacing: -1px;
  }
  .page-hero__deco {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: var(--space-4) var(--section-padding-x) var(--space-6);
  }
  .page-hero__card {
    min-height:    auto;
    border-radius: var(--radius-lg);
  }
  .page-hero__content {
    padding: 48px 24px;
  }
  .page-hero__title {
    font-size: 32px;
  }
  .page-hero__text {
    font-size: 16px;
  }
}