/* Force Elementor's wrapper around the widget to allow card scale/shadow
   on hover to escape the widget bounds. */
.elementor-widget-perk_upcoming_events_paged,
.elementor-widget-perk_upcoming_events_paged > .elementor-widget-container,
.elementor-element-perk_upcoming_events_paged {
	overflow: visible !important;
}

.perk-upcoming-paged__heading {
	margin: 0 0 8px;
	font-family: 'alrightv2', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}

.perk-upcoming-paged {
	--perk-card-h: 180px;
	--perk-card-image-pct: 58%;
	--swiper-theme-color: #111;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 16px;
	width: 100%;
	padding: 16px 0 8px;
	box-sizing: border-box;
}

.perk-upcoming-paged > .perk-paged-nav--prev {
	grid-column: 1;
	grid-row: 1;
}
.perk-upcoming-paged > .perk-upcoming-paged__swiper {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	width: 100%;
	/* Horizontal padding gives the hover-scaled first/last cards room to grow
	   before they hit the overflow clip boundary. Swiper computes slide widths
	   from the content-box, so slides are sized to fit inside this padding. */
	padding: 0 12px;
	overflow: hidden;
}
.perk-upcoming-paged > .perk-paged-nav--next {
	grid-column: 3;
	grid-row: 1;
}
.perk-upcoming-paged > .perk-upcoming-paged__pagination {
	grid-column: 1 / -1;
	grid-row: 2;
	justify-self: center;
	position: static !important;
	width: auto !important;
	left: auto !important;
	bottom: auto !important;
	transform: none !important;
}

.perk-upcoming-paged__swiper .swiper-wrapper {
	align-items: stretch;
	padding: 8px 0 12px;
	box-sizing: border-box;
}

.perk-upcoming-paged__slide {
	height: auto;
	box-sizing: border-box;
}

/* Slide cap + wrapper centering only when Swiper is locked (no scrolling
   needed at the current breakpoint). The JS toggles `.is-locked` on the
   swiper element based on swiper.isLocked. Applying these unconditionally
   breaks Swiper's translation math: Swiper computes page offsets from
   its internal slide width (set inline), so if CSS shrinks the rendered
   slide width, paging over-shoots by the difference. */
.perk-upcoming-paged__swiper.is-locked .swiper-wrapper {
	justify-content: center;
}

.perk-upcoming-paged__swiper.is-locked .swiper-slide {
	max-width: 280px !important;
}

/* Card — width fills the slide (Swiper sizes the slide from slidesPerView)
   but caps at 280px and centers within the slide. This prevents cards from
   getting absurdly wide when there are fewer events than per-view slots
   (e.g. 2 events on a desktop where per_view_desktop = 5 → slide is 1/5
   of the container but the card stays at 280px, centered).
   Height comes from the var set per widget instance. */
.perk-upcoming-paged .perk-event-card {
	display: flex;
	flex-direction: column;
	width: 100% !important;
	max-width: 280px !important;
	margin-inline: auto !important;
	height: var(--perk-card-h);
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 4px 10px rgba(0, 0, 0, 0.07),
		0 10px 20px rgba(0, 0, 0, 0.04);
	text-decoration: none;
	color: inherit;
	transform-origin: center center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

.perk-upcoming-paged .perk-event-card:focus-visible {
	transform: scale(1.04);
	box-shadow:
		0 2px 4px rgba(0, 0, 0, 0.06),
		0 8px 18px rgba(0, 0, 0, 0.10),
		0 18px 36px rgba(0, 0, 0, 0.07);
	z-index: 2;
	position: relative;
}

/* Scope :hover to devices that actually have hover (mouse pointers).
   On touchscreens, :hover sticks until the next tap, leaving the
   previously-tapped card scaled — and its edge peeking past the clip
   boundary after the user swipes to the next page. */
@media (hover: hover) {
	.perk-upcoming-paged .perk-event-card:hover {
		transform: scale(1.04);
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.06),
			0 8px 18px rgba(0, 0, 0, 0.10),
			0 18px 36px rgba(0, 0, 0, 0.07);
		z-index: 2;
		position: relative;
	}
}

