/* =================================================================
   inline-cta.css — Bluworks v2
   ================================================================= */

.alt-cta {
  background: var(--surface, #FFFFFF) !important;
  border-top: 1px solid var(--line, #E4E8F3) !important;
  /* Uses the unified --space-section-sm rhythm */
  padding: var(--space-section-sm, clamp(48px, 6vw, 64px)) 0 !important;
  text-align: center !important;
}

.alt-cta .container {
  width: 100%;
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
  box-sizing: border-box;
}

.alt-cta h3 {
  font-family: var(--font-display, 'Neue Haas Grotesk Display', sans-serif) !important;
  font-size: 22px; /* --t-h2 */
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  margin: 0 0 12px !important; /* --s-3 */
  color: var(--ink, #0A0F1E) !important;
}

.alt-cta p {
  font-family: var(--font-display, sans-serif) !important;
  font-size: 16px !important; /* --t-lead */
  font-weight: 500 !important;
  color: var(--ink-mid, #4B5068) !important;
  line-height: 1.55 !important;
  margin: 0 0 20px !important; /* --s-5 */
}

/* Base button styles applied inside the block for Editor preview safety */
.alt-cta .btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  border-radius: 8px !important;
  font-family: var(--font-display, sans-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  background: var(--surface, #FFFFFF) !important;
  color: var(--ink, #0A0F1E) !important;
  border: 1.5px solid var(--line, #E4E8F3) !important;
  text-decoration: none !important;
  transition: background 220ms ease, border-color 220ms ease !important;
}

.alt-cta .btn-secondary:hover {
  background: var(--bg, #FAFBFD) !important;
  border-color: var(--ink, #0A0F1E) !important;
}

.alt-cta .btn-arrow {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  transition: transform 220ms ease !important;
}

.alt-cta .btn-secondary:hover .btn-arrow {
  transform: translateX(3px) !important;
}

html[dir="rtl"] .alt-cta .btn-arrow {
  transform: scaleX(-1) !important;
}

html[dir="rtl"] .alt-cta .btn-secondary:hover .btn-arrow {
  transform: scaleX(-1) translateX(3px) !important;
}

@media (prefers-reduced-motion: reduce) {
  .alt-cta .btn-secondary,
  .alt-cta .btn-arrow {
    transition: none !important;
  }
  .alt-cta .btn-secondary:hover .btn-arrow {
    transform: none !important;
  }
}
/* ── Arabic RTL font override (auto) ────────────────────────────── */
html[dir="rtl"] .alt-cta h3,
html[dir="rtl"] .alt-cta p,
html[dir="rtl"] .alt-cta .btn-secondary {
  font-family: 'Noto Sans Arabic', 'Segoe UI', sans-serif !important;
}