/* =========================================================================
   Aster — The close, and the footer that continues it
   Both sit on the same ink block; one hairline is all that separates them.
   ========================================================================= */

.aster-close {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--on-ink-muted);
  padding-top: var(--wp--custom--section-space-large);
  padding-bottom: var(--wp--custom--section-space);
}

.aster-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--wp--preset--spacing--70) clamp(var(--wp--preset--spacing--70), 6vw, var(--wp--preset--spacing--90));
}

.aster-close__title {
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--xxl);
  font-weight: var(--wp--custom--weight-medium);
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--on-ink);
  text-wrap: balance;
}

.aster-close__body {
  max-width: var(--wp--custom--measure-narrow);
  margin: 0 0 var(--wp--preset--spacing--40);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--on-ink-muted);
}

.aster-close__alt {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  color: var(--wp--preset--color--on-ink-muted);
}
.aster-close__alt a {
  color: var(--wp--preset--color--accent-on-ink);
  text-decoration: none;
  border-bottom: var(--wp--custom--line-hairline) solid var(--wp--preset--color--line-on-ink);
  transition: border-color var(--wp--custom--duration-fast) var(--wp--custom--ease-out);
}
.aster-close__alt a:hover { border-bottom-color: currentColor; }

.aster-close__action { justify-self: end; }


/* -------------------------------------------------------------------------
   Tablet — the button drops below the words
   ------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .aster-close__inner { grid-template-columns: minmax(0, 1fr); }
  .aster-close__action { justify-self: start; }
}


/* -------------------------------------------------------------------------
   Phone — the button goes full width, as it does in the hero
   ------------------------------------------------------------------------- */
@media (max-width: 46rem) {
  .aster-close__body { max-width: none; }
  .aster-close__action { justify-self: stretch; }
  .aster-close__action .aster-button {
    width: 100%;
    justify-content: center;
  }
}