/**
 * NRPC Events front end.
 *
 * Design note
 * -----------
 * These events are speaker addresses: the post title is a person's name, the
 * subtitle is their topic. So the component is set like a press club bill
 * rather than a calendar. The speaker's name is the headline, in Lora, and the
 * date and venue sit above it as a dateline: the line that opens a wire story,
 * set in Poppins with wide tracking over a terracotta rule.
 *
 * Tokens are the NRPC brand values carried over from the previous build. They
 * are custom properties so the Astra customiser or an Elementor global class
 * can override them without touching this file. Fonts are inherited, so Lora
 * and Poppins arrive from the Global Kit.
 */

.nrpc-ev-wrap,
.nrpc-ev-empty,
.nrpc-ev-single-meta {
	--nrpc-accent: #d45730;
	--nrpc-accent-dark: #b8471f;
	--nrpc-navy: #03416e;
	--nrpc-ink: #1b1d1f;
	--nrpc-paper: #fff;
	--nrpc-paper-alt: #f7f7f7;
	--nrpc-rule: #eaeaea;
	--nrpc-muted: #777;
	--nrpc-radius: 16px;
	--nrpc-gap: 32px;
	--nrpc-pad: clamp(24px, 3vw, 40px);
}

.nrpc-ev-heading {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	line-height: 1.15;
}

/* --- layout ----------------------------------------------------------- */

.nrpc-ev-wrap {
	display: grid;
	gap: var(--nrpc-gap);
}

.nrpc-ev-grid,
.nrpc-ev-cards {
	grid-template-columns: repeat(var(--nrpc-cols, 3), minmax(0, 1fr));
}

.nrpc-ev-cols-1 { --nrpc-cols: 1; }
.nrpc-ev-cols-2 { --nrpc-cols: 2; }
.nrpc-ev-cols-3 { --nrpc-cols: 3; }
.nrpc-ev-cols-4 { --nrpc-cols: 4; }

@media (max-width: 1024px) {
	.nrpc-ev-grid,
	.nrpc-ev-cards { --nrpc-cols: 2; }
}

@media (max-width: 680px) {
	.nrpc-ev-grid,
	.nrpc-ev-cards { --nrpc-cols: 1; }
}

/* --- item shell ------------------------------------------------------- */

.nrpc-ev-item {
	position: relative;
	overflow: hidden;
	background: var(--nrpc-paper);
	border-radius: var(--nrpc-radius);
	box-shadow: 0 0 0 1px var(--nrpc-rule);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.nrpc-ev-item:hover {
	box-shadow:
		0 0 0 1px rgba(212, 87, 48, 0.28),
		0 28px 50px -32px rgba(0, 0, 0, 0.4);
	transform: translateY(-2px);
}

.nrpc-ev-list .nrpc-ev-item {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	align-items: stretch;
}

.nrpc-ev-list .nrpc-ev-item.has-no-image {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 780px) {
	.nrpc-ev-list .nrpc-ev-item {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- image ------------------------------------------------------------ */

.nrpc-ev-thumb {
	display: block;
	overflow: hidden;
	background: var(--nrpc-paper-alt);
}

.nrpc-ev-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.nrpc-ev-item:hover .nrpc-ev-thumb img {
	transform: scale(1.04);
}

.nrpc-ev-grid .nrpc-ev-thumb img,
.nrpc-ev-cards .nrpc-ev-thumb img {
	aspect-ratio: 3 / 2;
	min-height: 0;
}

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

.nrpc-ev-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--nrpc-pad);
}

/* --- the dateline ----------------------------------------------------- */

.nrpc-ev-dateline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: flex-start;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0 0 13px;
	border-bottom: 2px solid var(--nrpc-accent);
	color: var(--nrpc-accent);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.nrpc-ev-dateline time {
	white-space: nowrap;
}

.nrpc-ev-sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

.nrpc-ev-place {
	color: var(--nrpc-muted);
	font-weight: 500;
	letter-spacing: 0.1em;
}

.nrpc-ev-flag {
	padding: 3px 9px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--nrpc-muted);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
}

/* --- speaker name ----------------------------------------------------- */

