/* styles/sections/hero-copy-beside.css
 * A white hero of heading and sub only (the hero-copy recipe, no actions) whose wide frame sets the
 * heading large with the sub in a column beside it, bottom-aligned. Geometry is the Tools frames
 * (jHMd0 390, y0AYMX 1440, C0c8g 1920). Lines sit on whole pixels, as Pencil draws them. */
@layer sections {
  /* M: 56 above and below, heading display-md (44), sub 17/1.6, 32 apart. */
  .tools-hero {
    padding-block: var(--section-xs) var(--space-56);
  }

  .tools-hero__copy {
    --hero-pad-top: 0px;
    --hero-gap: var(--space-32);
    --hero-heading-lh: round(nearest, var(--t-display-md-lh) * 1em, 1px);
    --hero-deck-size: var(--t-body-size);
    --hero-deck-lh: round(nearest, var(--t-body-lh) * 1em, 1px);
  }

  /* The frames break the heading greedily (1920: "Point Brief at" over "your work"). */
  .tools-hero__heading {
    text-wrap: wrap;
  }

  /* D: 96 above, 80 below, heading display-lg (88) on one line, the sub 520 wide, 40 apart. Below
     1440 the heading scales with the content width (its line is 9.5em) so it keeps one line. */
  @media (min-width: 900px) {
    .tools-hero {
      padding-block: var(--section-xs) var(--space-80);
    }

    .tools-hero__copy {
      --hero-gap: var(--space-40);
      --hero-heading-size: min(var(--t-display-lg-size), (100vw - 2 * var(--page-gutter)) / 9.6);
      --hero-heading-lh: round(nearest, var(--t-display-lg-lh) * 1em, 1px);
      --hero-deck-size: var(--t-body-lg-size);
      --hero-deck-lh: round(nearest, var(--t-body-lg-lh) * 1em, 1px);
      --hero-deck-measure: 520px;
    }
  }

  /* W: 115 above, 120 below. The heading is 168 (display-xl size, display-lg tracking) in a 1180
     box over two lines; the sub, 440 wide and still 20/1.5, sits at the row's end, bottom-aligned.
     Between 1680 and 1920 the heading box gives way and its size follows (1180 / 168 = 7.02em). */
  @media (min-width: 1680px) {
    .tools-hero {
      padding-block: var(--section-xs) 120px;
    }

    .tools-hero__copy {
      --hero-heading-size: min(var(--t-display-xl-size), (100vw - 2 * var(--page-gutter) - 480px) / 7.03);
      --hero-heading-ls: var(--t-display-lg-ls);
      --hero-deck-size: var(--t-body-lg-size);
      --hero-deck-measure: 440px;

      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }

    .tools-hero__heading {
      flex: 0 1 1180px;
      min-width: 0;
    }

    .tools-hero__deck {
      flex: 0 0 var(--hero-deck-measure);
    }
  }
}