/* ── Hero Video Carousel – Front-end v1.1.0 ── */

.hvc-hero {
    position: relative;
    width: var(--hvc-width, 100%);
    margin-left: var(--hvc-margin-l, 0);
    margin-right: var(--hvc-margin-r, 0);
    overflow: hidden;
    background: #000;
    border-radius: var(--hvc-radius, 0px);

    /* Desktop */
    height:     var(--hvc-h-desktop,    90vh);
    min-height: var(--hvc-minh-desktop, 500px);
    max-height: var(--hvc-maxh-desktop, none);
}

/* ── Stage ── */
.hvc-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Slide transition wrapper */
.hvc-hero[data-transition="slide"] .hvc-stage {
    display: flex;
}

.hvc-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit:     var(--hvc-fit,     cover);
    object-position: var(--hvc-pos,   center center);
    display: block;
    opacity: 1;
    transition: opacity var(--hvc-transition-dur, 600ms) ease;
}
.hvc-video.hvc-fade-out { opacity: 0; }

/* ── Slide transition ── */
.hvc-video-slide-out { animation: hvcSlideOut var(--hvc-transition-dur, 600ms) forwards; }
.hvc-video-slide-in  { animation: hvcSlideIn  var(--hvc-transition-dur, 600ms) forwards; }
@keyframes hvcSlideOut { from { transform: translateX(0);     } to { transform: translateX(-100%); } }
@keyframes hvcSlideIn  { from { transform: translateX(100%);  } to { transform: translateX(0);     } }

/* ── Overlay ── */
.hvc-overlay {
    position: absolute;
    inset: 0;
    background: var(--hvc-overlay, rgba(0,0,0,.4));
    pointer-events: none;
    z-index: 1;
}

/* ── Hero text ── */
.hvc-hero-text {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    pointer-events: none;
}
.hvc-hero-text[style*="left"]   { align-items: flex-start; }
.hvc-hero-text[style*="right"]  { align-items: flex-end; }
.hvc-hero-text[style*="center"] { align-items: center; }

.hvc-hero-title {
    color: var(--hvc-title-color, #fff);
    font-size: clamp(1.75rem, 4vw, 3.5rem);
    font-weight: 700;
    margin: 0 0 .5rem;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.hvc-hero-subtitle {
    color: var(--hvc-subtitle-color, #eee);
    font-size: clamp(1rem, 2vw, 1.4rem);
    margin: 0;
    text-shadow: 0 1px 8px rgba(0,0,0,.4);
    opacity: .9;
}

/* ── Arrows – base ── */
.hvc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    color: #fff;
    transition: background .2s, transform .2s, opacity .2s;
    border: none;
}
.hvc-prev { left: 1.25rem; }
.hvc-next { right: 1.25rem; }

/* Round */
.hvc-arrow-round {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.5);
    backdrop-filter: blur(4px);
}
.hvc-arrow-round:hover {
    background: rgba(255,255,255,.32);
    transform: translateY(-50%) scale(1.1);
}

/* Square */
.hvc-arrow-square {
    width: 48px; height: 48px;
    border-radius: 6px;
    background: rgba(0,0,0,.45);
    border: 2px solid rgba(255,255,255,.35);
}
.hvc-arrow-square:hover {
    background: rgba(0,0,0,.65);
    transform: translateY(-50%) scale(1.05);
}

/* Minimal / ghost */
.hvc-arrow-minimal {
    width: 40px; height: 40px;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 2.5rem;
    opacity: .7;
}
.hvc-arrow-minimal:hover { opacity: 1; transform: translateY(-50%) scale(1.15); }

/* ── Dots – base ── */
.hvc-dots {
    position: absolute;
    bottom: 1.25rem;
    display: flex;
    gap: .5rem;
    z-index: 10;
}
.hvc-dots-bottom-center { left: 50%; transform: translateX(-50%); }
.hvc-dots-bottom-left   { left: 1.25rem; transform: none; }
.hvc-dots-bottom-right  { right: 1.25rem; transform: none; left: auto; }

.hvc-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.45);
    border: none; cursor: pointer; padding: 0;
    transition: background .2s, transform .2s;
}
.hvc-dot.active { background: #fff; transform: scale(1.3); }

/* ── Progress bar ── */
.hvc-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    background: rgba(255,255,255,.85);
    width: 0%;
    z-index: 10;
    transition: width linear;
}

/* ── Mobile badge ── */
.hvc-mobile-badge {
    position: absolute;
    bottom: 1rem; right: 1rem;
    background: rgba(0,0,0,.55);
    color: #fff; font-size: .75rem;
    padding: .3rem .7rem; border-radius: 20px;
    backdrop-filter: blur(4px);
    display: none;
    z-index: 10;
}

/* ── CTA Buttons ── */
.hvc-cta-btn {
    position: absolute;
    z-index: 6;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.35rem;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.3;
    cursor: pointer;
    transition: opacity .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.hvc-cta-btn:hover {
    opacity: .88;
    transform: translate(-50%, -50%) scale(1.04);
    box-shadow: 0 4px 18px rgba(0,0,0,.35);
}

/* ── Mobile ── */
@media ( max-width: 767px ) {
    .hvc-hero {
        height:     var(--hvc-h-mobile,    60vh);
        min-height: var(--hvc-minh-mobile, 300px);
        max-height: var(--hvc-maxh-mobile, none);
    }
    .hvc-arrow,
    .hvc-dots,
    .hvc-progress {
        display: none;
    }
    .hvc-mobile-badge {
        display: block;
    }
    .hvc-cta-desktop-only { display: none !important; }
}

@media ( min-width: 768px ) {
    .hvc-cta-mobile-only { display: none !important; }
}