/* styles/sections/closing-column.css
 * A Closing CTA in one column (closing.modifiers ['column'], MrJC0, ihwG5, Hcjmp): the heading,
 * then the deck and the actions pair, stacked, with no rule. Heading display-sm on M,
 * display-md on D and W, 900 wide; the frames break it where the "\n" puts it on D and W, and the
 * M frame wraps it greedily, so the <br> drops below 900. */
@layer sections {
  .closing-cta--column {
    --closing-pad-top: 88px;
    --closing-pad-bottom: 88px;
    --closing-gap: var(--space-24);
    --closing-heading-size: var(--t-display-sm-size);
    --closing-heading-lh: 38px;
    --closing-heading-ls: var(--t-display-sm-ls);
    --closing-heading-measure: 900px;
    --closing-deck-size: 17px;
    --closing-deck-lh: 24px;
  }

  .closing-cta--column .closing-cta__lead {
    display: flex;
    flex-direction: column;
    gap: var(--closing-gap);
  }

  .closing-cta--column .closing-cta__body {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--closing-gap);
    padding-top: 0;
    border-top: 0;
  }

  @media (width < 900px) {
    .closing-cta--column .closing-cta__heading br {
      display: none;
    }
  }

  @media (width >= 900px) {
    .closing-cta--column {
      --closing-pad-top: 144px;
      --closing-pad-bottom: 144px;
      --closing-gap: var(--space-32);
      --closing-heading-size: var(--t-display-md-size);
      --closing-heading-lh: 68px;
      --closing-heading-ls: var(--t-display-md-ls);
      --closing-deck-size: 20px;
      --closing-deck-lh: 28px;
    }
  }

  @media (width >= 1680px) {
    .closing-cta--column {
      --closing-pad-top: 173px;
      --closing-pad-bottom: 173px;
      --closing-heading-lh: 91px;
    }
  }
}