/* Split content — generic reusable two-column section: content on one
   side, a generic media slot on the other. Knows nothing about what's
   inside .split-content__media (image, video, illustration, animation,
   marquee, etc.) and nothing about the specific copy inside
   .split-content__content — both are populated per-instance in the page
   markup. Default order is content | media; add .split-content--reverse
   to flip the visual order to media | content (DOM order always stays
   content-first for semantics/reading order — only the visual position
   changes, via `order`). */

.split-content {
  width: 100%;
  padding: var(--space-section-l) 0; /* 144px */
  box-sizing: border-box;
}

.split-content__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-section-s); /* 96px */
  max-width: var(--page-container-outer);
  padding-inline: var(--page-gutter);
  margin: 0 auto;
  box-sizing: border-box;
}

.split-content__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px between header and body */
  min-width: 0;
}

.split-content__media {
  position: relative;
  min-width: 0;
}

/* Centred-static-image variant of the media slot — for a single still
   image shown at its own natural size within the column (Why choose us'
   MIA logo, Figma node 18595:10442) rather than a full-bleed marquee/photo
   filling it edge-to-edge. 416px matches that Figma frame's own media
   height. */
.split-content__media--center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 416px;
}

.split-content__media--center img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.split-content--reverse .split-content__media {
  order: -1;
}

/* ---- Content side ---- */

.split-content__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Typography/padding/radius come from .eyebrow (css/style.css) — this
   section sits on a white background, so its eyebrow needs the grey chip
   instead of .eyebrow's white default. Same reasoning/pattern as
   .self-service__eyebrow (css/home.css). Add this modifier per-instance
   only when the section's background is actually white. */
.split-content__eyebrow {
  background: var(--colour-grey-101);
}

/* Typography comes from .text-h2 (css/typography.css). */
.split-content__heading-dark {
  color: var(--colour-header-grey);
}

.split-content__heading-accent {
  color: var(--colour-brand-teal);
}

/* 557px matches the Figma source's own text-block width (narrower than
   the 592px column it sits in) — kept as a max-width rather than a fixed
   width so it still shrinks naturally on narrower columns. */
.split-content__body {
  display: flex;
  flex-direction: column;
  max-width: 557px;
}

/* Typography comes from .text-body-xl / .text-body (css/typography.css). */
.split-content__lead {
  margin: 0 0 20px;
  color: var(--colour-body-grey);
}

.split-content__text {
  margin: 0;
  color: var(--colour-body-grey);
}

/* Background modifier — .split-content defaults to a transparent/white
   surface (Insurance's "Types of vessels covered", its first instance);
   the Why choose us "Supporting a thriving marine industry" section
   (Figma node 18595:10442) sits on --colour-grey-200 instead, so that's a
   modifier rather than a hardcoded default two different pages would
   fight over — same pattern as .text-columns--grey-200
   (css/category-page.css). */
.split-content--grey-200 {
  background: var(--colour-grey-200);
}

/* ---- Responsive ----
   Same stepping as the site's other two-column sections: the desktop 96px
   column gap tightens first, then the columns stack at tablet portrait —
   below 1024px a 50/50 split leaves the copy column too narrow to hold
   its lead paragraph and the media too small to be worth showing beside
   it. Content always leads when stacked, including in the --reverse
   variant (reading order over visual order). */

@media (max-width: 1279px) {
  .split-content {
    padding: var(--space-section-s) 0; /* 96px, down from 144px */
  }

  .split-content__inner {
    gap: var(--space-6xl); /* 64px */
  }
}

@media (max-width: 1023px) {
  .split-content__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5xl); /* 42px between the stacked rows */
  }

  .split-content--reverse .split-content__media {
    order: 0;
  }

  .split-content__body {
    max-width: 100%;
  }

  /* The centred-image variant's fixed 416px slot is a desktop column
     height — once stacked it only needs to be as tall as its image. */
  .split-content__media--center {
    height: auto;
  }
}

@media (max-width: 767px) {
  .split-content {
    padding: var(--space-section-xxs) 0; /* 64px */
  }

  .split-content__inner {
    gap: var(--space-3xl); /* 32px */
  }
}