/*
	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); }

/* Widget Header */
.core-cards .widget-header { margin-bottom: 6px; }

.core-cards .widget-header-inner {
	justify-content: center;
	padding-bottom: 0;
	border-bottom: none;
}

.core-cards .widget-title {
	font-family: var(--font-cursive);
	font-size: var(--text-6xl);
	font-weight: 400;
	line-height: var(--leading-normal);
	letter-spacing: var(--tracking-normal);
	color: var(--blue-hover-overlay);
	margin-right: 0;
	margin-bottom: 0;
}

/* Slides */
.core-cards .slides {
	gap: var(--space-10);
	padding: 0 15px;
}

.core-cards .slide .img-cont { margin: 0; }

.core-cards .slide .content-section {
	position: relative;
	z-index: 1;
	gap: var(--space-5);
	padding-left: 10px;
	margin-top: -34px;
}

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

.core-cards .slide .slide-title,
.core-cards .slide .slide-title a {
	position: relative;
	z-index: 1;
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: var(--tracking-normal);
	color: #0060a4;
	max-width: calc(100% - 15px);
}

.core-cards .slide .slide-title::after {
	content: '';
	position: absolute;
	top: -16px;
	left: -10px;
	z-index: -1;
	height: calc(100% + 16px);
	width: calc(100% + 10px);
	background: var(--white);
	pointer-events: none;
}

.core-cards .slide p {
	position: relative;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.65;
	letter-spacing: var(--tracking-wide);
	color: #191919;
}

.core-cards .slide p::after{
	content: '';
	position: absolute;
	left: 0;
	top: -16px;
	width: 83px;
	height: 2px;
	background: var(--pink-dutch);
	pointer-events: none;
}

.core-cards .slide .slide-footer { margin: 0; }

.core-cards .slide .slide-footer a.read-more {
	position: relative;
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: var(--leading-none);
	letter-spacing: var(--tracking-wider);
	color: var(--blue-dark);
	background: transparent;
	border-radius: unset;
	padding: 0;
	margin: 0;
	transition: color ease 400ms;
}

.core-cards .slide a.read-more::after {
	content: '\f061';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	display: inline-block;
	color: var(--blue-dark);
	font-size: var(--text-base);
	transition: color ease 400ms;
	transform: translateY(var(--space-px));
	margin-left: var(--space-1);
}

@media (hover:hover) {
	.core-cards .slide a.read-more:hover { color: var(--pink-turkish); }
	
	.core-cards .slide a.read-more:hover::after { color: var(--pink-turkish); }
}

.core-cards .slide .mini-date-section,
.core-cards .slide .blog-feed-header { display: none; }

@media (min-width: 64em) {
	.core-cards .widget-header { margin-bottom: var(--space-2); }

	.core-cards .widget-title { font-size: 5.625rem; }

	.core-cards .slide .content-section { padding-left: var(--space-4); }

	.core-cards .slide .slide-title::after {
		width: calc(100% + 16px);
		left: -16px;
	}
}

/* Ryder Cup Microsite Theme */
.theme-ryder-cup {
	.ccl-widget.core-cards.cards-2-across {
		.widget-title {
			margin-bottom: 15px;
			font-size: 2.5rem;
			font-family: var(--font-body);
			line-height: 1;
			text-align: center;
			text-transform: uppercase;

			@media (min-width: 64em) {
				font-size: 3rem;
			}
	
			span {
				display: block;
				margin-bottom: -5px;
				font-family: var(--font-cursive);
				font-size: 2rem;
				text-transform: none;

				@media (min-width: 64em) {
					font-size: 2.5rem;
				}
			}
		}

		.slide {
			@media (hover: hover) {
				.img-cont a {
					img {
						transition: transform 0.8s;
					}

					&:hover img {
						transform: scale(1.1);
					}
				}
			}
			.content-section {
				margin-top: 10px;
	
				.slide-title, .slide-title a {
					font-family: var(--font-body);
					font-weight: bold;
				}
			}
		}
	}
}