/*
 * Quote feature - uitgelichte quote naast tekstblok
 */

.quote-feature {
  padding:    var(--space-24) 0;
  background: var(--color-bg-section);
}

.quote-feature__inner {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--section-padding-x);
}

.quote-feature__grid {
  display:               grid;
  grid-template-columns: 1fr 1.2fr;
  gap:                   var(--space-16);
  align-items:           center;
}

.quote-feature__quote {
  position:     relative;
  padding-left: var(--space-8);
  margin:       0;
}

.quote-feature__mark {
  position:       absolute;
  left:           0;
  top:            -16px;
  font-size:      180px;
  font-weight:    var(--font-extrabold);
  line-height:    1;
  letter-spacing: -8px;
  color:          var(--color-accent);
  opacity:        0.18;
  user-select:    none;
}

.quote-feature__lead {
  position:       relative;
  margin:         0;
  font-size:      var(--text-2xl);
  line-height:    1.45;
  font-weight:    var(--font-semibold);
  letter-spacing: -0.4px;
  color:          var(--color-text-heading);
}

.quote-feature__meta {
  display:     flex;
  gap:         var(--space-4);
  align-items: center;
  margin-top:  var(--space-6);
}

.quote-feature__dash {
  width:      28px;
  height:     2px;
  background: var(--color-accent);
}

.quote-feature__meta span:last-child {
  font-size:      var(--text-sm);
  font-weight:    var(--font-bold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color:          var(--color-accent);
}

/* Titel-only kop hugt de tekst eronder — kleinere tussenruimte dan een
 * sectiekop bóven een grid (zelfde 20px als media-text/guarantee). */
.quote-feature__body .sec-head {
  margin-bottom: var(--space-5);
}

/* Quote-kop is bewust iets kleiner dan een standaard sectiekop (ontwerp: 38px) */
.quote-feature__body .sec-head__title {
  font-size: 38px;
}

.quote-feature__body .prose {
  font-size: var(--text-base);
  color:     var(--color-text-meta);
}

@media (max-width: 960px) {
  .quote-feature__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
  }
}