/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Cards 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-cards {
	margin-bottom: var(--widget-margin-bottom);
	padding-top: var(--widget-padding-top);
}

.core-cards .widget-header-inner {
	border-bottom: unset;
}

.core-cards .slide a.read-more:not(p *) {
	text-transform: uppercase;
}

.core-cards .slides {
	gap: var(--space-6);
}

/* 2,3,4 CARDS ACROSS */
/* MOBILE */
.core-cards .slide .img-cont::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: -1px;
	width: 102%;
	height: 15px;
	background-image: url(/includes/public/assets/shared/imagebox/texture-bottom.svg);
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
	pointer-events: none;
}

.core-cards .slide .img-cont {
	margin-bottom: var(--space-1);
}

.core-cards .slide .content-section {
	gap: var(--space-2);
}

.core-cards .slide .content-section > .inner {
	gap: var(--space-2);
}

.core-cards .slide .slide-title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--blue);
	font-size: var(--text-2xl);
	text-align: left;
	letter-spacing: -0.48px;
	line-height: var(--leading-none);
}

.core-cards .slide .slide-title > a:hover {
	color: unset
}

.core-cards .slide p {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	line-height: var(--leading-tight);
	text-align: left;
	color: var(--charcoal);
}

.core-cards .slide a.read-more:not(p *), 
.core-cards .slide .slide-footer a {
	color: var(--charcoal);
	background-color: unset;
	border-radius: unset;
	padding: unset;
	font-weight: 700;
	line-height: var(--leading-snug);
	border-bottom: 3px solid var(--yellow);
	font-size: var(--text-sm);
	text-decoration: none;
	letter-spacing: -0.28px;
	text-align: center;
}

/* 1024px */
@media (min-width: 64em) {
	.core-cards .slide .slide-title {
		font-size: var(--text-4xl);
		letter-spacing: unset;
		padding-right: 20px;
	}

	.core-cards .slide p {
		font-size: var(--text-lg);
		letter-spacing: unset;
	}

	.core-cards .slide a.read-more:not(p *), 
	.core-cards .slide .slide-footer a {
		line-height: var(--leading-none);
		font-size: var(--text-lg);
		font-weight: 800;
		letter-spacing: -0.36px;
		border-bottom: unset;
	}

	.core-cards:not(.cards-2-across) .slide img {
		transition: transform ease 400ms;
	}

	.core-cards:not(.cards-2-across) .slide:hover img {
		transform: scale(1.2);
	}

	.core-cards:not(.cards-2-across) .slide .slide-title a,
	.core-cards:not(.cards-2-across) .slide .content-section .read-more  {
		text-decoration: underline;
		text-decoration-color: rgba(79, 58, 17, 0.01);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
		transition: text-decoration-color ease-out 300ms;
	}

	.core-cards:not(.cards-2-across) .slide:hover .slide-title a,
	.core-cards:not(.cards-2-across) .slide:hover .content-section .read-more {
		text-decoration-color: var(--yellow);
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
	}

	.core-cards:not(.cards-2-across).slide .content-section .read-more {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 3px;
		text-decoration-color: rgba(79, 58, 17, 0.01);
		transition: text-decoration-color ease-out 300ms;
	}

	.core-cards:not(.cards-2-across) .slide .slide-footer a::after {
		display: none;
	}
}

/* DTN */
.core-cards .slide.dtn-placeholder .content-section .sponsored {
	display: block;
	color: var(--charcoal);
	opacity: .4;
	font-size: var(--text-base);
	text-transform: uppercase;
	line-height: 1.2;
}

/* Hide Non-comped items */
.core-cards .slide .credits,
.core-cards .slide .mini-date-section,
.core-cards .slide .details,
.core-cards .slide .blog-feed-header { display: none; }