/*
 * Corelation Events Manager — "What's Happening" module
 *
 * Scoped entirely under .cem-wh. The existing events styles live under
 * .cem-events-wrap and are not touched by anything in this file, so upgrading
 * cannot change how an existing [cem_upcoming_events] / [cem_past_events]
 * instance renders.
 *
 * Every value below is a custom property declared on the wrapper itself, so a
 * per-instance override survives any theme wrapper or portaling.
 */

.cem-wh {
	/* Content */
	--cem-wh-cols-desktop: 1;
	--cem-wh-cols-tablet: 1;
	--cem-wh-cols-mobile: 1;
	--cem-wh-gap: 24px;

	/* Card box */
	--cem-wh-card-bg: #ffffff;
	--cem-wh-card-border: #ebe6e7;
	--cem-wh-border-width: 2px;
	--cem-wh-radius: 16px;
	--cem-wh-card-padding: 32px;
	--cem-wh-shadow: none;
	--cem-wh-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10);

	/* Media */
	--cem-wh-ratio: 4 / 3;
	--cem-wh-image-position: center center;

	/* Type */
	--cem-wh-title-color: #101828;
	--cem-wh-title-size: 24px;
	--cem-wh-text-color: #4a5565;
	--cem-wh-excerpt-size: 16px;
	--cem-wh-label-size: 12px;
	--cem-wh-date-size: 24px;

	/* Chrome */
	--cem-wh-date-bg: #009ade;
	--cem-wh-date-text: #ffffff;
	--cem-wh-label-bg: #ffffff;
	--cem-wh-label-text: #101828;
	--cem-wh-button-bg: #009ade;
	--cem-wh-button-text: #ffffff;

	/* Hover — blank by default so hover changes nothing unless asked */
	--cem-wh-hover-card-bg: var(--cem-wh-card-bg);
	--cem-wh-hover-title-color: var(--cem-wh-title-color);
	--cem-wh-hover-border: var(--cem-wh-card-border);

	/*
	 * Inherit the theme's font by default. Forcing a stack here made the module
	 * read as a foreign element on a Salient page — the surrounding site sets
	 * the typeface, and the module should match it. Set the "Font family"
	 * setting to override with an explicit stack.
	 */
	font-family: var(--cem-wh-font, inherit);
	color: var(--cem-wh-text-color);
	line-height: 1.5;
}

.cem-wh,
.cem-wh * {
	box-sizing: border-box;
}

/* No outer padding by default so the module sits flush inside a WPBakery row. */
.cem-wh .cem-wh-inner {
	padding: 0;
}
.cem-wh--padded .cem-wh-inner {
	padding: 48px 24px;
}

/* ======================= Heading ======================= */

.cem-wh .cem-wh-heading {
	margin: 0 0 8px;
	color: var(--cem-wh-title-color);
	font-size: 32px;
	line-height: 40px;
	font-weight: 700;
}
.cem-wh .cem-wh-subheading {
	margin: 0 0 24px;
	color: var(--cem-wh-text-color);
	font-size: 16px;
}
.cem-wh .cem-wh-heading + .cem-wh-grid,
.cem-wh .cem-wh-heading + .cem-wh-carousel {
	margin-top: 24px;
}
.cem-wh .cem-wh-empty {
	margin: 0;
	color: #6a7282;
	font-size: 14px;
}

/* ======================= Grid ======================= */

.cem-wh .cem-wh-grid {
	display: grid;
	grid-template-columns: repeat(var(--cem-wh-cols-desktop), minmax(0, 1fr));
	gap: var(--cem-wh-gap);
	align-items: stretch;
}

@media screen and (max-width: 1000px) {
	.cem-wh .cem-wh-grid {
		grid-template-columns: repeat(var(--cem-wh-cols-tablet), minmax(0, 1fr));
	}
}
@media screen and (max-width: 690px) {
	.cem-wh .cem-wh-grid {
		grid-template-columns: repeat(var(--cem-wh-cols-mobile), minmax(0, 1fr));
	}
}

/* ======================= Card ======================= */

.cem-wh .cem-wh-card {
	display: flex;
	flex-direction: column;
	background: var(--cem-wh-card-bg);
	border: var(--cem-wh-border-width) solid var(--cem-wh-card-border);
	border-radius: var(--cem-wh-radius);
	box-shadow: var(--cem-wh-shadow);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: box-shadow .25s ease, transform .25s ease, background-color .25s ease, border-color .25s ease;
}

