/*
 * Alf Theme — Call to Action Section
 *
 * Full-width banner with heading, body copy, and a CTA button.
 * Used as a recurring section at the bottom of most pages.
 */

.cta {
  background-color: var(--color-primary);
  padding-block: var(--spacing-xxl);
}

.cta__inner {
  max-width: var(--section-max-width);
  margin-inline: auto;
  padding-inline: var(--section-pad-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
}

.cta__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  max-width: 640px;
}

.cta__heading {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
}

.cta__body {
  font-size: var(--font-size-body-lg);
  color: rgba(255, 255, 255, 0.85);
}

.cta__action .btn--ghost {
  flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cta__inner {
    padding-inline: var(--section-pad-tab-landscape);
  }
}

@media (max-width: 768px) {
  .cta__inner {
    flex-direction: column;
    align-items: flex-start;
    padding-inline: var(--section-pad-tab-portrait);
  }

  .cta__heading {
    font-size: var(--font-size-h2-mobile);
  }

  .cta__action .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .cta__inner {
    padding-inline: var(--section-pad-mobile);
  }
}