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


.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;
    }       

    .projects-title {
        @media (min-width: 992px) {
            text-align: center;
        }
    }
    .projects-slider-wrapper {
        @media (min-width: 992px) {
            flex-direction: row;
        }
    }
    .projects-swiper {
        @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 {
        width: 346px;
        max-width: 757px;

        @media (min-width: 992px) {
            width: 757px;
        }
        .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;
            justify-content: end;
        }

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

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

        @media (min-width: 992px) {
            aspect-ratio: 757 / 481;
        }
    }

    /* 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);
    }
}