/**
 * Row Pattern Extensions
 * Background patterns for VC Row elements
 * Uses Okuvision global CSS variables for consistent design
 * 
 * @package Custom_VC_Elements
 * @since 2.1.0
 */

/* 
   PATTERN CONTAINER SETUP
   */

/* Pattern-enabled rows need relative positioning and proper spacing */
.vc_row[class*="cvc-pattern"],
.row-container[class*="cvc-pattern"] {
    position: relative;
    z-index: 1; /* Ensure content is above patterns */
    /* Remove overflow: hidden to prevent pattern clipping */
    /* Minimal padding since patterns are now positioned at edges (0px) */
    /* padding: var(--oku-spacing-md) var(--oku-spacing-sm); */
    min-height: 300px; /* Ensure enough space for patterns */
}

/* 
   PATTERN BASE STYLING
   */

/* 
 * Note: All patterns are now handled by JavaScript DOM elements
 * No pseudo-elements needed - cleaner and more consistent approach
 */

/* 
   NOTE: Pattern variables now defined globally in okuvision-global-variables.css
   This file only contains pattern element sizing and positioning
   */

/* 
   PATTERN POSITIONING - HANDLED BY JAVASCRIPT
   */

/* 
 * All pattern positioning is now handled by JavaScript DOM elements
 * This section is kept for reference of the original positioning values
 * that are now used in the JavaScript configuration
 */

/* 
   PATTERN IMAGES - Using Global Variables
   */

/* Top Left Patterns */
.cvc-pattern-element.cvc-pattern-top-left {
    background-image: var(--oku-pattern-top-left);
}

.cvc-pattern-element.cvc-pattern-top-left.cvc-pattern-top-left-pattern2 {
    background-image: var(--oku-pattern-top-left-2);
}

/* Top Right Patterns */
.cvc-pattern-element.cvc-pattern-top-right {
    background-image: var(--oku-pattern-top-right);
}

.cvc-pattern-element.cvc-pattern-top-right.cvc-pattern-top-right-pattern2 {
    background-image: var(--oku-pattern-top-right-2);
}

/* Bottom Left Patterns */
.cvc-pattern-element.cvc-pattern-bottom-left {
    background-image: var(--oku-pattern-bottom-left);
}

.cvc-pattern-element.cvc-pattern-bottom-left.cvc-pattern-bottom-left-pattern2 {
    background-image: var(--oku-pattern-bottom-left-2);
}

/* Bottom Right Patterns */
.cvc-pattern-element.cvc-pattern-bottom-right {
    background-image: var(--oku-pattern-bottom-right);
}

.cvc-pattern-element.cvc-pattern-bottom-right.cvc-pattern-bottom-right-pattern2 {
    background-image: var(--oku-pattern-bottom-right-2);
}

/* 
   PATTERN SIZING - DESKTOP/LARGE DESKTOP (Default)
   Verwendet globale CSS-Variablen aus okuvision-global-variables.css
   */

/* Top Left - Pattern 1 (Default) */
.cvc-pattern-element.cvc-pattern-top-left {
    width: var(--oku-pattern-top-left-width);
    height: var(--oku-pattern-top-left-height);
    background-size: contain;
}

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

/* Top Right - Pattern 1 (Default) */
.cvc-pattern-element.cvc-pattern-top-right {
    width: var(--oku-pattern-top-right-width);
    height: var(--oku-pattern-top-right-height);
    background-size: contain;
}

/* Top Right - Pattern 2 */
.cvc-pattern-element.cvc-pattern-top-right.cvc-pattern-top-right-pattern2 {
    width: var(--oku-pattern-top-right-2-width);
    height: var(--oku-pattern-top-right-2-height);
}

/* Bottom Left - Pattern 1 (Default) */
.cvc-pattern-element.cvc-pattern-bottom-left {
    width: var(--oku-pattern-bottom-left-width);
    height: var(--oku-pattern-bottom-left-height);
    background-size: contain;
}

/* Bottom Left - Pattern 2 */
.cvc-pattern-element.cvc-pattern-bottom-left.cvc-pattern-bottom-left-pattern2 {
    width: var(--oku-pattern-bottom-left-2-width);
    height: var(--oku-pattern-bottom-left-2-height);
}

/* Bottom Right - Pattern 1 (Default) */
.cvc-pattern-element.cvc-pattern-bottom-right {
    width: var(--oku-pattern-bottom-right-width);
    height: var(--oku-pattern-bottom-right-height);
    background-size: contain;
}

/* Bottom Right - Pattern 2 (Special: JavaScript calculates size on Desktop) */
.cvc-pattern-element.cvc-pattern-bottom-right.cvc-pattern-bottom-right-pattern2 {
    max-width: none;
}

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

