/* styles/sections/roadmap-list.css
 * The roadmap: a label cell (caps label and caption) beside a list of names with one line each,
 * under a 1px ink rule, rows split by soft rules. M stacks the label over the list and the items two
 * to a row; D sets the label in a 220 column and the items two to a row (330, 730); W sets the label
 * in 340 and the items four to a row, 32 apart. Geometry is the Tools frames (Tl37n 390, q0CRA4 1440,
 * Q7g029 1920). Lines sit on whole pixels, as Pencil draws them. */
@layer sections {
  .roadmap-list__label {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding-right: var(--space-20);
    max-width: 220px;
  }

  .roadmap-list__heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  .roadmap-list__caption,
  .roadmap-list__line {
    margin: 0;
    text-wrap: wrap;
    line-height: round(nearest, 1.45em, 1px);
    color: var(--ink-muted);
  }

  .roadmap-list__caption {
    font-size: 13px;
  }

  .roadmap-list__items {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: inset 0 1px var(--ink);
  }

  .roadmap-list__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-20) var(--space-20) var(--space-20) 0;
  }

  /* M: two items to a row, a soft rule under each row but the last. */
  @media (width < 900px) {
    .roadmap-list__item:nth-child(2n):not(:last-child) {
      box-shadow: inset 0 -1px var(--line);
    }
  }

  /* Name: editorial role (17 on M, 18 from D, 1.6). */
  .roadmap-list__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--t-editorial-size);
    font-weight: 400;
    line-height: round(nearest, var(--t-editorial-lh) * 1em, 1px);
    letter-spacing: 0;
    text-wrap: wrap;
    color: var(--ink);
  }

  .roadmap-list__line {
    font-size: 14px;
  }

  @media (min-width: 900px) {
    .roadmap-list {
      display: grid;
      grid-template-columns: minmax(0, 220fr) minmax(0, 1060fr);
      align-items: start;
    }

    .roadmap-list__label {
      max-width: none;
      padding-right: var(--space-40);
    }

    .roadmap-list__items {
      grid-template-columns: minmax(0, 330fr) minmax(0, 730fr);
    }

    .roadmap-list__item {
      padding-right: var(--space-40);
    }

    .roadmap-list__item:not(:nth-last-child(-n + 2)) {
      box-shadow: inset 0 -1px var(--line);
    }
  }

  /* W: four to a row, 32 apart, 28 above and below each; every row keeps its rule, drawn across
     the gaps. */
  @media (min-width: 1680px) {
    .roadmap-list {
      grid-template-columns: minmax(0, 340fr) minmax(0, 1340fr);
    }

    .roadmap-list__items {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      column-gap: var(--space-32);
    }

    .roadmap-list__item {
      padding: 28px 0;
      box-shadow: inset 0 -1px var(--line);
    }

    .roadmap-list__item:not(:nth-child(4n))::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 100%;
      width: var(--space-32);
      height: 1px;
      background: var(--line);
    }
  }

  @media (forced-colors: active) {
    .roadmap-list__items {
      box-shadow: none;
      border-top: 1px solid;
    }

    .roadmap-list__item:not(:last-child) {
      box-shadow: none;
      border-bottom: 1px solid;
    }
  }
}