/**
 * Split, image and copy.
 *
 * The grid, the image radius and the shadow, the 860px collapse to one column
 * – all of it is `.split` and `.split__media` in pages.css §5, and none of it
 * is repeated here. The heading composes `.section-title--m` and the eyebrow
 * `.eyebrow`, both from base.css §3.
 *
 * What is left is the tail under the paragraph, which the mock-ups carried in
 * four different page-scoped namespaces (`.p-chips`, `.p-office-links`, an
 * inline `page-hero__actions` borrowed out of context) for one component.
 */

/* Mock-ups inline `margin-block:var(--s-3)` on this heading, every time. */
.split-media__title {
  margin-block: var(--s-3);
}

/* Body copy sits a step back from the heading. The mock-ups inline
   `color:var(--ink-soft)` on the paragraph; inheriting from the wrapper covers
   a second paragraph and a list too. */
.split-media__body {
  color: var(--ink-soft);
}

/* --- Chip row. services.html `.p-chips` / `.p-chip`. ----------------------
   Not `.filter-pill`: this pill is a size up (--text-s against --text-xs) and
   lifts on hover, so it is a different object rather than the same one with a
   tweak. 44px is the WCAG tap-target floor, the same literal the kit's own
   `.link-cta` carries; there is no token for it. */
.split-media__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-block-start: var(--s-4);
}

.split-media__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55em 1.3em;
  border-radius: var(--r-pill);
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: var(--text-s);
  font-weight: 700;
  color: var(--ink-soft);
  transition:
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out-soft);
}

.split-media__chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

/* --- Button row. industries.html reused `.page-hero__actions` here, which is
   a hero class doing a body section's job; this is the same two rules under a
   name that belongs to this section. --------------------------------------- */
.split-media__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
}

/* --- Arrow links. about.html `.p-office-links`; partners.html and
   services.html are the same row with one item in it. `.link-cta` already
   carries its own tap target. ---------------------------------------------- */
.split-media__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-block-start: var(--s-4);
}