@media (max-width: 959px) {
    .vc_row[class*="cvc-pattern"],
    .row-container[class*="cvc-pattern"] {
        /* padding: var(--oku-spacing-md) var(--oku-spacing-sm); */
        min-height: 250px;
    }
    
    /* Pattern sizes for tablet - verwendet globale CSS-Variablen */
    .cvc-pattern-element.cvc-pattern-top-left {
        width: var(--oku-pattern-top-left-width);
        height: var(--oku-pattern-top-left-height);
    }
    
    .cvc-pattern-element.cvc-pattern-top-left.cvc-pattern-top-left-pattern2 {
        width: var(--oku-pattern-top-left-2-width);
        height: var(--oku-pattern-top-left-2-height);
    }
    
    .cvc-pattern-element.cvc-pattern-top-right {
        width: var(--oku-pattern-top-right-width);
        height: var(--oku-pattern-top-right-height);
    }
    
    .cvc-pattern-element.cvc-pattern-top-right.cvc-pattern-top-right-pattern2 {
        width: var(--oku-pattern-top-right-2-width);
        height: var(--oku-pattern-top-right-2-height);
    }
    
    .cvc-pattern-element.cvc-pattern-bottom-left {
        width: var(--oku-pattern-bottom-left-width);
        height: var(--oku-pattern-bottom-left-height);
    }
    
    .cvc-pattern-element.cvc-pattern-bottom-left.cvc-pattern-bottom-left-pattern2 {
        width: var(--oku-pattern-bottom-left-2-width);
        height: var(--oku-pattern-bottom-left-2-height);
    }
    
    .cvc-pattern-element.cvc-pattern-bottom-right {
        width: var(--oku-pattern-bottom-right-width);
        height: var(--oku-pattern-bottom-right-height);
    }
    
    /* Bottom Right Pattern 2 - Uses global variables */
    .cvc-pattern-element.cvc-pattern-bottom-right.cvc-pattern-bottom-right-pattern2 {
        width: var(--oku-pattern-bottom-right-2-width);
        height: var(--oku-pattern-bottom-right-2-height);
    }
}

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

@media (max-width: 569px) {
    .vc_row[class*="cvc-pattern"],
    .row-container[class*="cvc-pattern"] {
        /* padding: var(--oku-spacing-sm) var(--oku-spacing-xs); */
        min-height: 200px;
    }
    
    /* Pattern sizes for mobile - verwendet globale CSS-Variablen */
    .cvc-pattern-element.cvc-pattern-top-left {
        width: var(--oku-pattern-top-left-width);
        height: var(--oku-pattern-top-left-height);
    }
    
    .cvc-pattern-element.cvc-pattern-top-left.cvc-pattern-top-left-pattern2 {
        width: var(--oku-pattern-top-left-2-width);
        height: var(--oku-pattern-top-left-2-height);
    }
    
    .cvc-pattern-element.cvc-pattern-top-right {
        width: var(--oku-pattern-top-right-width);
        height: var(--oku-pattern-top-right-height);
    }
    
    .cvc-pattern-element.cvc-pattern-top-right.cvc-pattern-top-right-pattern2 {
        width: var(--oku-pattern-top-right-2-width);
        height: var(--oku-pattern-top-right-2-height);
    }
    
    .cvc-pattern-element.cvc-pattern-bottom-left {
        width: var(--oku-pattern-bottom-left-width);
        height: var(--oku-pattern-bottom-left-height);
    }
    
    .cvc-pattern-element.cvc-pattern-bottom-left.cvc-pattern-bottom-left-pattern2 {
        width: var(--oku-pattern-bottom-left-2-width);
        height: var(--oku-pattern-bottom-left-2-height);
    }
    
    .cvc-pattern-element.cvc-pattern-bottom-right {
        width: var(--oku-pattern-bottom-right-width);
        height: var(--oku-pattern-bottom-right-height);
    }
    
    /* Bottom Right Pattern 2 - Uses global variables */
    .cvc-pattern-element.cvc-pattern-bottom-right.cvc-pattern-bottom-right-pattern2 {
        width: var(--oku-pattern-bottom-right-2-width);
        height: var(--oku-pattern-bottom-right-2-height);
    }
}

/* 
   JAVASCRIPT-CREATED PATTERN ELEMENTS
   */

/* 
 * Pure JavaScript Solution: All patterns are handled by DOM elements
 * No pseudo-elements, no conflicts, consistent behavior
 */

/* Base styling for all JavaScript-created pattern elements */
.cvc-pattern-element {
    position: absolute;
    pointer-events: none;
    z-index: -1; /* Always behind content */
    opacity: 1.0; /* Full opacity for vibrant orange colors */
    background-repeat: no-repeat;
    /* Note: background-size and dimensions set individually per pattern above */
}

/* Pattern 2 Bottom Right - Special positioning to align at bottom-right edge */
.cvc-pattern-element.cvc-pattern-bottom-right.cvc-pattern-bottom-right-pattern2 {
    background-position: bottom right;
    background-size: contain; /* SVG fills element, maintaining aspect ratio */
}

/* 
 * Note: Specific positioning is handled by JavaScript
 * This allows for dynamic adjustments and easier maintenance
 */