/**
 * Listing Slide Title Top Component Styles
 */

.listing-slide-title-top span,
.listing-slide-title-top h3 {
    margin: 0;
}

/* CSS Custom Properties */
:root {
    /* Colors */
    --listing-bg-color: #F3F1FC;
    --listing-text-primary: #0B0E21;
    --listing-text-secondary: #3C4268;
    --listing-text-light: #6B7280;
    --listing-button-primary: #2951A3;
    --listing-button-secondary: #25D366;
    --listing-error-color: #DC2626;
    
    /* Spacing */
    --listing-spacing-xs: 8px;
    --listing-spacing-sm: 12px;
    --listing-spacing-md: 16px;
    --listing-spacing-lg: 24px;
    --listing-spacing-xl: 32px;
    --listing-spacing-2xl: 40px;
    --listing-spacing-3xl: 48px;
    
    /* Typography */
    --listing-font-size-sm: 13px;
    --listing-font-size-base: 14px;
    --listing-font-size-lg: 16px;
    --listing-font-size-xl: 18px;
    --listing-font-size-2xl: 20px;
    --listing-font-size-3xl: 24px;
    --listing-font-size-4xl: 32px;
    
    /* Border Radius */
    --listing-border-radius: 8px;
    --listing-border-radius-lg: 12px;
    --listing-border-radius-xl: 24px;
    
    /* Shadows */
    --listing-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --listing-shadow-md: 0px 0px 1px 0px rgba(40, 41, 61, 0.08), 0px 0.5px 2px 0px rgba(96, 97, 112, 0.16);
    
    /* Transitions */
    --listing-transition: all 0.3s ease;
    
    /* Layout */
    --listing-container-max-width: 1200px;
    --listing-card-width: 489.6px;
    --listing-card-min-height: 420px;
}

/* Main Component */
.listing-slide-title-top {
    background: var(--listing-bg-color);
    padding: var(--listing-spacing-2xl) 0 var(--listing-spacing-3xl) 0 !important;

    /* Full width override for property-primary class */
    &.property-primary {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding-left: var(--listing-spacing-lg);
        padding-right: 0;
        box-sizing: border-box;
        overflow-x: hidden;

        .property-cards-container {
            width: calc(100vw - var(--listing-spacing-lg));
            margin-left: 0;
            margin-right: calc(-50vw + 50%);
            padding-right: 0;
            box-sizing: border-box;
        }
    }
}

@media (min-width: 1440px) {
    .listing-slide-title-top.property-primary {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        overflow-x: hidden;

        .property-cards-container {
            width: calc(100vw - var(--listing-spacing-2xl));
            margin-left: 0;
            margin-right: calc(-50vw + 50%);
            padding-right: 0;
            box-sizing: border-box;
        }
    }
}

/* Header Section */
.listing-slide-title-top .listing-header {
    margin-bottom: var(--listing-spacing-xl);

    .header-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--listing-spacing-lg);
    }

    .header-text {
        flex: 1;
        text-align: left;

        .section-title {
            color: var(--listing-text-primary);
            font-feature-settings: 'liga' off, 'clig' off;
            font-size: var(--listing-font-size-4xl);
            font-style: normal;
            font-weight: 600;
            line-height: 44px;
            margin: 0 0 var(--listing-spacing-xs) 0;
        }

        .section-description {
            color: var(--listing-text-secondary);
            font-feature-settings: 'liga' off, 'clig' off;
            font-size: var(--listing-font-size-lg);
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            letter-spacing: 0.25px;
            max-width: 600px;
            margin: 0;
        }
    }

    .carousel-nav {
        display: flex;
        gap: var(--listing-spacing-xs);
        align-items: center;
        flex-shrink: 0;
    }
}