.perk-upcoming-paged .perk-event-card__image {
	position: relative;
	width: 100%;
	flex: 0 0 var(--perk-card-image-pct);
	overflow: hidden;
	background-color: #f0f0f0;
}

.perk-upcoming-paged .perk-event-card__img,
.perk-upcoming-paged .perk-event-card__image img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
}

.perk-upcoming-paged .perk-event-card__image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eee 25%, #f6f6f6 50%, #eee 75%);
}

.perk-upcoming-paged .perk-event-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 10px;
	padding-bottom: 8px;
	padding-inline: 10px;
	gap: 3px;
	min-height: 0;
	overflow: hidden;
}

.perk-upcoming-paged .perk-event-card__title {
	margin: 0;
	font-family: 'alrightv2', sans-serif !important;
	font-size: 14px;
	font-weight: 700;
	color: #000;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.perk-upcoming-paged .perk-event-card__meta {
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	color: #000;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---- Navigation arrows: plain white chevrons, no chrome ----
   These rules override the Swiper-bundle defaults that get applied
   once Swiper init adds `.swiper-button-prev` / `.swiper-button-next`
   onto our buttons (absolute positioning, chevron ::after, etc.). */

.perk-upcoming-paged .perk-paged-nav::after,
.perk-upcoming-paged .perk-paged-nav::before,
.perk-upcoming-paged .perk-paged-nav.swiper-button-prev::after,
.perk-upcoming-paged .perk-paged-nav.swiper-button-next::after {
	content: none !important;
	display: none !important;
	background-image: none !important;
}

.perk-upcoming-paged .perk-paged-nav,
.perk-upcoming-paged .perk-paged-nav.swiper-button-prev,
.perk-upcoming-paged .perk-paged-nav.swiper-button-next {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: none;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	width: 24px !important;
	height: 44px !important;
	min-width: 24px !important;
	min-height: 44px !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-size: 0 !important;
	z-index: 1 !important;
	transition: transform 0.2s ease, opacity 0.2s ease !important;
}

.perk-upcoming-paged .perk-paged-nav svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: currentColor;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

@media (hover: hover) {
	.perk-upcoming-paged .perk-paged-nav:hover {
		background: transparent !important;
		box-shadow: none !important;
		transform: scale(1.15) !important;
	}
}

.perk-upcoming-paged .perk-paged-nav:active {
	transform: scale(0.92) !important;
}

/* Hide arrows entirely when there's nowhere to scroll */
.perk-upcoming-paged .perk-paged-nav.swiper-button-disabled,
.perk-upcoming-paged .perk-paged-nav.swiper-button-lock {
	opacity: 0 !important;
	pointer-events: none !important;
	visibility: hidden !important;
}

/* ---- Bullet pagination ---- */

.perk-upcoming-paged__pagination {
	display: flex;
	gap: 8px;
	align-items: center;
}

.perk-upcoming-paged__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: #999;
	opacity: 0.5;
	margin: 0 !important;
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.perk-upcoming-paged__pagination .swiper-pagination-bullet-active {
	background: #111;
	opacity: 1;
	transform: scale(1.25);
}

/* Hide pagination when there's only one page */
.perk-upcoming-paged__pagination.swiper-pagination-lock {
	display: none;
}

.perk-events-empty {
	padding: 24px;
	text-align: center;
	opacity: 0.7;
}

@media (max-width: 640px) {
	.perk-upcoming-paged {
		column-gap: 4px;
	}
	.perk-upcoming-paged .perk-paged-nav,
	.perk-upcoming-paged .perk-paged-nav.swiper-button-prev,
	.perk-upcoming-paged .perk-paged-nav.swiper-button-next {
		width: 22px !important;
		min-width: 22px !important;
	}
	.perk-upcoming-paged .perk-paged-nav svg {
		width: 20px;
		height: 20px;
	}
}