/* Generic two-zone split: a content stack beside an optional image. Composes
   SectionHeader + Button, and can hold stacked [d35_card_icon] cards in its
   content slot. Vertical rhythm comes from the shared .d35-section utility; the
   dark band from .d35-section-dark. */
.d35-section-split__inner {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* Top-align so a long text column and a tall image line up at the top. */
  align-items: start;
}

/* Header-oben-Modus (alignment/layout gesetzt): der Standard-SectionHeader
   vollbreit über beiden Spalten — wie in allen anderen Sections. Abstand
   zum Grid = Spalten-Gap, damit die Section ein Raster fährt. */
.d35-section-split__header {
  width: min(100%, var(--d35-container));
  margin-inline: auto;
  padding-inline: var(--d35-gap);
  margin-bottom: clamp(1.75rem, 4vw, 3.5rem);
}

.d35-section-split--has-media .d35-section-split__inner {
  grid-template-columns: 1fr 1fr;
}

.d35-section-split--media-left .d35-section-split__media {
  order: -1;
}

.d35-section-split__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* The nested SectionHeader ships with card chrome + a max-width in its stacked
   layout; strip both so the heading block reads as flush section content. */
.d35-section-split__content .d35-section-header {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  max-width: none;
}

.d35-section-split__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Media: natural images keep their proportions; ratio variants crop to a box. */
.d35-section-split__media {
  min-width: 0;
}

.d35-section-split__media .d35-section-split__image,
.d35-section-split__media img,
.d35-section-split__media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--d35-radius);
}

/* Slot media (e.g. a brand-logo strip) has no intrinsic height like an image,
   so it centres vertically against the content stack instead of top-aligning. */
.d35-section-split__media--slot {
  align-self: center;
}

/* slot_align="start": prose beside prose (two-column SEO copy) top-aligns
   like a regular text spread instead of centring — and the slot adopts the
   content stack's vertical rhythm, so both columns run on the same grid. */
.d35-section-split__media--slot-start {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Margin-Reset in beiden Spalten — nur im Prosa-Modus (slot_align="start",
   Section trägt dann --slot-start): der Spalten-Rhythmus kommt allein aus
   dem Flex-Gap, nicht aus Browser-Margins der h*/p/ul-Tags — sonst laufen
   linke und rechte Spalte ungleich. Bestehende Splits ohne den Modus
   behalten ihr gewohntes Spacing. */
.d35-section-split__media--slot-start > *,
.d35-section-split--slot-start .d35-section-split__content > p,
.d35-section-split--slot-start .d35-section-split__content > h1,
.d35-section-split--slot-start .d35-section-split__content > h2,
.d35-section-split--slot-start .d35-section-split__content > h3,
.d35-section-split--slot-start .d35-section-split__content > h4,
.d35-section-split--slot-start .d35-section-split__content > h5,
.d35-section-split--slot-start .d35-section-split__content > h6,
.d35-section-split--slot-start .d35-section-split__content > ul,
.d35-section-split--slot-start .d35-section-split__content > ol {
  margin: 0;
}

.d35-section-split__media--ratio {
  overflow: hidden;
  border-radius: var(--d35-radius);
  background: var(--d35-color-light, #e9edf2);
}

.d35-section-split__media--ratio .d35-section-split__image,
.d35-section-split__media--ratio img,
.d35-section-split__media--ratio video {
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.d35-section-split__media--16-9 { aspect-ratio: 16 / 9; }
.d35-section-split__media--2-1 { aspect-ratio: 2 / 1; }
.d35-section-split__media--4-3 { aspect-ratio: 4 / 3; }
.d35-section-split__media--3-2 { aspect-ratio: 3 / 2; }
.d35-section-split__media--1-1 { aspect-ratio: 1 / 1; }
.d35-section-split__media--3-4 { aspect-ratio: 3 / 4; }
.d35-section-split__media--4-5 { aspect-ratio: 4 / 5; }

/* Icon cards in the content slot read as a plain vertical list (icon + heading +
   body), no card surface — like the feature blocks elsewhere. */
.d35-section-split__content .d35-card-icon-wrap {
  height: auto;
  min-height: 0;
}

.d35-section-split__content .d35-card-icon {
  padding: 0;
  background: transparent;
  border-radius: 0;
  height: auto;
  min-height: 0;
  align-items: flex-start;
}

.d35-section-split__content .d35-card-icon__text {
  color: var(--d35-color-muted);
}

/* Dark variant: recolour the plain icon cards so they stay readable on the band. */
.d35-section-split--dark .d35-card-icon,
.d35-section-split--dark .d35-card-icon__heading {
  color: #fff;
}

.d35-section-split--dark .d35-card-icon__icon {
  color: #fff;
}

.d35-section-split--dark .d35-card-icon__text {
  color: color-mix(in srgb, #fff 78%, transparent);
}

/* Mono brand logos follow the band like the icon cards: white on dark, their
   dark default on light. An explicit color attr (inline style) still wins. */
.d35-section-split--dark .d35-brand-logo--mono {
  color: #fff;
}

@media (max-width: 800px) {
  .d35-section-split--has-media .d35-section-split__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On narrow screens the image reads better above the content. */
  .d35-section-split--media-left .d35-section-split__media {
    order: 0;
  }
}