/* 
 * Call to Action Module Styles
 * Flexible CTA component with multiple layout options:
 * - standard: Centered content with buttons below
 * - split: Two-column layout with text on one side, buttons on other
 * - fullwidth: Edge-to-edge background with centered content
 */
 
.cta-module {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Background Styles */
.cta-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.cta-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
}

.solid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Container Styles */
.cta-container {
    width: var(--container-width);
    max-width: var(--container-max-width);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Content Styles */
.cta-content {
    text-align: center;
    padding: calc(var(--current-scale) * (2.5vw + 1.25vh)) 0;
}

.cta-subtitle {
    font-size: calc(var(--current-scale) * (0.8vw + 0.4vh + 0.16vmin));
    text-transform: uppercase;
    letter-spacing: calc(var(--current-scale) * (0.1vw + 0.05vh));
    font-weight: 600;
    margin-bottom: calc(var(--current-scale) * (0.75vw + 0.375vh));
    color: var(--primary);
}

.cta-title {
    font-size: calc(var(--current-scale) * (2vw + 1vh + 0.4vmin));
    font-weight: 700;
    margin-bottom: calc(var(--current-scale) * (1.5vw + 0.75vh));
    line-height: 1.2;
    text-transform: uppercase;
}

.cta-description {
    font-size: calc(var(--current-scale) * (1vw + 0.5vh + 0.2vmin));
    line-height: 1.6;
    margin-bottom: calc(var(--current-scale) * (2vw + 1vh));
    max-width: calc(var(--current-scale) * (40vw));
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: calc(var(--current-scale) * (1vw + 0.5vh));
    flex-wrap: wrap;
}

.cta-secondary-btn {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    border: calc(var(--current-scale) * (0.1vw + 0.05vh)) solid rgba(255, 255, 255, 0.3);
}

.cta-secondary-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--text-light);
}

/* Size Variations */
.cta-size-small .cta-content,
.cta-size-small .cta-split-layout {
    padding: calc(var(--current-scale) * (2vw + 1vh)) 0;
}

.cta-size-medium .cta-content,
.cta-size-medium .cta-split-layout {
    padding: calc(var(--current-scale) * (3.5vw + 1.75vh)) 0;
}

.cta-size-large .cta-content,
.cta-size-large .cta-split-layout {
    padding: calc(var(--current-scale) * (5vw + 2.5vh)) 0;
}

/* Alignment Variations */
.cta-align-left .cta-content {
    text-align: left;
}

.cta-align-left .cta-description {
    margin-left: 0;
}

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

.cta-align-right .cta-content {
    text-align: right;
}

.cta-align-right .cta-description {
    margin-right: 0;
}

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

/* Split Layout Styles */
.cta-split-layout {
    display: flex;
    align-items: center;
    padding: calc(var(--current-scale) * (3.5vw + 1.75vh)) 0;
}

.cta-content-side {
    flex: 0 0 50%;
    padding-right: calc(var(--current-scale) * (2.5vw + 1.25vh));
}

.cta-action-side {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: calc(var(--current-scale) * (2.5vw + 1.25vh));
}

.cta-split .cta-title {
    margin-bottom: calc(var(--current-scale) * (1vw + 0.5vh));
}

.cta-split .cta-description {
    margin-left: 0;
    margin-right: 0;
    max-width: 90%;
}

.cta-split .cta-action-side a {
    margin-bottom: calc(var(--current-scale) * (1vw + 0.5vh));
}

/* Fullwidth Layout Styles */
.cta-fullwidth .cta-container {
    width: 100%;
    max-width: 100%;
    padding: 0 calc(var(--current-scale) * (3vw + 1.5vh));
}

.cta-fullwidth .cta-background-image {
    transform: scale(1.1); /* Slight zoom effect */
}

/* Parallax Effect */
.parallax-enabled .cta-background-image {
    transition: transform 0.5s ease-out;
}

/* Countdown Styles */
.cta-countdown {
    margin-bottom: calc(var(--current-scale) * (2vw + 1vh));
    background-color: rgba(0, 0, 0, 0.2);
    padding: calc(var(--current-scale) * (1.5vw + 0.75vh));
    border-radius: calc(var(--current-scale) * (0.5vw + 0.25vh));
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: calc(var(--current-scale) * (1vw + 0.5vh));
    text-align: center;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: calc(var(--current-scale) * (1vw + 0.5vh));
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: calc(var(--current-scale) * (4vw + 2vh));
}

