/**
 * Hero Slider Styles
 *
 * Horizontal-slide hero slider with drag gesture,
 * content overlay, navigation arrows, and progress dots.
 * Reference: 1512x650 design comp.
 *
 * @package Mesa
 * @since 1.3.0
 */

/* ============================================
   Container
   ============================================ */
.mesa-hero-slider {
    position: relative;
    width: 100%;
    height: clamp(300px, 43vw, 650px);
    overflow: hidden;
    background-color: #08050C;
    direction: rtl;
    touch-action: pan-y pinch-zoom;
    -webkit-user-select: none;
    user-select: none;
}

/* ============================================
   Track (horizontal flex, LTR for predictable transforms)
   ============================================ */
.mesa-hero-slider__track {
    display: flex;
    direction: ltr;
    width: 100%;
    height: 100%;
    /* Smooth spring-like easing for slide transitions */
    transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

/* Disable transition during active drag */
.mesa-hero-slider--dragging .mesa-hero-slider__track {
    transition: none !important;
}

/* ============================================
   Slides
   ============================================ */
.mesa-hero-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* ============================================
   Media (Image / Video)
   ============================================ */
.mesa-hero-slider__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Dark scrim over media for text readability */
.mesa-hero-slider__slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    z-index: 1;
}

/* ============================================
   Content Box
   ============================================ */
.mesa-hero-slider__content {
    position: absolute;
    z-index: 2;
    direction: rtl;
    /* 209/650 = 32.15% from top */
    top: 32.15%;
    /* 179/1512 = 11.84% from right edge */
    right: 11.84%;
    /* 596/1512 = 39.42% width */
    width: 39.42%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    /* Gentle content reveal */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}

/* Active slide content fades in gently */
.mesa-hero-slider__slide.is-active .mesa-hero-slider__content {
    opacity: 1;
    transform: translateY(0);
}

/* Brand Title */
.mesa-hero-slider__brand {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(14px, 1.32vw, 20px);
    line-height: 1.4;
    color: #FFFFFF;
    margin-bottom: 8px;
}

/* Product Title */
.mesa-hero-slider__title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(24px, 2.78vw, 42px);
    line-height: 1.4;
    color: #FFFFFF;
    margin: 0 0 8px;
}

/* Price */
.mesa-hero-slider__price {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.12vw, 32px);
    line-height: 1.4;
    color: #CEFE65;
    margin-bottom: 40px;
}

/* CTA Button */
.mesa-hero-slider__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    height: 44px;
    background-color: #CEFE65;
    color: #08050C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(14px, 1.19vw, 18px);
    line-height: 44px;
    text-decoration: none;
    border: none;
    border-radius: 0;
    clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    padding: 0 calc(15px + 20px);
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.mesa-hero-slider__btn:hover {
    opacity: 0.9;
}

/* ============================================
   Arrows
   ============================================ */
.mesa-hero-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #08050C;
    padding: 0;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.mesa-hero-slider__arrow:hover,
.mesa-hero-slider__arrow:hover:active {
    background: var(--mesa-lime, #CEFE65) !important;
    color: var(--mesa-black, #08050C) !important;
    box-shadow: none !important;
}

/* Kill all Kadence focus/active overrides — only hover or default */
.mesa-hero-slider__arrow:focus,
.mesa-hero-slider__arrow:active,
.mesa-hero-slider__arrow:focus:not(:focus-visible) {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #08050C !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Keyboard-only focus ring */
.mesa-hero-slider__arrow:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65) !important;
    outline-offset: 3px;
}

/* RTL: "prev" is on the right, "next" is on the left */
.mesa-hero-slider__arrow--prev {
    right: 72px;
}

.mesa-hero-slider__arrow--next {
    left: 72px;
}

/* ============================================
   Progress Dots
   ============================================ */
/* ============================================
   Controls Container (Pause + Dots)
   ============================================ */
.mesa-hero-slider__controls {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
}

.mesa-hero-slider__pause {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.mesa-hero-slider__pause:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.8);
}

.mesa-hero-slider__pause:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65);
    outline-offset: 3px;
}

.mesa-hero-slider__pause-icon,
.mesa-hero-slider__play-icon {
    font-style: normal;
    pointer-events: none;
}

