/**
 * Hero Image Element Styles - Full-Width Breakout Version
 * 
 * Uses viewport-based positioning for zero-JavaScript layout
 * Works in any row type (normal, full-width, custom max-width)
 * 
 * @package CustomVCElements
 * @since 1.0.0
 */

/* 
   BASE - Full-Width Breakout (works in any Row)
   */

.cvc-hero-image {
    position: relative;
    /* Full viewport width breakout */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    left: 0;
    /* Allow patterns to extend beyond */
    overflow: visible;
}

.cvc-hero-image__container {
    position: relative;
    max-width: var(--oku-container-width);
    margin: 0 auto;
    padding: 0 var(--oku-spacing-xl);
}

/* Wrapper removed - content and image are now direct children */

/* 
   PATTERNS
   */

.cvc-hero-image__pattern {
    position: absolute;
    pointer-events: none;
    opacity: 1.0;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Left Pattern */
.cvc-hero-image__pattern--left {
    bottom: 0;
    left: 0;
    width: var(--oku-pattern-hero-left-width);
    height: var(--oku-pattern-hero-left-height);
    background-image: var(--oku-pattern-hero-left);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1; /* Under content */
}

/* Right Pattern */
.cvc-hero-image__pattern--right {
    top: 0px; /* Offset to ensure full visibility */
    right: 0;
    width: var(--oku-pattern-hero-right-width);
    height: var(--oku-pattern-hero-right-height);
    background-image: var(--oku-pattern-hero-right);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 10; /* Above content */
}

/* Pattern Variations for Right Side */
/* Pattern 1 = Default (uses --oku-pattern-hero-right above) */
/* Positioned at top-right */

/* Pattern 2 = Alternative Pattern (bottom-right aligned, larger) */
.cvc-pattern-top-right-pattern2 .cvc-hero-image__pattern--right {
    background-image: var(--oku-pattern-bottom-right-2);
    width: 800px; /* Larger than default for more visual impact */
    height: 522px; /* Maintains aspect ratio 1113:726 */
    top: auto; /* Remove top positioning */
    bottom: 0; /* Position at bottom instead */
}

/* Responsive sizes for Pattern 2 */
@media (max-width: 959px) {
    .cvc-pattern-top-right-pattern2 .cvc-hero-image__pattern--right {
        width: 600px;
        height: 391px;
    }
}

@media (max-width: 569px) {
    .cvc-pattern-top-right-pattern2 .cvc-hero-image__pattern--right {
        width: 400px;
        height: 261px;
    }
}

/* 
   CONTENT
   */

.cvc-hero-image__content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: var(--oku-spacing-xl) 0;
}

/* Meta Information (reading time + date above headline) */
.cvc-hero-image__meta {
    display: flex;
    align-items: center;
    gap: var(--oku-spacing-md);
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: var(--oku-font-weight-medium);
    line-height: 1.4;
    margin: 0 0 var(--oku-spacing-md) 0;
}

.cvc-hero-image__meta--large {
    font-size: 16px;
}

.cvc-hero-image__meta-item {
    display: inline-flex;
    align-items: center;
}



.cvc-hero-image__headline {
    color: var(--oku-color-black);
    line-height: 1.3;
    margin: 0 0 var(--oku-spacing-md) 0;
}

.cvc-hero-image__headline.font-714446 {
    font-weight: 300;
}

.cvc-hero-image__text-wrapper {
    padding-left: var(--oku-spacing-xxl);
}

.cvc-hero-image__text-content {
    color: var(--oku-color-black);
    font-size: var(--oku-button-font-size-md);
    line-height: 1.6;
    margin: 0 !important;
}

.cvc-hero-image__text-content p {
    margin: 0 0 var(--oku-spacing-sm) 0;
}

.cvc-hero-image__text-content p:last-child {
    margin-bottom: 0;
}

/* 
   BUTTON - Uses global Okuvision button system (.oku-button)
   */

.cvc-hero-image__button-wrapper {
    margin-top: var(--oku-spacing-lg);
}

/* 
   CATEGORIES (Blog Post Preset)
   */

.cvc-hero-image__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oku-spacing-xs);
    margin-top: var(--oku-spacing-lg);
}

/* Pills inherit from global .oku-pill styles */

/* 
   IMAGE
   */

.cvc-hero-image__image {
    position: relative;
    width: 100%;
    z-index: 1;
}

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

/* 
   UNCODE THEME INTEGRATION - Dark Background Support
   */

/* When placed in Uncode's dark section (.style-dark parent) */
.style-dark .cvc-hero-image__headline {
    color: var(--oku-color-orange);
}

.style-dark .cvc-hero-image__text-content {
    color: var(--oku-color-white);
}

/* Meta information also gets white color on dark backgrounds */
.style-dark .cvc-hero-image__meta {
    color: var(--oku-color-white);
}

/* Buttons maintain their default styling (already handled by global .oku-button) */

/* 
   MOBILE (≤959px)
   */