a.cem-wh-card:hover,
a.cem-wh-card:focus-visible {
	box-shadow: var(--cem-wh-hover-shadow);
	background: var(--cem-wh-hover-card-bg);
	border-color: var(--cem-wh-hover-border);
	text-decoration: none;
	color: inherit;
}
a.cem-wh-card:focus-visible {
	outline: 2px solid var(--cem-wh-date-bg);
	outline-offset: 2px;
}

.cem-wh--shadow-none { --cem-wh-shadow: none; }
.cem-wh--shadow-sm   { --cem-wh-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); }
.cem-wh--shadow-lg   { --cem-wh-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10); }
.cem-wh--shadow-md   { --cem-wh-shadow: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); }

.cem-wh--hover-shadow-none { --cem-wh-hover-shadow: var(--cem-wh-shadow); }
.cem-wh--hover-shadow-sm   { --cem-wh-hover-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10); }
.cem-wh--hover-shadow-md   { --cem-wh-hover-shadow: 0 4px 8px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06); }
.cem-wh--hover-shadow-lg   { --cem-wh-hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, .10), 0 4px 6px -4px rgba(0, 0, 0, .10); }

/* ======================= Media ======================= */

.cem-wh .cem-wh-media {
	position: relative;
	overflow: hidden;
	background: #f6f3f4;
	flex: 0 0 auto;
}

.cem-wh .cem-wh-card--stacked .cem-wh-media {
	width: 100%;
	aspect-ratio: var(--cem-wh-ratio);
}

/* Older engines without aspect-ratio still get a stable box. */
@supports not (aspect-ratio: 4 / 3) {
	.cem-wh .cem-wh-card--stacked .cem-wh-media {
		height: 0;
		padding-top: 75%;
	}
	.cem-wh .cem-wh-card--stacked .cem-wh-media > .cem-wh-img {
		position: absolute;
		inset: 0;
	}
}

.cem-wh .cem-wh-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cem-wh-image-position);
	transition: transform .4s ease;
}
.cem-wh .cem-wh-img--empty {
	background: linear-gradient(135deg, #eef2f6 0%, #e3e9ef 100%);
}

/*
 * Generated placeholder. An item with no artwork still reads as whatever it is
 * tagged with — "PR", "WEBINAR" — on a gradient derived from that tag, rather
 * than rendering as a blank tile.
 */
.cem-wh .cem-wh-img--art {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background-size: cover;
	background-position: center;
	text-align: center;
}
.cem-wh .cem-wh-art-text {
	color: #fff;
	font-size: clamp(14px, 1.7vw, 28px);
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.15;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .22);
	word-break: break-word;
}

/* Hover effects — off unless the instance opts in. */
.cem-wh--hover-zoom a.cem-wh-card:hover .cem-wh-img,
.cem-wh--hover-zoom a.cem-wh-card:focus-visible .cem-wh-img {
	transform: scale(1.06);
}
.cem-wh--hover-lift a.cem-wh-card:hover,
.cem-wh--hover-lift a.cem-wh-card:focus-visible {
	transform: translateY(-4px);
}

/* ======================= Date box ======================= */

.cem-wh .cem-wh-date {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	padding: 8px 10px;
	border-radius: 10px;
	background: var(--cem-wh-date-bg);
	color: var(--cem-wh-date-text);
	font-size: var(--cem-wh-date-size);
	line-height: 1.1;
	text-align: center;
}
.cem-wh .cem-wh-date-top {
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .95;
}
.cem-wh .cem-wh-date-bottom {
	font-size: 1.5em;
	font-weight: 700;
}

/*
 * Dateless items: there is no date box in the markup at all, so the image
 * already occupies the whole tile. Nothing else needs to change — this rule
 * exists so the intent is greppable.
 */
.cem-wh .cem-wh-card.is-dateless .cem-wh-media {
	/* full-bleed image, no overlay */
}

/* ======================= Body ======================= */

.cem-wh .cem-wh-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: var(--cem-wh-card-padding);
	flex: 1 1 auto;
}

.cem-wh .cem-wh-label {
	display: inline-block;
	background: var(--cem-wh-label-bg);
	color: var(--cem-wh-label-text);
	border: 1px solid var(--cem-wh-card-border);
	border-radius: 8px;
	padding: 4px 10px;
	font-size: var(--cem-wh-label-size);
	font-weight: 500;
	line-height: 1.35;
}

