/*
 * Corelation Events Manager — front-end styles
 * Shortcode output is scoped under .cem-events-wrap so Salient theme styles can't bleed in.
 */

.cem-events-wrap,
.cem-events-wrap * {
	box-sizing: border-box;
}
.cem-events-wrap {
	font-family: Inter, sans-serif;
	color: #101828;
	line-height: 1.5;
}

.cem-upcoming-card .cem-uc-left .cem-uc-loc > .cem-icon {margin-bottom: 0!important;}
.cem-events-wrap .cem-icon { display: inline-block; vertical-align: middle;}
.cem-events-wrap .cem-empty { color: #6a7282; font-size: 14px; }
.cem-upcoming-card .cem-events-wrap .cem-icon {margin-bottom:0!important}

/* ======================= Badges ======================= */
.cem-events-wrap .cem-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	padding: 4px 10px;
	border-radius: 8px;
}
.cem-events-wrap .cem-badge-featured {
	background: #009ade;
	color: #fff;
	margin-left: 8px;
}
@media screen and (max-width:690px) {
	.cem-events-wrap .cem-uc-title > .cem-badge-featured {
		margin-left: 0px;
		margin-top: 12px;
	}
}

.cem-events-wrap .cem-badge-type {
	background: #fff;
	color: #101828;
	border: 1px solid #e5e7eb;
}
.cem-events-wrap .cem-badge-recording {
	background: #dcfce7;
	color: #016630;
}

/* ======================= Buttons ======================= */
.cem-events-wrap .cem-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 100px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: background-color .15s, color .15s, border-color .15s;
	font-family: inherit;
}
.cem-events-wrap .cem-btn .cem-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.cem-events-wrap .cem-btn-primary {
	background: #009ade;
	color: #fff;
	border-color: #009ade;
}
.cem-events-wrap .cem-btn-primary:hover,
.cem-events-wrap .cem-btn-primary:focus {
	background: rgb(0, 119, 179);
	border-color: rgb(0, 119, 179);
	color: #fff;
}
.cem-events-wrap .cem-btn-secondary {
	background: #fff;
	color: #364153;
	border: 1px solid #d1d5dc;
}
.cem-events-wrap .cem-btn-secondary:hover,
.cem-events-wrap .cem-btn-secondary:focus {
	background: #fbf9fa;
	color: #000;
	border-color: #d1d5dc;
}
.cem-events-wrap .cem-btn-block {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* ======================= Upcoming card ======================= */
.cem-events-wrap .cem-upcoming-list { display: block; }
.cem-events-wrap .cem-upcoming-card {
	display: flex;
	margin-bottom: 24px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
}

.cem-events-wrap .cem-upcoming-card {
	transition-duration:0.15s;
	transition-property:box-shadow;
	transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
}
.cem-events-wrap .cem-upcoming-card .cem-uc-right {
	border: 2px solid #ebe6e7;
	border-radius: 0 16px 16px 0;
}
.cem-events-wrap .cem-upcoming-card:hover {
	box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
}
.cem-events-wrap .cem-upcoming-card.is-featured .cem-uc-right {
	border: 2px solid #009ade;
	border-radius: 0 16px 16px 0;
}
.cem-events-wrap .cem-uc-left {
	flex: 0 0 25%;
	background: #009ade;
	color: #dbeafe;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.cem-events-wrap .cem-uc-left .cem-icon { color: #dbeafe; margin-bottom: 12px; }
.cem-events-wrap .cem-uc-date {
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	margin-bottom: 4px;
	color: white;
}
.cem-events-wrap .cem-uc-loc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	color: #dbeafe;
}
.cem-events-wrap .cem-uc-right {
	flex: 1;
	background: #fff;
	padding: 32px;
}
.cem-events-wrap .cem-uc-title {
	margin-bottom: 12px!important;
	padding: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 700;
	color: #101828;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.cem-events-wrap .cem-uc-typewrap {
	margin-bottom: 16px;
}
.cem-events-wrap .cem-uc-typewrap .cem-badge-type { display: inline-block; }
.cem-events-wrap .cem-uc-excerpt {
	font-size: 16px;
	color: #4a5565;
	line-height: 24px;
	margin: 0 0 24px;
	padding: 0;
}
.cem-events-wrap .cem-uc-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Upcoming card — featured image column (only when card has .has-image) */
.cem-events-wrap .cem-upcoming-card.has-image .cem-uc-image {
	flex: 0 0 20%;
	align-self: stretch;
	overflow: hidden;
	background: #f6f3f4;
}
.cem-events-wrap .cem-upcoming-card.has-image .cem-uc-img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
	margin-bottom:0;
}
.cem-events-wrap .cem-upcoming-card.has-image .cem-uc-left { flex: 0 0 22%; }

