/* =============================================================
 * DMEC Upcoming Events — section-shell layout.
 *
 * Card chrome is owned by `_card-event.scss` (canonical
 * `.dmec-card-event` rules built around Figma node 174:9729).
 * This file is intentionally narrow: list reset, vertical
 * stack with consistent gap, max-width pinning, and the
 * pagination strip for paginate="true" instances.
 *
 * Scoped to redesign-active body classes so that:
 *   - it cannot leak into legacy pages while the rollout is
 *     still partial;
 *   - it stomps Blocksy's `ul { padding-left: ... }` baseline
 *     via specificity rather than `!important`.
 * ============================================================= */

body.dmec-redesign-active .dmec-upcoming-events,
body.dmec-header-redesign-active .dmec-upcoming-events {
	display: block;
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
	padding: 0;
}

body.dmec-redesign-active .dmec-upcoming-events__list,
body.dmec-header-redesign-active .dmec-upcoming-events__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.dmec-redesign-active .dmec-upcoming-events__list-item,
body.dmec-header-redesign-active .dmec-upcoming-events__list-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The card body is already a flex anchor (.dmec-card-event), but
 * Blocksy's <a> baseline applies a default underline-on-hover that
 * fights the title's hover color shift inside the card. Suppress
 * the underline on the outer card link so only the title color
 * shifts on hover (per `_card-event.scss` line 102+). */
body.dmec-redesign-active .dmec-upcoming-events__list-item .dmec-card-event,
body.dmec-header-redesign-active .dmec-upcoming-events__list-item .dmec-card-event {
	text-decoration: none;
}

/* Pagination strip — only present when paginate="true".
 * Canonical redesign pagination: 40×40 controls, blue interaction
 * states, square 4px radius, and 8px spacing. */
body.dmec-redesign-active .dmec-upcoming-events__pagination,
body.dmec-header-redesign-active .dmec-upcoming-events__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
	font-family: var( --dmec-font-family-body );
}

body.dmec-redesign-active .dmec-upcoming-events__pagination .page-numbers,
body.dmec-header-redesign-active .dmec-upcoming-events__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var( --dmec-primary-600 );
	border-radius: 4px;
	background: var( --dmec-white );
	color: var( --dmec-primary-700 );
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

body.dmec-redesign-active .dmec-upcoming-events__pagination .page-numbers:hover,
body.dmec-header-redesign-active .dmec-upcoming-events__pagination .page-numbers:hover {
	border-color: var( --dmec-primary-800 );
	background: var( --dmec-primary-100 );
	color: var( --dmec-primary-800 );
}

body.dmec-redesign-active .dmec-upcoming-events__pagination .page-numbers:focus-visible,
body.dmec-header-redesign-active .dmec-upcoming-events__pagination .page-numbers:focus-visible {
	outline: 4px solid var( --dmec-color-focus-ring-strong );
	outline-offset: 2px;
}

body.dmec-redesign-active .dmec-upcoming-events__pagination .page-numbers.current,
body.dmec-header-redesign-active .dmec-upcoming-events__pagination .page-numbers.current {
	border-color: var( --dmec-primary-700 );
	background: var( --dmec-primary-700 );
	color: var( --dmec-white );
	pointer-events: none;
}

body.dmec-redesign-active .dmec-upcoming-events__pagination .page-numbers.dots,
body.dmec-header-redesign-active .dmec-upcoming-events__pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var( --dmec-neutral-warm-700 );
	pointer-events: none;
}

/* ------------------------------------------------------------
 * Mobile (≤767px): tighten gap so cards stack closer together
 * once they're stretched to full viewport width.
 * ------------------------------------------------------------ */
@media (max-width: 767px) {
	body.dmec-redesign-active .dmec-upcoming-events__list,
	body.dmec-header-redesign-active .dmec-upcoming-events__list {
		gap: 12px;
	}

	body.dmec-redesign-active .dmec-upcoming-events__pagination,
	body.dmec-header-redesign-active .dmec-upcoming-events__pagination {
		margin-top: 24px;
	}
}

/* ------------------------------------------------------------
 * In-place pagination: brief dim while the next page is fetched.
 * The swap is fast enough that a spinner would flash more than it
 * would inform, so this is deliberately just a fade + input lock.
 * ------------------------------------------------------------ */
body.dmec-redesign-active .dmec-upcoming-events.is-loading,
body.dmec-header-redesign-active .dmec-upcoming-events.is-loading {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	body.dmec-redesign-active .dmec-upcoming-events.is-loading,
	body.dmec-header-redesign-active .dmec-upcoming-events.is-loading {
		transition: none;
	}
}