.countdown-digits {
    font-size: calc(var(--current-scale) * (1.6vw + 0.8vh + 0.32vmin));
    font-weight: 700;
    color: var(--primary);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: calc(var(--current-scale) * (0.3vw + 0.15vh));
    padding: calc(var(--current-scale) * (0.5vw + 0.25vh)) calc(var(--current-scale) * (0.75vw + 0.375vh));
    min-width: calc(var(--current-scale) * (4vw + 2vh));
    text-align: center;
    box-shadow: 0 calc(var(--current-scale) * (0.25vw + 0.125vh)) calc(var(--current-scale) * (0.5vw + 0.25vh)) rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.countdown-digits::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.countdown-label {
    font-size: var(--font-size-xs);
    color: var(--text-light);
    margin-top: calc(var(--current-scale) * (0.5vw + 0.25vh));
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.countdown-digits.pulse {
    animation: pulse 0.5s ease-out;
}

/* Expired countdown styling */
.countdown-expired .countdown-digits {
    color: #aaa;
    background-color: rgba(0, 0, 0, 0.3);
}

/* Decorative Shapes */
.cta-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.shape-enabled .cta-shape {
    position: absolute;
    background-color: var(--primary);
    opacity: 0.1;
    border-radius: 50%;
}

.shape-enabled .shape-1 {
    width: calc(var(--current-scale) * (12vw + 6vh));
    height: calc(var(--current-scale) * (12vw + 6vh));
    bottom: calc(var(--current-scale) * (-6vw + -3vh));
    left: calc(var(--current-scale) * (-3vw + -1.5vh));
}

.shape-enabled .shape-2 {
    width: calc(var(--current-scale) * (8vw + 4vh));
    height: calc(var(--current-scale) * (8vw + 4vh));
    top: calc(var(--current-scale) * (-4vw + -2vh));
    right: calc(var(--current-scale) * (3vw + 1.5vh));
}

.shape-enabled .shape-3 {
    width: calc(var(--current-scale) * (4vw + 2vh));
    height: calc(var(--current-scale) * (4vw + 2vh));
    top: calc(var(--current-scale) * (2vw + 1vh));
    left: calc(var(--current-scale) * (10vw + 5vh));
}

/* Animation for shapes */
@keyframes floatAnimation {
    0% { transform: translateY(0); }
    50% { transform: translateY(calc(var(--current-scale) * (0.5vw + 0.25vh))); }
    100% { transform: translateY(0); }
}

.shape-enabled .shape-1 {
    animation: floatAnimation 8s ease-in-out infinite;
}

.shape-enabled .shape-2 {
    animation: floatAnimation 6s ease-in-out infinite;
    animation-delay: 1s;
}

.shape-enabled .shape-3 {
    animation: floatAnimation 5s ease-in-out infinite;
    animation-delay: 2s;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .cta-title {
        font-size: calc(var(--current-scale) * (1.8vw + 0.9vh + 0.36vmin));
    }
    
    .cta-description {
        max-width: calc(var(--current-scale) * (50vw));
    }
    
    .countdown-item {
        min-width: calc(var(--current-scale) * (3.5vw + 1.75vh));
    }
    
    .countdown-digits {
        font-size: calc(var(--current-scale) * (1.4vw + 0.7vh + 0.28vmin));
        min-width: calc(var(--current-scale) * (3.5vw + 1.75vh));
    }
}

@media (max-width: 768px) {
    .cta-split-layout {
        flex-direction: column;
    }
    
    .cta-content-side,
    .cta-action-side {
        flex: 0 0 100%;
        padding: 0;
        width: 100%;
    }
    
    .cta-content-side {
        margin-bottom: calc(var(--current-scale) * (2vw + 1vh));
    }
    
    .cta-title {
        font-size: calc(var(--current-scale) * (1.6vw + 0.8vh + 0.32vmin));
    }
    
    .cta-description {
        max-width: calc(var(--current-scale) * (80vw));
    }
    
    .countdown-timer {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .countdown-item {
        min-width: calc(var(--current-scale) * (5vw + 2.5vh));
        margin-bottom: calc(var(--current-scale) * (1vw + 0.5vh));
    }
    
    .countdown-digits {
        font-size: calc(var(--current-scale) * (1.4vw + 0.7vh + 0.28vmin));
    }    
}

@media (max-width: 480px) {
    .cta-size-small .cta-content,
    .cta-size-small .cta-split-layout,
    .cta-size-medium .cta-content,
    .cta-size-medium .cta-split-layout {
        padding: calc(var(--current-scale) * (2.5vw + 1.25vh)) 0;
    }
    
    .cta-size-large .cta-content,
    .cta-size-large .cta-split-layout {
        padding: calc(var(--current-scale) * (3.5vw + 1.75vh)) 0;
    }
    
    .cta-title {
        font-size: calc(var(--current-scale) * (1.4vw + 0.9vh + 0.28vmin));
    }
    
    .cta-description {
        font-size: calc(var(--font-size-base) * 0.95);
    }
    
    .cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-buttons .btn {
        width: 100%;
        margin-bottom: calc(var(--current-scale) * (0.75vw + 0.375vh));
    }
    
    .countdown-item {
        min-width: calc(var(--current-scale) * (6vw + 3vh));
    }
    
    .countdown-digits {
        font-size: calc(var(--current-scale) * (1.3vw + 0.8vh + 0.26vmin));
        min-width: calc(var(--current-scale) * (5vw + 2.5vh));
    }    
}