/* Extracted verbatim from ../../../css/style.css:1278-1316 (+ mobile override
   at css/style.css:2101-2117). Selectors are scoped to <split-section>'s own
   markup only — shared bases (.s-light/.s-dark/.hero-cta/etc.) live in
   bridge-tokens.css. */

.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.8rem;
  align-items: center;
}

.split-section.reversed .split-section-text {
  order: 2;
}

.split-section-text {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.split-section-text .label {
  margin-bottom: 0;
}

.split-section-text .hero-cta {
  margin-top: 0.8rem;
  align-self: flex-start;
}

.split-section-image {
  overflow: hidden;
  border-radius: 8px;
}

.split-section-image img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .split-section-image {
    order: -1;
  }

  .split-section-image img {
    aspect-ratio: 1 / 1;
  }

  .split-section.reversed .split-section-text {
    order: unset;
  }
}