---
/** The closing band on a world page: a line, a note and one or two buttons. */
interface Props {
  title: string;
  note?: string;
}
const { title, note } = Astro.props;
---
<aside class="cta" aria-label={title}>
  <div class="words">
    <p class="t">{title}</p>
    {note && <p class="n">{note}</p>}
  </div>
  <div class="btns"><slot /></div>
</aside>

<style>
  .cta {
    margin-top: 48px;
    padding: 32px 36px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: var(--gk-midnight);
    border: 1px solid var(--gk-lines);
    border-radius: var(--gk-radius);
  }
  .words {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .t {
    margin: 0;
    font-family: var(--gk-font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.05em;
  }
  .n {
    margin: 0;
    font-size: 15px;
    color: var(--gk-muted);
  }
  .btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  @media (max-width: 640px) {
    .cta {
      padding: 24px 20px;
    }
  }
</style>