/* styles/sections/register.css
 * The company register under the About hero (YIOdI 1440, VxCAm 390, Hs4NN 1920): a dl of
 * div > dt + dd cells, ruled top and bottom, each cell after the first ruled on its left. Five
 * columns from D; on M two a row with the last cell full width, so the third and fifth cells
 * open their rows with the rule at the left edge, as VxCAm draws them. Rules are inset shadows
 * (inside the box, as Pencil strokes sit on the frame edge), borders again in forced colours.
 * Then the links row (k5w9d): a muted lead and two arrow links with the arrow-up-right icon
 * exported from the frame, 16/500 as drawn; stacked on M. */
@layer sections {
  .register {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    box-shadow: inset 0 1px var(--ink-20), inset 0 -1px var(--ink-20);
  }

  .register__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: 14px 12px 16px;
  }

  .register__cell:nth-child(odd) {
    padding-left: 0;
  }

  .register__cell + .register__cell {
    box-shadow: inset 1px 0 var(--ink-20);
  }

  .register__cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .register__key {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0.9px;
    color: var(--ink-80);
  }

  .register__value {
    margin: 0;
    font-size: 17px;
    line-height: 20px;
  }

  .register-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-28);
    margin: 0;
  }

  .register-links__lead {
    font-size: 16px;
    line-height: 19px;
    color: var(--ink-2);
  }

  .register-links__link {
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
  }

  .register-links__link::after {
    width: 15px;
    height: 15px;
    mask-image: url("/assets/figures/about/icon-arrow-up-right.svg");
  }

  @media (min-width: 900px) {
    .register {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .register__cell {
      padding: 18px 20px 20px;
    }

    .register__cell:nth-child(odd) {
      padding-left: 20px;
    }

    .register__cell:first-child {
      padding-left: 0;
    }

    .register__cell:last-child:nth-child(odd) {
      grid-column: auto;
    }

    .register-links {
      flex-direction: row;
      align-items: center;
    }
  }

  @media (forced-colors: active) {
    .register {
      border-block: 1px solid;
    }

    .register__cell + .register__cell {
      border-left: 1px solid;
    }
  }
}