/* styles/sections/values-list.css
 * Careers "Who we are" on the fern inverse surface: a stacked section intro, three value rows
 * under white-25 rules (title beside body from D, stacked on M) and the italic "Not for us"
 * line. Frames kFbXn (1440), L90gxm (390), zkWtP (1920). The frames' 01/02/03 numerals are
 * disabled and do not render. Heading 36 / 56 / 72; value titles 26 / 40 / 48. Between 900
 * and 1440 the title and body columns keep the 1440 frame's 560:672 ratio. */
@layer sections {
  .values-section {
    padding-block: 96px;
  }

  .values-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }

  .values-section__intro {
    --intro-gap: var(--space-24);
    --intro-heading-size: 36px;
    --intro-heading-lh: round(nearest, 1.05em, 1px);
    --intro-heading-ls: -0.02em;
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: round(nearest, 1.5em, 1px);
    --intro-lede-color: var(--white-85);
  }

  .values-section__intro .section-intro__lede {
    max-width: 640px;
  }

  .values-list {
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: inset 0 1px var(--white-25);
  }

  .values-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    padding-block: 28px;
    box-shadow: inset 0 -1px var(--white-25);
  }

  .values-list__title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: round(nearest, 1.1em, 1px);
    letter-spacing: -0.01em;
    text-wrap: wrap;
    color: var(--white);
  }

  .values-list__body {
    margin: 0;
    font-size: 17px;
    line-height: round(nearest, 1.55em, 1px);
    color: var(--white-85);
  }

  .values-section__not {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: round(nearest, 1.35em, 1px);
    color: var(--white-70);
  }

  @media (min-width: 900px) {
    .values-section {
      padding-block: 128px;
    }

    .values-section__inner {
      gap: var(--space-56);
    }

    .values-section__intro {
      --intro-heading-size: 56px;
      --intro-lede-size: 20px;
    }

    .values-list__item {
      display: grid;
      grid-template-columns: minmax(0, 560fr) minmax(0, 672fr);
      gap: var(--space-48);
      /* The body's first line sits on the title's baseline, whatever either wraps to (Stephan,
         BRI-7805 J38; the frames top-align the two). */
      align-items: baseline;
      padding-block: 40px;
    }

    .values-list__title {
      font-size: 40px;
      letter-spacing: -0.4px;
    }

    .values-list__body {
      font-size: 20px;
    }

    .values-section__not {
      font-size: 28px;
    }
  }

  @media (min-width: 1680px) {
    .values-section {
      padding-block: 160px;
    }

    .values-section__intro {
      --intro-heading-size: 72px;
    }

    .values-list__item {
      grid-template-columns: minmax(0, 720fr) minmax(0, 912fr);
    }

    .values-list__title {
      font-size: 48px;
    }

    .values-section__not {
      font-size: 32px;
    }
  }

  @media (forced-colors: active) {
    .values-list {
      border-top: 1px solid;
    }

    .values-list__item {
      border-bottom: 1px solid;
    }
  }
}