/*
	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(--primary-color-900);
	--bg-color: var(--primary-color-100);
	padding-top: var(--widget-padding-top);
	margin-bottom: var(--widget-margin-bottom);
}

.core-mosaic.alternate-style .widget-header-inner {
	flex-direction: column;
	align-items: flex-start;
	border: none;
}

.core-mosaic.alternate-style .widget-title {
	font-family: var(--font-allura);
	color: var(--blue-004);
	font-size: 72px;
	line-height: 1;
	font-weight: 400;
}

.core-mosaic.alternate-style .widget-view-all {
	color: white;
	background-color: var(--orange-ec);
	font-family: var(--font-futura);
	border: none;
}

.core-mosaic.alternate-style .slides {
	display: grid;
	gap: 20px;
	padding: 0 20px;
}

.core-mosaic.alternate-style .slides .slide .mini-date-section {
	right: unset;
	left: 0;
	background-color: #4DC5DA;
	color: var(--blue-004);
	font-family: var(--font-futura);
	padding: 13px 18px;
}

.core-mosaic.alternate-style .slides .slide .img-cont::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 80%);
	pointer-events: none;
}

.core-mosaic.alternate-style .slides .slide .content-section {
	padding: 30px;
}

.core-mosaic.alternate-style .slides .slide .inner:not(.promoted) .content-section {
	position: relative;
}

.core-mosaic.alternate-style .mini-date-section .date-month {
	font-weight: 600;
}

.core-mosaic.alternate-style .slides .slide .content-section .slide-title {
	font-family: var(--font-futura);
	font-size: 20px;
	line-height: 1;
	font-weight: 700;
	color: var(--blue-007);
	margin-bottom: var(--space-3);
}

.core-mosaic.alternate-style .slides .slide .inner.promoted .content-section .slide-title {
	color: white;
}

.core-mosaic.alternate-style .slides .slide .details li {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 450;
	color: black;
}

.core-mosaic.alternate-style .slides .slide .details li a {
	color: inherit;
}

.core-mosaic.alternate-style .slides .slide .inner.promoted .details li,
.core-mosaic.alternate-style .slides .slide .inner.promoted .details li .icon {
	color: white;
}

.core-mosaic.alternate-style .slides .slide .inner:not(.promoted) .details li .icon {
	color: var(--orange-ec);
}

.core-mosaic .mosaic-tile .mosaic-tile-inner .tile-info-wrapper {
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 2;
	background-color: var(--blue-004);
	min-width: 100px;
	max-width: 220px;
	padding: 4px 12px;
	pointer-events: none;
	transition: background-color 0.25s ease;
}

.core-mosaic .mosaic-tile .tile-title {
	color: white;
	font-family: var(--font-title);
	font-size: var(--text-2xl);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.2;
}

.core-mosaic .mosaic-tile:hover .mosaic-tile-inner .mosaic-tile-link .tile-info-wrapper .tile-title {
	color: var(--blue-004);
	text-decoration: underline;
}
.core-mosaic .mosaic-tile:hover .mosaic-tile-inner .mosaic-tile-link .tile-info-wrapper {
	background-color: var(--blue-007);
}
@media (min-width: 40em) {	
	.core-mosaic .mosaic-tile .tile-title {
		font-size: var(--text-xl);
	}
}

@media (min-width: 768px) {
	.core-mosaic.alternate-style .slides {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(3, auto);
		align-items: flex-start;
		max-width: 1190px;
		margin: 0 auto;
	}

	.core-mosaic.alternate-style .slides .slide {
		height: 100%;
	}

	.core-mosaic.alternate-style .slides .slide:nth-child(1) {
		grid-column: 1 / 2;
		grid-row: 1 / 4;
	}

	.core-mosaic.alternate-style .slides .slide:nth-child(2),
	.core-mosaic.alternate-style .slides .slide:nth-child(3),
	.core-mosaic.alternate-style .slides .slide:nth-child(4) {
		grid-column: 2 / 3;
		min-height: 160px;
	}

	.core-mosaic.alternate-style .slides .slide:nth-child(2) .inner,
	.core-mosaic.alternate-style .slides .slide:nth-child(3) .inner,
	.core-mosaic.alternate-style .slides .slide:nth-child(4) .inner {
		display: flex;
	}

	.core-mosaic.alternate-style .slides .slide:nth-child(2) .inner .img-cont,
	.core-mosaic.alternate-style .slides .slide:nth-child(3) .inner .img-cont,
	.core-mosaic.alternate-style .slides .slide:nth-child(4) .inner .img-cont {
		flex: 0 0 150px;
	}

	.core-mosaic.alternate-style .slides .slide:nth-child(2) .inner .img-cont img,
	.core-mosaic.alternate-style .slides .slide:nth-child(3) .inner .img-cont img,
	.core-mosaic.alternate-style .slides .slide:nth-child(4) .inner .img-cont img {
		height: 100%;
		object-fit: cover;
	}
}

@media (min-width: 64em) {
	.core-mosaic.alternate-style .slides {
		gap: 10px;
		grid-template-rows: repeat(3, 170px);
	}

	.core-mosaic.alternate-style .widget-header {
		max-width: 1160px;
		margin-bottom: 0;
	}

	.core-mosaic.alternate-style .widget-header-inner {
		flex-direction: row;
		align-items: center;
	}

	.core-mosaic.alternate-style .slides .slide .inner {
		display: grid;
		height: 100%;
	}

	.core-mosaic.alternate-style .slides .slide .inner:not(.promoted) .content-section {
		padding: 30px 20px;
	}

	.core-mosaic.alternate-style .slides .slide .inner.promoted .content-section .slide-title {
		font-size: 28px;
	}

	.core-mosaic.alternate-style .slides .slide .details li {
		font-size: 16px;
	}

	.core-mosaic.alternate-style .widget-title {
		font-size: 100px;
	}

	.core-mosaic.alternate-style .slides .slide .inner.promoted .mini-date-section {
		width: 90px;
		height: 90px;
	}
}

@media (hover: hover) {
	.core-mosaic .mosaic-tile:hover .mosaic-tile-inner .mosaic-tile-link .tile-info-wrapper {
		background-color: var(--blue-007);
	}
	
	.core-mosaic .mosaic-tile:hover .mosaic-tile-inner .mosaic-tile-link .tile-info-wrapper .tile-title {
		color: white;
	}

	.core-mosaic.alternate-style .widget-view-all {
		transition: background-color 200ms ease-in-out;
	}

	.core-mosaic.alternate-style .widget-view-all:hover {
		background-color: var(--blue-007);
	}
}