/**
 * Organism: About CTA
 * Call-to-action section with gradient background for About page
 */

.about-cta {
    background: var(--gradient-brand);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-10) var(--spacing-8);
    text-align: center;
}

@media (min-width: 768px) {
    .about-cta {
        padding: var(--spacing-12) var(--spacing-10);
    }
}

.about-cta-content {
    max-width: 600px;
    margin: 0 auto;
}

.about-cta-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    margin: 0 0 var(--spacing-4);
}

@media (min-width: 768px) {
    .about-cta-title {
        font-size: var(--font-size-3xl);
    }
}

.about-cta-text {
    font-size: var(--font-size-base);
    color: var(--color-brand-100);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--spacing-6);
}

@media (min-width: 768px) {
    .about-cta-text {
        font-size: var(--font-size-lg);
    }
}

.about-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    justify-content: center;
}

@media (min-width: 480px) {
    .about-cta-buttons {
        flex-direction: row;
    }
}

.about-cta .btn-primary {
    background-color: var(--color-white);
    color: var(--color-brand-700);
    border-color: var(--color-white);
}

.about-cta .btn-primary:hover {
    background-color: var(--color-brand-50);
}

.about-cta .btn-secondary {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-overlay-white-40);
}

.about-cta .btn-secondary:hover {
    background-color: var(--color-overlay-white-10);
    border-color: var(--color-overlay-white-60);
}