/*
  prevNext — the slim band at the bottom of a case study with the previous / next arrows
  (component.json prevNext, 4 tokens). The arrows are the button component, arrow only.
  Fixed 16px above and below (not fluid). Arrows left-aligned, previous first.
*/

.prev-next {
  background-color: var(--prev-next-fill-all);
  padding-block: var(--prev-next-padding-vertical-all);
  padding-inline: var(--prev-next-padding-horizontal-all);
}

/* Same structure as the hero and every section: a centered container (1280px at most,
   page padding included) holding the centered 65ch text column. The arrows start at the
   column's left edge, so they line up with the text above at every width.
   The arrow group itself is just the two buttons and the gap. */
.prev-next__container {
  max-width: calc(var(--prev-next-content-max-width-all) - 2 * var(--prev-next-padding-horizontal-all));
  margin-inline: auto;
}
.prev-next__row {
  max-width: var(--prev-next-text-max-width-all);
  margin-inline: auto;
  /* "ch" is measured in the element's own font: set body text (Atkinson, 20px) so 65ch
     matches the column above. prevNext has no text of its own, so it borrows textBlock's. */
  font-family: var(--text-block-body-text-style-all-font-family);
  font-size: var(--text-block-body-text-style-all-font-size);
  display: flex;
  gap: var(--prev-next-gap-all);
}