/* ==========================================================================
   Prose — a long text page (blocks/vv-r-prose): the page's <h1>, then
   sections of a small heading over plain paragraphs, in one left-aligned
   column. Layout only: colour from role tokens, type from role classes.
   ========================================================================== */

.vv-band--r-prose { --vv-r-prose-measure: var(--vv-measure-800); }

.vv-r-prose__column {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-40);
  max-width: var(--vv-r-prose-measure);
  margin-inline: auto;
}

.vv-r-prose__section {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
}

/* As the first band the page's two fixed bars cover its top: clear them
   (--vv-shell-top, #46), then take the section gap. */
.vv-page > .vv-band--r-prose:first-child { padding-block-start: calc(var(--vv-shell-top) + var(--vv-section-y-compact)); }

/* A job posting's facts and Apply now: a card like the job's own on Job
   Postings (the white ground, no border, 30 in, 20 on a phone), each
   fact its label (in the subtle text colour) over its value, 5 apart, Apply now 30 under them. The
   facts sit two to a row on a phone, three from 810, one from 1201, where
   the card stands beside the sections (user, 2026-10-18). */
.vv-r-prose__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-30);
  padding: var(--vv-gap-30);
  background-color: var(--vv-color-background-highlight);
}
.vv-r-prose__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: var(--vv-gap-20) var(--vv-gap-40);
  margin: 0;
}
.vv-r-prose__fact { display: flex; flex-direction: column; gap: var(--vv-gap-5); }
.vv-r-prose__fact dd { margin: 0; }
.vv-r-prose__fact dt { color: var(--vv-color-text-subtle); }
.vv-r-prose__colon { display: none; }   /* the label's own colon: the layout already pairs it */
@media (max-width: 809.98px) {
  .vv-r-prose__meta { padding: var(--vv-gap-20); }
  .vv-r-prose__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}

/* A bulleted list in a section: the Journal's bullets (r-article.css), a
   gold disc 20 in, lines 10 apart. */
.vv-band .vv-r-prose__list {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-10);
  padding-left: var(--vv-gap-20);
  list-style: disc;
}
.vv-r-prose__list li::marker { color: var(--vv-color-element-highlight); }
.vv-r-prose__back { margin: 0; text-align: center; }   /* every back link is centred (user, 2026-10-11) */

/* A posting's sections: 50 apart, each after the first under a line 50
   above it, so Job Definition, About and the Duties group read as the
   page's parts. A group's heading (heading-3) has its sections (heading-4)
   20 under it, 40 apart. A heading's text is 10 under it. */
.vv-r-prose__main {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-50);
}
.vv-r-prose__main > :is(.vv-r-prose__section, .vv-r-prose__group) + :is(.vv-r-prose__section, .vv-r-prose__group) {
  padding-block-start: var(--vv-gap-50);
  border-block-start: 1px solid var(--vv-color-line);
}
.vv-r-prose__group {
  display: flex;
  flex-direction: column;
  gap: var(--vv-gap-40);
}
.vv-r-prose__group > .vv-r-prose__heading { margin-block-end: calc(var(--vv-gap-20) - var(--vv-gap-40)); }

/* From 1201 the card stands beside the sections (800, then 100, then 330),
   held under the fixed bars while the duties scroll. */
@media (min-width: 1201px) {
  .vv-r-prose__column--aside {
    display: grid;
    grid-template-columns: var(--vv-measure-800) var(--vv-measure-330);
    grid-template-areas: "main meta";
    column-gap: var(--vv-gap-100);
    max-width: none;
    justify-content: center;
  }
  .vv-r-prose__column--aside > .vv-r-prose__title { grid-column: 1 / -1; }
  .vv-r-prose__column--aside > .vv-r-prose__main { grid-area: main; }
  .vv-r-prose__column--aside > .vv-r-prose__meta {
    grid-area: meta;
    position: sticky;
    top: calc(var(--vv-shell-top) + var(--vv-gap-40));
    align-self: start;
  }
  .vv-r-prose__column--aside .vv-r-prose__facts { grid-template-columns: 1fr; }
}