/* ===== Algemeen blok container ===== */
.block-image-text {
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}

/* ===== Kolommen layout ===== */
.block-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: stretch;
  height: 780px;
}

/* Als een van de kolommen image-only is → container niet forceren */
.block-container.has-image-only {
  height: auto;
}

.block-column {
  width: 50%;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  padding: 2rem;
  overflow: hidden;
  justify-content: center; /* fallback */
}

/* ===== Achtergrondkleur via CSS variable ===== */
.left-column {
  background-color: var(--block-left-background-color, transparent);
  color: var(--block-left-color, #000);
}

.right-column {
  background-color: var(--block-right-background-color, transparent);
  color: var(--block-right-color, #000);
}

/* ===== Achtergrondafbeelding div ===== */
.background-image {
  position: absolute;
  inset: 0;
  background-size: cover;        /* default: vullen */
  background-repeat: no-repeat;
  background-position: center;
  z-index: 0;
  width: 100%;
  height: 100%;
}

/* ===== Inner Containers ===== */
.block-left-inner-container,
.block-right-inner-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.5rem;
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  z-index: 2;
  position: relative;
  box-sizing: border-box;
}

.block-left-inner-container {
  text-align: var(--block-left-align-x, center);
  justify-content: var(--block-left-align-y, center);
  background-image: var(--block-left-inner-background);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.block-right-inner-container {
  text-align: var(--block-right-align-x, center);
  justify-content: var(--block-right-align-y, center);
  background-image: var(--block-right-inner-background);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ===== Teksten ===== */
.left-title-heading,
.right-title-heading {
  font-size: var(--h2-font-size, 36px);
  font-family: var(--h2-font-family, 'grenze gotisch');
  font-weight: var(--h2-font-weight, 400);
  text-transform: var(--h2-text-transform, none);
  line-height: var(--h2-line-height, 1.2);
}

.block-left-text,
.block-right-text {
  font-size: var(--hero-description-font-size, 20px);
  font-family: var(--hero-description-font-family, 'lora');
  font-weight: var(--hero-description-font-weight, 400);
  line-height: 1.4;
}

/* ===== Knoppen ===== */
.button-left,
.button-right {
  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);
  padding: var(--button-padding, 12px 24px);
  border-radius: var(--button-border-radius, 4px);
  text-decoration: none;
  transition: all 0.3s ease;
  align-self: flex-start;
  width: auto;
}

.button-left {
  background-color: var(--button-1-background-color, #000);
  color: var(--button-1-color, #fff);
  border: none;
}

.button-right {
  background-color: var(--button-3-background-color, transparent);
  color: var(--button-3-color, #000);
  border: var(--button-3-border, 1px solid #000);
}

/* ===== Vormscheiding ===== */
.block-column.has-vormscheiding.vormscheiding-boven::before,
.block-column.has-vormscheiding.vormscheiding-onder::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 24px;
  background-image: repeating-linear-gradient(
    -45deg,
    #8b1d1d,
    #8b1d1d 10px,
    transparent 10px,
    transparent 20px
  );
  z-index: 1;
}

.block-column.has-vormscheiding.vormscheiding-boven::before { top: 0; left: 0; }
.block-column.has-vormscheiding.vormscheiding-onder::after { bottom: 0; left: 0; }

/* ===== Tekstgrootte controle via ACF ===== */
.block-image-text.text-size--16px .block-left-text,
.block-image-text.text-size--16px .block-right-text { font-size: 16px; }

.block-image-text.text-size--20px .block-left-text,
.block-image-text.text-size--20px .block-right-text { font-size: 20px; }

/* ===== IMAGE-ONLY STYLES ===== */
/* Alleen wanneer PHP .is-image-only toevoegt */
.block-column.is-image-only {
  min-height: 578px;              /* vaste baseline, groeit mee indien nodig */
}
.block-column.is-image-only .background-image {
  background-size: cover;       /* hele afbeelding tonen */
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== Responsive ===== */
@media screen and (max-width: 768px) {
  .block-container {
    flex-direction: column;
    height: auto;                 /* container mag meeschalen */
  }

  .block-column {
    width: 100%;
    height: 100%;                /* bestaande mobile hoogte */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Image-only kolommen: geen fixed 580px, maar lagere baseline */
  .block-column.is-image-only {
    height: auto;
    max-height: 400px;
  }

  .background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  /* Image-only → benut volledige kolom en show contain */
  .block-column.is-image-only .background-image {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* voor het geval er toch <img> gebruikt wordt */
    background-size: cover;
  }

  .block-left-inner-container,
  .block-right-inner-container {
    position: relative;
    z-index: 2;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: auto;
    box-sizing: border-box;
  }
}

/* ===== Kolommen omdraaien op mobiel ===== */
@media screen and (max-width: 768px) {
  .block-image-text.reverse-on-mobile .block-container { flex-direction: column-reverse; }
}