/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Marquee 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-marquee {
	margin-bottom: 5px;
	padding-top: var(--widget-padding-top);
	overflow: hidden;
}

.core-marquee .slide .img-cont::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	backdrop-filter: blur(0px);
	transition: backdrop-filter 400ms ease-in-out;
	pointer-events: none;
}

.core-marquee .slide .slide-title {
	margin: 0;
	font-size: var(--text-xl);
	font-weight: 700;
}

.core-marquee[data-layout="horizontal"] .slide:not(:nth-child(1)) .slide-title {
	font-size: var(--text-lg);
}

.core-marquee .slide p {
	margin-bottom: var(--space-4);
	font-size: var(--text-base);
	font-weight: 400;
	line-height: var(--leading-tight);
}

/* Fullwidth Variant */
.core-marquee.marquee-fullwidth .slides {
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
}

.core-marquee.marquee-fullwidth .slide .content-section {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.core-marquee.marquee-fullwidth .slide .default-button {
	min-width: 131px;
	width: 131px;
	font-size: 13px;
	padding: 8px;
	text-align: center;
}

.core-marquee.marquee-fullwidth .slide .default-button:after {
	display: none;
}

.core-marquee.marquee-fullwidth .slides .slide-1:before,
.core-marquee.marquee-fullwidth .slides .slide-2:before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 6px;
	background-image: url('/includes/public/assets/shared/mosaic-top-texture.svg');
	background-size: auto 6px;
	z-index: 2;
	pointer-events: none;
}

.core-marquee.marquee-fullwidth .slide img {
	transform: scale(1);
	transition: transform 400ms ease-in-out;
}

@media (hover: hover) {
	.core-marquee.marquee-fullwidth  .slide:hover .img-cont img {
		transform: scale(1);
	}

	.core-marquee.marquee-fullwidth .slide:hover .img-cont.has-link img {
		transform: scale(1.1);
	}

	.core-marquee.marquee-fullwidth .slide:hover .img-cont.has-link::after {
		backdrop-filter: blur(10px);
	}
}

@media(min-width:40em) {
	.core-marquee.marquee-fullwidth .slides {
		grid-template: 
		'slide-1 slide-1 slide-2 slide-3' auto
		'slide-1 slide-1 slide-6 slide-6' auto
		'slide-4 slide-5 slide-6 slide-6' auto;
		gap: 6px;

	}

	.core-marquee.marquee-fullwidth .slides .slide-1 {
		grid-area: slide-1;
	}

	.core-marquee.marquee-fullwidth .slides .slide-2 {
		grid-area: slide-2;
	}

	.core-marquee.marquee-fullwidth .slides .slide-3 {
		grid-area: slide-3;
	}

	.core-marquee.marquee-fullwidth .slides .slide-4 {
		grid-area: slide-4;
	}

	.core-marquee.marquee-fullwidth .slides .slide-5 {
		grid-area: slide-5;
	}

	.core-marquee.marquee-fullwidth .slides .slide-6 {
		grid-area: slide-6;
	}

	.core-marquee.marquee-fullwidth .slides .slide-1:before,
    .core-marquee.marquee-fullwidth .slides .slide-2:before,
	.core-marquee.marquee-fullwidth .slides .slide-3:before {
	    content: '';
	    position: absolute;
	    top: -1px;
	    left: 0;
	    width: 100%;
	    height: 11px;
	    background-image: url('/includes/public/assets/shared/mosaic-top-texture.svg');
	    background-size: auto 11px;
	    z-index: 2;
	    pointer-events: none;
    }

	.core-marquee.marquee-fullwidth .slides .slide-4:after,
	.core-marquee.marquee-fullwidth .slides .slide-5:after,
	.core-marquee.marquee-fullwidth .slides .slide-6:after {
        content: '';
		position: absolute;
		bottom: -1px;
		width: 100%;
		height: 11px;
		background-image: url('/includes/public/assets/shared/mosaic-bottom-texture.svg');
		background-size: auto 11px;
		z-index: 2;
		pointer-events: none;
	}
}

@media(min-width:64em) {
	.core-marquee {
		margin-bottom: 10px;
	}

}

@media(min-width:80em) {
	.core-marquee.marquee-fullwidth .slide .default-button {
		font-size: 30px;
		max-width: 291px;
		width: 291px;
		padding: 10px 8px;
	}
}