/*
 * Marketing UI Split section (Section Component)
 * Webflow: section_landing-plus on https://www.marta-platform.com/
 *
 * Composition (VERIFIED FROM WEBFLOW):
 *   section.mkt-split-section                 → .section_landing-plus
 *     .mkt-split-section__container           → .padding-global + .container-large
 *                                               + .padding-section-small
 *       article.mkt-split-card                → .component-marta_card
 *
 * This file owns only:
 *   section wrapper, background, horizontal padding, container width,
 *   vertical section spacing, responsive spacing.
 *
 * Do not duplicate Split card rules. The card keeps 2-column layout,
 * stacking, tone, media position, radius, overflow, inner padding, CTA.
 *
 * No shared .mkt-container exists in src/components/. Webflow
 * .container-large is not reused: on existing HTML pages ds-apply.css
 * remaps it to Figma 1220px. This section keeps Webflow 80rem / 1280px
 * as a local custom property (DESIGN SYSTEM GAP).
 *
 * NOT DEFINED / not implemented:
 *   padding-section-large as a section variant (PAGE-SPECIFIC spacing
 *   on some landing-plus instances)
 *   section tone / grey background (is-grey belongs to the card)
 *   hover, sticky, animation, JS
 */

.mkt-split-section {
  /* Webflow implementation values — not Figma Design System tokens */
  --mkt-split-section-container-max: 80rem; /* Webflow .container-large; 1280px at 16px root */
  --mkt-split-section-padding-block: 3rem; /* Webflow .padding-section-small; 48px — no --space-48 */
  --mkt-split-section-padding-inline-767: 1.25rem; /* Webflow .padding-global at 767px; 20px — no --space-20 */

  box-sizing: border-box;
  background-color: var(--color-standard-white); /* Webflow --full-white */
  padding-inline: var(--space-40); /* Webflow .padding-global 2.5rem */
}

.mkt-split-section__container {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mkt-split-section-container-max);
  margin-inline: auto;
  padding-block: var(--mkt-split-section-padding-block);
}

/* VERIFIED FROM WEBFLOW / DESIGN SYSTEM GAP — Figma has no marketing breakpoints */
@media screen and (max-width: 767px) {
  .mkt-split-section {
    padding-inline: var(--mkt-split-section-padding-inline-767);
  }

  .mkt-split-section__container {
    max-width: none; /* Webflow .container-large at 767px */
    padding-block: var(--space-32); /* Webflow .padding-section-small 2rem */
  }
}

@media screen and (max-width: 479px) {
  .mkt-split-section {
    padding-inline: var(--space-16); /* Webflow .padding-global 1rem */
  }
}