.cem-wh .cem-wh-title {
	display: block;
	color: var(--cem-wh-title-color);
	font-size: var(--cem-wh-title-size);
	font-weight: 600;
	line-height: 1.35;
	transition: color .25s ease;
}
a.cem-wh-card:hover .cem-wh-title,
a.cem-wh-card:focus-visible .cem-wh-title {
	color: var(--cem-wh-hover-title-color);
}

.cem-wh .cem-wh-date-inline {
	display: block;
	color: var(--cem-wh-text-color);
	font-size: var(--cem-wh-label-size);
	font-weight: 500;
}

.cem-wh .cem-wh-excerpt {
	display: block;
	color: var(--cem-wh-text-color);
	font-size: var(--cem-wh-excerpt-size);
}

.cem-wh .cem-wh-button {
	display: inline-flex;
	align-items: center;
	margin-top: auto;
	padding: 8px 14px;
	border-radius: 100px;
	background: var(--cem-wh-button-bg);
	color: var(--cem-wh-button-text);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

/* =======================================================================
 * Banner card — image | accent date panel | content
 *
 * This is the layout the client signed off on. Every region is optional: with
 * no image the card starts at the panel, with no date and no location the
 * panel is not rendered at all, and a title-only card still holds together.
 * ======================================================================= */

.cem-wh .cem-wh-card--banner {
	flex-direction: row;
	align-items: stretch;
	border: 0;
	overflow: hidden;
}

.cem-wh .cem-wh-card--banner .cem-wh-media {
	flex: 0 0 20%;
	align-self: stretch;
	position: relative;
}
/*
 * The image is taken out of flow so it contributes no intrinsic height. Card
 * height is driven by the content, and every card in a stack ends up the same
 * height regardless of whether the client supplied a landscape or a portrait
 * photo — which is exactly the failure the aspect-ratio work was for.
 */
.cem-wh .cem-wh-card--banner .cem-wh-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin-bottom: 0;
}

.cem-wh .cem-wh-panel {
	flex: 0 0 22%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--cem-wh-card-padding);
	background: var(--cem-wh-date-bg);
	color: var(--cem-wh-date-text);
}
.cem-wh .cem-wh-panel .cem-icon {
	display: inline-block;
	margin-bottom: 12px;
	opacity: .85;
}
.cem-wh .cem-wh-panel-date {
	display: block;
	margin-bottom: 4px;
	font-size: var(--cem-wh-date-size);
	font-weight: 700;
	line-height: 1.33;
	color: var(--cem-wh-date-text);
}
.cem-wh .cem-wh-panel-loc {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	opacity: .85;
}
.cem-wh .cem-wh-panel-loc .cem-icon {
	margin-bottom: 0;
}

/* Without an image the panel owns the left edge; without a panel the body does. */
.cem-wh .cem-wh-card--banner .cem-wh-media:first-child,
.cem-wh .cem-wh-card--banner .cem-wh-panel:first-child,
.cem-wh .cem-wh-card--banner .cem-wh-body:first-child {
	border-radius: var(--cem-wh-radius) 0 0 var(--cem-wh-radius);
}

.cem-wh .cem-wh-card--banner .cem-wh-body {
	flex: 1;
	justify-content: center;
	gap: 0;
	background: var(--cem-wh-card-bg);
	border: var(--cem-wh-border-width) solid var(--cem-wh-card-border);
	border-radius: 0 var(--cem-wh-radius) var(--cem-wh-radius) 0;
}
.cem-wh .cem-wh-card--banner .cem-wh-title {
	margin-bottom: 12px;
	line-height: 1.33;
	font-weight: 700;
}
.cem-wh .cem-wh-card--banner .cem-wh-label {
	margin-bottom: 16px;
}
.cem-wh .cem-wh-card--banner .cem-wh-excerpt {
	margin-bottom: 24px;
	line-height: 1.5;
}
.cem-wh .cem-wh-card--banner .cem-wh-excerpt:last-child {
	margin-bottom: 0;
}
.cem-wh .cem-wh-card--banner .cem-wh-button {
	gap: 8px;
	margin-top: 0;
	padding: 8px 16px;
	background: transparent;
	color: var(--cem-wh-title-color);
	border: 1px solid var(--cem-wh-card-border);
}
.cem-wh .cem-wh-card--banner .cem-wh-button .cem-icon {
	margin-bottom: 0;
}
a.cem-wh-card--banner:hover .cem-wh-button,
a.cem-wh-card--banner:focus-visible .cem-wh-button {
	background: var(--cem-wh-button-bg);
	color: var(--cem-wh-button-text);
	border-color: var(--cem-wh-button-bg);
}

