/*==============================*/
/*=====----- TEMPLATE -----=====*/
/*==============================*/

.core-v2-preview-slider-with-header .widget-inner {
    --side-padding: var(--space-5);
    --widget-title-size: var(--text-3xl);
    --slide-title-size: var(--text-xl);
    
    position: relative;
    overflow: hidden;
}

.core-v2-preview-slider-with-header .widget-header {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    max-width: none;
    margin: 0 0 var(--space-6);
    padding: 0 var(--side-padding) 0 0;
}

.core-v2-preview-slider-with-header .widget-title {
    font-size: var(--widget-title-size);
}

.core-v2-preview-slider-with-header .slider-cont {
    width: calc(100% - var(--side-padding));
    margin-left: auto;
}

.core-v2-preview-slider-with-header .arrows,
.core-v2-preview-slider-with-header .glide__arrows {
    gap: var(--space-6);
}

.core-v2-preview-slider-with-header .glide__arrow {
    margin: 0;
}

/*=====----- HEADER ON RIGHT -----=====*/

.core-v2-preview-slider-with-header.header-on-right .slider-cont {
    margin-right: auto;
    margin-left: 0;
}

.core-v2-preview-slider-with-header.header-on-right .widget-header {
    padding: 0 0 0 var(--side-padding);
}

/*=====----- ARROWS IN HEADER -----=====*/

.core-v2-preview-slider-with-header .widget-header.with-arrows .title-col {
    padding-bottom: 0;
    border-bottom: none;
}

.core-v2-preview-slider-with-header .arrows {
    display: flex;
    align-items: center;
    width: calc(100% - var(--space-10));
    padding-bottom: var(--space-6);
    margin: 0 auto;
	border-bottom: 2px solid var(--sw-collections-widget-header-border-color);
}

/*=====----- ARROWS IN SLIDER -----=====*/

.core-v2-preview-slider-with-header .glide__arrows {
    position: absolute;
    left: calc(var(--space-5) * -1);
    right: 0;
    z-index: 2;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 36px 0 var(--space-2);
    pointer-events: none;
}

.core-v2-preview-slider-with-header .glide__arrows .glide__arrow {
    margin: 0;
    pointer-events: all;
}

.core-v2-preview-slider-with-header .glide__track {
    position: relative;
    z-index: 1;
}

/*=====----- ARROWS IN SLIDER, HEADER ON RIGHT -----=====*/

.core-v2-preview-slider-with-header.header-on-right .glide__arrows {
    left: 0;
    right: calc(var(--space-5) * -1);
    padding: 0 var(--space-2) 0 36px;
}

/*============================*/
/*=====----- SLIDES -----=====*/
/*============================*/

.core-v2-preview-slider-with-header .slide {
    position: relative;
    overflow: hidden;
    color: var(--sw-collections-text-color-light);
}

.core-v2-preview-slider-with-header .img-cont {
    position: relative;
}

.core-v2-preview-slider-with-header .img-cont::before {
    top: 50%;
    display: block;
    background: linear-gradient(to top, rgba(0,0,0,.4), rgba(0,0,0,0));
}

.core-v2-preview-slider-with-header .slide-img {
    position: relative;
    z-index: 1;
}

.core-v2-preview-slider-with-header .content-section {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: var(--width-compact);
    padding: var(--space-4);
    text-shadow: 0 0 16px rgba(0,0,0,.6);
    pointer-events: none;
}

.core-v2-preview-slider-with-header .content-section a {
    pointer-events: all;
}

.core-v2-preview-slider-with-header .info-flag,
.core-v2-preview-slider-with-header .sponsored {
    color: var(--sw-collections-minor-text-alt-color);
}

.core-v2-preview-slider-with-header .slide-title {
    font-family: var(--font-display);
    font-size: var(--slide-title-size);
    line-height: 1.2;
    color: var(--sw-collections-slide-title-color);
}

.core-v2-preview-slider-with-header .info-item a {
    text-decoration: underline;
    font-size: inherit;
    color: inherit;
}

.core-v2-preview-slider-with-header .slide-footer {
    .read-more,
    button {
        color: var(--sw-collections-slide-title-color);
    }
    
}

.core-v2-preview-slider-with-header .shared-play-button {
    top: var(--space-4);
    right: var(--space-4);
    left: auto;
    transform: none;
    width: var(--space-10);
    height: var(--space-10);
    font-size: var(--text-base);
}

.core-v2-preview-slider-with-header .credits {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
}

/*===================================*/
/*=====----- MEDIA QUERIES -----=====*/
/*===================================*/

