/* ==========================================================================
   DEFINITION LIST — title | copy rows, hairlines between
   ==========================================================================
   An element_group `def-list` holding one element_group `def-row` per row,
   each with two text children (<h3>, <p>). The LIST is the band's child, so it
   takes the column's gutter and the rows — and their rules — run exactly the
   width of the copy (the content column). A
   row placed straight on a band would get the gutter as padding and its rule
   would run out to the band's edges.

   The title runs in a 400px column (narrowing with the screen). Rules sit
   above every row and under the last; `def-list--inner` keeps only the rules
   between rows (on a band); `def-list--on-dark` on a dark band.
   An icon may lead the title: <h3><i class="fa-light fa-lock"></i>Title</h3>
   (the Font Awesome kit swaps the <i> for an <svg>, so both are matched).
   ========================================================================== */
.def-list {
  --def-rule: var(--prime);
  --def-icon: var(--prime);
}

.def-row {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  column-gap: clamp(24px, 6.25%, 80px);
  padding-block: clamp(16px, 1.25vw, 20px);
  border-top: 1px solid var(--def-rule);

  &:last-child { border-bottom: 1px solid var(--def-rule); }

  h3 { margin: 0; color: var(--heading); font-size: clamp(1.125rem, 1.5vw, 1.375rem); }
  h3:has(> :is(i, svg)) {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: center;
  }
  h3 > :is(i, svg) { color: var(--def-icon); font-size: 1.5rem; }
  p { margin: 0; }
  a { font-weight: 600; }
}

.def-list--inner > .def-row {
  &:first-child { border-top: 0; }
  &:last-child { border-bottom: 0; }
}

.def-list--on-dark {
  --def-rule: var(--text-on-dark-dim);
  --def-icon: var(--text-on-dark-dim);

  .def-row :is(h3, p) { color: var(--text-on-dark); }
}

/* Below the full 1280px column the title column narrows with it: 400 of
   1280 (31.25%), so the copy keeps its share on a laptop or tablet */
@media (max-width: 1439px) {
  .def-row { grid-template-columns: minmax(0, min(400px, 31.25%)) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .def-row {
    grid-template-columns: 1fr;
    row-gap: 0.4em;
  }
}