@media (max-width: 959px) {
    .cvc-hero-image__inner {
        display: flex;
        flex-direction: column;
    }
    
    .cvc-hero-image__content {
        padding: var(--oku-spacing-xxl) 0;
        width: 100%;
        order: 2;
    }
    
    .cvc-hero-image__image {
        position: relative;
        order: 1;
        min-height: 250px;
        /* Break out to full viewport width */
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }
    
    .cvc-hero-image__image img {
        min-height: 250px;
        object-fit: cover;
    }
    
    /* Lock Aspect Ratio: Prevent cropping on mobile */
    .cvc-hero-image--lock-aspect .cvc-hero-image__image img {
        object-fit: contain;
    }
    
    .cvc-hero-image__pattern--right {
        width: var(--oku-pattern-hero-right-width);
        height: var(--oku-pattern-hero-right-height);
        right: 0px;
    }
    
    .cvc-hero-image__pattern--left {
        display: none; /* Hide on tablet */
    }
    
    .cvc-hero-image__text-wrapper {
        padding-left: 0px;
    }

    .cvc-hero-image__text-wrapper p{
        margin: 0px !important;
    }
}

@media (max-width: 569px) {
    .cvc-hero-image__content {
        padding: var(--oku-spacing-xl) 0;
    }
    
    .cvc-hero-image__image {
        min-height: 200px;
    }
    
    .cvc-hero-image__image img {
        min-height: 200px;
    }
    
    .cvc-hero-image__pattern--right {
        width: var(--oku-pattern-hero-right-width);
        height: var(--oku-pattern-hero-right-height);
        right: 0px;
    }
    
    .cvc-hero-image__pattern--left {
        display: none; /* Hide on mobile */
    }
    
    .cvc-hero-image__text-wrapper {
        padding-left: 0px;
    }
    
    .cvc-hero-image__headline {
        font-size: var(--oku-button-font-size-md);
    }
    
    .cvc-hero-image__text-content {
        font-size: var(--oku-button-font-size-sm);
    }

    .cvc-hero-image__text-wrapper p{
        margin: 0px !important;
    }
}

/* 
   DESKTOP (≥960px) - Text at 2/3, Image breaks out to right edge
   */

@media (min-width: 960px) {
    .cvc-hero-image__container {
        position: relative;
        z-index: 3;
    }
    
    .cvc-hero-image__inner {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Text-focused: 66.6% | 33.3% */
        align-items: stretch; /* Both columns stretch to same height */
        gap: 0;
        min-height: 500px; /* Balanced minimum height */
    }
    
    .cvc-hero-image__content {
        position: relative;
        z-index: 3;
        grid-column: 1;
        padding: var(--oku-spacing-xxl) var(--oku-spacing-xxl) var(--oku-spacing-xxl) 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 500px; /* Match container to ensure proper stretching */
    }
    
    .cvc-hero-image__image {
        position: relative;
        z-index: 1;
        grid-column: 2;
        /* 
         * Break out to right viewport edge
         * Uses max() to ensure it works at all viewport sizes
         * At small viewports: just use remaining grid space
         * At large viewports: extend beyond container to viewport edge
         * Using --oku-spacing-xl (36px) for Uncode row padding consistency
         */
        width: max(100%, calc(400px + (100vw - var(--oku-container-width)) / 2 + var(--oku-spacing-xl)));
        margin-right: min(0px, calc(-1 * ((100vw - var(--oku-container-width)) / 2 + var(--oku-spacing-xl))));
        align-self: stretch; /* CRITICAL: Stretches to match grid row height */
        min-height: 500px; /* Match container min-height */
        height: 100%; /* Ensures it takes full grid row height */
    }
    
    .cvc-hero-image__image img {
        width: 100%;
        height: 100%; /* CRITICAL: Always fills 100% of container height */
        min-height: 500px; /* Match container min-height */
        max-height: none; /* Remove any height constraints */
        object-fit: cover; /* Crops image to fill, maintains aspect ratio */
        object-position: center center; /* Center crop point */
        display: block;
    }
    
    /* Lock Aspect Ratio: Prevent cropping, fit image instead */
    .cvc-hero-image--lock-aspect .cvc-hero-image__image img {
        object-fit: contain; /* Fit image without cropping */
        object-position: center center; /* Center image vertically and horizontally */
    }
    
    /* Patterns: Positioned at viewport edges (no JavaScript needed) */
    .cvc-hero-image__pattern--right {
        right: 0;
    }
    
    .cvc-hero-image__pattern--left {
        left: 0;
    }
}

/* 
   LARGE DESKTOP (1600px+) - Keep text-focused 2:1 ratio
   */

@media (min-width: 1600px) {
    .cvc-hero-image__inner {
        grid-template-columns: 2fr 1fr !important; /* Text-focused: 66.6% | 33.3% */
    }
}

/* 
   MEDIUM DESKTOP (960px - 1599px) - More balanced text/image ratio
   */

@media (min-width: 960px) and (max-width: 1599px) {
    .cvc-hero-image__inner {
        grid-template-columns: 3fr 2fr !important; /* More balanced: 60% text | 40% image */
    }
    
    .cvc-hero-image__image {
        /* Adjusted breakout width for medium screens */
        width: max(100%, calc(480px + (100vw - var(--oku-container-width)) / 2 + var(--oku-spacing-xl))) !important;
    }
}

/* 
   ACCESSIBILITY
   */

/* Screen reader only class moved to global main.css */