/* The three trial layouts of /vetero's four feature rows (2026-09-27), for
 * Adam to compare. Adam chose B provisionally (2026-09-27), with more
 * space, and build_vetero.py builds it when VETERO_ROWS is unset; A and C
 * stay buildable. Each is scoped to its own class on the content,
 * .vo-rows-a, -b or -c. vetero.css is untouched: VETERO_ROWS=none is the
 * layout before the trials. */

/* ------------------------------------------------------------ shared */

/* words on a dark band are white, the Plus tag with them */
.vo-page .vo .vo-row--white h2,
.vo-page .vo .vo-row--white p {
  color: #fff;
}

.vo-row--white .vo-plus {
  color: #fff;
}

.vo-row--black .vo-plus {
  color: #000;
}

/* ------------------------------------------------------------ A: across the wallpaper */

/* Every row is a band of its own, with its own padding above and below, on
   a cut of the desktop frame (compose_vetero_rows.py) drawn to cover. */
.vo-rows-a .vo-row {
  position: relative;
  overflow: clip;
}

.vo-rows-a .vo-row + .vo-row {
  padding-top: 6.6vmax;
}

.vo-row-bg {
  position: absolute;
  inset: 0;
}

.vo-row-bg img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--vo-band-pos, 50% 50%);
}

.vo-rows-a .vo-row-in {
  position: relative;
}

/* the pictures float on the wallpaper as windows: 18px corners (the
   pictures' own), a soft shadow. The shadow is on the slot, since the
   picture's box clips to its corners. */
.vo-rows-a .vo-media {
  filter: drop-shadow(0 24px 48px rgb(0 18 70 / 0.30)) drop-shadow(0 3px 8px rgb(0 18 70 / 0.18));
}

/* where each band is anchored (object-position), from 768 up and below,
   is chosen by measuring the words on it (compose_vetero_rows.py) and set
   on the band by build_vetero.py */
@media (max-width: 767px) {
  .vo-row-bg img {
    object-position: var(--vo-band-pos-n, 50% 50%);
  }
}

/* ------------------------------------------------------------ B: running off the edge */

/* A wider cut of each capture at 1:1 (never past its pixels), the screen's
   right edge at the popover's side: on the right rows that is the page's
   own edge, on the left rows the column beside the words, and the desktop
   runs off the page's side. The box is as wide as its slot, from the
   column to the page edge, and shows the picture's popover end; --r is
   what comes off that end where the page edge would otherwise cut a word
   (rows-b.css). */
.vo-rows-b {
  --vo-gut: calc((100vw - min(1500px, 92vw)) / 2);
}

.vo-rows-b .vo-row {
  overflow-x: clip;
}

.vo-rows-b .vo-shot--bleed {
  width: 100%;
  height: var(--h);
  margin: 0;
}

.vo-rows-b .vo-shot--bleed > img {
  left: auto;
  right: calc(-1 * var(--r, 0px));
  top: 0;
}

@media (min-width: 768px) {
  .vo-rows-b .vo-row--right .vo-media {
    margin-right: calc(-1 * var(--vo-gut));
  }
  .vo-rows-b .vo-row--left .vo-media {
    margin-left: calc(-1 * var(--vo-gut));
  }
  /* rounded on the side facing the words, square where it meets the page's edge */
  .vo-rows-b .vo-row--right .vo-shot--bleed {
    border-radius: var(--vo-radius) 0 0 var(--vo-radius);
    clip-path: inset(0 round var(--vo-radius) 0 0 var(--vo-radius));
  }
  .vo-rows-b .vo-row--left .vo-shot--bleed {
    border-radius: 0 var(--vo-radius) var(--vo-radius) 0;
    clip-path: inset(0 round 0 var(--vo-radius) var(--vo-radius) 0);
  }
  .vo-rows-b .vo-shot--bleed > img {
    border-radius: 0;
  }
}

/* A third of the page (Adam, 2026-09-27): from 768 up each picture keeps
   the cut it showed when it took the wider column (the 7fr of 7fr/5fr, out
   to the page edge: --vo-old), drawn at --vo-k of its size, so its box is
   a third of the window up to 1630px (0.6121 x 54.46vw) and a little less
   past it, where the column stopped growing with the window. The words keep
   their measure (the old 5fr) and stand beside the picture, across the same
   gap, so they sit near the page's centre line. --r is 0 here: every old
   slot from 768 up is wider than the widest one that needed it (308px). */