.mesa-hero-slider__dots {
    display: flex;
    /* RTL: reverse row direction so dot order matches slides */
    flex-direction: row-reverse;
    gap: 8px;
    align-items: center;
}

.mesa-hero-slider__dot {
    width: clamp(3rem, 5.5vw, 5rem);
    height: 0.375rem;
    border-radius: 3px !important;
    /* background: rgba(255, 255, 255, 0.3) !important; */
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.mesa-hero-slider__dot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    z-index: 1;
}

.mesa-hero-slider__dot:focus-visible {
    outline: 2px solid var(--mesa-lime, #CEFE65);
    outline-offset: 3px;
}

/* Remove any ::after pseudo-element (no longer used) */
/* .mesa-hero-slider__dot::after,
.mesa-hero-slider__dot::before {
    content: none !important;
    display: none !important;
} */

/* Real fill element — animated via JS */
.mesa-hero-slider__dot-fill {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    /* right: 0 !important; */
    left: 0 !important;
    right: auto !important;
    height: 100% !important;
    /* width: 0% !important; */
    width: 0%;
    background: #CEFE65 !important;
    /* box-shadow: 0 0 6px rgba(206, 254, 101, 0.6); */
    border-radius: 3px !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.mesa-hero-slider__dot-fill {
    transition: opacity 0.2s;
}

/* Completed dots — full fill */
.mesa-hero-slider__dot.is-done .mesa-hero-slider__dot-fill {
    width: 100% !important;
}

.mesa-hero-slider__dot.is-active .mesa-hero-slider__dot-fill {
    opacity: 1;
}

.mesa-hero-slider__dot:not(.is-active) .mesa-hero-slider__dot-fill {
    opacity: 0.6;
}

/* ============================================
   Responsive: Tablet (<=1200px)
   ============================================ */
@media screen and (max-width: 1200px) {
    .mesa-hero-slider__content {
        right: 11.84%;
        width: 45%;
        top: 28%;
    }

    .mesa-hero-slider__arrow--prev {
        right: 32px;
    }

    .mesa-hero-slider__arrow--next {
        left: 32px;
    }
}

/* ============================================
   Responsive: Mobile (<=768px)
   ============================================ */
@media screen and (max-width: 768px) {
    .mesa-hero-slider {
        /* height: clamp(280px, 56vw, 420px); */
        min-height: 520px;
        height: 75vh;
    }

    .mesa-hero-slider__content {
        /* top: auto; */
        top: 28%;
        /* bottom: 80px; */
        /* left: 50%; */
        /* transform: translateX(-50%); */
        /* transform: translate(-50%, -50%); */
        transform: none;
        transition: opacity 0.75s linear;
        width: 90%;
        max-width: 320px;
        right: 33px;
        left: auto;
        margin-inline-start: auto;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 auto;

        /* align-items: center; */
        text-align: right;
    }

    .mesa-hero-slider__slide.is-active .mesa-hero-slider__content {
        /* transform: translate(-50%, -50%); */
        transform: none;
        opacity: 1;
    }

    .mesa-hero-slider__brand {
        font-size: 20px;
    }

    .mesa-hero-slider__title {
        font-size: 32px;
    }

    .mesa-hero-slider__price {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .mesa-hero-slider__btn {
        min-width: 160px;
        height: 44px;
        font-size: 16px;
        line-height: 44px;
        clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
        padding: 0 calc(12px + 16px);
    }

    /* Hide arrows on mobile */
    .mesa-hero-slider__arrow {
        display: none;
    }

    .mesa-hero-slider__controls {
        bottom: 32px;
        gap: 16px;
    }

    .mesa-hero-slider__dot {
        width: 42px;
        height: 5px;
        overflow: hidden;
        border-radius: 0 !important;
    }

    .mesa-hero-slider__dot-fill,
    .mesa-hero-slider__dot::before {
        border-radius: 0 !important;
    }

    .mesa-hero-slider__pause {
        display: none;
    }
}

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .mesa-hero-slider__track {
        transition: none;
    }

    .mesa-hero-slider__content {
        transition: none;
    }

    .mesa-hero-slider__slide .mesa-hero-slider__content {
        opacity: 1;
        transform: none;
    }

    .mesa-hero-slider__dot-fill {
        transition: none !important;
    }

    .mesa-hero-slider__pause {
        transition: none;
    }
}