/*
 * Media text - twee-koloms tekst + beeld blok.
 * --reverse zet het beeld links. Herbruikbaar (intro, aanpak, ...).
 */

.media-text {
  padding:    var(--space-24) 0;
  background: var(--color-bg-white);
}

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

.media-text__grid {
  display:               grid;
  grid-template-columns: 1.05fr 1fr;
  gap:                   var(--space-20);
  align-items:           center;
}

.media-text--reverse .media-text__visual {
  order: -1;
}

/* Compactere kop binnen het tekstblok (geen volledige sec-head marge) */
.media-text .sec-head {
  margin-bottom: var(--space-5);
}

.media-text__lead {
  margin:      0 0 var(--space-5);
  font-size:   var(--text-lg);
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-heading);
}

.media-text__prose {
  font-size: var(--text-base);
  color:     var(--color-text-meta);
}

/* Optionele tekst onder de kenmerken-lijst. */
.media-text__prose--after {
  margin-top: var(--space-8);
}

.media-text__visual {
  position:      relative;
  aspect-ratio:  4 / 4.4;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  background:    var(--color-primary);
}

.media-text__visual img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.media-text__visual--empty {
  background:
    radial-gradient(circle at 70% 30%, rgba(168, 204, 79, 0.20) 0%, transparent 55%),
    linear-gradient(135deg, #2a3133 0%, #1a1f21 100%);
}

@media (max-width: 960px) {
  .media-text__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
  }
  .media-text--reverse .media-text__visual {
    order: 0;
  }
  .media-text__visual {
    aspect-ratio: 16 / 10;
  }
}