/* ============================================================
   COMPONENT: CTA Band (Shared, internal pages)
   FILE: assets/css/cta-band.css
   Phase: Stage 6 (Final Master Blueprint Roadmap V3, §8).
   Depends on: tokens.css, base.css, buttons.css, surfaces.css.
   Owns only .cta-band* selectors — deliberately mirrors
   final-cta.css's rules so the two visual systems stay identical
   (see components/cta-band.html header comment for why two files
   exist for one design).

   Bilingual/RTL: logical properties throughout.
   ============================================================ */

.cta-band {
  padding-block: var(--space-10);
}

.cta-band__inner {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.cta-band__heading {
  font-size: var(--text-h2);
  color: var(--color-navy);
  margin-block-end: var(--space-1);
}

.cta-band__subheading {
  color: var(--color-dark-gray);
  margin-block-end: var(--space-4);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.cta-band.surface--gradient {
  background: #ffffff;
  color: var(--color-navy);
}

.cta-band.surface--gradient .cta-band__heading {
  color: var(--color-navy);
}

.cta-band.surface--gradient .cta-band__subheading {
  color: var(--color-dark-gray);
}

 /* FINAL WHITE-SURFACE OVERRIDE
    CTA bands are intentionally white on internal pages.
    Keep the secondary action visible on that light surface. */
.cta-band.surface--gradient .btn--secondary.btn--on-dark,
.final-cta .btn--secondary.btn--on-dark {
  border-color: rgba(var(--color-navy-rgb), 0.3);
  color: var(--color-navy);
  background-color: transparent;
}

.cta-band.surface--gradient .btn--secondary.btn--on-dark:hover:not([disabled]):not([aria-disabled="true"]),
.final-cta .btn--secondary.btn--on-dark:hover:not([disabled]):not([aria-disabled="true"]) {
  border-color: var(--color-navy);
  background-color: rgba(var(--color-navy-rgb), 0.04);
}