/**
 * BeezWoo Hero Section - Premium CSS
 * v2.12.0 - Premium arrows, image controls, responsive fixes
 * 
 * @package BeezWoo
 */

/* ==========================================================================
   VARIABLES
   ========================================================================== */
.beezwoo-hero {
    --hero-height: 100vh;
    --hero-mobile-video-h: 40vh;
    --hero-mobile-product-h: 60vh;
    --overlay: 0;
    --filter-int: 100%;
    --transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --arrow-size: 52px;
    --arrow-bg: rgba(255, 255, 255, 0.92);
    --arrow-color: #1a1a1a;
    --arrow-hover-bg: #fff;
    --dot-size: 10px;
}

/* ==========================================================================
   ELEMENTOR RESET
   ========================================================================== */
.elementor-widget-beezwoo_hero_section,
.elementor-widget-beezwoo_hero_section > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   HERO BASE
   ========================================================================== */
.beezwoo-hero {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: var(--hero-height);
    min-height: 400px;
    max-height: 100vh;
    overflow: hidden;
    background: #0a0a0a;
}

.beezwoo-hero__video,
.beezwoo-hero__product {
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Order */
.beezwoo-hero--product-video { flex-direction: row-reverse; }

/* Ratios */
.beezwoo-hero--ratio-30-70 .beezwoo-hero__video { width: 30%; }
.beezwoo-hero--ratio-30-70 .beezwoo-hero__product { width: 70%; }
.beezwoo-hero--ratio-35-65 .beezwoo-hero__video { width: 35%; }
.beezwoo-hero--ratio-35-65 .beezwoo-hero__product { width: 65%; }
.beezwoo-hero--ratio-40-60 .beezwoo-hero__video { width: 40%; }
.beezwoo-hero--ratio-40-60 .beezwoo-hero__product { width: 60%; }
.beezwoo-hero--ratio-45-55 .beezwoo-hero__video { width: 45%; }
.beezwoo-hero--ratio-45-55 .beezwoo-hero__product { width: 55%; }
.beezwoo-hero--ratio-50-50 .beezwoo-hero__video { width: 50%; }
.beezwoo-hero--ratio-50-50 .beezwoo-hero__product { width: 50%; }
.beezwoo-hero--ratio-55-45 .beezwoo-hero__video { width: 55%; }
.beezwoo-hero--ratio-55-45 .beezwoo-hero__product { width: 45%; }
.beezwoo-hero--ratio-60-40 .beezwoo-hero__video { width: 60%; }
.beezwoo-hero--ratio-60-40 .beezwoo-hero__product { width: 40%; }
.beezwoo-hero--ratio-65-35 .beezwoo-hero__video { width: 65%; }
.beezwoo-hero--ratio-65-35 .beezwoo-hero__product { width: 35%; }
.beezwoo-hero--ratio-70-30 .beezwoo-hero__video { width: 70%; }
.beezwoo-hero--ratio-70-30 .beezwoo-hero__product { width: 30%; }

/* ==========================================================================
   VIDEO - COVER MODE (NO BLACK BARS)
   ========================================================================== */
.beezwoo-hero__video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.beezwoo-hero__video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    transition: opacity 0.5s ease;
}

.beezwoo-hero__video-bg.is-playing .beezwoo-hero__video-poster {
    opacity: 0;
    pointer-events: none;
}

/* CRITICAL: Video iframe cover scaling - eliminates black bars */
.beezwoo-hero__video-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 177.78vh;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.beezwoo-hero__video-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
}

.beezwoo-hero__video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, var(--overlay));
    z-index: 3;
    pointer-events: none;
}

.beezwoo-hero__video-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #666;
    font-size: 14px;
}

/* ==========================================================================
   PRODUCT COLUMN
   ========================================================================== */
.beezwoo-hero__product {
    display: block;
    text-decoration: none;
    color: inherit;
    background: #f8f8f8;
}

a.beezwoo-hero__product { cursor: pointer; }

.beezwoo-hero__slideshow {
    position: absolute;
    inset: 0;
}

.beezwoo-hero__slides {
    position: absolute;
    inset: 0;
}

.beezwoo-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition), filter var(--transition);
    overflow: hidden;
}

.beezwoo-hero__slide.is-active {
    opacity: 1;
    z-index: 1;
}

/* IMAGE - Base styling, Elementor selectors handle fit/position/scale */
.beezwoo-hero__slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
}

.beezwoo-hero__no-product {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    color: #999;
}

/* ==========================================================================
   SLIDESHOW EFFECTS
   ========================================================================== */
.beezwoo-hero__slideshow[data-effect="slide"] .beezwoo-hero__slide {
    opacity: 1;
    transform: translateX(100%);
}
.beezwoo-hero__slideshow[data-effect="slide"] .beezwoo-hero__slide.is-active {
    transform: translateX(0);
}
.beezwoo-hero__slideshow[data-effect="slide"] .beezwoo-hero__slide.is-prev {
    transform: translateX(-100%);
}

