/**
 * Column Pattern Extensions
 * Background patterns for VC Column elements
 * Based on Row Pattern Extension architecture
 * 
 * @package Custom_VC_Elements
 * @since 2.2.0
 */

/* 
   PATTERN CONTAINER SETUP
   */

/* Pattern-enabled columns need relative positioning */
.wpb_column[class*="cvc-column-pattern"],
.vc_column_container[class*="cvc-column-pattern"] {
    position: relative;
}

/* 
   PATTERN DEFINITIONS - Using Global Variables
   Patterns & responsive stroke widths defined in okuvision-global-variables.css
   */

/* 
   PATTERN SIZING - DESKTOP (Default/Large Desktop)
   Uses global CSS variables from okuvision-global-variables.css
   */

/* Top Left Pattern - Desktop Default */
.cvc-column-pattern-element.cvc-column-pattern-top-left.cvc-column-pattern-top-left-pattern {
    width: var(--oku-column-pattern-top-left-width);
    height: var(--oku-column-pattern-top-left-height);
}

/* Bottom Right Pattern - Desktop Default */
.cvc-column-pattern-element.cvc-column-pattern-bottom-right.cvc-column-pattern-bottom-right-pattern {
    width: var(--oku-column-pattern-bottom-right-width);
    height: var(--oku-column-pattern-bottom-right-height);
}

/* 
   RESPONSIVE DESIGN - TABLET (max-width: 959px)
   */

@media (max-width: 959px) {
    /* Pattern sizes controlled by global variables */
    .cvc-column-pattern-element.cvc-column-pattern-top-left.cvc-column-pattern-top-left-pattern {
        width: var(--oku-column-pattern-top-left-width);
        height: var(--oku-column-pattern-top-left-height);
    }
    
    .cvc-column-pattern-element.cvc-column-pattern-bottom-right.cvc-column-pattern-bottom-right-pattern {
        width: var(--oku-column-pattern-bottom-right-width);
        height: var(--oku-column-pattern-bottom-right-height);
    }
}

/* 
   RESPONSIVE DESIGN - MOBILE (max-width: 569px)
   */

@media (max-width: 569px) {
    /* Pattern sizes controlled by global variables */
    .cvc-column-pattern-element.cvc-column-pattern-top-left.cvc-column-pattern-top-left-pattern {
        width: var(--oku-column-pattern-top-left-width);
        height: var(--oku-column-pattern-top-left-height);
    }
    
    .cvc-column-pattern-element.cvc-column-pattern-bottom-right.cvc-column-pattern-bottom-right-pattern {
        width: var(--oku-column-pattern-bottom-right-width);
        height: var(--oku-column-pattern-bottom-right-height);
    }
}

/* 
   JAVASCRIPT-CREATED PATTERN ELEMENTS
   */

/* Base styling for all JavaScript-created pattern elements */
.cvc-column-pattern-element {
    position: absolute;
    pointer-events: none;
    z-index: 9999; /* Above content as decorative overlay */
    opacity: 1.0;
    background-repeat: no-repeat;
    background-size: contain;
}

/* 
   PATTERN POSITIONING - DESKTOP (Default)
   */

/* Top Left Pattern - Desktop positioning */
.cvc-column-pattern-element.cvc-column-pattern-top-left {
    top: -50px;
    left: -10px;
    background-position: top left;
}

/* Bottom Right Pattern - Desktop positioning */
.cvc-column-pattern-element.cvc-column-pattern-bottom-right {
    bottom: -40px;
    right: -10px;
    background-position: bottom right;
}

/* 
   RESPONSIVE POSITIONING - TABLET (max-width: 959px)
   */

@media (max-width: 959px) {
    /* Top Left - Tablet positioning */
    .cvc-column-pattern-element.cvc-column-pattern-top-left {
        top: -39px;
        left: -27px;
    }
    
    /* Bottom Right - Tablet positioning (proportional zu 75px Höhe) */
    .cvc-column-pattern-element.cvc-column-pattern-bottom-right {
        bottom: -30px;
        right: -7px;
    }
}

/* 
   RESPONSIVE POSITIONING - MOBILE (max-width: 569px)
   */

@media (max-width: 569px) {
    /* Top Left - Mobile positioning */
    .cvc-column-pattern-element.cvc-column-pattern-top-left {
        top: -25px;
        left: -15px;
    }
    
    /* Bottom Right - Mobile positioning (proportional zu 65px Höhe) */
    .cvc-column-pattern-element.cvc-column-pattern-bottom-right {
        bottom: -20px;
        right: -5px;
    }
}