/*   Y O U R   C S S   S T Y L E S
**
** Style all markdown content elements properly
** Use the markdown test file to check it: https://github.com/typemill/typemill/blob/master/content/00-Welcome/03-Markdown-Test.md
** You can activate and use the Tachyons CSS library: https://typemill.net/theme-developers/helper-functions#activate-tachyons
**
*/

.figure-compare-images {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.figure-compare-images img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.figure-compare-images figcaption {
    position: absolute;
    top: 1rem;
    background: rgba(19, 45, 81, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    z-index: 5;
}

.figure-compare-images .caption-left {
    left: 1rem;
}

.figure-compare-images .caption-right {
    right: 1rem;
}

.compare-wrapper {
    position: relative;
    width: 100%;
}

.compare-wrapper figure {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.compare-wrapper figure:nth-child(2) img {
    display: block;
    width: 100%;
    height: auto;
}

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px; /* Zvětšeno ze 4px */
    background-color: #fff;
    cursor: ew-resize;
    z-index: 10;
    transition: background-color 0.3s;
}

.slider:hover {
    background-color: #ddd;
}

.slider::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;  /* Širší dotyková plocha */
    height: 100px;  /* Vyšší dotyková plocha */
    background-color: transparent;  /* Průhledné pozadí */
    cursor: ew-resize;
}

.handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;  /* Zvětšeno z 12px */
    height: 24px;  /* Zvětšeno z 12px */
    background-color: #fff;
    border-radius: 50%;
    cursor: ew-resize;
}

.handle::before,
.handle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;  /* Zvětšeno z 10px */
    height: 14px;  /* Zvětšeno z 10px */
    border-style: solid;
    border-color: #fff;
    border-width: 0 3px 3px 0; /* Zvětšeno z 2px */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.handle::before {
    left: -20px;  /* Upraveno pro novou velikost */
    transform: translateY(-50%) rotate(135deg);
}

.handle::after {
    right: -20px;  /* Upraveno pro novou velikost */
    transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 768px) {
    .handle {
        width: 16px;  /* Reduced from 32px */
        height: 16px;
    }
    
    .handle::before,
    .handle::after {
        width: 12px;
        height: 12px;
    }
    
    .handle::before {
        left: -16px;  /* Changed from -4px */
    }
    .handle::after {
        right: -16px;  /* Changed from -4px */
    }

    .slider::after {
        width: 60px;  /* Ještě širší na mobilech */
        height: 120px;  /* Ještě vyšší na mobilech */
    }
}

@media (max-width: 575px) {
    .handle {
        width: 16px;  /* Reduced from 32px */
        height: 16px;
    }
    
    .handle::before,
    .handle::after {
        width: 14px;  /* Increased from 12px */
        height: 14px;
    }
    
    .handle::before {
        left: -24px;  /* Changed from -6px */
    }
    .handle::after {
        right: -24px;  /* Changed from -6px */
    }
    
    .slider {
        width: 6px;
    }

    .slider::after {
        width: 80px;  /* Maximální šířka pro malé displeje */
        height: 150px;  /* Maximální výška pro malé displeje */
    }

    .figure-compare-images figcaption {
        padding: 0.25rem 0.75rem;
        font-size: 0.8rem;
        top: 0.75rem;
    }

    .figure-compare-images .caption-left {
        left: 0.75rem;
    }

    .figure-compare-images .caption-right {
        right: 0.75rem;
    }
}

/* New styles for compare-image */
#compare-image > ul {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.2em;  /* Menší odsazení pro odrážky první úrovně */
    list-style: disc;  /* Zachování odrážek */
    box-sizing: border-box;
}

#compare-image > ul > li {
    padding-left: 0;  /* Odstranění paddingu u li */
    margin-left: 0;   /* Odstranění marginu u li */
}

#compare-image > p,
#compare-image > h1,
#compare-image > h2,
#compare-image > h3,
#compare-image > h4,
#compare-image > h5,
#compare-image > h6 {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 769px) {
    #compare-image > ul,
    #compare-image > p,
    #compare-image > h1,
    #compare-image > h2,
    #compare-image > h3,
    #compare-image > h4,
    #compare-image > h5,
    #compare-image > h6 {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}