/* ============================================
   CTA SECTION - UPDATED FOR DESIGN SYSTEM
   ============================================ */

/* Component Wrapper - Handles max-width for CTA Section */
.asl-component-wrapper.asl-cta-wrapper {
  max-width: var(--max-width-container) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Apply full-width breakout to ALL screen sizes */
body .asl-cta-section {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

/* Main Section - Design System Variables */
.asl-cta-section {
  width: 100%;
  padding: var(--padding-desktop) var(--padding-sides-desktop) !important;
  background: var(--color-white) !important;
  position: relative;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

/* Tablet Padding */
@media (max-width: 1024px) {
  .asl-cta-section {
    padding: var(--padding-tablet) var(--padding-sides-desktop) !important;
  }
}

/* Mobile Padding */
@media (max-width: 768px) {
  .asl-cta-section {
    padding: var(--padding-mobile) var(--padding-sides-mobile) !important;
  }
}

/* Box-sizing for all children */
body .asl-cta-section * {
  box-sizing: border-box;
}

/* Background Overlay */
body .asl-cta-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

/* Radial Effect - UPDATED: Uses design system color */
body .asl-cta-radial-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(198, 161, 91, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--z-normal); /* UPDATED */
}

/* ========================================
   MAIN CONTENT CONTAINER
   ======================================== */

.asl-cta-wrapper .asl-cta-container {
  max-width: var(--max-width-container);
  margin: 0 auto;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: var(--z-above);
}

/* ========================================
   HEADER SECTION - Design System
   ======================================== */

.asl-cta-header {
  text-align: center;
  margin-bottom: var(--gap-large); /* 60px */
}

/* H2 Title - Design System Variables */
.asl-cta-title {
  font-family: var(--font-body) !important;
  font-size: var(--font-h2) !important;
  font-weight: var(--weight-semibold) !important;
  line-height: var(--line-height-h2) !important;
  letter-spacing: var(--letter-spacing-h2) !important;
  color: var(--color-navy) !important;
  margin: var(--margin-h2) !important;
  margin-bottom: 24px !important;
}

/* Mobile H2 */
@media (max-width: 768px) {
  .asl-cta-title {
    font-size: var(--font-h2-mobile) !important;
  }
}

/* Subtitle/Description - Design System Variables */
.asl-cta-description {
  font-family: var(--font-body) !important;
  font-size: var(--font-body) !important;
  font-weight: var(--weight-regular) !important;
  line-height: var(--line-height-body) !important;
  letter-spacing: var(--letter-spacing-body) !important;
  color: var(--color-charcoal) !important;
  max-width: var(--max-width-content) !important;
  margin: 0 auto;
}

/* Mobile Body Text */
@media (max-width: 768px) {
  .asl-cta-description {
    font-size: var(--font-body-mobile) !important;
  }
}

/* Button Styles - UPDATED: Design System Variables */
.asl-cta-wrapper .asl-cta-button {
  display: inline-block;
  background: var(--button-primary-bg); /* UPDATED: gradient */
  color: var(--color-white) !important; /* UPDATED */
  border: none;
  padding: var(--button-padding-primary); /* UPDATED: 16px 40px */
  min-height: var(--button-min-height); /* UPDATED: 56px */
  font-size: var(--button-font-size); /* UPDATED: 16px */
  font-weight: var(--weight-semibold) !important; /* UPDATED */
  border-radius: var(--border-radius-small); /* UPDATED: 4px */
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-fast); /* UPDATED: 0.3s ease */
  box-shadow: var(--button-shadow); /* UPDATED */
}

.asl-cta-wrapper .asl-cta-button:hover {
  transform: translateY(-4px);
  box-shadow: var(--button-shadow-hover); /* UPDATED */
  background: var(--button-primary-hover); /* UPDATED: navy */
  color: var(--color-white) !important; /* UPDATED */
  text-decoration: none;
}

.asl-cta-wrapper .asl-cta-button:focus {
  outline: var(--border-width) solid var(--color-gold); /* UPDATED */
  outline-offset: 2px;
}

/* Tablet Responsive */
@media (max-width: 1024px) {
  .asl-cta-wrapper .asl-cta-button {
    padding: var(--button-padding-tablet) !important; /* UPDATED: 14px 32px */
    min-height: var(--button-min-height-tablet) !important; /* UPDATED: 52px */
    font-size: var(--button-font-size-tablet) !important; /* UPDATED: 15px */
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  body .asl-cta-radial-effect {
    width: 400px !important;
    height: 400px !important;
  }
}

@media (max-width: 480px) {
  .asl-cta-wrapper .asl-cta-button {
    padding: var(--button-padding-mobile) !important;
    min-height: var(--button-min-height-mobile) !important;
    font-size: var(--button-font-size-mobile) !important;
    width: 100% !important;
    max-width: 280px !important;
  }
}