/**
 * CTA Element Styles (Call-to-Action)
 * 
 * Unified CTA element with two variants:
 * - Mit Bild (.cvc-cta--has-image): Image at top-left, dark bg pulls up behind
 * - Ohne Bild (.cvc-cta--without-image): Full-width dark background
 * 
 * Pattern Configuration:
 * - Mit Bild: bottom-right (im Bild-Container) + bottom-left (im Dark-Wrapper)
 * - Ohne Bild: top-right + bottom-left (beide im Dark-Wrapper)
 * 
 * @package CustomVCElements
 * @since 1.0.43
 */

/* 
   BASE - Full-Width Element
   */

.cvc-cta {
    position: relative;
    /* Full viewport width breakout */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    left: 0;
    overflow: visible;
}

/* 
   IMAGE AREA (only for "Mit Bild" with actual image)
   */

.cvc-cta__image-wrapper {
    position: relative;
    z-index: 2;
    max-width: var(--oku-container-wide);
    margin: 0 auto;
    padding: 0;
}

.cvc-cta__image-container {
    position: relative;
    z-index: 2;
    max-width: 75%;
}

.cvc-cta__image {
    position: relative;
}

.cvc-cta__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 
   DARK BACKGROUND WRAPPER
   */

.cvc-cta__dark-wrapper {
    position: relative;
    z-index: 1;
    padding: var(--oku-spacing-xxxl) 0;
}

/* When has image: negative margin pulls dark bg up behind image */
.cvc-cta--has-image .cvc-cta__dark-wrapper {
    margin-top: -17vw;
    padding-top: calc(17vw + var(--oku-spacing-xxl));
}

/* 
   PATTERNS - Base Styles
   */

.cvc-cta__pattern {
    position: absolute;
    pointer-events: none;
    opacity: 1.0;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

/* 
   PATTERN: Bottom Right (für "Mit Bild" - aligned mit Bildunterkante)
   Im image-wrapper positioniert, immer am rechten Viewport-Rand
   */

.cvc-cta__pattern--image-bottom-right {
    bottom: var(--oku-spacing-xl);
    right: var(--oku-spacing-xl);
    background-image: var(--oku-pattern-cta-bottom-right);
    width: var(--oku-pattern-cta-bottom-right-width);
    height: var(--oku-pattern-cta-bottom-right-height);
    z-index: 10; /* Über dem Bild */
}

/* Für Viewports breiter als 1920px: Pattern muss nach rechts hinausragen */
@media (min-width: 1920px) {
    .cvc-cta__pattern--image-bottom-right {
        right: calc((100vw - var(--oku-container-wide)) / -2 + var(--oku-spacing-xl));
    }
}

/* 
   PATTERN: Top Right (nur für "Ohne Bild" im Dark-Wrapper)
   */

.cvc-cta__pattern--top-right {
    top: var(--oku-spacing-xl);
    right: var(--oku-spacing-xl);
    background-image: var(--oku-pattern-cta-top-right);
    width: var(--oku-pattern-cta-top-right-width);
    height: var(--oku-pattern-cta-top-right-height);
}

/* Hide top-right pattern on wide screens (≥1600px) */
@media (max-width: 1600px) {
    .cvc-cta__pattern--top-right {
        display: none;
    }
}

/* 
   PATTERN: Bottom Left (für beide Varianten im Dark-Wrapper)
   */

.cvc-cta__pattern--bottom-left {
    bottom: var(--oku-spacing-xl);
    left: var(--oku-spacing-xl);
    background-image: var(--oku-pattern-cta-bottom-left);
    width: var(--oku-pattern-cta-bottom-left-width);
    height: var(--oku-pattern-cta-bottom-left-height);
}

/* 
   CONTENT CONTAINER
   */

.cvc-cta__container {
    position: relative;
    z-index: 4;
    max-width: var(--oku-container-width);
    margin: 0 auto;
    padding: 0 var(--oku-spacing-xl);
}

.cvc-cta__content {
    position: relative;
    z-index: 5;
    width: 100%;
}

/* 
   HEADLINE (Orange on dark background)
   */

.cvc-cta__headline {
    color: var(--oku-color-orange);
    line-height: 1.2;
    margin: 0 0 var(--oku-spacing-lg) 0;
}

.cvc-cta__headline.font-714446 {
    font-weight: 300;
}

/* 
   TEXT WRAPPER - ALWAYS 2/3 width, right-aligned (same for both variants)
   */

.cvc-cta__text-wrapper {
    width: 69%;
    margin-left: auto;
    padding-left: var(--oku-spacing-xl);
}

/* 
   TEXT (White on dark background)
   */

.cvc-cta__text {
    color: var(--oku-color-white);
    font-size: var(--oku-button-font-size-md);
    line-height: 1.6;
    margin: 0;
}


.cvc-cta__text p:last-child {
    margin-bottom: 0;
}

/* Large text variant */
.cvc-cta__text.text-lead {
    font-size: calc(var(--oku-button-font-size-md) * 1.125);
}

/* 
   BUTTONS
   */

.cvc-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oku-spacing-md);
    margin-top: var(--oku-spacing-xl);
}

.cvc-cta__button:focus-visible {
    outline: 2px solid var(--oku-color-white);
    outline-offset: 2px;
}

/* Primary button: white background, violet text */
.cvc-cta__button--primary {
    color: var(--oku-color-violet) !important;
}

.cvc-cta__button--primary:hover {
    background-color: var(--oku-color-gray-light);
    border-color: var(--oku-color-gray-light);
    color: var(--oku-color-violet) !important;
}

/* Secondary button hover: white background, violet text */
.cvc-cta__button--secondary:hover {
    background-color: var(--oku-color-white);
    border-color: var(--oku-color-white);
    color: var(--oku-color-violet) !important;
}

/* 
   RESPONSIVE - TABLET (≤959px)
   */

@media (max-width: 959px) {
    .cvc-cta__headline {
        margin-bottom: var(--oku-spacing-md);
    }
    
    .cvc-cta__container {
        padding: 0 var(--oku-spacing-xl);
    }
    
    /* Hide patterns on tablet/mobile - except image-bottom-right which stays visible */
    .cvc-cta__pattern {
        display: none;
    }
    
    .cvc-cta__pattern--image-bottom-right {
        display: block;
    }
    
    /* Image container */
    .cvc-cta__image-container {
        max-width: 85%;
    }
    
    .cvc-cta--has-image .cvc-cta__dark-wrapper {
        margin-top: -20vw;
        padding-top: calc(20vw + var(--oku-spacing-lg));
    }
    
    /* Text wrapper - full width on tablet */
    .cvc-cta__text-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0;
    }
}

/* 
   RESPONSIVE - MOBILE (≤569px)
   */

@media (max-width: 569px) {
    
    /* Pattern - weniger Abstand auf Mobile */
    .cvc-cta__pattern--image-bottom-right {
        bottom: var(--oku-spacing-md);
        right: var(--oku-spacing-md);
    }
    
    .cvc-cta__buttons {
        flex-direction: column;
        gap: var(--oku-spacing-sm);
    }
    
    .cvc-cta__button {
        width: 100%;
        justify-content: center;
    }
    
    
    /* Image container */
    .cvc-cta__image-container {
        max-width: 95%;
    }
    
    
    .cvc-cta--has-image .cvc-cta__dark-wrapper {
        margin-top: -25vw;
        padding-top: calc(25vw + var(--oku-spacing-md));
    }
}