/**
 * Section: comparison-slider
 *
 * Extracted from template-parts/comparison_slider.php.
 * Loaded via trunorth_enqueue_section('comparison-slider').
 */

.ComparisonSlider-Section {
        padding: calc(var(--vw) * 2.5) calc(var(--vw) * 5);
        background-color: #f5f5f5;

        .ComparisonSlider-Heading {
            display: flex;
            width: 100%;
            justify-content: center;
            margin-bottom: 0.75rem;
        }

        .ComparisonSlider-Container {
            max-width: calc(var(--vw) * 65);
            margin: 0 auto;
            padding: calc(var(--vw) * 0.75) 0;
        }

        .comparison-slider {
            position: relative;
            height: calc(var(--vw) * 30);
            overflow: hidden;

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .bottom { z-index: 1; }
            .top { z-index: 2; clip-path: inset(0 50% 0 0); }
        }

        @media (max-width: 768px) {
            .ComparisonSlider-Container {
                max-width: 100%;
            }
            .comparison-slider {
                height: calc(var(--vw) * 50);
                width: 100%;
            }
        }

        .divider {
            position: absolute;
            z-index: 3;
            top: 0;
            left: 50%;
            width: clamp(3px, 1vw, 1vw);
            height: 100%;
            background: rgba(255, 255, 255, 1);
            transform: translateX(-50%);
        }

        .handle {
            position: absolute;
            z-index: 4;
            top: 50%;
            left: 50%;
            width: clamp(44px, calc(var(--vw) * 3), calc(var(--vw) * 3));
            height: clamp(44px, calc(var(--vw) * 3), calc(var(--vw) * 3));
            background: rgba(255, 255, 255, 1);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            cursor: ew-resize;
            user-select: none;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: clamp(36px, calc(var(--vw) * 2.5), calc(var(--vw) * 2.5));
                height: clamp(36px, calc(var(--vw) * 2.5), calc(var(--vw) * 2.5));
                background: #C22127;
                border-radius: 50%;
                transform: translate(-50%, -50%);
            }

            &::after {
                content: '';
                position: absolute;
                top: 4px;
                left: 4px;
                right: 4px;
                bottom: 4px;
            }
        }

        @media (hover: hover) {
            .handle:hover { background: white; }
        }
    }