/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Header Slideshow family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/

.core-hero-slideshow {
	--text-container-width: var(--width-comfortable);
	--letter-spacing: var(--tracking-wide);
	--title-text-size: 1.5625rem;
	--btn-text-size: var(--text-base);
	--text-size: var(--text-sm);

	position: relative;
    margin-bottom: 24px;
}

.core-hero-slideshow::after {
    content: '';
    background-image: url(/includes/public/assets/shared/decorations/line-dots-brown.svg);
    background-repeat: repeat-x;
    background-size: auto;
    display: block;
    height: 5px;
    width: 100%;
    z-index: 3;
    position: absolute;
    bottom: -10px;
}

.core-hero-slideshow .slide .img-cont::after {
	content: "";
    background: transparent linear-gradient(180deg, #00000000 0%, #000000A5 100%) 0%;
	top: 0;
	left: 0;
	position: absolute;
	pointer-events: none;
	height: 100%;
	width: 100%;
}

.core-hero-slideshow .content-section {
    gap: 6px;
    padding: 18px 22px 12px 18px;
    bottom: 62px;
}

.core-hero-slideshow .slide-title {
    margin-bottom: 0;
    width: 100%;
	line-height: 1;
    font-size: 20px;
}

.core-hero-slideshow .slide .slide-title {
    font-weight: 100;
}

.core-hero-slideshow .slide p {
	color: var(--text-color);
	font-size: var(--text-size);
	font-weight: normal;
	line-height: 1.7;
}

.core-hero-slideshow .description {
    margin-bottom: 0;
    padding-bottom: 0;
}

.core-hero-slideshow .slide .slide-footer .read-more {
    margin-left: 18px;
    padding: 6.5px var(--space-5);
    outline: var(--white) solid 1px;
    outline-offset: -5px;
    text-decoration: none;
    background-color: var(--sw-button-secondary-bg);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    font-style: italic;
    line-height: 25px;
    color: var(--gray-900);
}

.core-hero-slideshow .slide a.read-more:not(p *)::after,
.core-hero-slideshow .slide .slide-footer a::after {
    display: none;
}

.core-hero-slideshow .slide .slide-footer {
    bottom: 24px;
}

.core-hero-slideshow .arrows-cont .glide__arrows {
    display: flex;
    justify-content: space-between;
    gap: unset;
    top: 25%;
    width: 100%;
    padding: 0 12px;
}

.core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow {
    background: transparent;
    box-shadow: unset;
    border-radius: unset;
}

.core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow::after {
    content: '';
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    width: 40px;
}

.core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow--left::after {
    background-image: url(/includes/public/assets/shared/decorations/white-arrow-left.svg);
}

.core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow--right::after {
    background-image: url(/includes/public/assets/shared/decorations/white-arrow-right.svg);
}

.core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow i {
    display: none;
}

@media (hover: hover) {
    .core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow--left:hover::after {
        background-image: url(/includes/public/assets/shared/decorations/arrow-left-white-hover.svg);
    }
    .core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow--right:hover::after {
        background-image: url(/includes/public/assets/shared/decorations/arrow-right-white-hover.svg);
    }

    .core-hero-slideshow .slide a.read-more:not(p *):hover,
    .core-hero-slideshow .slide .slide-footer a:hover {
        transition: initial;
        font-size: 1.125rem;
        font-size: 0.875rem;
        background-color: var(--sw-button-secondary-color);
        color: var(--sw-body-bg);
    }
}

@media screen and (min-width: 375px) {
    .core-hero-slideshow .slide-title {
        font-size: var(--title-text-size);
    }

    .core-hero-slideshow .arrows-cont .glide__arrows {
        top: 41%;
    }
}

@media screen and (min-width: 40em) {
    .core-hero-slideshow .content-section {
        width: 565px;
        max-width: 565px;
    }

    .core-hero-slideshow .slide .slide-footer .read-more {
        margin-left: 38px;
    }

    .core-hero-slideshow .arrows-cont .glide__arrows {
        top: 34%;
        left: 0;
        padding: 0 28px;
    }

    .core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow,
    .core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow::after {
        height: 45px;
        width: 54px;
    }
}

@media screen and (min-width: 64em) {
    .core-hero-slideshow::after {
        bottom: -22px;
    }

    .core-hero-slideshow .content-section {
        gap: 0;
        left: 58px;
        bottom: 124px;
        padding: 0;
        width: 668px;
        max-width: 668px;
    }

    .core-hero-slideshow .slide .slide-title {
        margin-bottom: 14px;
        font-size: 2.5rem;
    }

    .core-hero-slideshow .slide p {
        font-size: 1.125rem;
        line-height: 1.5;
    }

    .core-hero-slideshow .slide .slide-footer .read-more {
        padding: 10px var(--space-5);
        margin-left: 58px;
        margin-bottom: 32px;
        font-size: 1.125rem;
    }

    @media (hover: hover) {
        .core-hero-slideshow .slide a.read-more:not(p *):hover,
        .core-hero-slideshow .slide .slide-footer a:hover {
            font-size: 1.125rem;
        }
    }

    .core-hero-slideshow .arrows-cont .glide__arrows {
        top: 34%;
        padding: 0 48px;
        left: 0;
    }

    .core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow,
    .core-hero-slideshow .arrows-cont .glide__arrows .glide__arrow::after {
        height: 65px;
        width: 74px;
    }
}

@media screen and (min-width: 90em) {
    .core-hero-slideshow .slide .slide-title {
        font-size: 3.125rem;
    }

    .core-hero-slideshow .arrows-cont .glide__arrows {
        top: 45%;
    }
}