/* 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;
}

/* The tick marker (3.17.0, "marker" tick): each point led by a tick drawn
   in CSS (two edges of a box turned 45 degrees), the points in a column
   with a gap. Drawn only with the field. Slots: --wu-split-tick (its
   colour, the accent), -tick-inverse (on the inverse ground, the inverse
   text), -tick-gap (between points, 10px), -tick-indent (the words' start,
   30px), -tick-top (its drop, 0.45em), -tick-width and -tick-height (the
   box inside the stroke, 16px by 9px: content-box whatever the page sets,
   as the Nelly's tick measured), -tick-stroke (3px). */
.wu-split--tick .wu-split__items {
  display: grid;
  gap: var(--wu-split-tick-gap, 10px);
}

.wu-split--tick .wu-split__item {
  position: relative;
  padding-left: var(--wu-split-tick-indent, 30px);
}

.wu-split--tick .wu-split__item::before {
  content: "";
  position: absolute;
  top: var(--wu-split-tick-top, 0.45em);
  left: 0;
  box-sizing: content-box;
  width: var(--wu-split-tick-width, 16px);
  height: var(--wu-split-tick-height, 9px);
  border-bottom: var(--wu-split-tick-stroke, 3px) solid var(--wu-split-tick, var(--wu-accent));
  border-left: var(--wu-split-tick-stroke, 3px) solid var(--wu-split-tick, var(--wu-accent));
  transform: rotate(-45deg);
}

.wu-split--tick.wu-ground--inverse .wu-split__item::before {
  border-color: var(--wu-split-tick-inverse, var(--wu-inverse-text));
}

.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;
}

/* The photograph's place on phones (3.17.0, --wu-split-media-order-phone):
   -1 puts it above the words, below 768px. Of no weight and with no
   fallback: unset, it is as if absent (the photograph follows the words),
   and a site's own rule on it still decides. */
@media (max-width: 767.98px) {
  :where(.wu-split__media) {
    order: var(--wu-split-media-order-phone);
  }
}
.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;
  }
}
/* The arrow after a button's or a text link's words (3.13.0, working rule
   12): the slot --wu-button-arrow is its display, inline-block when unset;
   none hides every arrow the parent draws on buttons and text links. In
   each block's own stylesheet, so it holds where a child dequeues the
   parent's sections.css. An icon before the words is not an arrow. From
   3.16.1 every part but the svg is in :where(), so the rule weighs 0,0,1:
   a child's own rule on the arrow, written before 3.13.0 (Canine Sense's
   `.wu-ihero .wu-button svg`, 0,2,1), still wins, as it did when the
   parent set no display there (3.13.0 to 3.16.0 weighed 0,4,1). */
:where(.wu-split) :where(.wu-button:not(.wu-button--icon, .wu-contact__link), .wu-textlink:not(.wu-textlink--icon)) > svg:where(:last-child) {
  display: var(--wu-button-arrow, inline-block);
}

/* The eyebrow's slots (3.17.0): --wu-label-gap and the rule's
   --wu-label-rule-length, -width (its thickness), -radius, --wu-label-rule
   (its colour) and -opacity. sections.css reads them with the values drawn
   before; here, of no weight and with no fallback, they reach a site that
   dequeues sections.css and draws the eyebrow itself, wherever its own
   rules leave these properties unset (unset, each is as if absent; the
   rule's span is empty, so flex none changes no box). Every block
   stylesheet that draws an eyebrow carries this rule. */
:where(.wu-label) {
  gap: var(--wu-label-gap);
}

:where(.wu-label__rule) {
  flex: none;
  width: var(--wu-label-rule-length);
  height: var(--wu-label-rule-width);
  border-radius: var(--wu-label-rule-radius);
  background: var(--wu-label-rule);
  opacity: var(--wu-label-rule-opacity);
}