/*
 * components/split.css
 * Tekst og billede (blokken digirehab/tekst-billede): billede kant til kant i
 * den ene halvdel, tekst i den anden. Bygget ud fra forsidens problem- og
 * løsningssektion. Billedet står først i HTML'en, så det ligger øverst på mobil.
 */

.split {
  background-color: var(--color-bg-card);
  overflow: hidden;
}

.split__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 520px;
}

.split__image {
  overflow: hidden;
}

.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.split--focus-top .split__image img {
  object-position: center top;
}

.split__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3xl) var(--space-4xl) var(--space-3xl) var(--space-3xl);
}

/* Billede til højre: billedet flyttes visuelt, ekstra luft mod midten skifter side */
.split--image-right .split__image {
  order: 1;
}

.split--image-right .split__content {
  padding: var(--space-3xl) var(--space-3xl) var(--space-3xl) var(--space-4xl);
}

.split__content h2 {
  margin: 0 0 var(--space-lg);
}

/* Fri tekst (InnerBlocks): afsnit, tjekliste, knap */
.split__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.split__body p {
  color: var(--color-text-secondary);
  margin: 0;
}

.split__body > .checklist {
  margin: var(--space-sm) 0 0;
}

.split__body > .btn-group {
  margin-top: var(--space-xs);
}

@media (max-width: 1024px) {
  .split__inner {
    grid-template-columns: 1fr;
  }

  .split--image-right .split__image {
    order: 0;
  }

  .split__image img {
    height: 320px;
  }

  .split__content,
  .split--image-right .split__content {
    padding: var(--space-2xl) var(--space-xl);
  }
}