/* styles/sections/intro-pair.css
 * The shared .section-intro--split recipe as the Product Teams frames set it: heading in a
 * 608 column (821 for the loop on W), the lede 48 after it in a 480 column, both from the
 * start edge rather than pushed apart; stacked with a 28 gap on M. Sizes are the recipe's
 * custom properties. */
@layer sections {
  .intro-pair {
    --intro-gap: var(--space-28);
    --intro-lede-pad: 0px;
    --intro-lede-size: 17px;
    --intro-lede-lh: 26px;
    --intro-lede-color: var(--ink-2);
    --intro-lede-measure: 480px;
    --intro-heading-basis: 608px;
  }

  /* Loop: h2 on M and D, h1 on W */
  .intro-pair--loop {
    --intro-heading-size: var(--t-h2-size);
    --intro-heading-lh: 34px;
    --intro-heading-ls: var(--t-h2-ls);
  }

  /* Transport and agent: 26 on M, 40 on D and W */
  .intro-pair--sub {
    --intro-heading-size: 26px;
    --intro-heading-lh: 30px;
    --intro-heading-ls: -0.13px;
  }

  /* Tools: the h3 role at every width (28, 40, 48) */
  .intro-pair--tools {
    --intro-heading-size: var(--t-h3-size);
    --intro-heading-lh: 29px;
    --intro-heading-ls: -0.42px;
    --intro-lede-color: var(--ink);
  }

  .intro-pair .section-intro__heading {
    color: var(--ink);
  }

  @media (width >= 900px) {
    .intro-pair {
      --intro-lede-size: 18px;
      --intro-lede-lh: 28px;
      justify-content: flex-start;
    }

    .intro-pair .section-intro__heading {
      flex: 0 1 var(--intro-heading-basis);
      min-width: 0;
    }

    .intro-pair.section-intro--split .section-intro__lede {
      flex: 0 1 var(--intro-lede-measure);
      width: auto;
    }

    .intro-pair--loop {
      --intro-heading-size: var(--t-h2-size);
      --intro-heading-lh: 50px;
      --intro-heading-ls: var(--t-h2-ls);
    }

    .intro-pair--sub {
      --intro-heading-size: 40px;
      --intro-heading-lh: 46px;
      --intro-heading-ls: -0.2px;
    }

    .intro-pair--tools {
      --intro-heading-size: var(--t-h3-size);
      --intro-heading-lh: 42px;
      --intro-heading-ls: var(--t-h3-ls);
      --intro-lede-lh: 27px;
    }
  }

  @media (width >= 1680px) {
    .intro-pair--loop {
      --intro-heading-basis: 821px;
      --intro-heading-size: var(--t-h1-size);
      --intro-heading-lh: 67px;
      --intro-heading-ls: var(--t-h1-ls);
    }

    .intro-pair--tools {
      --intro-heading-size: var(--t-h3-size);
      --intro-heading-lh: 50px;
      --intro-heading-ls: var(--t-h3-ls);
    }
  }
}