/*
|--------------------------------------------------------------------------
| CLC ChurchSuite Events
| Featured Events
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Main container
|--------------------------------------------------------------------------
*/


.csc-events {

	--csc-primary: #008b9d;
	--csc-primary-dark: #006f7e;
	--csc-text: #222222;
	--csc-muted: #666666;
	--csc-border: #e2e2e2;
	--csc-background: #ffffff;

	width: 100%;
	margin: 0;
	padding: 0;

	box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| Reset
|--------------------------------------------------------------------------
*/


.csc-events *,
.csc-events *::before,
.csc-events *::after {

	box-sizing: border-box;

}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/


.csc-events-grid {

	display: grid;

	grid-template-columns:
		repeat(
			var(--csc-event-columns, 3),
			minmax(0, 1fr)
		);

	gap: 24px;

	width: 100%;

	margin: 0;
	padding: 0;

}


/*
|--------------------------------------------------------------------------
| Column settings
|--------------------------------------------------------------------------
*/


.csc-events-columns-1 {

	--csc-event-columns: 1;

}


.csc-events-columns-2 {

	--csc-event-columns: 2;

}


.csc-events-columns-3 {

	--csc-event-columns: 3;

}


.csc-events-columns-4 {

	--csc-event-columns: 4;

}


.csc-events-columns-5 {

	--csc-event-columns: 5;

}


.csc-events-columns-6 {

	--csc-event-columns: 6;

}


/*
|--------------------------------------------------------------------------
| Card wrapper
|--------------------------------------------------------------------------
*/


.csc-event-card-wrapper {

	min-width: 0;

	width: 100%;

	margin: 0;
	padding: 0;

}


/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/


.csc-event-card {

	display: flex;

	flex-direction: column;

	width: 100%;

	height: 100%;

	margin: 0;
	padding: 0;

	border:
		1px solid
		var(--csc-border);

	border-radius: 7px;

	background:
		var(--csc-background);

	overflow: hidden;

	cursor: pointer;

	box-shadow:
		0 1px 4px rgba(0,0,0,.08);

	transition:
		transform .18s ease,
		box-shadow .18s ease;

}


/*
|--------------------------------------------------------------------------
| Card hover
|--------------------------------------------------------------------------
*/


.csc-event-card:hover {

	transform:
		translateY(-2px);

	box-shadow:
		0 5px 16px rgba(0,0,0,.13);

}


/*
|--------------------------------------------------------------------------
| Keyboard focus
|--------------------------------------------------------------------------
*/


.csc-event-card:focus {

	outline:
		3px solid
		var(--csc-primary-focus, rgba(0,139,157,.25));

	outline-offset:
		2px;

}


.csc-event-card:focus:not(:focus-visible) {

	outline:
		none;

}


/*
|--------------------------------------------------------------------------
| Image wrapper
|--------------------------------------------------------------------------
*/


.csc-event-card-image-wrap {

	position:
		relative;

	width:
		100%;

	aspect-ratio:
		16 / 9;

	height:
		auto;

	margin:
		0;

	padding:
		0;

	overflow:
		hidden;

	background:
		#eeeeee;

}


/*
|--------------------------------------------------------------------------
| Event image
|--------------------------------------------------------------------------
*/


.csc-event-card-image {

	display:
		block !important;

	width:
		100% !important;

	height:
		100% !important;

	max-width:
		100% !important;

	margin:
		0 !important;

	padding:
		0 !important;

	border:
		0 !important;

	object-fit:
		cover;

	object-position:
		center;

}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/


.csc-event-card-placeholder {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex-direction:
		column;

	width:
		100%;

	height:
		100%;

	margin:
		0;

	padding:
		0;

	background:
		#e9f1f2;

	color:
		var(--csc-primary);

}


/*
|--------------------------------------------------------------------------
| Placeholder icon
|--------------------------------------------------------------------------
*/


.csc-event-card-placeholder-icon {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	width:
		32px;

	height:
		32px;

	margin:
		0 0 4px 0;

	padding:
		0;

	opacity:
		.7;

}


/*
|--------------------------------------------------------------------------
| Placeholder text
|--------------------------------------------------------------------------
*/


.csc-event-card-placeholder-text {

	display:
		block;

	margin:
		0;

	padding:
		0;

	font-size:
		13px;

	font-weight:
		700;

	letter-spacing:
		.12em;

	line-height:
		1;

	opacity:
		.65;

}


/*
|--------------------------------------------------------------------------
| Event category label
|--------------------------------------------------------------------------
*/


.csc-event-card-category {

	position:
		absolute;

	right:
		8px;

	bottom:
		8px;

	z-index:
		2;

	display:
		block;

	max-width:
		calc(100% - 16px);

	margin:
		0;

	padding:
		5px 9px;

	border-radius:
		999px;

	background:
		var(--csc-category-background, #000000);

	color:
		var(--csc-category-text, #ffffff);

	font-size:
		11px;

	font-weight:
		700;

	line-height:
		1.2;

	text-align:
		right;

	white-space:
		normal;

	box-shadow:
		0 1px 4px rgba(0, 0, 0, .24);

}


/*
|--------------------------------------------------------------------------
| Card content
|--------------------------------------------------------------------------
*/


.csc-event-card-content {

	display:
		flex;

	flex-direction:
		column;

	flex:
		1 1 auto;

	width:
		100%;

	margin:
		0;

	padding:
		16px;

	background:
		#ffffff;

}


/*
|--------------------------------------------------------------------------
| Card title
|--------------------------------------------------------------------------
|
| User preference: 15px.
|
|--------------------------------------------------------------------------
*/


.csc-events .csc-event-card-title {

	margin:
		0 0 10px 0 !important;

	padding:
		0 !important;

	color:
		var(--csc-text) !important;

	font-family:
		inherit !important;

	font-size:
		16px !important;

	font-weight:
		700 !important;

	line-height:
		1.25 !important;

	text-align:
		left !important;

}


/*
|--------------------------------------------------------------------------
| Card bottom
|--------------------------------------------------------------------------
*/


.csc-event-card-bottom {

	display:
		flex;

	align-items:
		flex-end;

	justify-content:
		space-between;

	gap:
		12px;

	width:
		100%;

	margin:
		0;

	padding:
		0;

}


/*
|--------------------------------------------------------------------------
| Details
|--------------------------------------------------------------------------
*/


.csc-event-card-details {

	display:
		flex;

	flex-direction:
		column;

	flex:
		1 1 auto;

	min-width:
		0;

	gap:
		7px;

	margin:
		0;

	padding:
		0;

	color:
		var(--csc-muted);

	font-size:
		12px;

	line-height:
		1.35;

}


/*
|--------------------------------------------------------------------------
| Individual detail
|--------------------------------------------------------------------------
*/


.csc-event-card-detail {

	display:
		flex;

	align-items:
		flex-start;

	gap:
		8px;

	min-width:
		0;

	margin:
		0;

	padding:
		0;

}


/*
|--------------------------------------------------------------------------
| Detail icon
|--------------------------------------------------------------------------
*/


.csc-event-card-detail-icon {

	flex:
		0 0 18px;

	width:
		18px;

	height:
		18px;

	color:
		var(--csc-primary);

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

}


.csc-event-card-icon-svg {

	display:
		block;

	width:
		100%;

	height:
		100%;

	fill:
		none;

	stroke:
		currentColor;

	stroke-width:
		1.8;

	stroke-linecap:
		round;

	stroke-linejoin:
		round;

}


/*
|--------------------------------------------------------------------------
| Time
|--------------------------------------------------------------------------
*/


.csc-event-card-time {

	color:
		var(--csc-text);

	font-weight:
		600;

}


/*
|--------------------------------------------------------------------------
| Card Sign Up button
|--------------------------------------------------------------------------
*/


.csc-event-card-signup {

	display:
		flex !important;

	flex-direction:
		column;

	align-items:
		center;

	justify-content:
		center;

	flex:
		0 0 auto;

	min-width:
		34px;

	min-height:
		34px;

	margin:
		0 !important;

	padding:
		5px 7px !important;

	border:
		0 !important;

	border-radius:
		4px !important;

	background:
		var(--csc-primary) !important;

	color:
		var(--csc-accent-text, #ffffff) !important;

	font-family:
		inherit !important;

	font-size:
		13px !important;

	font-weight:
		700 !important;

	line-height:
		1.05 !important;

	text-align:
		center !important;

	text-decoration:
		none !important;

	text-transform:
		uppercase;

	white-space:
		normal;

	cursor:
		pointer;

	box-shadow:
		none !important;

	transition:
		background .15s ease,
		transform .15s ease;

}


/*
|--------------------------------------------------------------------------
| Sign Up button text
|--------------------------------------------------------------------------
*/


.csc-events .csc-event-card-signup span {

	display:
		block;

	margin:
		0;

	padding:
		0;

	color:
		var(--csc-accent-text, #ffffff) !important;

	font-size:
		inherit !important;

	font-weight:
		inherit !important;

	line-height:
		inherit !important;

}


/*
|--------------------------------------------------------------------------
| Sign Up hover
|--------------------------------------------------------------------------
*/


.csc-event-card-signup:hover,
.csc-event-card-signup:focus {

	background:
		var(--csc-primary-dark) !important;

	color:
		var(--csc-accent-text, #ffffff) !important;

	text-decoration:
		none !important;

	transform:
		translateY(-1px);

	outline:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Empty/error state
|--------------------------------------------------------------------------
*/


.csc-events-empty,
.csc-events-error {

	width:
		100%;

	margin:
		0;

	padding:
		25px 20px;

	border:
		1px solid
		var(--csc-border, #e2e2e2);

	border-radius:
		7px;

	background:
		#ffffff;

	color:
		var(--csc-muted, #666666);

	font-size:
		14px;

	line-height:
		1.5;

	text-align:
		center;

}


/*
|--------------------------------------------------------------------------
| Shared event modal
|--------------------------------------------------------------------------
*/


.csc-event-modal {

	display:
		none;

	position:
		fixed !important;

	inset:
		0 !important;

	width:
		100vw !important;

	height:
		100vh !important;

	margin:
		0 !important;

	padding:
		0 !important;

	z-index:
		999999 !important;

	box-sizing:
		border-box;

}


/*
|--------------------------------------------------------------------------
| Open modal
|--------------------------------------------------------------------------
*/


.csc-event-modal.csc-event-modal-open {

	display:
		block !important;

}


/*
|--------------------------------------------------------------------------
| Hidden modal
|--------------------------------------------------------------------------
*/


.csc-event-modal[hidden] {

	display:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Backdrop
|--------------------------------------------------------------------------
*/


.csc-event-modal-backdrop {

	position:
		fixed !important;

	inset:
		0 !important;

	width:
		100vw !important;

	height:
		100vh !important;

	margin:
		0 !important;

	padding:
		0 !important;

	background:
		rgba(0,0,0,.65) !important;

	z-index:
		999998 !important;

	cursor:
		pointer;

}


/*
|--------------------------------------------------------------------------
| Dialog
|--------------------------------------------------------------------------
*/


.csc-event-modal-dialog {

	position:
		fixed !important;

	top:
		50% !important;

	left:
		50% !important;

	transform:
		translate(-50%,-50%) !important;

	width:
		calc(100vw - 30px) !important;

	max-width:
		760px !important;

	max-height:
		calc(100vh - 30px) !important;

	margin:
		0 !important;

	padding:
		0 !important;

	z-index:
		999999 !important;

	outline:
		none !important;

	box-sizing:
		border-box;

}


/*
|--------------------------------------------------------------------------
| Modal content
|--------------------------------------------------------------------------
*/


.csc-event-modal-content {

	display:
		flex;

	flex-direction:
		column;

	width:
		100%;

	max-height:
		calc(100vh - 30px);

	margin:
		0;

	padding:
		0;

	border:
		0;

	border-radius:
		10px;

	background:
		#ffffff;

	overflow:
		hidden;

	box-shadow:
		0 20px 60px rgba(0,0,0,.35);

	box-sizing:
		border-box;

}


/*
|--------------------------------------------------------------------------
| Modal header
|--------------------------------------------------------------------------
*/


.csc-event-modal-header {

	display:
		flex;

	align-items:
		center;

	justify-content:
		space-between;

	gap:
		20px;

	flex:
		0 0 auto;

	width:
		100%;

	margin:
		0;

	padding:
		17px 20px;

	border-bottom:
		1px solid #eeeeee;

	background:
		#ffffff;

}


/*
|--------------------------------------------------------------------------
| Modal title
|--------------------------------------------------------------------------
*/


.csc-event-modal-title {

	margin:
		0 !important;

	padding:
		0 !important;

	color:
		#222222 !important;

	font-family:
		inherit !important;

	font-size:
		22px !important;

	font-weight:
		700 !important;

	line-height:
		1.25 !important;

}


/*
|--------------------------------------------------------------------------
| Modal X close
|--------------------------------------------------------------------------
*/


.csc-event-modal-close {

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	flex:
		0 0 auto;

	width:
		34px;

	height:
		34px;

	margin:
		0 !important;

	padding:
		0 !important;

	border:
		0 !important;

	border-radius:
		50% !important;

	background:
		#eeeeee !important;

	color:
		#333333 !important;

	font-family:
		Arial,
		sans-serif !important;

	font-size:
		24px !important;

	font-weight:
		400 !important;

	line-height:
		1 !important;

	cursor:
		pointer;

	box-shadow:
		none !important;

	appearance:
		none;

	-webkit-appearance:
		none;

}


.csc-event-modal-close:hover,
.csc-event-modal-close:focus {

	background:
		var(--csc-primary, #008b9d) !important;

	color:
		var(--csc-accent-text, #ffffff) !important;

	outline:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Modal body
|--------------------------------------------------------------------------
*/


.csc-event-modal-body {

	flex:
		1 1 auto;

	min-height:
		0;

	width:
		100%;

	margin:
		0 !important;

	padding:
		20px !important;

	overflow-y:
		auto;

	-webkit-overflow-scrolling:
		touch;

	background:
		#ffffff;

}


/*
|--------------------------------------------------------------------------
| Modal image
|--------------------------------------------------------------------------
*/


.csc-event-modal-image {

	display:
		block !important;

	width:
		100% !important;

	max-width:
		100% !important;

	max-height:
		350px;

	margin:
		0 0 17px 0 !important;

	padding:
		0 !important;

	border:
		0 !important;

	border-radius:
		6px;

	object-fit:
		contain;

}


/*
|--------------------------------------------------------------------------
| Modal meta
|--------------------------------------------------------------------------
*/


.csc-event-modal-meta {

	margin:
		0 0 17px 0;

	padding:
		0;

}


/*
|--------------------------------------------------------------------------
| Modal meta row
|--------------------------------------------------------------------------
*/


.csc-event-modal-meta-row {

	display:
		flex;

	align-items:
		flex-start;

	gap:
		9px;

	margin:
		0 0 7px 0;

	padding:
		0;

	color:
		#333333;

	font-size:
		14px;

	line-height:
		1.4;

}


/*
|--------------------------------------------------------------------------
| Modal meta icon
|--------------------------------------------------------------------------
*/


.csc-event-modal-meta-icon {

	flex:
		0 0 20px;

	width:
		20px;

	height:
		20px;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	color:
		var(--csc-primary, #008b9d);

	text-align:
		center;

}


/*
|--------------------------------------------------------------------------
| Modal meta content
|--------------------------------------------------------------------------
*/


.csc-event-modal-meta-content {

	flex:
		1 1 auto;

	min-width:
		0;

}


/*
|--------------------------------------------------------------------------
| Modal description
|--------------------------------------------------------------------------
*/


.csc-event-modal-description {

	margin:
		0;

	padding:
		0;

	color:
		#333333;

	font-size:
		15px;

	line-height:
		1.65;

}


.csc-event-modal-description p:first-child {

	margin-top:
		0;

}


.csc-event-modal-description p:last-child {

	margin-bottom:
		0;

}


/*
|--------------------------------------------------------------------------
| Modal footer
|--------------------------------------------------------------------------
*/


.csc-event-modal-footer {

	display:
		flex !important;

	align-items:
		center;

	justify-content:
		flex-end;

	gap:
		10px;

	flex:
		0 0 auto;

	position:
		relative;

	z-index:
		1000000 !important;

	width:
		100% !important;

	min-height:
		64px;

	margin:
		0 !important;

	padding:
		12px 20px !important;

	border-top:
		1px solid #eeeeee !important;

	background:
		#ffffff !important;

	visibility:
		visible !important;

	opacity:
		1 !important;

}


/*
|--------------------------------------------------------------------------
| Modal Sign Up button
|--------------------------------------------------------------------------
*/


.csc-event-modal-signup {

	display:
		inline-flex !important;

	align-items:
		center;

	justify-content:
		center;

	position:
		relative !important;

	z-index:
		1000001 !important;

	flex:
		0 0 auto;

	min-width:
		90px;

	min-height:
		38px;

	margin:
		0 !important;

	padding:
		8px 16px !important;

	border:
		0 !important;

	border-radius:
		4px !important;

	background:
		var(--csc-primary, #008b9d) !important;

	color:
		var(--csc-accent-text, #ffffff) !important;

	font-family:
		inherit !important;

	font-size:
		13px !important;

	font-weight:
		600 !important;

	line-height:
		1.2 !important;

	text-align:
		center !important;

	text-decoration:
		none !important;

	white-space:
		nowrap;

	visibility:
		visible !important;

	opacity:
		1 !important;

	cursor:
		pointer;

	box-shadow:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Modal Sign Up hover
|--------------------------------------------------------------------------
*/


.csc-event-modal-signup:hover,
.csc-event-modal-signup:focus {

	background:
		var(--csc-primary-dark, #006f7e) !important;

	color:
		var(--csc-accent-text, #ffffff) !important;

	text-decoration:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Modal close button
|--------------------------------------------------------------------------
*/


.csc-event-modal-close-button {

	display:
		inline-flex !important;

	align-items:
		center;

	justify-content:
		center;

	flex:
		0 0 auto;

	min-height:
		38px;

	margin:
		0 !important;

	padding:
		8px 16px !important;

	border:
		1px solid #cccccc !important;

	border-radius:
		4px !important;

	background:
		#eeeeee !important;

	color:
		#333333 !important;

	font-family:
		inherit !important;

	font-size:
		13px !important;

	font-weight:
		500 !important;

	line-height:
		1.2 !important;

	cursor:
		pointer;

	box-shadow:
		none !important;

	appearance:
		none;

	-webkit-appearance:
		none;

}


.csc-event-modal-close-button:hover,
.csc-event-modal-close-button:focus {

	background:
		#dddddd !important;

	color:
		#222222 !important;

	outline:
		none !important;

}


/*
|--------------------------------------------------------------------------
| Prevent page scrolling when modal is open
|--------------------------------------------------------------------------
*/


html.csc-event-modal-active,
body.csc-event-modal-active {

	overflow:
		hidden !important;

}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/


@media (max-width: 980px) {


	.csc-events-grid {

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

	}


}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/


@media (max-width: 600px) {


	.csc-events-grid {

		grid-template-columns:
			1fr;

		gap:
			18px;

	}


	.csc-event-card-wrapper:nth-child(n + 4) {

		display:
			none;

	}


	.csc-event-card-content {

		padding:
			14px;

	}


	.csc-events .csc-event-card-title {

		font-size:
			15px !important;

		margin-bottom:
			8px !important;

	}


	.csc-event-card-details {

		font-size:
			10px;

	}


	.csc-event-card-detail-icon {

		flex-basis:
			16px;

		width:
			16px;

		height:
			16px;

	}


	.csc-event-card-signup {

		min-width:
			32px;

		min-height:
			32px;

		padding:
			4px 6px !important;

		font-size:
			8px !important;

	}


	.csc-event-modal-dialog {

		width:
			calc(100vw - 20px) !important;

		max-height:
			calc(100vh - 20px) !important;

	}


	.csc-event-modal-content {

		max-height:
			calc(100vh - 20px);

		border-radius:
			8px;

	}


	.csc-event-modal-header {

		padding:
			14px 16px;

	}


	.csc-event-modal-title {

		font-size:
			19px !important;

	}


	.csc-event-modal-body {

		padding:
			16px !important;

	}


	.csc-event-modal-footer {

		padding:
			10px 16px !important;

	}

}


/*
|--------------------------------------------------------------------------
| Very small screens
|--------------------------------------------------------------------------
*/


@media (max-width: 400px) {


	.csc-events-grid {

		gap:
			14px;

	}


	.csc-event-card-content {

		padding:
			12px;

	}


	.csc-events .csc-event-card-title {

		font-size:
			14px !important;

	}


	.csc-event-card-details {

		font-size:
			9px;

	}


	.csc-event-card-detail {

		gap:
			6px;

	}


	.csc-event-card-signup {

		min-width:
			30px;

		min-height:
			30px;

		padding:
			4px 5px !important;

		font-size:
			7px !important;

	}

}