@media (min-width: 768px) {
  .vo-rows-b {
    --vo-k: 0.6121;
    --vo-inner: calc(min(1500px, 92vw) - 5.5vw);
    --vo-old: calc(var(--vo-inner) * 7 / 12 + var(--vo-gut));
    --vo-box: calc(var(--vo-k) * var(--vo-old));
    --vo-measure: calc(var(--vo-inner) * 5 / 12);
  }
  .vo-rows-b .vo-row .vo-row-in {
    column-gap: 0;
  }
  .vo-rows-b .vo-row--right .vo-row-in {
    grid-template-columns: 1fr var(--vo-measure) 5.5vw calc(var(--vo-box) - var(--vo-gut));
  }
  .vo-rows-b .vo-row--left .vo-row-in {
    grid-template-columns: calc(var(--vo-box) - var(--vo-gut)) 5.5vw var(--vo-measure) 1fr;
  }
  .vo-rows-b .vo-row--right .vo-words { grid-column: 2; grid-row: 1; }
  .vo-rows-b .vo-row--right .vo-media { grid-column: 4; grid-row: 1; }
  .vo-rows-b .vo-row--left .vo-media { grid-column: 1; grid-row: 1; }
  .vo-rows-b .vo-row--left .vo-words { grid-column: 3; grid-row: 1; }
  .vo-rows-b .vo-shot--bleed {
    --r: 0px;
    height: calc(var(--h) * var(--vo-k));
  }
  .vo-rows-b .vo-shot--bleed > img {
    width: calc(var(--w) * var(--vo-k));
    height: calc(var(--h) * var(--vo-k));
  }
  /* the menu bar row's two pictures, the strip and the whole Status bar
     window, drawn at the same --vo-k, or smaller where the box is narrower,
     always whole: no window of them is cut from 768 up */
  .vo-rows-b .vo-row--left .vo-media > .vo-shot:not(.vo-shot--bleed) {
    --sw: initial;
    --sh: initial;
    --l: initial;
    --t: initial;
    --vo-corner: initial;
    width: min(calc(var(--w) * var(--vo-k)), 100%);
    height: auto;
  }
  .vo-rows-b .vo-row--left .vo-media > .vo-shot:not(.vo-shot--bleed) > img {
    position: static;
    width: 100%;
    height: auto;
  }
  /* The menu bar row does not run off the page, so picture and words are
     one group centred on the page (Adam, 2026-09-27): the same gap, the
     same measure, the words centred on the pictures. The Status bar window
     stands on the desktop with a margin round it (580px wide at 1:1 where
     the window is 510), and the box grows by that margin rather than the
     window shrinking: the pictures are drawn at --vo-k, or where the old
     third-of-the-page box (--vo-box, which held the 522px cut) is
     narrower, at the scale that box gave, so the window is drawn the size
     it was. The slot is a size container, so its track is given. */
  .vo-rows-b #menubar {
    --vo-mb: min(calc(580px * var(--vo-k)), calc(var(--vo-box) * 580 / 522));
  }
  .vo-rows-b #menubar .vo-row-in {
    grid-template-columns: 1fr var(--vo-mb) 5.5vw var(--vo-measure) 1fr;
  }
  .vo-rows-b #menubar .vo-media {
    grid-column: 2;
    margin-left: 0;
  }
  .vo-rows-b #menubar .vo-words {
    grid-column: 4;
  }
  .vo-rows-b #menubar .vo-media > .vo-shot:not(.vo-shot--bleed) {
    width: var(--vo-mb);
  }
}

/* stacked, the picture runs across the whole window, edge to edge, the
   popover at the right */
@media (max-width: 767px) {
  .vo-rows-b .vo-media {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    justify-self: stretch;
  }
  .vo-rows-b .vo-shot--bleed {
    border-radius: 0;
    clip-path: none;
  }
  .vo-rows-b .vo-shot--bleed > img {
    border-radius: 0;
  }
}

/* B's space (Adam, 2026-09-27: "the distances must be a bit bigger"), about
   half as much again, on the page's own steps. Vertically, the rows and
   every section after them up to the closing band (the reel's foot, the
   sky band, Plus) move from the site's medium section padding, 6.6vmax, to
   its large, 10vmax (the closing band's top), so the page keeps one
   rhythm; the reel's top stays 3.3vmax, the small, so the break after the
   last row is a little more than the step between rows (13.3vmax against
   10). Between a picture and its words: the column gap from 4vw to 5.5vw
   from 768 up, the sky band's with it, and stacked, 2rem to 3rem, the
   hero's stacked gap. */
.vo-rows-b .vo-row,
.vo-rows-b .vo-sky,
.vo-rows-b .vo-plus-sec {
  padding-block: 10vmax;
}

.vo-rows-b .vo-row + .vo-row {
  padding-top: 0;
}

.vo-rows-b .vo-cards {
  padding-bottom: 10vmax;
}

.vo-rows-b .vo-row-in {
  gap: 3rem;
}

@media (min-width: 768px) {
  .vo-rows-b .vo-row-in {
    column-gap: 5.5vw;
  }
}

/* ------------------------------------------------------------ C: alternating bands */

/* white, the trough's navy, white, navy: every row a band with its own
   padding; on the navy the words are white */
.vo-rows-c .vo-row + .vo-row {
  padding-top: 6.6vmax;
}

.vo-rows-c .vo-row--navy {
  background: var(--vo-navy, #001189);
}