/* Upcoming card mobile */
@media (max-width: 690px) {
	.cem-events-wrap .cem-upcoming-card { flex-direction: column; }
	.cem-events-wrap .cem-uc-left { flex: 0 0 auto; }
	.cem-events-wrap .cem-upcoming-card.has-image .cem-uc-image { flex: 0 0 auto; }
	.cem-events-wrap .cem-upcoming-card.has-image .cem-uc-img { height: 220px; min-height: 220px; }
	.cem-events-wrap .cem-upcoming-card .cem-uc-right {
		border-radius: 0 0 16px 16px!important;
	}
}

/* ======================= Upcoming slider ======================= */
.cem-events-wrap.cem-upcoming-slider { display: block; }
.cem-events-wrap.cem-upcoming-slider .cem-slider-viewport {
	overflow: hidden;
}
.cem-events-wrap.cem-upcoming-slider .cem-slider-track {
	display: flex;
	transition: transform .35s ease;
	will-change: transform;
}
.cem-events-wrap.cem-upcoming-slider .cem-slide {
	flex: 0 0 100%;
	min-width: 100%;
	padding: 30px;
}
@media screen and (max-width:690px) {
	.cem-events-wrap.cem-upcoming-slider .cem-slide {
	padding: 2px;
}
}
.cem-events-wrap.cem-upcoming-slider .cem-slide .cem-upcoming-card {
	margin-bottom: 0;
	height: auto;
}
.cem-events-wrap.cem-upcoming-slider .cem-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.cem-events-wrap.cem-upcoming-slider .cem-slider-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #cbd5e1;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}
.cem-events-wrap.cem-upcoming-slider .cem-slider-dot:hover { background: #94a3b8; }
.cem-events-wrap.cem-upcoming-slider .cem-slider-dot.is-active {
	width: 28px;
	background: #009ade;
}

/* ======================= Past grid ======================= */
.cem-events-wrap .cem-past-wrap { display: block; }
.cem-events-wrap .cem-past-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(var(--cem-cols-desktop, 3), 1fr);
}
@media (max-width: 1000px) {
	.cem-events-wrap .cem-past-grid {
		grid-template-columns: repeat(var(--cem-cols-tablet, 2), 1fr);
	}
}
@media (max-width: 690px) {
	.cem-events-wrap .cem-past-grid {
		grid-template-columns: repeat(var(--cem-cols-mobile, 1), 1fr);
	}
}

.cem-events-wrap .cem-past-card {
	background: #fff;
	border: 1px solid #ebe6e7;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	transition-duration:0.15s;
	transition-property:box-shadow;
	transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
}
.cem-events-wrap .cem-past-card:hover {
	box-shadow: 0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
}
.cem-events-wrap .cem-pc-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.cem-events-wrap .cem-pc-icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: #f6f3f4;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4a5565;
}

.cem-events-wrap .cem-pc-icon .cem-icon { width: 24px; height: 24px; }
.cem-events-wrap .cem-pc-title {
	margin: 0 0 8px!important;
	font-size: 18px!important;
	font-weight: 600!important;
	line-height: 28px!important;
	color: #101828!important;
}
.cem-events-wrap .cem-pc-meta {
	font-size: 14px;
	line-height: 20px;
	color: #6a7282;
	margin-bottom: 4px;
}
.cem-events-wrap .cem-pc-watch {
	background: transparent;
	border: 0;
	color: #009ade;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin-top: 16px;
	align-self: flex-start;
	font-family: inherit;
}
.cem-events-wrap .cem-pc-watch .cem-icon { color: #009ade; }
.cem-events-wrap .cem-pc-watch:hover { text-decoration: underline; }

.cem-events-wrap .cem-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.cem-events-wrap .cem-fade-in {
	animation: cemFadeIn .35s ease;
}
@keyframes cemFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ======================= YouTube modal ======================= */
.cem-events-wrap .cem-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 154, 222, 0.9);
	padding: 24px;
	align-items: center;
	justify-content: center;
}
.cem-events-wrap .cem-modal.is-open { display: flex; }

