/**
 * Upcoming-event rows: a white card per event, date block on the left,
 * title and location on the right, with an arrow that pages the list.
 *
 * Selectors are scoped under .hpe-events / .hpe-events-wrap so they outrank
 * the theme's .elementor-widget-container h3 / p rules without !important.
 */

.hpe-events-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* a real scrolling window; height is measured and set by the script */
.hpe-events-wrap .hpe-events__viewport {
	width: 100%;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.hpe-events-wrap .hpe-events__viewport::-webkit-scrollbar { display: none; }

.hpe-events-wrap.is-paged .hpe-event { scroll-snap-align: start; }

/* the next row dissolves across its own full height on an eased curve - no
   step at its top edge, nothing cut mid-card, and it reaches clear before
   the bottom so the last few pixels never read as a hard line */
.hpe-events-wrap.has-peek .hpe-events__viewport {
	-webkit-mask-image: linear-gradient(to bottom,
		#000                calc(100% - var(--hpe-ghost, 80px)),
		rgba(0, 0, 0, 0.82) calc(100% - var(--hpe-ghost, 80px) * 0.78),
		rgba(0, 0, 0, 0.50) calc(100% - var(--hpe-ghost, 80px) * 0.50),
		rgba(0, 0, 0, 0.18) calc(100% - var(--hpe-ghost, 80px) * 0.24),
		transparent          calc(100% - 4px));
	mask-image: linear-gradient(to bottom,
		#000                calc(100% - var(--hpe-ghost, 80px)),
		rgba(0, 0, 0, 0.82) calc(100% - var(--hpe-ghost, 80px) * 0.78),
		rgba(0, 0, 0, 0.50) calc(100% - var(--hpe-ghost, 80px) * 0.50),
		rgba(0, 0, 0, 0.18) calc(100% - var(--hpe-ghost, 80px) * 0.24),
		transparent          calc(100% - 4px));
}

.hpe-events {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.hpe-events__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.hpe-events .hpe-event {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: 10px;
	padding: 9px 20px;
	margin: 0;
}

/* ---------- date block ---------- */

.hpe-events .hpe-event__date {
	flex: 0 0 54px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	text-align: center;
	line-height: 1;
	border-right: 1px solid #D8E0E0;
	padding-right: 16px;
}

.hpe-events .hpe-event__month,
.hpe-events .hpe-event__weekday {
	font-family: Inter, sans-serif;
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #156082;
}

.hpe-events .hpe-event__day {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 1.8vw, 26px);
	line-height: 1;
	letter-spacing: -0.02em;
	color: #004C6D;
	margin: 3px 0 4px;
}

/* ---------- body ---------- */

.hpe-events .hpe-event__body {
	min-width: 0;
	flex: 1 1 auto;
}

.hpe-events .hpe-event__title {
	font-family: Inter, sans-serif;
	font-weight: 700;
	font-size: clamp(14px, 1.12vw, 16.5px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #004C6D;
	margin: 0 0 3px;
	text-wrap: balance;
}

.hpe-events .hpe-event__title a {
	color: inherit;
	text-decoration: none;
}

.hpe-events .hpe-event__title a:hover,
.hpe-events .hpe-event__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hpe-events .hpe-event__location {
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: Inter, sans-serif;
	font-weight: 400;
	font-size: clamp(12px, 0.92vw, 13.5px);
	line-height: 1.35;
	color: #55696B;
	margin: 0;
}

.hpe-events .hpe-event__location svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	fill: none;
	stroke: #156082;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- pager ---------- */

.hpe-events-wrap .hpe-events__nav {
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.hpe-events-wrap .hpe-events__nav[hidden] {
	display: none;
}

/* the page position is announced, not drawn */
.hpe-events-wrap .hpe-events__count {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Bare icon, no chrome. The theme paints .elementor-kit-4 button:hover with an
   accent colour (0,2,1), so these carry a tag to outrank it without !important. */
.hpe-events-wrap button.hpe-events__more,
.hpe-events-wrap button.hpe-events__more:hover,
.hpe-events-wrap button.hpe-events__more:focus,
.hpe-events-wrap button.hpe-events__more:active {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.hpe-events-wrap button.hpe-events__more {
	flex: 0 0 auto;
	/* transparent padding keeps a comfortable tap target around the glyph */
	padding: 8px 14px;
	line-height: 0;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.hpe-events-wrap button.hpe-events__more:hover {
	transform: translateY(3px);
	opacity: 0.8;
}

/* a slow bob on the glyph, the conventional "there is more, scroll" cue */
@keyframes hpe-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

.hpe-events-wrap button.hpe-events__more svg {
	animation: hpe-bob 1.8s ease-in-out infinite;
	transition: transform 0.35s ease;
}

/* at the end the arrow points back up and stops bobbing */
.hpe-events-wrap.is-at-end button.hpe-events__more svg {
	animation: none;
	transform: rotate(180deg);
}

/* keyboard focus still needs a visible indicator */
.hpe-events-wrap button.hpe-events__more:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 4px;
}

.hpe-events-wrap .hpe-events__more svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	/* keeps the glyph legible where it crosses the white row */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18));
}

@media (prefers-reduced-motion: reduce) {

	.hpe-events-wrap .hpe-events__more {
		transition: none;
	}

	.hpe-events-wrap .hpe-events__more:hover {
		transform: none;
	}
}

.hpe-events__empty {
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: #fff;
	margin: 0;
}

/* ---------- narrow screens ---------- */

@media (max-width: 767px) {

	.hpe-events .hpe-event {
		gap: 14px;
		padding: 11px 16px;
	}

	.hpe-events .hpe-event__date {
		flex-basis: 48px;
		padding-right: 14px;
	}
}