/* =========================================================================
   CSP Cards — shared event/activity card listing (home, events page, archive).
   Brand: Oswald titles, Fjalla One labels, Open Sans text, red #ED1C24 + signature offset shadow.
   ========================================================================= */
.cspc {
	--red: var(--e-global-color-primary, #ed1c24);
	--red-d: var(--e-global-color-ad04950, #ba0f2f);
	--ink: #25282a;
	--card: #fff;
	--card-text: var(--ink);
	--shadow: var(--red);
	--chip-bg: var(--red);
	--display: "Oswald", sans-serif;
	--label: "Fjalla One", sans-serif;
	--text: "Open Sans", sans-serif;
	--gutter: 16px;
	--ease: cubic-bezier(.22, .61, .36, 1);
	position: relative;
	width: 100%;
	font-family: var(--text);
	color: #fff;
}
.cspc--dark { --card: #1b1d20; --card-text: #fff; }
.cspc--light { --card: #fff; --card-text: var(--ink); --shadow: var(--ink); color: var(--ink); }
.cspc *, .cspc *::before, .cspc *::after { box-sizing: border-box; }
.cspc .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Filters ---------- */
.cspc .cspc-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 var(--gutter) 22px; }
.cspc button.cspc-filter {
	-webkit-appearance: none !important; appearance: none !important;
	display: inline-flex !important; align-items: center; gap: 8px;
	min-height: 44px; margin: 0 !important; padding: 0 18px !important;
	border: 2px solid currentColor !important; border-radius: 999px !important;
	background: transparent !important; color: inherit !important; box-shadow: none !important;
	font-family: var(--label) !important; font-size: 15px !important; font-weight: 400 !important;
	letter-spacing: .1em !important; text-transform: uppercase !important; line-height: 1 !important;
	cursor: pointer; transition: background-color .2s, color .2s;
}
.cspc button.cspc-filter:hover { background: rgba(255, 255, 255, .14) !important; }
.cspc button.cspc-filter[aria-pressed="true"] { background: #fff !important; border-color: #fff !important; color: var(--ink) !important; }
.cspc--light button.cspc-filter:hover { background: rgba(37, 40, 42, .08) !important; }
.cspc--light button.cspc-filter[aria-pressed="true"] { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }
.cspc .cspc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 22px; background: rgba(255, 255, 255, .22); font-size: 12px; letter-spacing: 0; }
.cspc button.cspc-filter[aria-pressed="true"] .cspc-count { background: var(--red); color: #fff; }

/* ---------- Card ---------- */
.cspc .cspc-card {
	position: relative; display: flex; flex-direction: column;
	min-width: 0; height: 100%;
	background: var(--card); color: var(--card-text);
	box-shadow: 6px 6px 0 0 var(--shadow);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cspc .cspc-card[hidden] { display: none !important; }
.cspc .cspc-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 0 var(--shadow); }
.cspc .cspc-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #111; }
.cspc .cspc-img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .6s var(--ease); }
.cspc .cspc-img--empty { background: linear-gradient(135deg, #25282a, #0b0c0d); }
.cspc .cspc-card:hover .cspc-img { transform: scale(1.04); }
.cspc .cspc-chip {
	align-self: flex-start; max-width: 100%; margin: 0 0 10px;
	padding: 5px 9px; background: var(--chip-bg); color: #fff;
	font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.15;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Wide banners (no square visual): shown whole over a blurred fill, never cropped. */
.cspc .cspc-media--wide::before { content: ""; position: absolute; inset: -20%; background: var(--fill) center / cover; filter: blur(24px) saturate(1.3); opacity: .85; }
.cspc .cspc-media--wide .cspc-img { position: relative; object-fit: contain; }
.cspc .cspc-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 16px 18px; }
.cspc .cspc-when { margin: 0 0 6px; font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.cspc--dark .cspc-when { color: #ff5a60; }
.cspc h3.cspc-title {
	margin: 0 0 16px; font-family: var(--display) !important; font-weight: 700 !important;
	font-size: clamp(20px, 1.7vw, 24px) !important; line-height: 1.08 !important; text-transform: uppercase; letter-spacing: 0;
	color: var(--card-text) !important; text-wrap: pretty;
}
.cspc .cspc-title a { color: inherit !important; text-decoration: none !important; }
.cspc .cspc-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Whole card is clickable. */
.cspc .cspc-actions { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; }
.cspc .cspc-btn {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	background: var(--red); color: #fff !important; text-decoration: none !important;
	font-family: var(--label); font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
	box-shadow: 4px 4px 0 0 var(--ink);
	transition: background-color .2s, box-shadow .2s var(--ease);
}
.cspc--dark .cspc-btn { box-shadow: 4px 4px 0 0 #fff; }
.cspc .cspc-btn:hover { background: var(--red-d); box-shadow: 6px 6px 0 0 var(--ink); }
.cspc .cspc-more {
	display: inline-flex; align-items: center; min-height: 44px;
	font-family: var(--label); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--card-text) !important; text-decoration: underline !important; text-decoration-color: var(--red) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px;
}
.cspc a:focus-visible, .cspc button:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; box-shadow: 0 0 0 6px var(--ink) !important; }
.cspc--light a:focus-visible, .cspc--light button:focus-visible { outline-color: var(--ink) !important; box-shadow: 0 0 0 6px #fff !important; }

/* ---------- Carousel ---------- */
.cspc--carousel .cspc-track {
	display: flex; gap: 22px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
	padding: 4px var(--gutter) 14px; scroll-padding: 0 var(--gutter);
	scrollbar-width: none; outline: none;
}
.cspc--carousel .cspc-track::-webkit-scrollbar { display: none; }
.cspc--carousel .cspc-card { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; height: auto; }
.cspc--carousel .cspc-track::after { content: ""; flex: 0 0 1px; } /* Room for the last card's shadow. */
.cspc .cspc-nav { display: none; }

/* ---------- Grid ---------- */
.cspc--grid .cspc-track { display: grid; grid-template-columns: 1fr; gap: 26px 22px; padding: 0 var(--gutter); }

.cspc .cspc-all { margin: 18px var(--gutter) 0; text-align: center; }
.cspc .cspc-all a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--label); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 6px; }
.cspc .cspc-pages { display: flex; justify-content: center; gap: 6px; margin: 30px var(--gutter) 0; font-family: var(--label); }
.cspc .cspc-pages .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 2px solid currentColor; color: inherit; text-decoration: none; }
.cspc .cspc-pages .current { background: var(--red); border-color: var(--red); color: #fff; }
.cspc-empty { margin: 0; padding: 24px 16px; text-align: center; font-family: "Fjalla One", sans-serif; letter-spacing: .06em; text-transform: uppercase; }

@media (min-width: 600px) {
	.cspc--grid .cspc-track { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
	.cspc--carousel .cspc-card { flex-basis: calc((100% - 22px) / 2.2); }
}
@media (min-width: 1024px) {
	.cspc { --gutter: 0px; }
	.cspc--carousel .cspc-track { padding-left: 4px; padding-right: 4px; }
	.cspc--carousel .cspc-card { flex-basis: calc((100% - 3 * 22px) / 4); }
	.cspc--carousel .cspc-nav { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
	.cspc button.cspc-arrow {
		-webkit-appearance: none !important; display: inline-flex !important; align-items: center; justify-content: center;
		width: 48px; height: 48px; margin: 0 !important; padding: 0 !important; border: 2px solid currentColor !important; border-radius: 50% !important;
		background: transparent !important; color: inherit !important; box-shadow: none !important; cursor: pointer; transition: background-color .2s, opacity .2s;
	}
	.cspc button.cspc-arrow:hover { background: rgba(255, 255, 255, .16) !important; }
	.cspc button.cspc-arrow:disabled { opacity: .35; cursor: default; }
	.cspc .cspc-arrow svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
	.cspc *, .cspc *::before, .cspc *::after { transition-duration: .01ms !important; }
	.cspc .cspc-track { scroll-behavior: auto; }
	.cspc .cspc-card:hover, .cspc .cspc-card:hover .cspc-img { transform: none; }
}

/* Phones: filters stay on one swipeable row. */
@media (max-width: 599px) {
	.cspc .cspc-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: 0; margin-right: 0; padding: 2px var(--gutter) 4px; gap: 6px; }
	.cspc .cspc-filters::-webkit-scrollbar { display: none; }
	.cspc button.cspc-filter { flex: 0 0 auto; padding: 0 13px !important; font-size: 13px !important; letter-spacing: .08em !important; gap: 6px; }
	.cspc .cspc-filters > :first-child { margin-left: auto !important; }
	.cspc .cspc-filters > :last-child { margin-right: auto !important; }
}

/* Nothing to scroll (all cards visible): no arrows. */
.cspc.is-static .cspc-nav { display: none !important; }