/* ============================================================
   nexus-core/modules/cta-section.module/module.css
   ============================================================ */

.cta-section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-padding-y);
}

/* ── Decorative rings ────────────────────────────────────── */
.cta-section__rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cta-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(111, 198, 172, 0.10);
}

.cta-ring--1 {
  width: 500px;
  height: 500px;
  bottom: -200px;
  left: -100px;
}

.cta-ring--2 {
  width: 700px;
  height: 700px;
  bottom: -320px;
  left: -200px;
  border-color: rgba(111, 198, 172, 0.06);
}

.cta-ring--3 {
  width: 440px;
  height: 440px;
  top: -160px;
  right: -100px;
  border-color: rgba(111, 198, 172, 0.07);
}

/* ── Floating icon nodes ─────────────────────────────────── */
.cta-section__floats {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Base float node — white circle like radar icons */
.cta-float {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.20);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: ctaFloat 6s ease-in-out infinite;
}

/* Google logo — prominent top right */
.cta-float--google {
  width: 64px;
  height: 64px;
  top: 18%;
  right: 8%;
  background: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.9);
  animation-delay: 0s;
  animation-duration: 7s;
}

/* Small icon top left */
/* Customizable floating logos — positioned by X/Y % (inline), gentle drift.
   Bare logos (no circle), matching the partner-section treatment. Wrapper
   owns centering; inner <img> owns the drift so the transforms don't fight.
   Replaces the former hardcoded .cta-float--tl/bl/br decorative icons. */
.cta-float-logo {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.cta-float-logo img {
  display: block;
  object-fit: contain;
  animation: ctaFloat ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cta-float-logo img { animation: none; }
}

@keyframes ctaFloat {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Inner content ───────────────────────────────────────── */
.cta-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 720px;
  margin-inline: auto;
}

/* ── Avatar cluster ──────────────────────────────────────── */
.cta-section__avatars {
  display: flex;
  align-items: center;
}

.cta-section__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  margin-left: -12px;
  transition: transform var(--transition-base), z-index var(--transition-base);
  position: relative;
}

.cta-section__avatar:first-child {
  margin-left: 0;
}

.cta-section__avatar:hover {
  transform: translateY(-4px) scale(1.08);
  z-index: 2;
}

.cta-section__avatar--initial {
  background-color: var(--color-primary-container);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Eyebrow ─────────────────────────────────────────────── */
.cta-section__eyebrow {
  color: var(--color-accent);
  letter-spacing: var(--tracking-wider);
}

/* ── Headline ────────────────────────────────────────────── */
.cta-section__headline {
  font-size: var(--text-headline-lg);
  color: var(--color-on-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

/* On light schemes headline goes navy */
.scheme-white .cta-section__headline,
.scheme-teal .cta-section__headline {
  color: var(--color-primary);
}

/* FIXED — this was broken CSS, not a stylistic choice:
   the previous rule here was an unclosed selector
   (`.scheme-white ... , .scheme-teal` with no `{` before the next
   comment). CSS comments don't terminate a selector list, so the parser
   kept reading past it and silently glued that dangling selector onto
   .cta-section__subtext's declaration block below — meaning the teal
   underline override never applied, AND .cta-section__subtext's font
   rules were accidentally also being applied to
   `.text-underline-teal::after` on light schemes.
   Removed entirely: main.css's global .text-underline-teal::after
   already applies teal (#6fc6ac) unconditionally regardless of scheme,
   so no override was actually needed here once the bug is understood —
   if you did want the underline to behave differently on a specific
   scheme, let me know and I'll add a real (working) override. */

/* ── Subtext ─────────────────────────────────────────────── */
.cta-section__subtext {
  font-size: var(--text-body-lg);
  color: rgba(255, 255, 255, 0.70);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}

.scheme-white .cta-section__subtext,
.scheme-teal .cta-section__subtext {
  color: var(--color-on-surface-variant);
}

/* ── CTAs ────────────────────────────────────────────────── */
.cta-section__ctas {
  justify-content: center;
  margin-top: var(--space-1);
}

/* RESOLVED — checked against module.html: .btn-primary-dark and
   .btn-secondary-dark are real, consistently-used classes (not orphaned).
   They're just missing from the button-system doc list — worth adding
   them there so future audits don't re-flag this. */
.scheme-white .cta-section__ctas .btn-primary-dark,
.scheme-teal .cta-section__ctas .btn-primary-dark {
  background-color: var(--color-secondary); /* NOTE: --color-secondary and
    --color-accent are duplicate tokens (both = #6fc6ac) — flagged, not
    fixed here. */
  border-color: var(--color-secondary);
  color: var(--color-on-primary);
}

.scheme-white .cta-section__ctas .btn-secondary-dark,
.scheme-teal .cta-section__ctas .btn-secondary-dark {
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ── Split layout variant ────────────────────────────────── */
.cta-section--split .cta-section__inner {
  max-width: 100%;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: var(--space-7);
}

.cta-section--split .cta-section__avatars,
.cta-section--split .cta-section__eyebrow,
.cta-section--split .cta-section__headline,
.cta-section--split .cta-section__subtext {
  text-align: left;
}

.cta-section--split .cta-section__ctas {
  justify-content: flex-start;
}

.cta-section--split .cta-section__text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
/* RESOLVED — checked against module.html: .cta-section__google-badge has
   no matching element (the actual Google icon uses .cta-float--google,
   defined above). This was dead CSS, removed. */
    font-size: var(--text-headline-md);
  }

  .cta-section__subtext {
    font-size: var(--text-body-md);
  }

  .cta-section--split .cta-section__inner {
    flex-direction: column;
    text-align: center;
  }

  .cta-section--split .cta-section__ctas {
    justify-content: center;
  }

  .cta-section__ctas {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

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