/* Controls Section */
.listing-slide-title-top .listing-controls {
    margin-bottom: var(--listing-spacing-2xl);

    .filter-container {
        .filter-buttons {
            display: flex;
            gap: var(--listing-spacing-sm);
            flex-wrap: wrap;

            .filter-btn {
                padding: 4px 12px;
                border-radius: var(--listing-border-radius);
                text-align: center;
                font-feature-settings: 'liga' off, 'clig' off;
                font-size: var(--listing-font-size-base);
                font-style: normal;
                font-weight: 600;
                line-height: 24px;
                letter-spacing: 0.25px;
                cursor: pointer;
                transition: var(--listing-transition);
                white-space: nowrap;

                &.active {
                    background: transparent;
                }

                &:disabled {
                    opacity: 0.6;
                    cursor: not-allowed;
                }
            }
        }
    }
}

/* Carousel Navigation */
.listing-slide-title-top .carousel-nav {
    display: flex;
    gap: var(--listing-spacing-xs);

    .nav-btn {
        background: white;
        border-radius: 804.219px;
        display: flex;
        cursor: pointer;
        transition: var(--listing-transition);
        border: none;
        width: 40px;
        height: 40px;
        padding: 8.388px 8px 7.612px 8px;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        position: relative;

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        &:active,
        &:focus {
            transform: none;
            outline: none;
        }

        svg {
            width: 16px;
            height: 16px;
        }
    }
}

/* Swiper Container & Property Cards */
.listing-slide-title-top .property-cards-container {
    min-height: unset;
    
    .property-swiper.listing-swiper-container {
        min-height: unset;
        width: 100%;
        overflow: hidden;
        margin-bottom: 0;

        .swiper-wrapper.listing-swiper-wrapper {
            display: flex;
            transition-property: transform;

            &.property-cards-grid {
                width: 100%;
                margin-bottom: 0;
            }

            .swiper-slide.listing-swiper-slide {
                flex-shrink: 0;
                width: var(--listing-card-width);
                margin-right: var(--listing-spacing-lg);

                /* Property Card Styles - Override existing card-project-container */
                .card-project-container {
                    width: 100% !important;
                    min-width: var(--listing-card-width);
                    max-width: 592px;
                    min-height: var(--listing-card-min-height);
                    background: white;
                    border-radius: var(--listing-border-radius-lg);
                    box-shadow: var(--listing-shadow-sm);
                    overflow: hidden !important;
                    position: relative !important;
                    transition: var(--listing-transition);
                    margin: 0;
                    animation: none;

                    .card-property-image-container {
                        aspect-ratio: 1 / 1;

                        @media screen and (max-width: 767px) {
                            aspect-ratio: unset;
                        }
                    }

                    .card-property-image {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                        border-radius: var(--listing-border-radius-lg) 0 0 var(--listing-border-radius-lg);

                        @media screen and (max-width: 767px) {
                            border-radius: unset;
                        }
                    }

                    .card-detail-container {
                        padding: var(--listing-spacing-md);
                        width: calc(100% - 16px) !important;
                        margin: 0 8px !important;
                        box-sizing: border-box !important;
                    }

                    /* Price styling */
                    .card-price-tag {
                        font-size: var(--listing-font-size-2xl);
                        font-weight: 700;
                        color: var(--brand-color-primary-acf);
                        margin-bottom: var(--listing-spacing-xs);
                        display: block;
                        margin-bottom: 0;
                    }

                    .card-price-label {
                        display: none;
                    }

                    /* Title styling */
                    h3 {
                        font-size: var(--listing-font-size-lg);
                        font-weight: 500;
                        color: #1F2937;
                        margin-bottom: var(--listing-spacing-sm);
                        line-height: 1.4;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }

                    /* Card title truncation for all card styles */
                    .card-title {
                        white-space: nowrap !important;
                        overflow: hidden !important;
                        text-overflow: ellipsis !important;
                        max-width: 100% !important;
                        display: block !important;
                        margin-bottom: 0;
                    }

                    /* Property card title and description styling */
                    .listing-title {
                        font-size: var(--listing-font-size-xl);
                        font-weight: 700;
                        color: #074D92;
                        margin-bottom: var(--listing-spacing-xs);
                        line-height: 1.3;
                    }

                    .listing-description {
                        font-size: var(--listing-font-size-base);
                        font-weight: 400;
                        color: var(--listing-text-light);
                        margin-bottom: var(--listing-spacing-sm);
                        line-height: 1.4;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }

                    /* Location styling */
                    .card-location {
                        font-size: var(--listing-font-size-base);
                        color: var(--listing-text-light);
                        margin-bottom: var(--listing-spacing-sm);
                    }

                    /* Features styling */
                    .card-features {
                        display: flex;
                        gap: var(--listing-spacing-md);
                        margin-bottom: var(--listing-spacing-sm);
                        font-size: var(--listing-font-size-base);
                        color: var(--listing-text-light);

                        img {
                            width: 16px;
                            height: 16px;
                            opacity: 0.6;
                            margin-right: 4px;
                        }
                    }

                    /* Agent and WhatsApp styling */
                    .card-agent {
                        display: flex;
                        align-items: center;
                        gap: var(--listing-spacing-xs);
                        margin-bottom: var(--listing-spacing-sm);

                        img {
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                        }

                        span {
                            font-size: var(--listing-font-size-base);
                            color: #1F2937;
                            font-weight: 500;
                        }
                    }

                    .card-whatsapp {
                        width: 100%;
                        padding: var(--listing-spacing-sm);
                        background: var(--listing-button-secondary);
                        color: white;
                        border: none;
                        border-radius: var(--listing-border-radius);
                        font-size: var(--listing-font-size-lg);
                        font-weight: 500;
                        cursor: pointer;
                        transition: var(--listing-transition);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: var(--listing-spacing-xs);
                        max-width: 100% !important;
                        overflow: hidden !important;
                        position: relative !important;

                        img {
                            width: 20px;
                            height: 20px;
                        }
                    }

                    /* Make WhatsApp button width match card-detail-container */
                    .contact-option.whatsapp.card-listing {
                        width: calc(100% - 16px) !important;
                        margin: 0 8px !important;
                        box-sizing: border-box !important;
                        flex: 1 !important;
                        max-width: 100% !important;
                        overflow: hidden !important;
                        position: relative !important;
                    }
                }
            }
        }
    }
}

