/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Slider 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.
*/

/* Kit2 Styling */
.kit2 .core-slider .widget-header {
    --text-color: #161314;
}

.kit2 .core-slider .widget-header-inner {
    padding: 0;
    border: none;
}

.kit2 .core-slider .widget-header-inner .widget-title {
    font-size: var(--text-4xl);
    line-height: 2.3rem;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.7px;
}

.kit2 .core-slider .widget-header-inner .widget-view-all {
    display: none;
}

.kit2 .core-slider .img-cont::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
	pointer-events: none;
}

.kit2 .core-slider .slide > .inner {
    padding: 0 0 45px;
}

.kit2 .core-slider .slide .slide-title {
	color: var(--font-color);
	transition: all .3s;
	font-family: var(--font-body);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.6rem;
    letter-spacing: 0.46px;
    text-align: center;
    max-width: 80%;
}

.kit2 .core-slider .slide p {
	color: var(--font-color);
	transition: all .3s;
	font-size: var(--text-lg);
    letter-spacing: 0.4px;
    font-weight: normal;
    text-align: left;
}

.kit2 .core-slider .slide .description.hideDescription {
    display: none;
}

.kit2 .core-slider .slide {
	transition: all .3s;
}

/* Default colour theme uses primary colour */
.kit2 .core-slider .slide:hover {
	background-color: var(--secondary-color);
	transition: all .3s;
}

.kit2 .core-slider .slide a.read-more:not(p *) {
    transition: var(--transition-appendix);
}

.kit2 .core-slider .slide a.read-more:not(p *):hover {
    text-decoration: underline;
}

.kit2 .core-slider .slide:hover a.read-more:not(p *) {
    background: var(--secondary-color);
    color: var(--black);
}

/* Adding additional class 'theme-secondary' that will update widget background colour to the secondary color on hover */
.kit2 .core-slider.theme-secondary .slide:hover {
	background-color: var(--primary-color);
	transition: all .3s;
}

.kit2 .core-slider .slide:hover .slide-title,
.kit2 .core-slider .slide:hover p {
	color: var(--text-color);
	transition: all .3s;
}

.kit2 .core-slider .slide .slide-title a {
    display: flex;
    width: 100%;
    text-align: left;
    font-weight: 500;
}

.kit2 .core-slider .slide .slide-title > a:hover {
    color: var(--text-color);
}

.kit2 .core-slider .glide__arrows {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    left: 0;
    right: 0;
    top: auto !important;
    bottom: 0;
    gap: var(--space-5);
    transform: translateY(0);
}

.kit2 .core-slider .glide__arrows .glide__arrow {
    height: 50px;
    width: 50px;
    border-radius: 5px;
}

/* Default colour theme uses primary colour */
.kit2 .core-slider .glide__arrows .glide__arrow:hover {
    background-color: var(--secondary-color);
}

/* Adding additional class 'theme-secondary' that will update arrow background colour to the secondary color on hover*/
.kit2 .core-slider.theme-secondary .glide__arrows .glide__arrow:hover {
    background-color: var(--primary-color);
}

/* .kit2 .core-slider .glide__arrows .glide__arrow:hover .fa-angle-right::before {
    background: url(/includes/client_public/assets/shared/arrows/arrow_right_white.svg) no-repeat center center;
}

.kit2 .core-slider .glide__arrows .glide__arrow:hover .fa-angle-left::before {
    background: url(/includes/client_public/assets/shared/arrows/arrow_left_white.svg) no-repeat center center;
} */

.kit2 .core-slider .slide.overlap-image-desktop .content-section {
    position: relative;
    padding: var(--space-5);
    background: var(--white);
    width: auto;
}

.kit2 .core-slider .slide.overlap-image-desktop .content-section .description.hideDescription{
    display: none;
}

.kit2 .core-slider .slide.overlap-image-desktop .content-section .slide-title {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--text-color);
    font-weight: 400;
    letter-spacing: 0.36px;
    max-width: 100%;;
}

.kit2 .core-slider .slide.overlap-image-desktop p {
    color: var(--text-color);
    font-size: var(--text-base);
    font-weight: normal;
}

.kit2 .core-slider .slide.overlap-image-desktop .content-section .title-desc-container .read-more {
    display: none !important;
}

.kit2 .core-slider .slide.overlap-image-desktop .content-section .slide-footer {
    margin: 0;
}

.kit2 .core-slider .slide.overlap-image-desktop .content-section .slide-footer .read-more {
    background: var(--primary-color);
    color: var(--white);
    font-weight: normal;
    margin: 0;
    padding: 10px 15px;
    border-radius: 5px;
}

.kit2 .core-slider .mini-date-section {
    left: unset;
    right: 0;
}

/* Kit2 Tablet */
@media (min-width: 40em) {
    .kit2 .core-slider .widget-header-inner .widget-title {
        font-size: var(--text-5xl);
        line-height: 2.75rem;
    }

    .kit2 .core-slider .slide > .inner {
        padding: 0;
    }

    .kit2 .core-slider .glide__arrows {
        display: flex;
        justify-content: flex-end;
        gap: var(--space-5);
        transform: translateY(-50%);
    }

    .kit2 .core-slider .glide__arrows .glide__arrow {
        height: 60px;
        width: 60px;
    }

    .kit2 .core-slider .glide__arrows {
        top: -50px !important;
        display: flex;
        justify-content: flex-end;
        gap: var(--space-5);
    }

    .kit2 .core-slider .glide__arrows .glide__arrow {
        height: 60px;
        width: 60px;
    }

	.kit2 .core-slider .slide.overlap-image-desktop .content-section {
        padding: var(--space-4);
        position: static;
        margin: 0;
    }
}

/* Kit2 Desktop */
@media (min-width: 64em) {
	.kit2 .core-slider .slide.overlap-image-desktop .content-section {
		position: absolute;
		z-index: 2;
		left: 0;
		bottom: 0;
		padding: var(--space-4) var(--space-16);
		width: 100%;
		max-width: var(--width-comfortable);
	}

    .kit2 .core-slider .slide:hover .inner .content-section .details li a {
        color: var(--black);
    }

    .kit2 .core-slider .inner .content-section .details li a:hover span {
        text-decoration: underline;
    }
}