/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
.wu-split__grid {
  display: grid;
  gap: var(--wu-split-gap, 32px);
  align-items: start;
}

.wu-split__text {
  min-width: 0;
  max-width: var(--wu-split-text-max, 760px);
}

.wu-split__head {
  margin-bottom: 0;
}

/* The words under the head: the paragraphs, the points and the link, each
   with its own space above (a child can move the points above the
   paragraphs with --wu-split-items-order: -1). */
.wu-split__main {
  display: flex;
  flex-direction: column;
}

.wu-split__main > * {
  margin: 0;
}

.wu-split__body {
  margin-top: var(--wu-split-body-top, 24px);
}

.wu-split__items {
  order: var(--wu-split-items-order, 0);
  margin-top: var(--wu-split-items-top, 24px);
}

.wu-split__more {
  margin-top: var(--wu-split-more-top, 28px);
}

.wu-split__text > .wu-split__main:first-child > * {
  margin-top: 0;
}

.wu-split__body p {
  max-width: var(--wu-split-measure, 62ch);
  margin: 0;
}

.wu-split__body p + p {
  margin-top: var(--wu-split-para-gap, 1em);
}

/* The points: plain items on hairlines. */
.wu-split__items {
  padding: 0;
  list-style: none;
}

.wu-split__item {
  padding-block: var(--wu-split-item-pad, 14px);
  border-top: var(--wu-split-item-rule, 1px solid var(--wu-line));
}

.wu-split__item > * {
  margin: 0;
}

.wu-split__title {
  display: block;
  color: var(--wu-split-title-colour, var(--wu-text));
  font: var(--wu-split-title-font, 600 17px/1.35 var(--wu-body));
}

.wu-split__line {
  margin-top: 4px;
  color: var(--wu-split-line-colour, var(--wu-muted));
  font-size: var(--wu-split-line-size, 16px);
}

.wu-split__badge {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
  line-height: 0;
}

.wu-split__badge-img {
  display: block;
  width: var(--wu-split-badge-width, 240px);
  max-width: 100%;
  height: auto;
}

/* The photograph and its caption. */
.wu-split__media {
  min-width: 0;
  margin: 0;
}

.wu-split__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--wu-split-ratio, 4/3);
  object-fit: cover;
  border-radius: var(--wu-split-radius, var(--wu-image-radius, var(--wu-radius)));
}

.wu-split__caption {
  margin-top: 10px;
  color: var(--wu-split-caption-colour, var(--wu-muted));
  font: var(--wu-split-caption-font, 400 14px/1.4 var(--wu-body));
}

/* The figures (facts). */
.wu-split__facts {
  display: grid;
  gap: var(--wu-split-facts-gap, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wu-split__fact {
  display: grid;
  gap: 6px;
}

.wu-split__figure {
  color: var(--wu-split-figure-colour, var(--wu-accent));
  font-family: var(--wu-display);
  font-size: var(--wu-split-figure-size, clamp(40px, 5vw, 64px));
  font-weight: var(--wu-split-figure-weight, var(--wu-heading-weight, 700));
  line-height: 1;
  letter-spacing: var(--wu-heading-tracking, -0.02em);
  font-variant-numeric: tabular-nums;
}

.wu-split__words {
  color: var(--wu-muted);
}

/* Text: the first paragraph is the lead. */
.wu-split--text .wu-split__lead {
  color: var(--wu-text);
  font-size: var(--wu-split-lead-size, var(--wp--preset--font-size--standfirst));
  line-height: 1.5;
}

/* On the inverse ground the section's text, lines, eyebrow, chip, link and
   figures take the inverse ground's pair: the slots are remapped on the
   section (a child sets --wu-split-inverse-accent for a coloured eyebrow,
   link and figures there). */
.wu-split.wu-ground--inverse {
  --wu-text: var(--wu-inverse-text);
  --wu-muted: var(--wu-split-inverse-muted, color-mix(in srgb, var(--wu-inverse-text) 78%, transparent));
  --wu-accent: var(--wu-split-inverse-accent, var(--wu-inverse-text));
  --wu-line: color-mix(in srgb, var(--wu-inverse-text) 25%, transparent);
  --wu-chip-bg: transparent;
  --wu-chip-border: color-mix(in srgb, var(--wu-inverse-text) 40%, transparent);
}

.wu-ground--inverse .wu-split__title,
.wu-ground--inverse .wu-split__line,
.wu-ground--inverse .wu-split__caption,
.wu-ground--inverse .wu-split__words,
.wu-ground--inverse .wu-split--text .wu-split__lead {
  color: var(--wu-inverse-text);
}

.wu-ground--inverse .wu-split__item {
  border-top-color: color-mix(in srgb, var(--wu-inverse-text) 30%, transparent);
}

@media (min-width: 768px) {
  .wu-split--media .wu-split__grid {
    grid-template-columns: minmax(0, var(--wu-split-text-share, 1fr)) minmax(0, var(--wu-split-media-share, 1fr));
    gap: var(--wu-split-gap-wide, 56px);
    align-items: var(--wu-split-align, center);
  }
  .wu-split--media.wu-split--left .wu-split__media,
  .wu-split--media.wu-split--left .wu-split__facts {
    order: -1;
  }
  .wu-split--media.wu-split--left .wu-split__grid {
    grid-template-columns: minmax(0, var(--wu-split-media-share, 1fr)) minmax(0, var(--wu-split-text-share, 1fr));
  }
}
@media (min-width: 1025px) {
  /* Text: the head in the left column, the words in the right. */
  .wu-split--text .wu-split__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--wu-split-gap-wide, 80px);
  }
  .wu-split--text .wu-split__text {
    display: contents;
  }
  .wu-split--text .wu-split__main > .wu-split__body {
    margin-top: 0;
  }
}