/* styles/sections/closing-flush.css
 * The light inline closing as the About frames draw it (DcHzn 1440, rXh55 390, R3LdO 1920): no
 * rule above, the heading 56 (D and W 96) below the section above, the actions 16 under it on M
 * and centred on its row, right-aligned, from D. Values only, through the inline recipe's
 * properties (components.css). Heading roles: h3 on M, h2 on D, h1 on W, on whole-pixel 1.05
 * lines (29, 50, 67). Every frame sets the heading on one line, so below the frame widths it
 * shrinks with the room it has (the section's inline size less the gutters and, from D, the
 * 341px actions and their 24 gap): 28 at the 390 frame, 48 at 1440, 64 at 1920. It also scales
 * with the content width on the section h2's basis (display-heading.css) at the frames' ratio
 * (48:56 on D, 64:96 on W), so it never sets larger than the h2s between frame widths. */
@layer sections {
  .closing-cta--flush {
    container-type: inline-size;
    --closing-inline-rule-width: 0px;
    --closing-inline-body-pad: 0px;
    --closing-inline-align: center;
    --closing-inner-pad: var(--space-56);
    --closing-gap: var(--space-16);
    --closing-actions-gap: var(--space-16);
    --closing-heading-size: min(var(--t-h3-size), (100cqi - 48px) * 0.0819);
    --closing-heading-lh: round(nearest, 1.05em, 1px);
    --closing-heading-ls: var(--t-h3-ls);
    --closing-heading-measure: none;
    --closing-columns: minmax(0, 1fr) auto;
  }

  @media (min-width: 900px) {
    .closing-cta--flush {
      --closing-inner-pad: var(--space-96);
      --closing-gap: var(--space-24);
      --closing-actions-gap: var(--space-24);
      --closing-heading-size: min(var(--t-h2-size), (100cqi - 160px) * 0.0375, (100cqi - 525px) * 0.084);
      --closing-heading-ls: var(--t-h2-ls);
    }
  }

  @media (min-width: 1680px) {
    .closing-cta--flush {
      --closing-heading-size: min(var(--t-h1-size), (100cqi - 240px) * 0.0381, (100cqi - 605px) * 0.084);
      --closing-heading-ls: var(--t-h1-ls);
    }
  }
}