/* Banner cards are full-width rows whatever the column count says. */
.cem-wh--banner-cards .cem-wh-grid {
	grid-template-columns: 1fr;
}

@media screen and (max-width: 690px) {
	.cem-wh .cem-wh-card--banner {
		flex-direction: column;
	}
	.cem-wh .cem-wh-card--banner .cem-wh-media,
	.cem-wh .cem-wh-card--banner .cem-wh-panel {
		flex: 0 0 auto;
	}
	.cem-wh .cem-wh-card--banner .cem-wh-media {
		height: 220px;
	}
	.cem-wh .cem-wh-card--banner .cem-wh-media:first-child,
	.cem-wh .cem-wh-card--banner .cem-wh-panel:first-child,
	.cem-wh .cem-wh-card--banner .cem-wh-body:first-child {
		border-radius: var(--cem-wh-radius) var(--cem-wh-radius) 0 0;
	}
	.cem-wh .cem-wh-card--banner .cem-wh-body {
		border-radius: 0 0 var(--cem-wh-radius) var(--cem-wh-radius);
	}
}

/* ======================= List mode ======================= */

.cem-wh--list .cem-wh-grid {
	grid-template-columns: 1fr;
}
.cem-wh--list .cem-wh-card {
	flex-direction: row;
	align-items: stretch;
}
/*
 * In list mode the media is a fixed-width rail that fills the row height, so
 * the configured aspect ratio deliberately does not apply here — it governs
 * grid and carousel, where mixed-dimension photos would otherwise break the
 * alignment.
 */
.cem-wh--list .cem-wh-media {
	width: 220px;
	flex: 0 0 220px;
	aspect-ratio: auto;
}
.cem-wh--list .cem-wh-body {
	justify-content: center;
}

@media screen and (max-width: 690px) {
	.cem-wh--list .cem-wh-card {
		flex-direction: column;
	}
	.cem-wh--list .cem-wh-media {
		width: 100%;
		flex: 0 0 auto;
	}
}

/* ======================= Carousel ======================= */

.cem-wh-carousel {
	position: relative;
}
.cem-wh .cem-wh-viewport {
	overflow: hidden;
}
.cem-wh .cem-wh-track {
	display: flex;
	gap: var(--cem-wh-gap);
	transition: transform .35s ease;
	will-change: transform;
}
.cem-wh .cem-wh-slide {
	flex: 0 0 calc((100% - (var(--cem-wh-cols-desktop) - 1) * var(--cem-wh-gap)) / var(--cem-wh-cols-desktop));
	min-width: 0;
}
@media screen and (max-width: 1000px) {
	.cem-wh .cem-wh-slide {
		flex-basis: calc((100% - (var(--cem-wh-cols-tablet) - 1) * var(--cem-wh-gap)) / var(--cem-wh-cols-tablet));
	}
}
@media screen and (max-width: 690px) {
	.cem-wh .cem-wh-slide {
		flex-basis: calc((100% - (var(--cem-wh-cols-mobile) - 1) * var(--cem-wh-gap)) / var(--cem-wh-cols-mobile));
	}
}

.cem-wh .cem-wh-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
.cem-wh .cem-wh-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d1d5db;
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}
.cem-wh .cem-wh-dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: var(--cem-wh-date-bg);
}

/* ======================= CTA ======================= */

.cem-wh .cem-wh-cta {
	margin-top: 32px;
	text-align: center;
}
.cem-wh .cem-wh-cta-link {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 100px;
	background: var(--cem-wh-button-bg);
	color: var(--cem-wh-button-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}

/* ======================= A11y ======================= */

.cem-wh .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cem-wh .cem-wh-card,
	.cem-wh .cem-wh-img,
	.cem-wh .cem-wh-track {
		transition: none;
	}
	.cem-wh--hover-zoom a.cem-wh-card:hover .cem-wh-img,
	.cem-wh--hover-lift a.cem-wh-card:hover {
		transform: none;
	}
}