.beezwoo-hero__slideshow[data-effect="zoom"] .beezwoo-hero__slide {
    transform: scale(1.15);
}
.beezwoo-hero__slideshow[data-effect="zoom"] .beezwoo-hero__slide.is-active {
    transform: scale(1);
}

.beezwoo-hero__slideshow[data-effect="zoom-out"] .beezwoo-hero__slide {
    transform: scale(0.9);
}
.beezwoo-hero__slideshow[data-effect="zoom-out"] .beezwoo-hero__slide.is-active {
    transform: scale(1);
}

.beezwoo-hero__slideshow[data-effect="blur"] .beezwoo-hero__slide {
    filter: blur(20px);
}
.beezwoo-hero__slideshow[data-effect="blur"] .beezwoo-hero__slide.is-active {
    filter: blur(0);
}

/* ==========================================================================
   NAVIGATION - PREMIUM ARROWS
   ========================================================================== */
.beezwoo-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: var(--arrow-size);
    height: var(--arrow-size);
    border: none;
    padding: 0;
    margin: 0;
    background: var(--arrow-bg);
    color: var(--arrow-color);
    border-radius: 50%;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 4px 20px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: 
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.2s ease,
        box-shadow 0.3s ease;
}

.beezwoo-hero__arrow svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.beezwoo-hero__product:hover .beezwoo-hero__arrow,
.beezwoo-hero__arrow:focus-visible {
    opacity: 1;
}

.beezwoo-hero__arrow:hover {
    background: var(--arrow-hover-bg);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.12),
        0 8px 30px rgba(0, 0, 0, 0.08);
}

.beezwoo-hero__arrow:active {
    transform: translateY(-50%) scale(0.96);
    transition-duration: 0.1s;
}

.beezwoo-hero__arrow--prev:hover svg { transform: translateX(-2px); }
.beezwoo-hero__arrow--next:hover svg { transform: translateX(2px); }

.beezwoo-hero__arrow--prev { left: 24px; }
.beezwoo-hero__arrow--next { right: 24px; }

.beezwoo-hero__arrow:focus-visible {
    opacity: 1;
    outline: 2px solid #1a1a1a;
    outline-offset: 3px;
}

/* ==========================================================================
   DOTS - PREMIUM
   ========================================================================== */
.beezwoo-hero__dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.beezwoo-hero__dot {
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    width: var(--dot-size);
    height: var(--dot-size);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: 
        background 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.3s ease;
}

.beezwoo-hero__dot:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.15);
}

.beezwoo-hero__dot.is-active {
    background: #1a1a1a;
    width: 24px;
    border-radius: 5px;
}

.beezwoo-hero__dot:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

/* ==========================================================================
   COUNTER - PREMIUM
   ========================================================================== */