/* Overlay is the clickable backdrop layer behind the content. */
.cem-events-wrap .cem-modal-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	cursor: pointer;
}

.cem-events-wrap .cem-modal-yt-box {
	position: relative;
	width: 100%;
	max-width: 960px;
	margin: 0;
	background: #fff;
	border-radius: 16px;
	padding: 2px;
	overflow: visible;
}
.cem-events-wrap .cem-modal-yt-head {
	padding: 24px;
}
.cem-events-wrap .cem-modal-yt-title {
	margin: 0;
	padding: 0;
	font-size: 28px;
	line-height: 30px;
	font-weight: 700;
	color: #101828;
}
.cem-events-wrap .cem-modal-yt-meta {
	margin: 8px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
	color: #6a7282;
}
.cem-events-wrap .cem-modal-yt-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0 0 12px 12px;
	overflow: hidden;
}
.cem-events-wrap .cem-modal-yt-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.cem-events-wrap .cem-modal-close {
	background: transparent;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 6px;
	border-radius: 8px;
	font-family: inherit;
}
.cem-events-wrap .cem-modal-close-yt {
	position: absolute;
	top: -48px;
	right: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	background: #000;
	color: #fff;
}
.cem-events-wrap .cem-modal-close-yt:hover { background: #1f2937; color: #fff; }

/* Body lock when modal open */
html.cem-modal-open,
body.cem-modal-open {
	overflow: hidden;
}

@media (max-width: 690px) {
	.cem-events-wrap .cem-modal { padding: 16px; }
}

/* ======================= Single event page ======================= */
.cem-single-wrap {
	background: #fff;
	--cem-container-max: 1305px;
}
.cem-single-wrap .cem-single-header {
	background: #009ade;
	color: #fff;
	padding: 96px 0 24px;
}
.cem-single-wrap .cem-single-header-inner {
	max-width: var(--cem-container-max);
	margin: 0 auto;
	text-align: left;
}
.cem-single-wrap .cem-single-badges {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	flex-wrap: wrap;
}
.cem-single-wrap .cem-single-type-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 12px;
	border-radius: 8px;
}
.cem-single-wrap .cem-single-featured-badge {
	display: inline-block;
	background: #fff;
	color: #009ade;
	font-size: 14px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 8px;
}
.cem-single-wrap .cem-single-title {
	font-size: 48px;
	line-height: 56px;
	font-weight: 700;
	margin: 16px 0 0;
	color: #fff;
	text-align: left;
}

/* Meta region — sits below header, before the description. */
.cem-single-wrap .cem-single-meta {
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}
.cem-single-wrap .cem-single-meta-inner {
	max-width: var(--cem-container-max);
	margin: 0 auto;
	padding: 48px 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Featured image — framed and centered so any aspect ratio (tall or wide) sits well.
   Wide images fill the container width; tall images are capped by max-height and
   letterboxed against the white frame. */
.cem-single-wrap .cem-single-figure {
	display: flex;
	align-items: center;
	justify-content: center;
}
.cem-single-wrap .cem-single-figure-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	/* max-height: 560px; */
	border-radius: 36px;
}

/* Row 1 — Location card | Date & Time card */
.cem-single-wrap .cem-single-meta-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}
.cem-single-wrap .cem-single-meta-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.cem-single-wrap .cem-single-meta-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #6a7282;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}
.cem-single-wrap .cem-single-meta-title .cem-icon {
	width: 16px;
	height: 16px;
	color: #009ade;
}
.cem-single-wrap .cem-single-meta-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cem-single-wrap .cem-single-meta-line {
	font-size: 15px;
	color: #364153;
	line-height: 22px;
}
.cem-single-wrap .cem-single-meta-line-strong {
	font-weight: 600;
	color: #101828;
}

