/* ==========================================================================
   CVR — downloads.css
   "Downloads & useful links". Loads after base.css, which carries the tokens,
   the shared chrome, the pill, the colour bands and the band accordion the two
   sections open with. Only the bannerless masthead and the pill list inside the
   open panel are here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Masthead
   No banner photo on this page. The mockup opens on a flat ink field that
   darkens toward the bottom, with the title centred in it.

   The bottom padding carries the slant's own depth: .dl-bands is pulled back
   up over it by the same amount, so the wedge .band--slant-top clips away
   uncovers the tail of this gradient rather than the page behind it.
   -------------------------------------------------------------------------- */

.dl-masthead {
  display: grid;
  place-items: center;
  padding: calc(var(--space-12) + var(--space-8)) var(--grid-margin) var(--space-11);
  /* sampled down the mockup's masthead: --color-ink held for the top third,
     then a straight run into near-black at the cut */
  background-image: linear-gradient(180deg,
    var(--color-ink) 0%,
    var(--color-ink) 32%,
    #000d0b 100%);
  text-align: center;
}

/* Boldonse's line box is far taller than its caps; the negative margin trims it
   so the padding reads as the mockup measures it. Same trick as .page-banner__title. */
.dl-masthead__title {
  color: var(--color-lime);
  margin-block: -0.22em;
  /* below 1024 the title takes two lines; balance keeps them even rather than
     leaving one word stranded on the second */
  text-wrap: balance;
}

@media (min-width: 1024px) {
  .dl-masthead {
    /* the extra 12 at the foot is the mockup's: it sets the title a touch above
       the field's centre, and lands the slant on the mockup's own line */
    padding-block: calc(var(--space-12) * 2) calc(var(--space-12) * 2 + var(--space-3));
  }
  .dl-bands {
    margin-top: -5.6vw; /* the slant depth base.css cuts off .band--slant-top */
  }
}

/* --------------------------------------------------------------------------
   The lists
   The band accordion in base.css carries the fold, the group and the label;
   only the pill list the mockup fills the right column with is new here.
   -------------------------------------------------------------------------- */

.dl-list {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
}

/* The mockup's item is the shared pill, one size up and in forest, with the
   dot flipped to white so it reads on the fill. */
.dl-item {
  background: var(--color-forest);
  color: var(--color-white);
  font-size: var(--size-body-01);
  line-height: 1.4;
  padding: var(--space-3) var(--space-5);
  gap: var(--space-4);
  /* .pill holds its label on one line; here a long one wraps inside the shape
     rather than running off a narrow screen */
  max-width: 100%;
  white-space: normal;
  transition: background-color var(--duration-base) var(--ease),
              transform var(--duration-base) var(--ease);
}

.dl-item .pill__dot {
  width: 8px;
  height: 8px;
  background: var(--color-white);
}

/* Deepening rather than lightening: a lime fill would vanish into the lime band */
.dl-item:hover,
.dl-item:focus-visible {
  background: var(--color-ink);
  transform: translateX(4px);
}

.dl-item:hover .pill__dot,
.dl-item:focus-visible .pill__dot {
  background: var(--color-lime);
}

@media (min-width: 1024px) {
  .dl-list {
    /* pulled up by the pill's own top padding, so the first label and the
       heading beside it start on the same line */
    margin-top: calc(var(--space-2) * -1);
  }
}