/* CTA kolommen — twee panelen naast elkaar (o.a. obligatiehouder + nieuwsbrief) */

.block-cta-columns {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.block-cta-columns.cta-columns--with-margin {
  margin-bottom: 80px;
}

.cta-columns__inner {
  display: flex;
  gap: 32px;
  align-items: stretch;
}

.cta-col {
  position: relative;
  flex: 1 1 50%;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

.cta-col__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

/* ===== Kleurstijlen ===== */
.cta-col--donker      { background-color: var(--secondary-color, #482b06); color: var(--beige-color, #f0eae1); }
.cta-col--goud        { background-color: var(--primary-color, #f4b32d);   color: var(--dark-color, #25190a); }
.cta-col--beige       { background-color: var(--beige-color, #f0eae1);     color: var(--dark-color, #25190a); }
.cta-col--wit         { background-color: var(--white-color, #ffffff);     color: var(--dark-color, #25190a); }
.cta-col--transparant { background-color: transparent; color: inherit; }
.cta-col--transparant .cta-col__inner { padding-left: 0; padding-right: 0; }

/* ===== Achtergrondafbeelding + leesbaarheidslaag ===== */
.cta-col--heeft-achtergrond::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
}

.cta-col--heeft-achtergrond::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cta-col--donker.cta-col--heeft-achtergrond::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--secondary-color, #482b06) 94%, transparent) 0%,
    color-mix(in srgb, var(--secondary-color, #482b06) 72%, transparent) 100%
  );
}

.cta-col--beige.cta-col--heeft-achtergrond::after,
.cta-col--wit.cta-col--heeft-achtergrond::after,
.cta-col--goud.cta-col--heeft-achtergrond::after {
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--beige-color, #f0eae1) 94%, transparent) 0%,
    color-mix(in srgb, var(--beige-color, #f0eae1) 78%, transparent) 100%
  );
}

/* ===== Wapenschild als subtiel watermerk ===== */
.cta-col--watermerk::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: -40px;
  bottom: -50px;
  width: 260px;
  height: 320px;
  background-image: url('/app/uploads/2025/08/sancti-adalberti-logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  opacity: 0.09;
  pointer-events: none;
}

/* Achtergrondafbeelding wint van het watermerk */
.cta-col--heeft-achtergrond.cta-col--watermerk::before {
  background-image: var(--cta-bg);
  background-size: cover;
  background-position: center;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 1;
}

/* ===== Typografie ===== */
.cta-col__titel {
  margin: 0;
  font-family: var(--h3-font-family, 'grenze gotisch');
  font-size: var(--h3-font-size, 36px);
  font-weight: var(--h3-font-weight, 400);
  line-height: 1.05;
  color: inherit;
}

.cta-col--donker .cta-col__titel { color: var(--primary-color, #f4b32d); }

.cta-col__tekst {
  max-width: 46ch;
  font-family: var(--body-font-family, 'lora');
  font-size: 18px;
  line-height: 1.6;
}

.cta-col__tekst p { margin: 0 0 12px; }
.cta-col__tekst p:last-child { margin-bottom: 0; }

/* Knop onderaan uitlijnen zodat beide kolommen even hoog ogen */
.cta-col__knop { margin-top: auto; padding-top: 8px; }

/* ===== Knop — eigen class, zodat WooCommerce's .button niet meelift ===== */
.cta-col__button {
  display: inline-block;
  font-family: var(--button-font-family, 'Lora');
  font-size: var(--button-font-size, 16px);
  font-weight: var(--button-font-weight, 700);
  text-transform: var(--button-text-transform, uppercase);
  letter-spacing: 0.5px;
  padding: var(--button-padding, 14px 28px);
  border-radius: var(--button-border-radius, 4px);
  text-decoration: none;
  transition: all 0.25s ease;
  border: none;
  background-color: var(--primary-color, #f4b32d);
  color: var(--dark-color, #25190a);
}

.cta-col__button:hover {
  background-color: var(--beige-color, #f0eae1);
  color: var(--dark-color, #25190a);
}

.cta-col--goud .cta-col__button {
  background-color: var(--secondary-color, #482b06);
  color: var(--beige-color, #f0eae1);
}

.cta-col--beige .cta-col__button,
.cta-col--wit .cta-col__button,
.cta-col--transparant .cta-col__button {
  background-color: var(--secondary-color, #482b06);
  color: var(--beige-color, #f0eae1);
}

.cta-col--beige .cta-col__button:hover,
.cta-col--wit .cta-col__button:hover,
.cta-col--transparant .cta-col__button:hover {
  background-color: var(--dark-color, #25190a);
}

/* ===== Formulier in een paneel ===== */
.cta-col__formulier { width: 100%; }
.cta-col__formulier form { width: 100%; }

/* ===== Mobiel ===== */
@media (max-width: 900px) {
  .cta-col__inner { padding: 40px 32px; }
}

@media (max-width: 768px) {
  .block-cta-columns { padding: 24px 16px; }
  .cta-columns__inner { flex-direction: column; gap: 20px; }
  .block-cta-columns.reverse-on-mobile .cta-columns__inner { flex-direction: column-reverse; }
  .cta-col__inner { padding: 32px 24px; }
  .cta-col__titel { font-size: 30px; }
  .cta-col--watermerk::before { width: 180px; height: 220px; right: -30px; bottom: -40px; }
}