/* Date & Time day cards — each day in its own pill-card, hours inline. */
.cem-single-wrap .cem-single-day-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cem-single-wrap .cem-single-day-card {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 15px;
	line-height: 22px;
	color: #364153;
}
.cem-single-wrap .cem-single-day-date {
	font-weight: 600;
	color: #101828;
}
.cem-single-wrap .cem-single-day-sep {
	color: #cbd5e1;
}
.cem-single-wrap .cem-single-day-hours {
	color: #4a5565;
}

/* Row 2 — Register button (left) | Share (right) */
.cem-single-wrap .cem-single-meta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}
.cem-single-wrap .cem-single-meta-actions-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	min-height: 1px;
}
.cem-single-wrap .cem-single-meta-actions-right {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}
.cem-single-wrap .cem-single-share-title {
	margin: 0;
}

/* Register Now — bigger, no card wrapper. */
.cem-single-wrap .cem-single-register-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: 100px;
	font-size: 18px;
	font-weight: 600;
	line-height: 22px;
}
.cem-single-wrap .cem-single-register-btn .cem-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
}

/* Share buttons. */
.cem-single-wrap .cem-single-share-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.cem-single-wrap .cem-single-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 100px;
	border: 1px solid #e5e7eb;
	background: #fff;
	color: #364153;
	text-decoration: none;
	transition: background-color .15s, border-color .15s, color .15s;
}
.cem-single-wrap .cem-single-share-btn:hover,
.cem-single-wrap .cem-single-share-btn:focus {
	background: #f9fafb;
	border-color: #d1d5dc;
	color: #009ade;
}
.cem-single-wrap .cem-single-share-btn .cem-icon {
	width: 18px;
	height: 18px;
}

/* Description — full width within container, content capped at 1000px. */
.cem-single-wrap .cem-single-body {
	max-width: var(--cem-container-max);
	margin: 0 auto;
	padding: 96px 0;
	scroll-margin-top: 80px;
}
.cem-single-wrap .cem-single-content-title {
	margin: 0 0 20px;
	padding: 0;
	font-size: 30px;
	line-height: 38px;
	font-weight: 700;
	color: #101828;
}
.cem-single-wrap .cem-single-content {
	max-width: 1000px;
	font-size: 16px;
	line-height: 28px;
	color: #364153;
}
.cem-single-wrap .cem-single-content p { margin: 0 0 16px; }

/* Bottom event navigation. */
.cem-single-wrap .cem-single-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid #e5e7eb;
}
.cem-single-wrap .cem-single-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #009ade;
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	transition: color .15s;
}
.cem-single-wrap .cem-single-nav-link:hover,
.cem-single-wrap .cem-single-nav-link:focus {
	color: #0077a8;
}
.cem-single-wrap .cem-single-nav-next {
	margin-left: auto;
}
.cem-single-wrap .cem-single-nav-arrow {
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 1369px) {
	.cem-single-wrap .cem-single-header-inner,
	.cem-single-wrap .cem-single-meta-inner,
	.cem-single-wrap .cem-single-body {
		padding-left: 32px;
		padding-right: 32px;
	}
}
@media (max-width: 900px) {
	.cem-single-wrap .cem-single-meta-actions {
		flex-direction: column;
		align-items: flex-start;
	}
	.cem-single-wrap .cem-single-meta-actions-right {
		margin-left: 0;
	}
}
@media (max-width: 690px) {
	.cem-single-wrap .cem-single-header { padding: 40px 0; }
	.cem-single-wrap .cem-single-title { font-size: 32px; line-height: 40px; }
	.cem-single-wrap .cem-single-header-inner,
	.cem-single-wrap .cem-single-meta-inner,
	.cem-single-wrap .cem-single-body {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cem-single-wrap .cem-single-meta-inner { padding-top: 24px; padding-bottom: 24px; }
	.cem-single-wrap .cem-single-body { padding-top: 32px; padding-bottom: 48px; }
	.cem-single-wrap .cem-single-nav { flex-wrap: wrap; }
	.cem-single-wrap .cem-single-figure-img { max-height: 380px; }
}