/* ==========================================================================
   lists.css — "no empty space", whatever the record count.
   ==========================================================================

   The client's rule: a list must never leave a hole. Two mechanisms cover
   every public list on the site.

   1. `frontend/partials/auto-layout.blade.php` (`.ve-auto--N`) — used by
      SECTIONS with a small, bounded list: related courses, other
      destinations, related articles, the team band, the partners strip.
      1 card / 2 / 3 / 4 columns, then a carousel from 5 up.

   2. `.ve-fill` — used by PAGINATED LISTINGS, where a carousel would be
      wrong (visitors expect to scan and page through). It is a flex row
      whose items share the width evenly: whatever is left over on the final
      row GROWS to fill it, so 4 items in a 3-column list read as
      "three, then one wide feature card", never "three and a gap".

   Both end at the same place: a lone card is a deliberate, wide feature card
   with its picture beside its text — never a small card floating in an empty
   row. Below 48rem every list is a single full-width column.

   Owned by the About/lists task. Loaded per page via @push('styles').
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   1. The gap-free flex list
   -------------------------------------------------------------------- */

.ve-fill {
  --ve-cols: 3;
  --ve-fill-gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ve-fill-gap);
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ve-fill--2 { --ve-cols: 2; }
.ve-fill--3 { --ve-cols: 3; }
.ve-fill--4 { --ve-cols: 4; }

.ve-fill > li {
  /* Exactly one column wide to start with, but free to grow into whatever
     space the final row leaves behind — that is the whole trick. */
  flex: 1 1 calc((100% - (var(--ve-cols) - 1) * var(--ve-fill-gap)) / var(--ve-cols));
  min-width: 0;
  max-width: 100%;
  display: flex;
}

.ve-fill > li > * { width: 100%; }

/* --------------------------------------------------------------------
   2. The feature card — a card that has a whole row to itself
   --------------------------------------------------------------------
   Flexbox already stops a short last row leaving a gap: the leftovers
   grow into it. This is the second half of the rule — a card that ends
   up alone on a row is re-laid-out as a deliberate feature card, its
   picture beside its text, rather than a very wide, very short band.

   Which item that is depends on how many columns are showing, so the
   nth-child maths is scoped to the same breakpoints as --ve-cols above:
   three or four columns on a large screen, two on a tablet, and on a
   phone none at all (section 3 undoes it).
   -------------------------------------------------------------------- */