@container (min-width: 48em) {
    .core-v2-preview-slider-with-header .widget-inner {
        --widget-title-size: var(--text-2xl);
        --slide-title-size: var(--text-sm);

        display: grid;
        grid-template: auto / minmax(0, 2fr) minmax(0, 5fr);
        gap: var(--space-6);
        padding-left: var(--side-padding);
    }

    .core-v2-preview-slider-with-header .widget-header {
        display: grid;
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
    }

    .core-v2-preview-slider-with-header .title-col,
    .core-v2-preview-slider-with-header .view-all-col {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    
    .core-v2-preview-slider-with-header .title-col {
        padding-bottom: 0;
        border-bottom: none;
    }

    .core-v2-preview-slider-with-header .view-all-col {
        display: block;
    }

    .core-v2-preview-slider-with-header .slider-cont {
        width: 100%;
        margin: 0;
    }

    .core-v2-preview-slider-with-header .img-cont::before {
        inset: 0;
    }
    
    .core-v2-preview-slider-with-header .content-section {
        padding: var(--space-3);
    }

    .core-v2-preview-slider-with-header .details {
        --sw-collections-details-text-color: var(--sw-collections-slide-title-color);

        font-size: var(--text-xs);

        .info-item .icon {
            filter: unset !important;
        }
    }

    .core-v2-preview-slider-with-header .mini-date-section {
        --month-size: var(--text-xs);
        --day-size: var(--text-xl);
    }
    
    /*----- header on right -----*/

    .core-v2-preview-slider-with-header.header-on-right .widget-inner {
        grid-template: auto / minmax(0, 5fr) minmax(0, 2fr);
        padding: 0 var(--side-padding) 0 0;
    }

    .core-v2-preview-slider-with-header.header-on-right .widget-header {
        order: 1;
        padding: 0;
    }

    /*----- arrows in header -----*/

    .core-v2-preview-slider-with-header .arrows {
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
    }

    /*----- arrows in slider -----*/

    .core-v2-preview-slider-with-header .glide__arrows {
        left: calc(var(--space-10) * -1);
        padding-right: var(--space-12);
    }

    /*----- header on right, arrows in slider -----*/

    .core-v2-preview-slider-with-header.header-on-right .glide__arrows {
        right: calc(var(--space-10) * -1);
        padding-left: var(--space-12);
    }
}

@container (min-width: 64em) {
    .core-v2-preview-slider-with-header .widget-inner {
        --side-padding: 30px;
        --widget-title-size: var(--text-4xl);
        --slide-title-size: var(--text-base);

        grid-template: auto / minmax(0, 1fr) minmax(0, 3fr);
        gap: var(--space-10);
    }

    .core-v2-preview-slider-with-header .slide .content-section {
        padding: var(--space-4);
    }

    .core-v2-preview-slider-with-header .mini-date-section {
        --month-size: var(--text-sm);
        --day-size: var(--text-2xl);
    }

    /*----- header on right -----*/

    .core-v2-preview-slider-with-header.header-on-right .widget-inner {
        grid-template: auto / minmax(0, 3fr) minmax(0, 1fr);
    }

    /*----- arrows in slider -----*/

    .core-v2-preview-slider-with-header .glide__arrows {
        left: calc(var(--space-5) * -1);
        padding: 0 108px 0 0;
    }

    /*----- arrows in slider, header on right -----*/

    .core-v2-preview-slider-with-header.header-on-right .glide__arrows {
        right: calc(var(--space-5) * -1);
        padding: 0 0 0 108px;
    }
}

@container (min-width: 90em) {
    .core-v2-preview-slider-with-header .widget-inner {
        --widget-title-size: var(--text-5xl);
        --slide-title-size: var(--text-xl);

        grid-template: auto / var(--width-compact) minmax(0, 1fr);
    }

    .core-v2-preview-slider-with-header .shared-play-button {
        width: var(--space-16);
	    height: var(--space-16);
        font-size: var(--text-2xl);
    }

    .core-v2-preview-slider-with-header .content-section {
        padding: var(--space-5) var(--space-6);
    }

    .core-v2-preview-slider-with-header .details {
        font-size: var(--text-sm);
    }

    .core-v2-preview-slider-with-header .mini-date-section {
        --month-size: var(--text-base);
        --day-size: var(--text-3xl);
    }
    
    /*----- header on right -----*/

    .core-v2-preview-slider-with-header.header-on-right .widget-inner {
        grid-template: auto / minmax(0, 1fr) var(--width-compact);
    }
}

@container (min-width: 120em) {
    .core-v2-preview-slider-with-header .widget-inner {
        --slide-title-size: var(--text-2xl);
    }
}

/*===================================*/
/*=====-------- 3 Across -------=====*/
/*===================================*/

.preview-slider-with-header-v2-3-across {

    --sw-collections-bg-title-color: var(--black);
    
    background: var(--sw-collections-bg-color);
    color: var(--sw-collections-text-color-light);
    margin-bottom: 0;

    .widget-inner {
        padding-block: 25px;

        .slide {
            transition: var(--transition-appendix);
        }
    }

    .widget-title {
        font-size: clamp(1.8125rem, -0.375rem + 5.47vw, 3.125rem);
        color: var(--sw-collections-bg-title-color);
    }

    .widget-desc {
        font-size: clamp(var(--text-base), 0.792rem + 0.52vw, var(--text-lg));
        color: var(--sw-collections-desc-color);
    }

    .inner {
        background: var(--white);
    }
}

.preview-slider-with-header-v2-3-across .content-section {
    position: relative;
    color: var(--sw-collections-text-color);
    text-shadow: none;
    flex-grow: 1;
    padding: var(--space-4) var(--space-4) var(--space-5);

    .details {
        order: -1;
        font-size: var(--text-base);
        font-weight: 300;
    }

    .slide-title {
        font-size: clamp(var(--text-lg), 0.500rem + 1.56vw, var(--text-2xl));
        font-family: var(--font-body);
        font-weight: 700;
        position: relative;
        padding-bottom: var(--space-4);

        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 6px;
            width: 65px;
        }
    }

    .slide-desc {
        line-height: 1.625;
        color: var(--sw-collections-slide-title-color);
    }
}

