/**
 * Hotspot Element Styles
 *
 * @package CustomVCElements
 */

/* 
   CSS Custom Properties
   */

.cvc-hotspot {
    --cvc-hotspot-gap: var(--oku-spacing-lg);
    --cvc-hotspot-text-width: 50%;
    --cvc-hotspot-image-width: 50%;
    --cvc-hotspot-image-max-width: 720px;
    --cvc-hotspot-line-stroke-width: 2px;
    --cvc-hotspot-circle-radius: 6px;
    --cvc-hotspot-anchor-size: 1px; /* Invisible anchor point */
    
    /* Animation Variables */
    --cvc-hotspot-anim-duration-slow: 2s;
    --cvc-hotspot-anim-duration-normal: 1.2s;
    --cvc-hotspot-anim-duration-fast: 0.8s;
    --cvc-hotspot-anim-easing: cubic-bezier(0.23, 1, 0.32, 1); /* Dynamic easing */

    
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: stretch;
    position: relative; /* CRITICAL: SVG positioning reference */
    contain: layout style;
    /* Performance optimization */
    will-change: auto;
}

/* Color Scheme Variants */
.cvc-hotspot--orange {
    --cvc-hotspot-primary-color: var(--oku-color-orange);
    --cvc-hotspot-line-color: var(--oku-color-orange);
    --cvc-hotspot-circle-color: var(--oku-color-orange);
    --cvc-hotspot-subtitle-color: var(--oku-color-orange);
}

.cvc-hotspot--violet {
    --cvc-hotspot-primary-color: var(--oku-color-violet);
    --cvc-hotspot-line-color: var(--oku-color-violet);
    --cvc-hotspot-circle-color: var(--oku-color-violet);
    --cvc-hotspot-subtitle-color: var(--oku-color-violet);
}

/* 
   Layout Variants
   */

/* Layout Left (Image Left, Text Right) */
.cvc-hotspot--layout-left .cvc-hotspot__image {
    order: 0;
    margin-right: auto;
}

.cvc-hotspot--layout-left .cvc-hotspot__text {
    order: 1;
    align-items: flex-start;
}

.cvc-hotspot--layout-left .cvc-hotspot__text-inner {
    text-align: left;
}

/* Layout Right (Image Right, Text Left) */
.cvc-hotspot--layout-right .cvc-hotspot__image {
    order: 1;
    margin-left: auto;
}

.cvc-hotspot--layout-right .cvc-hotspot__text {
    order: 0;
    align-items: flex-end; /* Back to original flex-end */
}

.cvc-hotspot--layout-right .cvc-hotspot__text-inner {
    text-align: left; /* Back to original right */
}

/* 
   SVG Layer and Line Animation
   */

.cvc-hotspot__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--oku-z-index-above); /* Above image but below text */
    overflow: visible;
    /* Ensure SVG covers entire hotspot container, not just image */
}

.cvc-hotspot__line {
    stroke-width: var(--cvc-hotspot-line-stroke-width);
    fill: none;
    stroke: var(--cvc-hotspot-line-color);
    opacity: 1;
    pointer-events: none;
    
    /* Line is always visible - mask controls visibility */
    opacity: 1;
}

/* SVG Mask Rectangle - starts hidden, animates to full width */
.cvc-hotspot__mask-rect {
    transition: width var(--cvc-hotspot-anim-duration-normal) var(--cvc-hotspot-anim-easing),
                x var(--cvc-hotspot-anim-duration-normal) var(--cvc-hotspot-anim-easing);
}

/* Animation trigger - JavaScript will handle the animation by changing width attribute */
.cvc-hotspot__line.animate {
    /* This class triggers JavaScript to animate the mask */
}

/* Animation Speed Variants */
.cvc-hotspot--anim-slow .cvc-hotspot__mask-rect {
    transition-duration: var(--cvc-hotspot-anim-duration-slow);
}

.cvc-hotspot--anim-normal .cvc-hotspot__mask-rect {
    transition-duration: var(--cvc-hotspot-anim-duration-normal);
}

.cvc-hotspot--anim-fast .cvc-hotspot__mask-rect {
    transition-duration: var(--cvc-hotspot-anim-duration-fast);
}

/* Hotspot Circle */
.cvc-hotspot__circle {
    fill: var(--cvc-hotspot-circle-color);
    pointer-events: none; /* Visual indicator only, no interaction needed */
    transition: r 0.2s ease, opacity 0.2s ease, fill 0.2s ease;
}

/* Circle is purely visual - no hover/focus states needed */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .cvc-hotspot__circle {
        stroke: currentColor;
        stroke-width: 2px;
    }
    
    .cvc-hotspot__circle:focus {
        outline: 4px solid currentColor;
        outline-offset: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .cvc-hotspot__circle {
        transition: none;
    }
    
    .cvc-hotspot__mask-rect {
        transition: none;
    }
}

/* 
   Image Container
   */

.cvc-hotspot__image {
    width: var(--cvc-hotspot-image-width);
    max-width: var(--cvc-hotspot-image-max-width);
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: var(--oku-z-index-base); /* Below SVG */
}

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

/* 
   Text Content
   */

