/* styles/sections/hero-register.css
 * Careers hero: the hero-copy recipe (components.css) on the page surface, with a ruled
 * register of facts (dl) between the deck and the action. Frames yMpVN (1440), Z5gb8 (390),
 * cBNRL (1920). Headline 52/1.04 (M), 112/1.02 (D), 144/1.02 (W), off the type roles as drawn;
 * between frame widths it follows the viewport (112 at 1440, 144 at 1920). Register: three
 * cells under ink-20 rules on D and W; two rows on M (Location beside Team, then Open roles
 * full width), each cell as tall as its own text, so the Team rule stops at its cell.
 * The "2 roles" link takes the actions board's inline text link states (r9m4P s90NN). */
@layer sections {
  .careers-hero {
    padding-block: 76px 64px;
  }

  .careers-hero__copy {
    --hero-pad-top: 0px;
    --hero-gap: var(--space-24);
    --hero-heading-size: 52px;
    --hero-heading-lh: round(nearest, 1.04em, 1px);
    --hero-heading-ls: -1.3px;
    --hero-deck-size: 19px;
    --hero-deck-lh: round(nearest, 1.45em, 1px);
    --hero-actions-gap: 0px;
    align-items: stretch;
  }

  .careers-hero__copy .hero-copy__heading {
    text-wrap: wrap;
  }

  .careers-hero__actions .btn {
    width: 100%;
  }

  .hero-register {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    margin: 0;
    box-shadow: inset 0 1px var(--ink-20), inset 0 -1px var(--ink-20);
  }

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

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

  .hero-register__cell:nth-child(2) {
    box-shadow: inset 1px 0 var(--ink-20);
  }

  .hero-register__cell:nth-child(3) {
    grid-column: 1 / -1;
  }

  .hero-register__key {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: round(nearest, 1.2em, 1px);
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ink-80);
  }

  .hero-register__value {
    margin: 0;
    font-size: 17px;
    line-height: round(nearest, 1.35em, 1px);
    color: var(--ink);
  }

  /* The actions board's inline text link (r9m4P s90NN) in the frame's fern 600 without the
     rest underline: hover is the mist chip with ink text, pressed the fern chip with white,
     both easing over 120ms; the chip's padding is offset with negative margin, so the text
     never moves. */
  .hero-register__link {
    position: relative;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--fern);
    text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  /* 44px target around the 23px line. */
  .hero-register__link::before {
    content: "";
    position: absolute;
    inset: -11px -8px;
  }

  @media (hover: hover) {
    .hero-register__link:hover {
      padding: 6px 8px;
      margin: -6px -8px;
      background: var(--mist);
      color: var(--ink);
    }
  }

  .hero-register__link:active {
    padding: 6px 8px;
    margin: -6px -8px;
    background: var(--fern);
    color: var(--white);
  }

  @media (min-width: 900px) {
    .careers-hero {
      padding-block: 96px 128px;
    }

    .careers-hero__copy {
      --hero-gap: var(--space-32);
      --hero-heading-size: min(112px, 7.7778vw);
      --hero-heading-lh: round(nearest, 1.02em, 1px);
      --hero-heading-ls: -0.025em;
      --hero-deck-size: 20px;
      --hero-deck-lh: round(nearest, 1.5em, 1px);
      --hero-deck-measure: 820px;
    }

    .careers-hero__copy .hero-copy__heading {
      max-width: 1180px;
    }

    .careers-hero__actions .btn {
      width: auto;
    }

    .hero-register {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: stretch;
    }

    .hero-register__cell,
    .hero-register__cell:nth-child(3) {
      grid-column: auto;
      min-height: 106px;
      padding: 18px 20px 20px;
      box-shadow: inset 1px 0 var(--ink-20);
    }

    .hero-register__cell:first-child {
      padding-left: 0;
      box-shadow: none;
    }
  }

  @media (min-width: 1680px) {
    .careers-hero {
      padding-block: 120px 160px;
    }

    .careers-hero__copy {
      --hero-gap: var(--space-56);
      --hero-heading-size: min(144px, 7.5vw);
      --hero-deck-size: 26px;
      --hero-deck-lh: round(nearest, 1.45em, 1px);
      --hero-deck-measure: 980px;
    }

    .careers-hero__copy .hero-copy__heading {
      max-width: 1500px;
    }

    .hero-register__cell,
    .hero-register__cell:nth-child(3) {
      min-height: 0;
    }
  }

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

    .hero-register__cell:nth-child(2) {
      border-left: 1px solid;
    }
  }
}