/*
 * CTA band — full-width forest block with a Playfair headline, a
 * short lead, and one or two buttons. Used at the bottom of marketing
 * pages to anchor the next action (reserve, become a member, join).
 *
 * Consumers today: home (join) and visitors (reserve). Promoted out
 * of pages/home.css when visitors became the second consumer; see
 * docs/solutions/best-practices/shared-css-classes-live-outside-
 * pages-dir-2026-04-11.md for the rule.
 *
 * No literal colour, spacing, or font values — everything routes
 * through var() tokens from _tokens.css.
 */

.cta-band {
  background: var(--forest);
  color: white;
  padding-block: 3.5rem;
}

.cta-band--photo {
  position: relative;
  overflow: hidden;
  padding-block: 5rem;
}

.cta-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cta-band-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.cta-band--photo .cta-band-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: oklch(from var(--forest) l c h / .75);
}

.cta-band--photo .cta-band-inner {
  position: relative;
  z-index: 2;
}

.cta-band-inner {
  max-width: 48rem;
  text-align: center;
}

.cta-band-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.cta-band-lead {
  font-size: var(--fs-base);
  color: var(--on-dark-75);
  line-height: 1.65;
  margin-bottom: 2rem;
}

.cta-band-actions {
  display: flex;
  gap: .875rem;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 48rem) {
  .cta-band-title {
    font-size: var(--fs-3xl);
  }
}