/* More Details Button */
.listing-slide-title-top .more-details-container {
    text-align: center;
    margin-top: var(--listing-spacing-md);

    .more-details-btn {
        padding: var(--listing-spacing-sm) var(--listing-spacing-xl);
        border-radius: var(--listing-border-radius);
        border: 1px solid var(--listing-button-primary);
        background: transparent;
        color: var(--listing-button-primary);
        text-align: center;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: var(--listing-font-size-lg);
        font-style: normal;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: 0.08px;
        cursor: pointer;
        transition: var(--listing-transition);
        text-decoration: none;
        display: inline-block;
    }
}

/* Loading and Error States */
.listing-slide-title-top .loading-slide.listing-swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;

    .loading {
        font-size: var(--listing-font-size-lg);
        color: var(--listing-text-light);
        text-align: center;
    }

    .error {
        font-size: var(--listing-font-size-lg);
        color: var(--listing-error-color);
        text-align: center;
    }
}

/* Listing Card Style Variations */

/* Short Detail Style */
.listing-slide-title-top.listing-style-short_detail {
    .more-details-container {
        margin-top: var(--listing-spacing-sm);
    }

    .swiper-slide.listing-swiper-slide {
        width: var(--listing-card-width) !important;
        margin-right: var(--listing-spacing-lg) !important;

        .card-project-container {
            .card-dev-container {
                padding-top: 0 !important;
            }
            background: transparent !important;
            box-shadow: none !important;
            min-height: unset;
            padding: 0;
            margin: 0;
            width: var(--listing-card-width) !important;
            min-width: var(--listing-card-width) !important;
            max-width: var(--listing-card-width) !important;

            .card-property-image-container {
                border-radius: var(--listing-border-radius-lg);
                width: var(--listing-card-width);
                aspect-ratio: 1 / 1;
                margin-bottom: var(--listing-spacing-md);
                overflow: hidden;
                position: relative;
            }

            .card-property-image {
                border-radius: var(--listing-border-radius-lg);
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .card-detail-container {
                padding: 0 !important;
                margin: 0 !important;
                width: 100% !important;
                background: transparent !important;
            }

            .card-price-tag {
                font-size: var(--listing-font-size-xl);
                font-weight: 600;
                color: var(--listing-button-primary);
                margin-bottom: var(--listing-spacing-xs);
                display: block;
            }

            .card-title {
                font-size: var(--listing-font-size-lg);
                font-weight: 500;
                color: var(--listing-text-primary);
                margin: 0 !important;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                height: auto;
            }

            .card-title-span {
                display: none;
            }

            .card-extra-info {
                display: flex;
                flex-wrap: wrap;
                gap: var(--listing-spacing-xs);
                width: 100%;
                justify-content: space-between;
                align-items: center;
                margin: 0;
                padding: 0;
                background: transparent !important;

                .icon-label {
                    display: none;
                }

                .icon-value {
                    color: #444854;
                    font-size: var(--listing-font-size-base);
                }

                .item {
                    display: flex;
                    gap: 4px;
                    white-space: nowrap;
                    margin: 0;
                    padding: 0;
                    flex: 0 0 auto;
                    background: transparent !important;

                    .icon-image {
                        width: 16px;
                        height: 16px;
                        padding: 0;
                        opacity: 0.6;
                    }
                }
            }
        }
    }

    /* Mobile Responsive */
    @media (max-width: 480px) {
        .swiper-slide.listing-swiper-slide {
            width: 100% !important;
            margin-right: 0 !important;

            .card-project-container {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;

                .card-property-image-container {
                    width: 100%;
                    height: auto;
                    aspect-ratio: 1 / 1;
                }
            }
        }
    }
}

/* Long Detail Right Style */
.listing-slide-title-top.listing-style-long_detail_right {
    .property-swiper.listing-swiper-container {
        min-height: unset;
    }

    .more-details-container {
        margin-top: var(--listing-spacing-sm);
    }

    .swiper-slide.listing-swiper-slide .card-project-container {
        .card-extra-info {
            gap: 12px;
        }
        .card-title-container .card-title {
            padding-bottom: var(--listing-spacing-xs);
        }

        .card-title-container .card-title-span {
            display: block;
        }

        .card-extra-info-btn .enquiry-card {
            display: block;

            .agent-id {
                display: none;
            }

            .whatsapp {
                width: 100%;
            }
        }

        .card-dev-container {
            padding: 0 0 0 0;
        }
    }

    @media screen and (min-width: 1200px) {
        .swiper-slide.listing-swiper-slide .card-project-container {
            display: flex;
            min-height: var(--listing-card-min-height);
            box-shadow: var(--listing-shadow-md);

            .card-property-image-container {
                width: 50%;
                height: auto;
                border-radius: var(--listing-border-radius) 0 0 var(--listing-border-radius);
            }

            .card-property-image {
                border-radius: var(--listing-border-radius) 0 0 var(--listing-border-radius);
            }

            .card-detail-wrapper {
                width: 50%;
                display: flex;
                flex-direction: column;

                .card-detail-container {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    > div:last-child {
                        margin-top: auto;
                        position: relative;

                        .card-extra-info.promo-wrap .item.description a {
                            position: relative !important;
                            display: inline-block !important;
                            transform: translateZ(0) !important;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 767px) {
        .swiper-slide.listing-swiper-slide .card-project-container {
            .card-property-image-container {
                aspect-ratio: unset;
            }

            .card-property-image {
                border-radius: var(--listing-border-radius-lg) 0 0 var(--listing-border-radius-lg);
            }
        }
    }
}

/* Long Detail Below Style */
.listing-slide-title-top.listing-style-long_detail_below {
    .more-details-container {
        margin-top: var(--listing-spacing-sm);
    }

    .property-cards-container .property-swiper.listing-swiper-container .swiper-wrapper.listing-swiper-wrapper .swiper-slide.listing-swiper-slide .card-project-container .card-property-image {
        border-radius: 0;
    }

    .property-cards-container .property-swiper.listing-swiper-container .swiper-wrapper.listing-swiper-wrapper .swiper-slide.listing-swiper-slide .card-project-container .card-detail-container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: var(--listing-spacing-md) !important;
        padding-right: var(--listing-spacing-md) !important;
    }

    .swiper-slide.listing-swiper-slide {
        width: var(--listing-card-width) !important;
        margin-right: var(--listing-spacing-lg) !important;

        .card-project-container {
            display: flex;
            flex-direction: column;
            box-shadow: var(--listing-shadow-md);
            background: white;
            border-radius: var(--listing-border-radius);
            overflow: hidden;
            min-height: unset;
            width: var(--listing-card-width) !important;
            min-width: var(--listing-card-width) !important;
            max-width: var(--listing-card-width) !important;

            .card-property-image-container {
                width: 100%;
                height: 200px;
                border-radius: var(--listing-border-radius) var(--listing-border-radius) 0 0;
                overflow: hidden;
            }

            .card-property-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: var(--listing-border-radius) var(--listing-border-radius) 0 0;
            }

            .card-detail-container {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-left: var(--listing-spacing-md) !important;
                padding-right: var(--listing-spacing-md) !important;
                width: 100% !important;
                margin: 0 !important;
                box-sizing: border-box;
            }

            .card-title-container {
                margin-bottom: 0;
            }

            .card-title {
                font-size: var(--listing-font-size-lg);
                font-weight: 500;
                color: var(--listing-text-primary);
                margin: 0;
                padding: 0;
                line-height: 1.4;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .card-price-tag {
                font-size: var(--listing-font-size-xl);
                font-weight: 600;
                color: var(--listing-button-primary);
                margin-bottom: var(--listing-spacing-sm);
                display: block;
            }

            .card-extra-info {
                display: flex;
                flex-wrap: wrap;
                gap: var(--listing-spacing-sm);
                margin-bottom: var(--listing-spacing-md);
                min-height: auto !important;

                .item {
                    align-items: center;
                    gap: 4px;
                    color: var(--listing-text-light);
                    font-size: var(--listing-font-size-base);

                    .icon-image {
                        width: 16px;
                        height: 16px;
                        opacity: 0.6;
                    }
                }
            }

            .contact-option.whatsapp.card-listing {
                width: 100% !important;
                margin: 0 !important;
                padding: var(--listing-spacing-sm);
                background: var(--brand-color-primary-acf);
                color: white;
                border: none;
                border-radius: var(--listing-border-radius);
                font-size: var(--listing-font-size-base);
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: var(--listing-spacing-xs);
                cursor: pointer;
                transition: var(--listing-transition);
                text-decoration: none;
                box-sizing: border-box;
            }
        }
    }

    /* Mobile Responsive */
    @media (max-width: 480px) {
        .swiper-slide.listing-swiper-slide {
            width: 100% !important;
            margin-right: 0 !important;

            .card-project-container {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
            }
        }
    }
}

/* Responsive Design */

@media (min-width: 481px) {
    .listing-slide-title-top .property-cards-container .property-swiper.listing-swiper-container .swiper-wrapper.listing-swiper-wrapper.property-cards-grid {
        padding-right: var(--listing-spacing-lg);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .listing-slide-title-top {
        padding: var(--listing-spacing-xl) 0;

        .listing-header {
            margin-bottom: var(--listing-spacing-lg);

            .header-content {
                flex-direction: row;
                gap: var(--listing-spacing-md);
            }

            .header-text {
                .section-title {
                    font-size: var(--listing-font-size-3xl) !important;
                    line-height: 32px !important;
                }
            }

            .carousel-nav {
                display: flex !important;
            }
        }

        .listing-controls {
            margin-bottom: var(--listing-spacing-lg);

            .filter-container {
                max-width: 100%;
                overflow: hidden;
            }

            .filter-container .filter-buttons {
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: var(--listing-spacing-xs);
                gap: var(--listing-spacing-xs);
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
                max-width: 100%;
                flex-wrap: nowrap;

                &::-webkit-scrollbar {
                    display: none;
                }
            }
        }

        .property-cards-container {
            .property-swiper.listing-swiper-container {
                overflow: hidden;
                
                .swiper-wrapper.listing-swiper-wrapper {
                    flex-direction: row;

                    .swiper-slide.listing-swiper-slide {
                        width: var(--listing-card-width) !important;
                        margin-right: var(--listing-spacing-lg) !important;

                        .card-project-container {
                            min-width: var(--listing-card-width);
                            max-width: var(--listing-card-width);
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}

/* Mobile - Stack layout */
@media (max-width: 480px) {
    .listing-slide-title-top {
        padding: var(--listing-spacing-xl) 0;

        .listing-header {
            margin-bottom: var(--listing-spacing-lg);

            .header-content {
                flex-direction: column;
                gap: var(--listing-spacing-md);
            }

            .header-text {
                .section-title {
                    font-size: var(--listing-font-size-3xl) !important;
                    line-height: 32px !important;
                }
            }

            .carousel-nav {
                display: none !important;
            }
        }

        .listing-controls {
            flex-direction: column;
            align-items: stretch;
            margin-bottom: var(--listing-spacing-lg);

            .filter-container {
                max-width: 100%;
                overflow: hidden;
            }

            .filter-container .filter-buttons {
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                padding-bottom: var(--listing-spacing-xs);
                gap: var(--listing-spacing-xs);
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                -ms-overflow-style: none;
                max-width: 100%;
                flex-wrap: nowrap;

                &::-webkit-scrollbar {
                    display: none;
                }
            }

            .carousel-nav {
                justify-content: center;
                display: none;
            }
        }

        .property-cards-container {
            width: auto !important;
            margin-right: auto !important;
            
            .property-swiper.listing-swiper-container {
                /* Disable swiper on mobile */
                overflow: visible;
                /* Disable Swiper touch/swipe on mobile */
                touch-action: pan-y !important;
                
                .swiper-wrapper.listing-swiper-wrapper {
                    flex-direction: column;
                    gap: var(--listing-spacing-md);
                    transform: none !important;
                    /* Disable Swiper transitions on mobile */
                    transition: none !important;

                    .swiper-slide.listing-swiper-slide {
                        width: 100% !important;
                        margin-right: 0 !important;
                        transform: none !important;
                        /* Disable Swiper slide transitions on mobile */
                        transition: none !important;

                        .card-project-container {
                            min-width: 100%;
                            max-width: 100%;
                            margin-bottom: var(--listing-spacing-sm);
                        }
                    }
                }
            }
        }

        .more-details-container {
            padding-top: 1rem;
        }
    }
}

/* Component-specific Overrides */
.listing-slide-title-top .swiper-slide.listing-swiper-slide {
    width: auto !important;
}

.listing-slide-title-top .card-project-container .card-extra-info .item {
    width: auto !important;
}

@media (min-width: 481px) and (max-width: 1024px) {
    .listing-slide-title-top .more-details-container {
        padding-top: 1.5rem;
    }
}