/* ==========================================================
   §6  CTA SECTION – v4.0 UPGRADE PATCH
   ──────────────────────────────────────────────────────────
   Purpose: Enhances existing §6 CTA rules in 03-sections-home.css
   Usage:   Add AFTER 03-sections-home.css (or merge into it)
   Layout:  LOCKED — no structural changes
   Adds:    Background image, overlay opacity, text alignment,
            enhanced buttons, fade-in animation, improved mobile
   ========================================================== */


/* ── Background Image Support ──
   When bg_image is set, the section itself gets the image
   via inline style. The .cta-overlay gets dynamic opacity. */

.cta-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Override overlay when background image is present:
   inline style sets opacity via rgba, this ensures layer stacking */
.cta-section .cta-overlay {
  transition: background var(--mt-duration-slow, 0.4s) var(--mt-ease-default, ease);
}


/* ── Text Alignment Variants ── */

.cta-section.cta-align-left .container {
  text-align: left;
}

.cta-section.cta-align-left .cta-subtitle {
  margin-inline: 0;
}

.cta-section.cta-align-left .cta-actions {
  justify-content: flex-start;
}

.cta-section.cta-align-right .container {
  text-align: right;
}

.cta-section.cta-align-right .cta-subtitle {
  margin-inline: 0 0;
  margin-left: auto;
}

.cta-section.cta-align-right .cta-actions {
  justify-content: flex-end;
}


/* ── Enhanced Button Transitions ── */

.cta-section .cta-actions .btn-light,
.cta-section .cta-actions .btn-outline-light {
  border-radius: var(--mt-radius-md, 10px);
  font-size: var(--mt-text-sm, 0.82rem);
  letter-spacing: var(--mt-tracking-wide, 0.04em);
  transition:
    transform var(--mt-duration-normal, 0.25s) var(--mt-ease-default, ease),
    box-shadow var(--mt-duration-normal, 0.25s) var(--mt-ease-default, ease),
    background var(--mt-duration-fast, 0.15s) var(--mt-ease-default, ease),
    border-color var(--mt-duration-fast, 0.15s) var(--mt-ease-default, ease);
}

.cta-section .cta-actions .btn-light:focus-visible,
.cta-section .cta-actions .btn-outline-light:focus-visible {
  outline: 2px solid var(--mt-accent, #38bdf8);
  outline-offset: 3px;
}

.cta-section .cta-actions .btn-light:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cta-section .cta-actions .btn-outline-light:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.12);
}


/* ── Eyebrow Enhancement ── */

.cta-section .cta-eyebrow {
  position: relative;
  padding-bottom: var(--mt-space-3, 12px);
  margin-bottom: var(--mt-space-5, 20px);
}

.cta-section .cta-eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--mt-accent, #38bdf8);
  border-radius: 2px;
  opacity: 0.6;
}

.cta-section.cta-align-left .cta-eyebrow::after {
  left: 0;
  transform: none;
}

.cta-section.cta-align-right .cta-eyebrow::after {
  left: auto;
  right: 0;
  transform: none;
}


/* ── Note Enhancement ── */

.cta-section .cta-note {
  letter-spacing: var(--mt-tracking-wide, 0.04em);
  opacity: 0.7;
  transition: opacity var(--mt-duration-normal, 0.25s);
}

.cta-section:hover .cta-note {
  opacity: 0.9;
}


/* ── Subtle Fade-In Animation ──
   Uses IntersectionObserver-friendly class */

@keyframes ctaFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-section .container {
  animation: ctaFadeUp 0.8s var(--mt-ease-default, ease) both;
}


/* ── Improved Mobile Responsive ── */

@media (max-width: 991px) {
  /* Alignment resets to center on tablet */
  .cta-section.cta-align-left .container,
  .cta-section.cta-align-right .container {
    text-align: center;
  }

  .cta-section.cta-align-left .cta-subtitle,
  .cta-section.cta-align-right .cta-subtitle {
    margin-inline: auto;
  }

  .cta-section.cta-align-left .cta-actions,
  .cta-section.cta-align-right .cta-actions {
    justify-content: center;
  }

  .cta-section.cta-align-left .cta-eyebrow::after,
  .cta-section.cta-align-right .cta-eyebrow::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .cta-section .cta-eyebrow {
    font-size: 0.68rem;
    margin-bottom: var(--mt-space-4, 16px);
  }

  .cta-section .cta-subtitle {
    margin-bottom: var(--mt-space-8, 32px);
  }

  .cta-section .cta-actions {
    gap: var(--mt-space-3, 12px);
  }

  .cta-section .cta-actions .btn-light,
  .cta-section .cta-actions .btn-outline-light {
    padding: 14px 32px;
    font-size: var(--mt-text-sm, 0.82rem);
  }

  .cta-section .cta-note {
    font-size: 0.68rem;
    margin-top: var(--mt-space-5, 20px);
  }
}

@media (max-width: 575px) {
  .cta-section {
    padding: 64px 0;
  }

  .cta-section .cta-title {
    font-size: 1.6rem;
    line-height: 1.2;
  }

  .cta-section .cta-actions .btn-light,
  .cta-section .cta-actions .btn-outline-light {
    width: 100%;
    max-width: 300px;
    padding: 14px 24px;
  }
}


/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
  .cta-section .container {
    animation: none;
  }

  .cta-section .cta-actions .btn-light,
  .cta-section .cta-actions .btn-outline-light {
    transition: none;
  }
}


/* ── Print ── */

@media print {
  .cta-section {
    background: #0f172a !important;
    padding: 40px 0;
  }

  .cta-section .cta-overlay {
    display: none;
  }
}