/* ---------- Events page (apphook: events) ---------- */

.events {
	padding: var(--s8) 0 var(--s12);
	background: var(--white);
}

.events .container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s3);
}

.events .section-head {
	max-width: 640px;
	margin: 0 auto var(--s8);
	text-align: center;
}

.events .section-head .kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: var(--s2);
}

.events .kicker .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--yellow);
	display: inline-block;
}

/* ---------- Masonry grid ---------- */

.events-grid {
	columns: 3 20rem;
	column-gap: 1.5rem;
}

.events-grid>* {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

.events-empty {
	text-align: center;
	color: var(--color-text-muted);
}

/* ---------- Card ---------- */

.card {
	position: relative;
	background: var(--color-surface);
	border-radius: var(--r-lg);
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease;
}

/* title link stretched over the whole card */
.card-link {
	color: inherit;
	text-decoration: none;
}

.card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
}


_::-webkit-full-page-media,
_:future,
:root .safari-only {
	.card:hover {
		transform: translateY(0);
		box-shadow: inherit;
	}
}


.card-media {
	overflow: hidden;
	position: relative;
}

.card-media img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .5s ease;
}

.card:hover .card-media img {
	transform: scale(1.05);
}

.card-body {
	padding: var(--s3);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 1;
}

.card-body h3 {
	font-family: var(--font-display);
	font-size: 1.35rem;
	margin: 0;
	color: var(--color-text);
}

.card-body p {
	color: var(--color-text-muted);
	font-size: .98rem;
	margin: 0;
}

.card--today {
	border-color: var(--raspberry);
}

/* ---------- Date badge ---------- */

.event-date {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	text-align: center;
	background: #fff;
	border-radius: 16px;
	padding: 8px 14px;
	box-shadow: var(--shadow-md);
	font-family: var(--font-display);
	line-height: 1.1;
}

.event-date b {
	font-size: 1.4rem;
	display: block;
	color: var(--orange);
}

.event-date span {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/* ---------- Activity eyebrow ---------- */
.eyebrow.past,
.eyebrow.now,
.eyebrow.soon {
	position: absolute;
	top: 14px;
	right: 14px;
	font-size: .6rem;
	letter-spacing: normal;
	font-weight: 300;
	background-color: var(--white);
	padding: .2rem .5rem;
	gap: .3rem;
	color: var(--slate);
	text-transform: small-caps;
	z-index: 1;
}

.eyebrow.now .dot {
	background: var(--raspberry);
}

.eyebrow.soon .dot {
	background: var(--mint);
	animation: none;
}

.eyebrow.past .dot {
	background: var(--yellow);
	animation: none;
}

/* Date shown inside body when the event has no image */
.event-date--inline {
	position: static;
	box-shadow: none;
	padding: 0;
	display: flex;
	align-items: baseline;
	gap: 6px;
}

.event-date--inline b {
	display: inline;
}

/* ---------- "Today" indicator ---------- */

.live-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--raspberry);
	margin-right: 8px;
	animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(233, 82, 124, .45);
	}

	50% {
		box-shadow: 0 0 0 9px rgba(233, 82, 124, 0);
	}
}

/* ---------- Pill row (tags) ---------- */

.card .pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--s1);
}

/* ---------- Pagination ---------- */

.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--s6);
}

.page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 999px;
	background: #fff;
	border: 2px solid var(--gray);
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--slate);
	text-decoration: none;
	transition: border-color .2s ease, background .2s ease;
}

.page-btn:hover {
	border-color: var(--orange);
}

.page-btn.active {
	background: var(--slate);
	border-color: var(--slate);
	color: #fff;
}

.page-gap {
	color: var(--color-text-muted);
}

/* ---------- Event detail page ---------- */

.container--narrow {
	max-width: 1180px;
}

.ev-hero {
	position: relative;
	padding: var(--s8) 0;
	overflow: hidden;
	background: var(--color-bg);
}

.ev-hero .container,
.ev-content .container {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 var(--s3);
}

.ev-hero .container--narrow {
	max-width: 1180px;
}

.ev-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	line-height: 1.15;
	margin: 0 0 var(--s2);
	color: var(--color-text);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 800;
	font-size: .8rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #B05E00;
	/* background: var(--orange-soft); */
	/* padding: 7px 16px; */
	border-radius: 999px;
	margin-bottom: var(--s2);
}

.eyebrow .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--orange);
	animation: blink 2s infinite;
}

.eyebrow--live {
	/* background: var(--pink-soft); */
	color: #B83D63;
}

.eyebrow--live .dot {
	background: var(--raspberry);
}

.eyebrow--upcoming {
	/* background: var(--mint-soft); */
	color: #2C7A52;
}

.eyebrow--upcoming .dot {
	background: var(--mint);
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: .35;
	}
}

.ev-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	align-items: center;
	margin: var(--s2) 0 0;
	color: var(--color-text-muted);
	font-weight: 700;
	font-size: .95rem;
}

.ev-meta .chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: 8px 16px;
	box-shadow: var(--shadow-sm);
}

.ev-meta .chip i[class^="icon-"] {
	font-size: 17px;
	line-height: 1;
	font-weight: 300;
	color: var(--orange);
}

.ev-cover {
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 6px solid #fff;
	aspect-ratio: 16/8;
	margin-top: var(--s4);
}

