/* "cards_split" layout: a square rounded image beside a copy column made of an eyebrow, a display
   heading and a stack of cards. Brand-neutral — colours come from the section's colour scheme and
   every gap, card padding and heading rhythm is a merchant setting. */
.cards-split { padding-block: var(--section-pad); }
.cards-split--pad-top { padding-bottom: 0; }
.cards-split--pad-bottom { padding-top: 0; }
.cards-split--pad-none { padding-block: 0; }
.cards-split {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
}
.cards-split .cards-split__inner { gap: var(--cards-split-gap, 44px); }
.cards-split__image { width: 100%; height: auto; }
.cards-split--image-end .cards-split__image { order: 2; }
.cards-split__heading { margin: var(--cards-split-heading-gap-top, 16px) 0 var(--cards-split-heading-gap-bottom, 24px); white-space: pre-line; }
.cards-split .cards-split__stack { gap: var(--cards-split-stack-gap, 14px); }
.cards-split__card { padding: var(--cards-split-card-pad, 22px); }
.cards-split__card-text { font-size: 15px; margin-top: var(--cards-split-card-gap, 6px); }
@media (max-width: 900px) {
  .cards-split .cards-split__inner { gap: var(--cards-split-gap-narrow, 28px); }
  .cards-split--image-end .cards-split__image { order: 0; }
}

/* Optional card frame: the split sits inside a padded surface instead of directly on the band.
   Off by default, so an unframed instance renders exactly as before. */
.cards-split__frame { padding: var(--cards-split-frame-pad, 28px); }
.cards-split__body { margin: 0; }
.cards-split__cta { margin-top: var(--cards-split-cta-gap, 22px); }
/* An empty block stack must not add a gap between the body copy and the CTA. */
.cards-split__stack:empty { display: none; }
@media (max-width: 900px) {
  .cards-split__frame { padding: var(--cards-split-frame-pad-narrow, 22px); }
  /* Keep the copy column first when the split stacks, even though the image leads in the DOM. */
  .cards-split--stack-image-last .cards-split__image { order: 2; }
}