/*
 * Outro CTA - afsluitende call-to-action.
 * Gebruikt de gedeelde .dark-card shell; hier alleen de outro-specifieke layout.
 */

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

/* Zonder voorafgaande voordelen-sectie ontbreekt de bovenruimte; dan zelf een
 * top-marge zodat de outro niet tegen de vorige sectie plakt. */
.outro-cta--top-space {
  padding-top: var(--space-24);
}

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

.outro-cta__grid {
  position:              relative;
  display:               grid;
  grid-template-columns: 1.4fr 1fr;
  gap:                   var(--space-16);
  align-items:           center;
}

/* Eyebrow-kleur op donker → .dark-card .sec-head__eyebrow (dark-card.css) */

.outro-cta__actions {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

/* ----------------------------------------
 * Variant met video: tekst + knop links, video rechts
 * ---------------------------------------- */

.outro-cta__grid--video {
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-12);
}

/* Knop(pen) onder de tekst i.p.v. in een eigen kolom. */
.outro-cta__actions--inline {
  flex-direction: row;
  flex-wrap:      wrap;
  margin-top:     var(--space-6);
}

.outro-cta__video {
  width: 100%;
}

@media (max-width: 960px) {
  .outro-cta__grid {
    grid-template-columns: 1fr;
    gap:                   var(--space-10);
  }
  .outro-cta__grid--video {
    grid-template-columns: 1fr;
    gap:                   var(--space-8);
  }
}