.nrpc-ev-name {
	margin: 0 0 0.4rem;
	font-size: clamp(1.35rem, 2.1vw, 1.95rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.nrpc-ev-name a {
	background-image: linear-gradient(var(--nrpc-accent), var(--nrpc-accent));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 2px;
	color: var(--nrpc-ink);
	text-decoration: none;
	transition: background-size 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.25s ease;
}

.nrpc-ev-item:hover .nrpc-ev-name a,
.nrpc-ev-name a:focus-visible {
	background-size: 100% 2px;
}

.nrpc-ev-grid .nrpc-ev-name,
.nrpc-ev-cards .nrpc-ev-name {
	font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}

/* --- copy ------------------------------------------------------------- */

.nrpc-ev-standfirst {
	margin: 0 0 0.85rem;
	color: var(--nrpc-navy);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.45;
}

.nrpc-ev-runtime {
	margin: 0 0 0.75rem;
	color: var(--nrpc-muted);
	font-size: 0.85rem;
}

.nrpc-ev-excerpt {
	margin: 0 0 1.4rem;
	color: #444;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* --- actions ---------------------------------------------------------- */

.nrpc-ev-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	align-items: center;
	margin: auto 0 0;
	padding-top: 4px;
}

.nrpc-ev-btn {
	display: inline-block;
	padding: 13px 26px;
	background: var(--nrpc-accent);
	border-radius: 6px;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.25s ease, transform 0.25s ease;
}

.nrpc-ev-btn:hover,
.nrpc-ev-btn:focus-visible {
	background: var(--nrpc-accent-dark);
	color: #fff;
	transform: translateY(-1px);
}

.nrpc-ev-more {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	color: var(--nrpc-navy);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.nrpc-ev-more span {
	transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.nrpc-ev-more:hover,
.nrpc-ev-more:focus-visible {
	color: var(--nrpc-accent);
}

.nrpc-ev-more:hover span {
	transform: translateX(4px);
}

/* --- past events: present, not promoted ------------------------------- */

.nrpc-ev-item.is-past {
	background: var(--nrpc-paper-alt);
}

.nrpc-ev-item.is-past .nrpc-ev-dateline {
	border-bottom-color: var(--nrpc-rule);
	color: var(--nrpc-muted);
}

.nrpc-ev-item.is-past .nrpc-ev-thumb img {
	filter: saturate(0.35);
	opacity: 0.85;
	transition: filter 0.5s ease, opacity 0.5s ease,
		transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.nrpc-ev-item.is-past:hover .nrpc-ev-thumb img {
	filter: saturate(1);
	opacity: 1;
}

.nrpc-ev-item.is-past .nrpc-ev-name a {
	color: #3a3d40;
}

/* --- single event ----------------------------------------------------- */

.nrpc-ev-single-meta {
	margin: 0 0 2.5rem;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--nrpc-accent);
}

.nrpc-ev-single-meta .nrpc-ev-subtitle {
	margin: 0 0 0.5rem;
	color: var(--nrpc-navy);
	font-size: 1.1rem;
	font-weight: 500;
}

.nrpc-ev-single-meta .nrpc-ev-when {
	margin: 0 0 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nrpc-ev-single-meta .nrpc-ev-venue {
	margin: 0 0 1.25rem;
	color: var(--nrpc-muted);
	font-size: 0.9rem;
}

.nrpc-ev-badge-past {
	color: var(--nrpc-muted);
	font-size: 0.9rem;
	font-style: italic;
}

/* --- empty state ------------------------------------------------------ */

.nrpc-ev-empty {
	padding: clamp(32px, 5vw, 56px);
	background: var(--nrpc-paper-alt);
	border-radius: var(--nrpc-radius);
	border-top: 2px solid var(--nrpc-accent);
}

.nrpc-ev-empty-eyebrow {
	margin: 0 0 0.6rem;
	color: var(--nrpc-accent);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.nrpc-ev-empty-msg {
	max-width: 46ch;
	margin: 0;
	color: #444;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.5;
}

/* --- accessibility ---------------------------------------------------- */

.nrpc-ev-item a:focus-visible,
.nrpc-ev-empty a:focus-visible {
	outline: 2px solid var(--nrpc-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- small screens ---------------------------------------------------- */

/* Long speaker names and venue strings must never push the card wider than
   the viewport. "National Press Club, National Circuit Barton" set in caps
   with wide tracking is the worst case here. */
.nrpc-ev-name,
.nrpc-ev-standfirst,
.nrpc-ev-excerpt,
.nrpc-ev-place,
.nrpc-ev-empty-msg {
	overflow-wrap: break-word;
	word-break: break-word;
}

@media (max-width: 600px) {
	.nrpc-ev-wrap {
		--nrpc-gap: 20px;
	}

	/* Stacked list images match the grid crop instead of a tall slab. */
	.nrpc-ev-list .nrpc-ev-thumb img {
		aspect-ratio: 3 / 2;
		min-height: 0;
	}

	.nrpc-ev-dateline {
		gap: 6px 8px;
		font-size: 0.65rem;
		letter-spacing: 0.1em;
	}

	.nrpc-ev-dateline time {
		white-space: normal;
	}

	/* Full-width tap targets. Two inline actions crowd badly under ~380px. */
	.nrpc-ev-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.nrpc-ev-btn {
		padding: 14px 20px;
		text-align: center;
	}

	.nrpc-ev-more {
		justify-content: flex-start;
	}
}

@media (max-width: 380px) {
	.nrpc-ev-wrap,
	.nrpc-ev-empty,
	.nrpc-ev-single-meta {
		--nrpc-pad: 20px;
		--nrpc-radius: 12px;
	}

	.nrpc-ev-flag {
		display: none;
	}

	.nrpc-ev-single-meta {
		padding-left: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nrpc-ev-item,
	.nrpc-ev-item:hover,
	.nrpc-ev-thumb img,
	.nrpc-ev-item:hover .nrpc-ev-thumb img,
	.nrpc-ev-name a,
	.nrpc-ev-more span,
	.nrpc-ev-btn {
		transform: none;
		transition: none;
	}
}

/* --- upcoming events ticker ------------------------------------------- */

.nrpc-tick {
	--nrpc-accent: #d45730;
	--nrpc-accent-dark: #b8471f;
	--nrpc-tick-speed: 44s;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	width: 100%;
	background: var(--nrpc-accent);
	color: #fff;
}

.nrpc-tick-label {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	padding: 14px 20px;
	background: var(--nrpc-accent-dark);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.nrpc-tick-window {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

/* Fade the right edge so items leave rather than being chopped. */
.nrpc-tick-window::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 48px;
	background: linear-gradient(to right, rgba(212, 87, 48, 0), #d45730);
	pointer-events: none;
}

.nrpc-tick-track {
	display: flex;
	align-items: center;
	width: max-content;
	min-height: 44px;
}

.is-scrolling .nrpc-tick-track {
	animation: nrpc-tick-scroll var(--nrpc-tick-speed) linear infinite;
}

.nrpc-tick:hover .nrpc-tick-track,
.nrpc-tick:focus-within .nrpc-tick-track {
	animation-play-state: paused;
}

@keyframes nrpc-tick-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.nrpc-tick-run {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 26px;
	padding: 0 13px;
}

.nrpc-tick-item {
	display: inline-flex;
	gap: 10px;
	align-items: baseline;
	color: #fff;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}

a.nrpc-tick-item:hover .nrpc-tick-title,
a.nrpc-tick-item:focus-visible .nrpc-tick-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nrpc-tick-date {
	color: #fbe3da;
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.nrpc-tick-dot {
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
}

@media (max-width: 600px) {
	.nrpc-tick-label {
		padding: 12px 14px;
		font-size: 0.62rem;
		letter-spacing: 0.12em;
	}

	.nrpc-tick-item {
		font-size: 0.78rem;
	}

	.nrpc-tick-window::after {
		width: 28px;
	}
}

/* Motion off: stop the loop and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
	.is-scrolling .nrpc-tick-track {
		animation: none;
	}

	.nrpc-tick-window {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.nrpc-tick-window::-webkit-scrollbar {
		display: none;
	}

	.nrpc-tick-track > .nrpc-tick-run[aria-hidden="true"] {
		display: none;
	}
}

/* --- grouped lists (month or year headings) ---------------------------- */

/* When grouped, the wrap becomes a plain stack and each group carries the
   grid, so month headings sit full width between the rows. */
.nrpc-ev-wrap.is-grouped {
	display: block;
}

.nrpc-ev-groupname {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 18px;
	color: var(--nrpc-ink, #1b1d1f);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
}

.nrpc-ev-groupname::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--nrpc-rule, #eaeaea);
}

.nrpc-ev-wrap.is-grouped .nrpc-ev-groupname + .nrpc-ev-group {
	margin-bottom: 44px;
}

.nrpc-ev-wrap.is-grouped .nrpc-ev-group:last-child {
	margin-bottom: 0;
}

.nrpc-ev-group {
	display: grid;
	gap: var(--nrpc-gap, 32px);
}

.nrpc-ev-grid .nrpc-ev-group,
.nrpc-ev-cards .nrpc-ev-group {
	grid-template-columns: repeat(var(--nrpc-cols, 3), minmax(0, 1fr));
}

@media (max-width: 600px) {
	.nrpc-ev-groupname {
		gap: 12px;
		margin-bottom: 14px;
		font-size: 0.66rem;
		letter-spacing: 0.14em;
	}

	.nrpc-ev-wrap.is-grouped .nrpc-ev-groupname + .nrpc-ev-group {
		margin-bottom: 32px;
	}
}