.preview-slider-with-header-v2-3-across .slide:nth-child(4n+1) .content-section .slide-title::before {
    background: var(--red);
}

.preview-slider-with-header-v2-3-across .slide:nth-child(4n+2) .content-section .slide-title::before {
    background: var(--dark-green);
}

.preview-slider-with-header-v2-3-across .slide:nth-child(4n+3) .content-section .slide-title::before {
    background: var(--dark-gold);
}

.preview-slider-with-header-v2-3-across .slide:nth-child(4n+4) .content-section .slide-title::before {
    background: var(--dark-blue);
}

@media (width <= 40em) {
    /* 2nd and 3rd slides off screen will be faded out */
    .preview-slider-with-header-v2-3-across .glide__slide--active + .slide,
    .preview-slider-with-header-v2-3-across .glide__slide--active + .slide + .slide,
    .preview-slider-v2-3-across-fullwidth .glide__slide--active + .slide,
    .preview-slider-v2-3-across-fullwidth .glide__slide--active + .slide + .slide {
        opacity: 0.35;
    }
}

@media (40em <= width <= 64em ) {
    /* 3rd and 4th slides off screen will be faded out */
    .preview-slider-with-header-v2-3-across .glide__slide--active + .slide + .slide,
    .preview-slider-with-header-v2-3-across .glide__slide--active + .slide + .slide + .slide,
    .preview-slider-v2-3-across-fullwidth .glide__slide--active + .slide + .slide,
    .preview-slider-v2-3-across-fullwidth .glide__slide--active + .slide + .slide + .slide {
        opacity: 0.35;
    }
}

@media (width >= 64em) {
    .preview-slider-with-header-v2-3-across {
        padding-left: calc((100vw - var(--width-base)) / 2);

        .widget-inner {
            grid-template: auto / 2fr 1fr;
            padding-block: 50px;

            .arrows {
                grid-row: 1;
                grid-column: 2;
                padding-right: calc((100vw - var(--width-base)) / 2);
            }
    
            .slider-cont {
                grid-row: 2;
                grid-column: 1 / span 2;
            }

            .view-all-col {
                grid-column: 2;
                display: flex;
                justify-content: flex-end;
                padding-right: calc((100vw - var(--width-base)) / 2);

                & a:hover {
                    box-shadow: inset 0 0 0 2px var(--sw-collections-view-all-border-hover);
                }
            }
        }

        .slide .content-section {
            padding: var(--space-8) 28px var(--space-5);

            .content-upper .details li:last-of-type,
            .content-upper .slide-header {
                margin: 0 0 var(--space-5);

                .slide-title {
                    padding-bottom: calc(var(--space-5) + 3px);
                }
            }
        }
    }

    .preview-slider-with-header-v2-3-across .glide__slide--active + .slide + .slide + .slide,
    .preview-slider-with-header-v2-3-across .glide__slide--active + .slide + .slide + .slide + .slide,
    .preview-slider-v2-3-across-fullwidth .glide__slide--active + .slide + .slide + .slide,
    .preview-slider-v2-3-across-fullwidth .glide__slide--active + .slide + .slide + .slide + .slide {
        opacity: 0.35;
    }
}

@media (hover: hover) {
    .preview-slider-with-header-v2-3-across .arrows .glide__arrow:hover  {
        background: var(--sw-collections-view-all-bg-hover);
        color: var(--sw-collections-view-all-color-hover);
        border: 2px solid var(--sw-collections-arrow-box-shadow);
        box-shadow: inset 0 0 0 2px var(--sw-collections-arrow-box-shadow);
    }
}