/**
 * Orlando Studio - CTA Section Component
 * Final call-to-action section
 * BEM: cta, cta__content, cta__heading, cta__description, cta__actions
 */

.cta {
  background: transparent;
  text-align: center;
  position: relative;
}

/* Vignette overlay for better text readability */
.cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-radial-overlay);
  pointer-events: none;
  z-index: 0;
}

.cta__content {
  /* Orlando Note: Could use .max-w-700 utility in HTML */
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.cta__heading {
  font-size: var(--font-size-h1);
  margin-bottom: var(--space-lg);
  text-shadow: var(--text-shadow-lg);
}

.cta__description {
  font-size: var(--font-size-h3);
  color: var(--color-text-secondary);
  font-weight: var(--font-normal);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2xl);
  text-shadow: var(--text-shadow-md);
}

.cta__actions {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* CTA buttons use standard button styles from shared.css
   No custom overrides needed - they inherit the gold -> teal behavior */

/* Responsive adjustments */
@media (max-width: 768px) {
  .cta__heading {
    font-size: var(--font-size-h2);
  }
  
  .cta__description {
    font-size: var(--font-size-body);
  }
}

@media (max-width: 480px) {
  .cta__heading {
    font-size: var(--font-size-h3);
    margin-bottom: var(--space-md);
  }
  
  .cta__description {
    font-size: var(--font-size-small);
    margin-bottom: var(--space-xl);
  }
  
  .cta__actions {
    gap: var(--space-md);
  }
  
  .cta__actions .btn {
    width: 100%;
  }
}