.ev-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "through the window" parallax — --mx/--my set by parallax.js on .ev-hero:
   frame shifts slightly with the mouse, image slides opposite behind it */
.ev-cover {
	transform: translate3d(calc(var(--mx, 0) * 5px), calc(var(--my, 0) * 5px), 0);
	will-change: transform;
}

.ev-cover img {
	transform: scale(1.12)
		translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -10px), 0);
	will-change: transform;
}

.ev-content {
	padding: var(--s8) 0 var(--s12);
	background: var(--white);
}

.ev-body {
	max-width: 1180px;
	margin: 0 auto;
}

.ev-body > *:not(.djangocms-video-plugin, .light-gallery-plugin, .ev-nav){
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Rich text typography — reset.css strips all margins/list styles,
   so restore them for editor-authored content */

.ev-body p {
	font-size: 1.08rem;
	margin: 0 0 var(--s2);
}

.ev-body h2,
.ev-body h3,
.ev-body h4 {
	font-family: var(--font-display);
	line-height: 1.15;
	color: var(--color-text);
	margin: var(--s4) 0 var(--s2);
}

.ev-body h2 {
	font-size: 1.7rem;
}

.ev-body h3 {
	font-size: 1.35rem;
}

.ev-body h4 {
	font-size: 1.15rem;
}

.ev-body ul,
.ev-body ol {
	margin: 0 0 var(--s2);
	padding-left: 1.4em;
}

.ev-body ul {
	list-style: disc;
}

.ev-body ol {
	list-style: decimal;
}

.ev-body li {
	margin-bottom: 8px;
	font-size: 1.08rem;
}

.ev-body li::marker {
	color: var(--orange);
}

.ev-body a {
	color: var(--orange);
	text-decoration: underline;
}

.ev-body hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--s4) 0;
}

.ev-body .lead {
	font-size: 1.2rem;
	color: var(--slate);
	margin: 0 auto var(--s4);
}

.ev-body .lead p {
	font-size: inherit;
	color: inherit;
}

/* pill icons (tags) */
.pill i[class^="icon-"] {
	font-size: 14px;
	line-height: 1;
}

/* ---------- Extra blocks (facts) ---------- */

.ev-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s2);
	margin: var(--s6) auto;
}

.ev-fact {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--r-md);
	padding: var(--s3);
	text-align: center;
	box-shadow: var(--shadow-sm);
}

.ev-fact b {
	font-family: var(--font-display);
	font-size: 1.9rem;
	display: block;
	color: var(--orange);
}

.ev-fact span {
	font-size: .88rem;
	color: var(--color-text-muted);
	font-weight: 700;
}

@media (max-width: 600px) {
	.ev-facts {
		grid-template-columns: 1fr;
	}
}

/* ------------- Feature media placeholder ------------ */


.feature-media p {
	margin: 0;
}

.feature-media .disclaimer {
	font-size: .8rem;
	font-weight: 200;
	color: var(--color-text-muted);
}

.ev-body blockquote {
	border-left: 5px solid var(--orange);
	background: var(--orange-soft);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: var(--s3) var(--s4);
	margin: var(--s4) 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	color: var(--slate);
}

.ev-body blockquote small {
	font-family: var(--font-body);
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-text-muted);
	margin-top: 10px;
}

.ev-body blockquote small:before {
	content: "— ";
}

.ev-body blockquote p:last-child {
	margin: 0;
}

.ev-body img {
	border-radius: var(--r-md);
	max-width: 100%;
	box-shadow: var(--shadow-sm);
}

/* ---------- Media gallery empty state (feature-media) ---------- */

.feature-media {
	text-align: center;
	border: 2px solid var(--gray);
	border-radius: var(--r-lg);
	background: var(--color-bg);
	padding: var(--s6) var(--s3);
	margin: var(--s6) auto;
}

.feature-media-icons {
	display: flex;
	justify-content: center;
	margin-bottom: var(--s3);
}

.fm-ico {
	width: 64px;
	height: 64px;
	border-radius: 20px;
	display: grid;
	place-items: center;
	box-shadow: var(--shadow-sm);
	border: 3px solid #fff;
}

.fm-ico i[class^="icon-"] {
	font-size: 28px;
	line-height: 1;
}

/* two overlapping, slightly tilted badges — photo + video */
.fm-ico--image {
	background: var(--mint-soft);
	color: #2C7A52;
	transform: rotate(-6deg);
	z-index: 1;
}

.fm-ico--video {
	background: var(--yellow-soft);
	color: #C9A227;
	transform: rotate(6deg);
	margin-left: -14px;
}

.feature-media p {
	color: var(--color-text-muted);
	font-size: 1rem;
	max-width: 34em;
	margin: 0 auto var(--s1);
}

.feature-media .disclaimer {
	font-size: .82rem;
	margin-bottom: 0;
}

.ev-nav {
	display: flex;
	justify-content: space-between;
	gap: var(--s2);
	margin-top: var(--s6);
	flex-wrap: wrap;
}

.ev-nav a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--slate);
	text-decoration: none;
	background: #fff;
	border: 2px solid var(--gray);
	border-radius: 999px;
	padding: 11px 22px;
	transition: border-color .2s;
}

.ev-nav a:hover {
	border-color: var(--orange);
}

.ev-nav .ev-nav-next {
	margin-left: auto;
}