/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Callout Tiles 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-callout-tiles {
	padding-top: 0;
	margin-bottom: var(--bottom-margin);
}

.core-callout-tiles .widget-title-bar {
	margin-bottom: 2px;
	padding: 21px var(--space-3) 23px var(--space-3);
	background: var(--black);
	color: var(--white);
}

.core-callout-tiles .widget-title {
	width: 100%;
	max-width: var(--width-base);
	margin: 0 auto;
	font-size: var(--text-3xl);
	font-weight: var(--font-weight-light);
	text-transform: uppercase;
	letter-spacing: .02rem;
	line-height: 1.14;
}

.core-callout-tiles .widget-title strong {
	font-weight: var(--font-weight-black);
}

.core-callout-tiles .slides {
	gap: 2px;
}

.core-callout-tiles .slide .content-section {
	left: 50%;
	transform: translateX(-50%);
	max-width: 300px;
}

.core-callout-tiles .slide .slide-title {
	position: relative;
	font-size: var(--text-3xl);
	line-height: var(--leading-none);
	font-weight: var(--font-weight-bold);
}

.core-callout-tiles .slide .slide-title::before {
	position: absolute;
	left: 50%;
	bottom: calc(var(--space-4) * -1);
	transform: translateX(-50%) scaleX(0);
	display: block;
	content: '';
	width: 60%;
	height: 5px;
	background: var(--amaranth);
	transition: transform ease-in-out .4s;
}

.core-callout-tiles .slide .img-cont::after {
	background: rgba(0,0,0,.4);
}

.core-callout-tiles .slide img {
	transition: transform ease-in-out 0.4s;
}

@media (hover: hover) {
	.core-callout-tiles .slide:hover .img-cont img {
		transform: scale(1.1);
	}

	.core-callout-tiles .slide:hover .slide-title::before {
		transform: translateX(-50%);
	}
}

@media (min-width: 64em) {
	.core-callout-tiles .widget-title {
		font-size: 3.125rem;
	}

	.core-callout-tiles:not(.callout-tiles-5-across-fullwidth) .slide .slide-title {
		font-size: 2.1875rem !important;
	}
}

/* Meetings Theme */
.meetings .core-callout-tiles .widget-title-bar {
	background: var(--meetings-seaweed);
}

/* Groups Theme */
.groups .core-callout-tiles .widget-title-bar {
	background: var(--seaweed);
}

/* Meetings & Groups Theme - Shared */
@media (min-width: 375px) {
	.meetings .callout-tiles-5-across-fullwidth .slides,
	.groups .callout-tiles-5-across-fullwidth .slides {
		grid-template-columns: 1fr 1fr;
	}

	.meetings .core-callout-tiles .slide .slide-title,
	.groups .core-callout-tiles .slide .slide-title {
		font-size: 22px;
	}
}

@media (min-width: 40em) {
	.meetings .callout-tiles-5-across-fullwidth .slides,
	.groups .callout-tiles-5-across-fullwidth .slides {
		grid-template: auto auto / repeat(6, 1fr);
	}

	.meetings .callout-tiles-5-across-fullwidth .slide:last-child,
	.meetings .callout-tiles-5-across-fullwidth .slide:nth-last-child(2),
	.groups .callout-tiles-5-across-fullwidth .slide:last-child,
	.groups .callout-tiles-5-across-fullwidth .slide:nth-last-child(2) {
		grid-column: span 2;
	}

	.meetings .core-callout-tiles .slide .slide-title,
	.groups .core-callout-tiles .slide .slide-title {
		font-size: var(--text-2xl);
	}
}

@media (min-width: 64em) {
	.meetings .callout-tiles-5-across-fullwidth .slides,
	.groups .callout-tiles-5-across-fullwidth .slides {
		grid-template: auto auto / repeat(5, 1fr);
	}

	.meetings .callout-tiles-5-across-fullwidth .slide:last-child,
	.meetings .callout-tiles-5-across-fullwidth .slide:nth-last-child(2),
	.groups .callout-tiles-5-across-fullwidth .slide:last-child,
	.groups .callout-tiles-5-across-fullwidth .slide:nth-last-child(2) {
		grid-column: span 1;
	}
}