/* File: assets/css/final-cta.css
   ================================================================
   TGT THEME — FINAL CALL TO ACTION (two columns, full-bleed hero bg)
   Works with: <section class="tgt-final-cta"> … <div class="final-cta-grid"> …
   Depends on: assets/css/variables.css, assets/css/buttons.css
   ================================================================ */

/* Full-bleed dark gradient (matches hero) */
.tgt-final-cta {
  position: relative;
  overflow: hidden;
  color: var(--tgt-color-white);

  /* same gradient family as hero */
  background: linear-gradient(135deg, var(--tgt-color-primary) 0%, #0d1f36 20%, var(--tgt-color-accent) 100%);

  /* full-bleed strip */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* vertical rhythm */
  padding: var(--tgt-space-xxl) 0;
}

/* soft glows */
.tgt-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(600px 300px at 15% 25%, rgba(212,165,116,.16), transparent 60%),
    radial-gradient(600px 300px at 85% 75%, rgba(122,36,72,.22), transparent 60%);
  animation: finalCtaGlow 8s ease-in-out infinite alternate;
}
@keyframes finalCtaGlow {
  0% { opacity:.75; transform: scale(1); }
  100% { opacity:1; transform: scale(1.03); }
}

/* subtle particles */
.tgt-final-cta::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 140px 90px, rgba(212,165,116,.4), transparent);
  background-size: 160px 130px;
  animation: finalCtaParticles 16s linear infinite;
}
@keyframes finalCtaParticles {
  from { transform: translateY(0); }
  to   { transform: translateY(-130px); }
}

/* keep content above effects */
.tgt-final-cta .tgt-hero-container,
.tgt-final-cta .tgt-container { position: relative; z-index: 2; }

/* ===== LAYOUT ===== */

.final-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 980px) { .final-cta-grid { grid-template-columns: 1fr; } }

.final-cta-column {
  max-width: 68ch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tgt-space-md);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* ===== TYPOGRAPHY ===== */

.final-cta__title {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  font-weight: var(--tgt-font-weight-bold);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tgt-color-gold);
  text-wrap: balance;
}

.final-cta__text {
  margin: 0;
  color: var(--tgt-color-text-inverted); /* light-on-dark copy */
  line-height: 1.75;
  text-wrap: pretty;
  max-width: 68ch;
}

/* ===== CTA ===== */

.final-cta__actions { margin-top: var(--tgt-space-sm); }

/* Larger pill in this section only */
.tgt-final-cta .tgt-btn--xl {
  padding: 18px 28px;
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
  border-width: 2px;
  min-height: 56px;
  font-weight: 800;
}

/* Full-width on small screens */
.tgt-final-cta .tgt-btn--block { width: auto; }
@media (max-width: 520px) {
  .tgt-final-cta .tgt-btn--block { width: 100%; }
}