/**
 * Projects Slider Widget Styles
 * Custom styles for the projects slider widget
 */

.elementor-widget-map-projects-slider {

    .map-projects-slider-container {
        background: var(--Neutral-Black);
    }

    .map-projects-slider-widget {
        margin: 0 0 0 auto;
        max-width: none;
        padding-inline-end: 0;
        padding-inline-start: 0;
        width: calc(50vw + var(--content-width) / 2);


        @media (max-width: 768px) {
            padding-left: 10px;
            padding-right: 10px;
            overflow: hidden;
        }

        .projects-title {
            @media (min-width: 992px) {
                text-align: center;
            }
        }
        .projects-slider-wrapper {
            @media (min-width: 992px) {
                flex-direction: row;
            }
        }
        .projects-swiper {
			width: 100%;
            @media (min-width: 992px) {
                order: 2;
                margin-right: 0;
            }
            @media (min-width: 1350px) {
                .swiper-slide {
                    width: auto !important;
                }
            }
        }
        .swiper-wrapper {
            max-width: 100vw;
            display: flex;

            @media screen and (min-width: 992px) and (max-width: 1349px) {
                max-width: 900px;
            }

            @media (min-width: 1350px) {
                max-width: 67vw;
            }
        }

        /* Project Card */
        .project-card {
            max-width: 500px;
            .project-info-wrapper {
                justify-content: space-between;

                .project-info {
                    @media (min-width: 992px) {
                        max-width: 420px;
                    }
                }
            }

            /* Tags - wrapping display */
            .project-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
				margin-top: 15px;
                justify-content: flex-start;
				flex-direction: row;
            }

            .tag-item {
                white-space: nowrap;
            }
        }

        /* Project Image Wrapper */
        .project-image-wrapper {
            position: relative;
            width: 100%;
            aspect-ratio: 4 / 3;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            background-color: #1a1a1a;
            text-decoration: none;
            transition: transform 0.3s ease;
			height: 460px;
			
        }

        /* Project Image */
        .project-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Arrow Icon */
        .arrow-icon {
            position: relative;
            z-index: 2;
            width: 80px;
            height: 80px;
        }

        /* Navigation Buttons */
        .projects-prev,
        .projects-next {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }
        .projects-prev {
            @media (max-width: 768px) {
                order: 1;
            }
        }

        /* Navigation: Rotated vertical bar on left */
        .projects-pagination {
            @media (min-width: 992px) {
                writing-mode: vertical-lr;
                transform: rotate(180deg);
                flex-direction: row-reverse;
                justify-content: center;
                gap: 1.5rem;
                width: auto;
                margin-right: auto;
                align-items: center;
                order: 1;
            }
        }

        .projects-controls {
            @media (min-width: 992px) {
                gap: 0.5rem;
                order: 3;
            }
        }
    }

    .projects-counter {
        margin-left: auto;
        @media (min-width: 992px) {
            margin-left: unset;
            order: 2;
        }
    }

    /* Autoplay Progress */
    .autoplay-progress {
        position: relative;
        right: 0;
        bottom: 0;
        z-index: 10;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: var(--Neutral-White);

        @media (min-width: 992px) {
            order: 1;
        }

        svg {
            --progress: 0;
            position: absolute;
            left: 0;
            top: 0px;
            z-index: 10;
            width: 100%;
            height: 100%;
            stroke-width: 2px;
            stroke: var(--Neutral-White);
            fill: none;
            stroke-dashoffset: calc(125.6 * (1 - var(--progress)));
            stroke-dasharray: 125.6;
            transform: rotate(-90deg);
        }
    }
}