/* ================================================================
   BUTTONS — the shared call-to-action styles.

   Every block uses these rather than styling its own buttons, so the CTA
   treatment stays consistent and a change lands in one place. Blocks may adjust
   placement (margins, grid position) but not the button's own appearance.

   The design uses five treatments:

     .btn--accent          solid green, dark text   — the primary CTA everywhere
     .btn--light           solid white, dark text   — secondary, on dark backgrounds
     .btn--outline-light   white outline            — tertiary, on dark backgrounds
     .btn--outline-dark    dark outline             — secondary, inside white panels
     .btn--link            green text + chevron     — "Read more", "View full testimonial"

   The one inversion in the design is a black button on the green callout bar;
   that is .btn--invert, used only by the callout-bar block.
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9375rem 1.625rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--f-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solid green — primary. ------------------------------------------ */
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--green-ink);
}

.btn--accent:hover,
.btn--accent:focus-visible {
  background: var(--accent-l);
  border-color: var(--accent-l);
}

/* Solid white — secondary, sits beside green on dark. ------------- */
.btn--light {
  background: var(--bg-invert);
  border-color: var(--bg-invert);
  color: var(--ink);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--bg-invert-h);
  border-color: var(--bg-invert-h);
}

/* Outlined on dark. ----------------------------------------------- */
.btn--outline-light {
  background: transparent;
  border-color: var(--bg-invert);
  color: var(--bg-invert);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
  background: var(--bg-invert);
  color: var(--ink);
}

/* Outlined inside a white panel. ---------------------------------- */
.btn--outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus-visible {
  background: var(--ink);
  color: var(--bg-invert);
}

/* Black on green — the callout bar only. -------------------------- */
.btn--invert {
  background: var(--green-ink);
  border-color: var(--green-ink);
  color: var(--bg-invert);
}

.btn--invert:hover,
.btn--invert:focus-visible {
  background: var(--dark);
  border-color: var(--dark);
}

/* Modifiers -------------------------------------------------------- */

.btn--sm {
  padding: 0.6875rem 1.125rem;
  font-size: 0.6875rem;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* Text link with a trailing chevron. ------------------------------- */
.btn--link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
}

.btn--link::after {
  content: "\203A";              /* › */
  font-size: 1.15em;
  line-height: 1;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn--link:hover::after,
.btn--link:focus-visible::after {
  transform: translateX(3px);
}

/* Inside a white panel the link reads better in ink. */
.btn--link.is-ink { color: var(--ink); }

/* Button rows wrap instead of overflowing on narrow screens. ------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 420px) {
  .btn-row .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn--link::after { transition: none; }
}