/* Shared section CTA button — the primary "Start with Ki" / "Buy Now" button,
   reusable in any informative Ki section via the "Call to action button"
   control group (see add_section_cta_controls() in abstract-class-base.php).

   Matches the existing primary button spec used by the morning banner and the
   founders CTA: 54px tall, 12px/0.22em uppercase sans, 2px radius, arrow after
   the label, hover inverts to an outline.

   When the switcher is OFF the widget renders no markup at all, so there is
   nothing here to hide and no leftover spacing — margin-top lives on
   .ki-section-cta itself, which only exists when the button exists. */

.ki-scope .ki-section-cta {
  display: flex;
  justify-content: center;   /* overridden by the Alignment control */
  margin-top: 48px;          /* overridden by the "Space above" control */
}

.ki-scope .ki-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 54px;
  padding: 0 32px;
  font-family: var(--ki-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ki-scope .ki-cta-btn:hover { transform: translateY(-1px); }

.ki-scope .ki-cta-btn .ki-cta-arrow {
  font-family: var(--ki-serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
  transition: transform 220ms ease;
}
.ki-scope .ki-cta-btn:hover .ki-cta-arrow { transform: translateX(4px); }

/* ── Style presets ─────────────────────────────────────────── */
.ki-scope .ki-cta-btn.is-deep {
  background: var(--ki-blue-deep);
  color: #fff;
  border-color: var(--ki-blue-deep);
}
.ki-scope .ki-cta-btn.is-deep:hover {
  background: transparent;
  color: var(--ki-blue-deep);
}

.ki-scope .ki-cta-btn.is-paper {
  background: var(--ki-paper);
  color: var(--ki-ink);
  border-color: var(--ki-paper);
}
.ki-scope .ki-cta-btn.is-paper:hover {
  background: var(--ki-blue);
  color: var(--ki-paper);
  border-color: var(--ki-blue);
}

.ki-scope .ki-cta-btn.is-ink {
  background: var(--ki-ink);
  color: var(--ki-paper);
  border-color: var(--ki-ink);
}
.ki-scope .ki-cta-btn.is-ink:hover {
  background: var(--ki-blue-deep);
  border-color: var(--ki-blue-deep);
}

.ki-scope .ki-cta-btn.is-ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.ki-scope .ki-cta-btn.is-ghost:hover {
  background: var(--ki-blue-deep);
  color: var(--ki-paper);
  border-color: var(--ki-blue-deep);
}

/* ── Responsive ───────────────────────────────────────────────
   Phones: let a long label wrap instead of overflowing the section,
   and never exceed the container width. */
@media (max-width: 600px) {
  .ki-scope .ki-section-cta { margin-top: 36px; }
  .ki-scope .ki-cta-btn {
    height: auto;
    min-height: 52px;
    padding: 14px 24px;
    max-width: 100%;
    font-size: 11px;
    letter-spacing: 0.16em;
    gap: 10px;
  }
}