.cvc-hotspot__text {
    width: var(--cvc-hotspot-text-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    z-index: var(--oku-z-index-above);
}

.cvc-hotspot__text-inner {
    width: 50%;
    position: relative;
    min-width: 280px;
}

/* Text Offset Classes */
.cvc-hotspot__text--offset-x--2 .cvc-hotspot__text-inner { margin-left: calc(var(--oku-spacing-xl) * -4) !important; }
.cvc-hotspot__text--offset-x--1 .cvc-hotspot__text-inner { margin-left: calc(var(--oku-spacing-xl) * -2) !important; }
.cvc-hotspot__text--offset-x-0  .cvc-hotspot__text-inner { margin-left: 0 !important; }
.cvc-hotspot__text--offset-x-1  .cvc-hotspot__text-inner { margin-left: calc(var(--oku-spacing-xl) * 2) !important; }
.cvc-hotspot__text--offset-x-2  .cvc-hotspot__text-inner { margin-left: calc(var(--oku-spacing-xl) * 4) !important; }

.cvc-hotspot__text--offset-y--2 .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * -4) !important; }
.cvc-hotspot__text--offset-y--1 .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * -2) !important; }
.cvc-hotspot__text--offset-y-0  .cvc-hotspot__text-inner { margin-top: 0 !important; }
.cvc-hotspot__text--offset-y-1  .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * 2) !important; }
.cvc-hotspot__text--offset-y-2  .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * 4) !important; }

/* Typography */
.cvc-hotspot__title {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
    line-height: 1.2;
    padding: 0;
    /* Uses theme default font-size for regular */
    background-color: var(--oku-color-white-50);
}

.cvc-hotspot__subtitle {
    color: var(--cvc-hotspot-subtitle-color);
    font-size: clamp(1.125rem, 2vw, 1.5rem);
}

.cvc-hotspot__description {
    margin: 0;
}

/* Text Size Variants */
.cvc-hotspot--text-regular .cvc-hotspot__description {
    /* Uses default theme text size */
}

.cvc-hotspot--text-large .cvc-hotspot__description {
    /* Uses Uncode's .text-lead class for larger text */
}

/* 
   Anchor Target Point
   */

.cvc-hotspot__anchor {
    display: inline-block;
    width: var(--cvc-hotspot-anchor-size);
    height: var(--cvc-hotspot-anchor-size);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.cvc-hotspot--layout-left .cvc-hotspot__anchor {
    left: -16px;
}

.cvc-hotspot--layout-right .cvc-hotspot__anchor {
    right: -16px; /* Back to original right position */
}

/* 
   Error State
   */

.cvc-hotspot-error {
    padding: var(--oku-spacing-md);
    background-color: var(--oku-color-white);
    border: 1px solid #ccc;
    border-radius: var(--oku-border-radius-md);
    text-align: center;
    color: #666;
}

/* 
   Accessibility
   */

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

/* 
   Responsive Adjustments (Uncode Breakpoints)
   */

@media (max-width: 959px) { /* Tablet max-width */
    .cvc-hotspot {
        flex-direction: column;
        margin-top: var(--oku-spacing-xl);
        margin-bottom: var(--oku-spacing-xl);
    }

    .cvc-hotspot__image {
        order: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    .cvc-hotspot--layout-left .cvc-hotspot__image {
        padding-right: var(--oku-spacing-xxxl);
    }
    
    .cvc-hotspot--layout-right .cvc-hotspot__image {
        padding-left: var(--oku-spacing-xxxl);
    }

    .cvc-hotspot__text {
        order: 1 !important;
        width: 100% !important;
        box-sizing: border-box;
        padding: var(--oku-spacing-md) var(--oku-spacing-xl) !important;
        align-items: flex-start !important;
        justify-content: flex-start;
    }
    
    .cvc-hotspot--layout-left .cvc-hotspot__text,
    .cvc-hotspot--layout-left .cvc-hotspot__title {
        flex-direction: row-reverse;
        text-align: right;
    }

    .cvc-hotspot__text-inner {
        width: 100%;
        margin: 0 !important;
        min-width: auto;
    }

    /* Mobile Anchor Positioning */
    .cvc-hotspot__anchor {
        width: 12px !important;
        height: 12px !important;
        border-radius: 50%;
        background-color: var(--cvc-hotspot-circle-color);
    }
    
    .cvc-hotspot--layout-left .cvc-hotspot__anchor {
        top: -32px !important;
        left: 90% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .cvc-hotspot--layout-right .cvc-hotspot__anchor {
        top: -32px !important;
        left: 10% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    /* Reduce Y-Offset on Mobile (but keep some effect) */
    .cvc-hotspot__text--offset-y--2 .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * -2) !important; }
    .cvc-hotspot__text--offset-y--1 .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * -1) !important; }
    .cvc-hotspot__text--offset-y-1  .cvc-hotspot__text-inner { margin-top: var(--oku-spacing-xl) !important; }
    .cvc-hotspot__text--offset-y-2  .cvc-hotspot__text-inner { margin-top: calc(var(--oku-spacing-xl) * 2) !important; }
}

@media (max-width: 569px) { /* Mobile XS max-width */
    .cvc-hotspot__text {
        padding: var(--oku-spacing-sm) var(--oku-spacing-md) !important;
    }
    
    .cvc-hotspot--layout-left .cvc-hotspot__image,
    .cvc-hotspot--layout-right .cvc-hotspot__image {
        padding-left: var(--oku-spacing-md);
        padding-right: var(--oku-spacing-md);
    }
    
    .cvc-hotspot__title {
        /* Uses theme default mobile font-size for regular */
    }
    
    /* Mobile headline size variants */
    .cvc-hotspot--headline-xl .cvc-hotspot__title {
        /* Uses Uncode theme class fontsize-431854 - mobile responsive */
    }
    
    .cvc-hotspot__subtitle {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
    }
}