.beezwoo-hero__counter {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.beezwoo-hero__counter .current {
    font-weight: 700;
}

/* ==========================================================================
   PRODUCT INFO - PREMIUM
   ========================================================================== */
.beezwoo-hero__info {
    position: absolute;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 28px 36px;
    max-width: 90%;
    border-radius: 4px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.beezwoo-hero__info--bottom-left { bottom: 40px; left: 40px; }
.beezwoo-hero__info--bottom-center { bottom: 40px; left: 50%; transform: translateX(-50%); text-align: center; }
.beezwoo-hero__info--bottom-right { bottom: 40px; right: 40px; text-align: right; }
.beezwoo-hero__info--center { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.beezwoo-hero__info--top-left { top: 40px; left: 40px; }

.beezwoo-hero__title {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.beezwoo-hero__price {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 18px;
}

.beezwoo-hero__price del { opacity: 0.5; margin-right: 10px; font-weight: 400; }
.beezwoo-hero__price ins { text-decoration: none; color: #c41e3a; }

.beezwoo-hero__cta {
    display: inline-block;
    padding: 14px 32px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.beezwoo-hero__cta:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   IMAGE FILTERS
   ========================================================================== */
.beezwoo-hero--filter-hero-premium .beezwoo-hero__slide img {
    filter: contrast(1.08) saturate(1.15) brightness(1.02) sepia(0.05);
}

.beezwoo-hero--filter-hero-fashion .beezwoo-hero__slide img {
    filter: contrast(1.1) saturate(1.2) brightness(1.05) hue-rotate(-5deg);
}

.beezwoo-hero--filter-hero-editorial .beezwoo-hero__slide img {
    filter: contrast(1.15) saturate(0.9) brightness(1.05) sepia(0.08);
}

.beezwoo-hero--filter-bw .beezwoo-hero__slide img { filter: grayscale(100%); }
.beezwoo-hero--filter-bw-contrast .beezwoo-hero__slide img { filter: grayscale(100%) contrast(1.3) brightness(1.05); }
.beezwoo-hero--filter-clarendon .beezwoo-hero__slide img { filter: contrast(1.2) saturate(1.35) brightness(1.05); }
.beezwoo-hero--filter-juno .beezwoo-hero__slide img { filter: sepia(0.15) contrast(1.15) saturate(1.4) brightness(1.05) hue-rotate(-10deg); }
.beezwoo-hero--filter-lark .beezwoo-hero__slide img { filter: contrast(0.9) brightness(1.15) saturate(1.1); }
.beezwoo-hero--filter-moon .beezwoo-hero__slide img { filter: grayscale(50%) contrast(1.1) brightness(1.1); }
.beezwoo-hero--filter-matte .beezwoo-hero__slide img { filter: contrast(0.9) brightness(1.1) saturate(0.9); }
.beezwoo-hero--filter-warm .beezwoo-hero__slide img { filter: sepia(0.2) saturate(1.3) brightness(1.05) hue-rotate(-5deg); }
.beezwoo-hero--filter-cold .beezwoo-hero__slide img { filter: saturate(0.8) brightness(1.05) hue-rotate(10deg) sepia(0.1); }
.beezwoo-hero--filter-vibrant .beezwoo-hero__slide img { filter: saturate(1.5) contrast(1.1) brightness(1.02); }
.beezwoo-hero--filter-faded .beezwoo-hero__slide img { filter: contrast(0.85) brightness(1.1) saturate(0.75) sepia(0.15); }
.beezwoo-hero--filter-dramatic .beezwoo-hero__slide img { filter: contrast(1.3) saturate(1.1) brightness(0.95); }
.beezwoo-hero--filter-cinematic .beezwoo-hero__slide img { filter: contrast(1.1) saturate(0.85) brightness(0.98) sepia(0.1); }
.beezwoo-hero--filter-teal-orange .beezwoo-hero__slide img { filter: contrast(1.1) saturate(1.2) sepia(0.15) hue-rotate(-15deg); }

/* ==========================================================================
   VIGNETTE & GRAIN
   ========================================================================== */
.beezwoo-hero--vignette .beezwoo-hero__slideshow::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 100%);
}

.beezwoo-hero--grain .beezwoo-hero__slideshow::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    .beezwoo-hero {
        flex-direction: column;
        height: auto;
        min-height: auto;
        max-height: none;
    }
    
    .beezwoo-hero__video,
    .beezwoo-hero__product {
        width: 100% !important;
    }
    
    .beezwoo-hero__video { height: var(--hero-mobile-video-h); }
    .beezwoo-hero__product { height: var(--hero-mobile-product-h); }
    
    .beezwoo-hero--mobile-stack { flex-direction: column; }
    .beezwoo-hero--mobile-stack-reverse { flex-direction: column-reverse; }
    
    .beezwoo-hero--mobile-video-only .beezwoo-hero__product { display: none; }
    .beezwoo-hero--mobile-video-only .beezwoo-hero__video { height: var(--hero-height); }
    
    .beezwoo-hero--mobile-product-only .beezwoo-hero__video { display: none; }
    .beezwoo-hero--mobile-product-only .beezwoo-hero__product { height: var(--hero-height); }
    
    .beezwoo-hero__arrow {
        --arrow-size: 44px;
        opacity: 1;
    }
    
    .beezwoo-hero__arrow svg { width: 20px; height: 20px; }
    .beezwoo-hero__arrow--prev { left: 12px; }
    .beezwoo-hero__arrow--next { right: 12px; }
    
    .beezwoo-hero__dots {
        bottom: 16px;
        padding: 8px 12px;
        gap: 8px;
    }
    
    .beezwoo-hero__dot { --dot-size: 8px; }
    .beezwoo-hero__dot.is-active { width: 20px; }
    
    .beezwoo-hero__counter {
        bottom: 16px;
        right: 16px;
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .beezwoo-hero__info {
        padding: 20px 24px;
        max-width: calc(100% - 32px);
    }
    
    .beezwoo-hero__info--bottom-left,
    .beezwoo-hero__info--bottom-right,
    .beezwoo-hero__info--bottom-center {
        left: 16px;
        right: 16px;
        bottom: 80px;
        transform: none;
        text-align: left;
    }
    
    .beezwoo-hero__title { font-size: 20px; }
    .beezwoo-hero__price { font-size: 16px; margin-bottom: 14px; }
    .beezwoo-hero__cta { 
        padding: 12px 24px; 
        font-size: 11px;
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .beezwoo-hero__arrow { --arrow-size: 40px; }
    .beezwoo-hero__arrow svg { width: 18px; height: 18px; }
    .beezwoo-hero__info { padding: 16px 20px; }
    .beezwoo-hero__title { font-size: 18px; }
    .beezwoo-hero__price { font-size: 15px; }
}

/* ==========================================================================
   EDITOR & ACCESSIBILITY
   ========================================================================== */
.elementor-editor-active .beezwoo-hero__arrow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .beezwoo-hero__slide,
    .beezwoo-hero__arrow,
    .beezwoo-hero__dot,
    .beezwoo-hero__cta {
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .beezwoo-hero__arrow {
        --arrow-bg: #fff;
        --arrow-color: #000;
        border: 2px solid #000;
    }
    .beezwoo-hero__dot { border: 2px solid #000; }
    .beezwoo-hero__dot.is-active { background: #000; }
}