/* Large screens: the list keeps the column count its class asks for. */
@media (min-width: 64.0625rem) {
  .ve-auto--1 > li,
  .ve-fill--2 > li:last-child:nth-child(odd),
  .ve-fill--3 > li:last-child:nth-child(3n + 1),
  .ve-fill--4 > li:last-child:nth-child(4n + 1)
  { flex-basis: 100%; max-width: 100%; }

  .ve-auto--1 > li > .ve-card,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card
  { display: flex; flex-direction: row; align-items: stretch; }

  /* `aspect-ratio`, not `aspect-ratio: auto`.
     Without a definite height the picture fell back to its own natural one:
     a portrait photograph at 44% of a 1216px row came out about 700px tall,
     so a single course sat beside a 250px block of text with a void under it.
     A 3:2 box gives the row a height of its own and the photograph is cropped
     to fit, so one record reads as a wide feature card at any picture size. */
  .ve-auto--1 > li > .ve-card > .ve-card__media,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card > .ve-card__media,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card > .ve-card__media
  { flex: 0 0 40%; max-width: 40%; min-height: 0; max-height: 24rem; aspect-ratio: 4 / 3; align-self: stretch; overflow: hidden; }

  /* The crop is biased upwards. The photo library is a mix of portrait and
     landscape; a portrait shot of a person centred in a landscape box loses
     the top of their head and their chin at once. Holding the crop a third of
     the way down keeps faces in frame whichever way round the picture is, and
     costs a landscape photo nothing. */
  .ve-auto--1 > li > .ve-card > .ve-card__media > img,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media > img,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card > .ve-card__media > img,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card > .ve-card__media > img
  { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

  .ve-auto--1 > li > .ve-card > .ve-card__body,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card > .ve-card__body,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card > .ve-card__body,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card > .ve-card__body
  { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(1.5rem, 3.2vw, 2.6rem); }

  .ve-auto--1 > li > .ve-card .ve-card__title,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card .ve-card__title,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card .ve-card__title,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card .ve-card__title,
  .ve-auto--1 > li > .ve-card .ve-programme__title,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card .ve-programme__title,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card .ve-programme__title,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card .ve-programme__title
  { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.25; }

  .ve-auto--1 > li > .ve-card .ve-card__text,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card .ve-card__text,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card .ve-card__text,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card .ve-card__text
  { max-width: 58ch; }

  .ve-auto--1 > li > .ve-card.ve-uni--no-image > .ve-card__body,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card.ve-uni--no-image > .ve-card__body,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-card.ve-uni--no-image > .ve-card__body,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-card.ve-uni--no-image > .ve-card__body
  { max-width: 56rem; margin-inline: auto; }

  .ve-auto--1 > li > .ve-resource,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-resource,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-resource,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-resource
  { display: flex; flex-direction: row; align-items: stretch; }

  .ve-auto--1 > li > .ve-resource > .ve-resource__media,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-resource > .ve-resource__media,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-resource > .ve-resource__media,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-resource > .ve-resource__media
  { flex: 0 0 38%; max-width: 38%; min-height: 14rem; }

  .ve-auto--1 > li > .ve-resource > .ve-resource__body,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-resource > .ve-resource__body,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-resource > .ve-resource__body,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-resource > .ve-resource__body
  { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

  .ve-auto--1 > li > .ve-story-card,
  .ve-fill--2 > li:last-child:nth-child(odd) > .ve-story-card,
  .ve-fill--3 > li:last-child:nth-child(3n + 1) > .ve-story-card,
  .ve-fill--4 > li:last-child:nth-child(4n + 1) > .ve-story-card
  { max-width: 60rem; margin-inline: auto; }
}

/* Tablets: every list drops to two columns, so the orphan is any odd
   last item, whatever the list was asking for. */
@media (min-width: 48.0625rem) and (max-width: 64rem) {
  .ve-auto--1 > li,
  .ve-fill > li:last-child:nth-child(odd)
  { flex-basis: 100%; max-width: 100%; }

  .ve-auto--1 > li > .ve-card,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card
  { display: flex; flex-direction: row; align-items: stretch; }

  .ve-auto--1 > li > .ve-card > .ve-card__media,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card > .ve-card__media
  { flex: 0 0 44%; max-width: 44%; min-height: 15rem; aspect-ratio: auto; }

  .ve-auto--1 > li > .ve-card > .ve-card__media > img,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card > .ve-card__media > img
  { width: 100%; height: 100%; object-fit: cover; }

  .ve-auto--1 > li > .ve-card > .ve-card__body,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card > .ve-card__body
  { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(1.5rem, 3.2vw, 2.6rem); }

  .ve-auto--1 > li > .ve-card .ve-card__title,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card .ve-card__title,
  .ve-auto--1 > li > .ve-card .ve-programme__title,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card .ve-programme__title
  { font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.25; }

  .ve-auto--1 > li > .ve-card .ve-card__text,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card .ve-card__text
  { max-width: 58ch; }

  .ve-auto--1 > li > .ve-card.ve-uni--no-image > .ve-card__body,
  .ve-fill > li:last-child:nth-child(odd) > .ve-card.ve-uni--no-image > .ve-card__body
  { max-width: 56rem; margin-inline: auto; }

  .ve-auto--1 > li > .ve-resource,
  .ve-fill > li:last-child:nth-child(odd) > .ve-resource
  { display: flex; flex-direction: row; align-items: stretch; }

  .ve-auto--1 > li > .ve-resource > .ve-resource__media,
  .ve-fill > li:last-child:nth-child(odd) > .ve-resource > .ve-resource__media
  { flex: 0 0 38%; max-width: 38%; min-height: 14rem; }

  .ve-auto--1 > li > .ve-resource > .ve-resource__body,
  .ve-fill > li:last-child:nth-child(odd) > .ve-resource > .ve-resource__body
  { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }

  .ve-auto--1 > li > .ve-story-card,
  .ve-fill > li:last-child:nth-child(odd) > .ve-story-card
  { max-width: 60rem; margin-inline: auto; }
}

/* The auto-layout partial narrows a single card by default; a feature
   card uses the whole container instead. */
.ve-auto.ve-auto--1 { grid-template-columns: minmax(0, 1fr); }

/* The Downloads page already stretches a lone last card across its grid
   (pages-content.css). This finishes the job: a resource with a whole row to
   itself puts its picture beside its text. */
@media (min-width: 64.0625rem) {
  .ve-resources-grid > .ve-resource:last-child:nth-child(3n + 1) { display: flex; flex-direction: row; align-items: stretch; }
  .ve-resources-grid > .ve-resource:last-child:nth-child(3n + 1) > .ve-resource__media { flex: 0 0 38%; max-width: 38%; min-height: 14rem; }
  .ve-resources-grid > .ve-resource:last-child:nth-child(3n + 1) > .ve-resource__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
}

/* --------------------------------------------------------------------
   3. Narrower screens
   -------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .ve-fill,
  .ve-fill--3,
  .ve-fill--4 { --ve-cols: 2; }
}

@media (max-width: 48rem) {
  .ve-fill,
  .ve-fill--2,
  .ve-fill--3,
  .ve-fill--4 {
    --ve-cols: 1;
    --ve-fill-gap: 1.1rem;
  }

  /* Every feature rule above is undone on a phone: one full-width column,
     picture on top, text underneath — nothing squeezed, nothing overflowing. */
  .ve-auto--1 > li > .ve-card,
  .ve-fill > li:last-child > .ve-card,
  .ve-auto--1 > li > .ve-resource,
  .ve-fill > li:last-child > .ve-resource { flex-direction: column; }

  .ve-auto--1 > li > .ve-card > .ve-card__media,
  .ve-fill > li:last-child > .ve-card > .ve-card__media,
  .ve-auto--1 > li > .ve-resource > .ve-resource__media,
  .ve-fill > li:last-child > .ve-resource > .ve-resource__media { flex: 0 0 auto; max-width: 100%; min-height: 0; }

  .ve-auto--1 > li > .ve-card > .ve-card__body,
  .ve-fill > li:last-child > .ve-card > .ve-card__body { padding: 1.25rem; }
}
/* --------------------------------------------------------------------
   3a. The course catalogue
   --------------------------------------------------------------------
   The results list sits beside a filter sidebar, so it runs two columns
   until there is room for three (80rem, matching pages.css). Above that the
   orphan is the 3n+1 item, not the odd one, so band A's two-column rules are
   put back and the three-column ones applied in their place.
   -------------------------------------------------------------------- */

@media (min-width: 80rem) {
  .ve-catalog__main .ve-fill--2 { --ve-cols: 3; }

  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(odd) { flex-basis: calc((100% - 2 * var(--ve-fill-gap)) / 3); max-width: 100%; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card { flex-direction: column; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media { flex: 0 0 auto; max-width: 100%; min-height: 0; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(odd) > .ve-card > .ve-card__body { padding: 1.25rem; }

  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(3n + 1) { flex-basis: 100%; max-width: 100%; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(3n + 1) > .ve-card { display: flex; flex-direction: row; align-items: stretch; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(3n + 1) > .ve-card > .ve-card__media { flex: 0 0 44%; max-width: 44%; min-height: 15rem; aspect-ratio: auto; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(3n + 1) > .ve-card > .ve-card__media > img { width: 100%; height: 100%; object-fit: cover; }
  .ve-catalog__main .ve-fill--2 > li:last-child:nth-child(3n + 1) > .ve-card > .ve-card__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(1.5rem, 3.2vw, 2.6rem); }
}

/* --------------------------------------------------------------------
   3b. The auto-layout grid at tablet width
   --------------------------------------------------------------------
   `.ve-auto--3` and `.ve-auto--4` drop to two columns below 64rem
   (sections.css), which leaves a three-item list with one card and an empty
   half-row beside it. The orphan takes the whole row instead, and lays
   itself out as a feature card the same way the flex lists do.
   -------------------------------------------------------------------- */

/* `.ve-auto` keeps two columns down to 40rem, so this band starts there —
   not at the 48rem where the flex lists collapse. */
@media (min-width: 40.0625rem) and (max-width: 64rem) {
  .ve-auto--3 > li:last-child:nth-child(odd),
  .ve-auto--4 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .ve-auto--3 > li:last-child:nth-child(odd) > .ve-card,
  .ve-auto--4 > li:last-child:nth-child(odd) > .ve-card { display: flex; flex-direction: row; align-items: stretch; }

  .ve-auto--3 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media,
  .ve-auto--4 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media { flex: 0 0 44%; max-width: 44%; min-height: 15rem; aspect-ratio: auto; }

  .ve-auto--3 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media > img,
  .ve-auto--4 > li:last-child:nth-child(odd) > .ve-card > .ve-card__media > img { width: 100%; height: 100%; object-fit: cover; }

  .ve-auto--3 > li:last-child:nth-child(odd) > .ve-card > .ve-card__body,
  .ve-auto--4 > li:last-child:nth-child(odd) > .ve-card > .ve-card__body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(1.5rem, 3.2vw, 2.6rem); }

  /* A lone person keeps their portrait beside their introduction. */
  .ve-auto--3 > li:last-child:nth-child(odd) > .ve-person,
  .ve-auto--4 > li:last-child:nth-child(odd) > .ve-person { flex-direction: row; align-items: flex-start; gap: 1.75rem; }

  .ve-auto--3 > li:last-child:nth-child(odd) > .ve-person > .ve-person__photo,
  .ve-auto--4 > li:last-child:nth-child(odd) > .ve-person > .ve-person__photo { width: 7rem; height: 7rem; font-size: 2.25rem; }
}

/* Two items in a three- or four-column row would otherwise sit left with a
   hole beside them at every width where the grid still shows three or more
   columns. Centring the pair is the balanced answer. */
@media (min-width: 64.0625rem) {
  .ve-auto--2 { justify-content: center; }
}

/* --------------------------------------------------------------------
   4. The team band (About page)
   -------------------------------------------------------------------- */

.ve-person {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-radius-lg, 1.25rem);
  background: var(--ve-surface, #fff);
  box-shadow: 0 1px 2px rgba(20, 18, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ve-person:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(30, 22, 86, 0.45);
}

.ve-person__photo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: var(--ve-surface-brand, #f4f2fb);
  color: var(--ve-primary, #4c1d95);
  font-size: 1.75rem;
  font-weight: 700;
  flex: none;
}

.ve-person__name {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ve-text-strong, #14122a);
}

.ve-person__role {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ve-primary, #4c1d95);
}

.ve-person__bio {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ve-text-muted, #6b6884);
}

.ve-person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.9rem;
}

.ve-person__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ve-primary, #4c1d95);
  text-decoration: none;
  font-weight: 600;
  word-break: break-word;
}

.ve-person__links a:hover { text-decoration: underline; }

/* A single colleague becomes a wide introduction rather than a lonely card. */
.ve-auto--1 > li > .ve-person {
  flex-direction: row;
  align-items: flex-start;
  gap: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.ve-auto--1 > li > .ve-person > .ve-person__photo {
  width: 8.5rem;
  height: 8.5rem;
  font-size: 2.5rem;
}

.ve-auto--1 > li > .ve-person > .ve-person__text {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 60ch;
}

@media (max-width: 48rem) {
  .ve-auto--1 > li > .ve-person { flex-direction: column; }
  .ve-auto--1 > li > .ve-person > .ve-person__photo { width: 5.5rem; height: 5.5rem; font-size: 1.75rem; }
}

/* --------------------------------------------------------------------
   5. About page — composed bands
   -------------------------------------------------------------------- */

.ve-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0.9rem;
  min-width: 0;
}

.ve-collage img {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  object-fit: cover;
  border-radius: var(--ve-radius-lg, 1.25rem);
  display: block;
}

/* One picture fills the frame; two sit side by side; three make an L. */
.ve-collage--1 { grid-template-columns: minmax(0, 1fr); }
.ve-collage--1 img { min-height: 20rem; }
.ve-collage--3 > :first-child { grid-row: span 2; }

@media (max-width: 48rem) {
  .ve-collage { grid-template-columns: minmax(0, 1fr); }
  .ve-collage--3 > :first-child { grid-row: auto; }
  .ve-collage img { min-height: 12rem; }
}

/* Partner logo strip — wraps evenly and centres its last row, so eleven
   awarding bodies never leave a ragged hole. */
.ve-logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ve-logo-strip > li {
  flex: 1 1 10rem;
  max-width: 14rem;
  min-width: 0;
}

.ve-logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 100%;
  min-height: 5.5rem;
  padding: 1rem;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-radius, 0.9rem);
  background: var(--ve-surface, #fff);
  color: var(--ve-text-muted, #6b6884);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
}

.ve-logo-strip__item img {
  max-width: 100%;
  max-height: 3.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.ve-logo-strip__item:hover { border-color: var(--ve-primary, #4c1d95); color: var(--ve-text-strong, #14122a); }

/* Figures band — the numbers already stored in Homepage → Figures. */
.ve-figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ve-figures > li {
  flex: 1 1 12rem;
  min-width: 0;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: var(--ve-radius-lg, 1.25rem);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.ve-figures__value {
  display: block;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--ve-accent, #e5b12e);
}

.ve-figures__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.86);
}

/* Numbered steps ("how it works" on the audience pages). */
.ve-steps {
  counter-reset: ve-step;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ve-steps > li {
  counter-increment: ve-step;
  flex: 1 1 15rem;
  min-width: 0;
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border: 1px solid var(--ve-ink-100);
  border-radius: var(--ve-radius-lg, 1.25rem);
  background: var(--ve-surface, #fff);
}

.ve-steps > li::before {
  content: counter(ve-step);
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.85rem;
  border-radius: 50%;
  background: var(--ve-primary, #4c1d95);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.ve-steps__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ve-text-strong, #14122a);
}

.ve-steps__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ve-text-muted, #6b6884);
}

/* Two-up "who we are" band: text beside a picture collage. */
.ve-split-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.ve-split-band--reverse > :first-child { order: 2; }

.ve-split-band__text { min-width: 0; }

@media (max-width: 60rem) {
  .ve-split-band { grid-template-columns: minmax(0, 1fr); }
  .ve-split-band--reverse > :first-child { order: 0; }
}

/* ---- The team page ------------------------------------------------------- */
/* The person card is designed for a band inside another page, where it sits in
   a carousel of four. On its own page it is a list item, so it needs to fill
   the height its row gives it — otherwise a colleague with a one-line role sits
   in a short box beside one with three lines. */
.ve-team-grid > li > .ve-person { height: 100%; }