/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Mosaic 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-mosaic  {
	--text-color: var(--white);
	--bg-color: var(--sw-container-bg, var(--primary-color-100));

	padding-top: var(--widget-padding-top);
	max-width: 1166px;
	margin: 0 auto var(--space-8);
}

.core-mosaic .mosaic-tiles-wrapper {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0;
	gap: 2px;
}

.core-mosaic .mosaic-tile {
	height: 100%;
}

.core-mosaic .mosaic-tile .mosaic-tile-inner {
	padding-bottom: 0;
	height: 100%;
}

.core-mosaic .img-cont a:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 40%;
	background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
	pointer-events: none;
	z-index: 1;
	transition: opacity var(--transition-appendix);
}

.core-mosaic .img-cont a::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(230, 115, 0, .7);
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity var(--transition-appendix);
}

.core-mosaic .mosaic-tile img {
	transition: transform var(--transition-appendix);
}

.core-mosaic .mosaic-tile .mosaic-tile-inner .tile-info-wrapper {
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 3;
	min-width: 100px;
	max-width: max(220px, 80%);
	padding: 6px 12px;
	pointer-events: none;
}

.core-mosaic .mosaic-tile .tile-title {
	color: var(--text-color);
	font-family: var(--font-body);
	font-size: calc(18rem/16);
	line-height: calc(43/36);
	font-weight: 700;
}

.core-mosaic .shared-play-button {
	top: 8px;
	right: 8px;
	z-index: 2;
}

@media (hover: hover) {
	.core-mosaic .mosaic-tile:hover .img-cont a::after  {
		opacity: 0;
	}
	
	.core-mosaic .mosaic-tile:hover .img-cont a::before {
		opacity: 1;
	}

	.core-mosaic .mosaic-tile:hover img {
		transform: scale(1.1);
	}
}

@media (hover: hover) and (min-width: 40em) {
	.core-mosaic .mosaic-tile:hover img {
		transform: translate(-50%, -50%) scale(1.1);
	}
}

@media (min-width: 40em) {	
	.core-mosaic .mosaic-tiles-wrapper {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.core-mosaic .mosaic-tile:nth-child(1), .core-mosaic .mosaic-tile:nth-child(4) {
		grid-column: span 1;
		grid-row: span 1;
	}
}

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

	.core-mosaic .mosaic-tile .tile-title {
		font-size: calc(36rem/16);
	}

	.core-mosaic .mosaic-tiles-wrapper {
		grid-template-columns: repeat(10, minmax(0, 1fr));
		gap: 15px;
	}

	.core-mosaic .mosaic-tile:nth-child(1), .core-mosaic .mosaic-tile:nth-child(6) {
		grid-column: span 4;
		grid-row: span 1;
	}

	.core-mosaic .mosaic-tile:nth-child(3),
	.core-mosaic .mosaic-tile:nth-child(4),
	.core-mosaic .mosaic-tile {
		grid-column: span 3;
		grid-row: span 1;
	}

	.core-mosaic .mosaic-tile .mosaic-tile-inner .tile-info-wrapper {
		padding: 12px 20px;
	}

	.core-mosaic .shared-play-button {
		top: 12px;
		right: 12px;
		left: unset;
		transform: unset;
	}
}