/* Ported from reference/events.html. Shared reset/tokens live in base.css /
   tokens.css; everything below is specific to the Events (and partly Contact)
   look. Values unchanged from the signed-off mock-up — only url() paths were
   rewritten from /wp-content/uploads/grunge/ to this theme's own assets/. */

/* ============ PAGE BACKGROUND ============ */
.page-bg {
	position: fixed; inset: 0; z-index: -1;
	background:
		url("../img/events/hb-cracks.webp") center / 720px auto repeat,
		url("../img/events/hb-events-bg.webp") center / cover no-repeat,
		var(--black);
	filter: contrast(var(--bg-contrast)) brightness(var(--bg-brightness));
}
.page-bg::after {   /* vignette, same treatment as the home photo */
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(5,4,5,.6) 75%, rgba(5,4,5,.92) 100%);
}

/* ============ HEADER + NAV (same as home) ============ */
.site-header {
	display: flex; justify-content: center;
	padding: clamp(14px, 2.4vw, 28px) 16px clamp(40px, 5vw, 64px);
	/* black-to-transparent band behind the logo, as on the current site */
	background: linear-gradient(to bottom, rgba(5,4,5,.92) 0%, rgba(5,4,5,.55) 45%, rgba(5,4,5,0) 100%);
}
.site-header img {
	width: clamp(150px, 16vw, 240px); height: auto;
	filter: drop-shadow(0 2px 12px rgba(0,0,0,.6));
}

.nav, .nav--legal {
	position: fixed; z-index: 20;
	bottom: clamp(16px, 3vh, 30px);
	display: flex; gap: clamp(18px, 2.4vw, 36px);
	list-style: none;
}
.nav { left: clamp(16px, 2.2vw, 32px); }
.nav--legal { left: auto; right: clamp(16px, 2.2vw, 32px); }
.nav a, .nav--legal a {
	position: relative;
	font-size: clamp(14px, 1.3vw, 19px); font-weight: 500;
	text-transform: uppercase; letter-spacing: .04em;
	text-shadow: 0 1px 8px rgba(0,0,0,.7);
}
.nav a::after, .nav--legal a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
	background: var(--ep);
	transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease-out);
}
.nav a:hover::after, .nav a:focus-visible::after, .nav a[aria-current="page"]::after,
.nav--legal a:hover::after, .nav--legal a:focus-visible::after, .nav--legal a[aria-current="page"]::after { transform: scaleX(1); }

/* ============ EVENTS ============ */
.events {
	width: min(1200px, 100% - 32px);
	margin: 0 auto;
	padding-bottom: 120px;                 /* clear of the fixed nav */
}
.events__head { margin-bottom: 18px; text-align: center; }
.events__title, .events__subtitle {
	font-family: "Saira Stencil One", Impact, sans-serif; font-weight: 400;
	text-transform: uppercase; color: var(--card);
	letter-spacing: .02em; line-height: 1;
	/* static grunge cut, matching the home title */
	/* subtle: a thinned speckle texture so small headings stay readable */
	-webkit-mask: url("../grunge/masks/hb-mask-heading.webp") center / 900px auto repeat;
	        mask: url("../grunge/masks/hb-mask-heading.webp") center / 900px auto repeat;
}
.events__title { font-size: clamp(28px, 3.2vw, 40px); }
.events__subtitle { font-size: clamp(22px, 2.4vw, 30px); opacity: .85; }
.events__rule {
	height: 2px; border: 0; margin-top: 12px;
	background: var(--card);
	filter: url(#deckle-line);
}
/* Not a `.events__section + .events__section` adjacent-sibling rule: the
   plugin's JSON-LD <script> sometimes sits between the two sections in the
   markup, which would silently break that selector. */
.events__section--past { margin-top: clamp(56px, 7vw, 88px); }
.events__empty { color: var(--card); opacity: .8; font-size: 15px; padding: 8px 0 4px; }

.event-list { list-style: none; display: grid; gap: 24px; }

.event-card {
	position: relative;
	display: grid;
	grid-template-columns: clamp(180px, 20vw, 240px) 1fr auto;
	gap: clamp(16px, 2vw, 28px);
	align-items: start;
	padding: 10px;
	color: var(--ink);
	isolation: isolate;                 /* keeps the paper layer behind this card's content */
}
/* paper: bone + a faint wash of the same cracks, with a soft deckle edge */
.event-card::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(rgba(206,205,197,.9), rgba(206,205,197,.9)),
		url("../img/events/hb-cracks.webp") center / 600px auto repeat,
		var(--card);
	filter: url(#deckle-card);
}
.event-card__art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.event-card__body { padding-top: 14px; min-width: 0; }
.event-card__date {
	font-size: clamp(22px, 2.3vw, 32px); font-weight: 500; -webkit-text-stroke: .6px currentColor;
	text-transform: uppercase; line-height: 1.1; letter-spacing: .01em;
}
.event-card__meta {
	list-style: none; display: flex; flex-wrap: wrap; gap: 6px 28px;
	margin-top: 10px; padding-left: 4px;
	font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em;
}
.event-card__meta li { display: flex; align-items: flex-start; gap: 8px; }
.event-card__meta svg { width: 14px; height: 14px; flex: none; margin-top: 2px; fill: var(--ink); }
.event-card__desc {
	margin-top: 14px; max-width: 62ch;
	font-size: 14px; line-height: 1.6; color: #3d393a;
}
.event-card__desc p + p { margin-top: .7em; }
.event-card__action { align-self: center; padding: 0 8px 0 0; }

/* olive button with the deckle-edged block from home */
.btn {
	position: relative; display: inline-block;
	padding: 16px 28px;
	font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	color: #f1efe8;                    /* brighter than the card colour for contrast on olive */
	transition: filter .4s, transform .3s var(--ease-out);
}
.btn::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: var(--band);
	-webkit-mask: url("../grunge/button/hb-btn-mask-clean.webp") center / 100% 100% no-repeat;
	        mask: url("../grunge/button/hb-btn-mask-clean.webp") center / 100% 100% no-repeat;
	transition: background .3s;
}
.btn span { position: relative; z-index: 1; }
a.btn:hover, a.btn:focus-visible {
	filter: drop-shadow(0 0 14px rgba(62,71,57,.75));
	transform: translateY(-2px); outline: none;
}
a.btn:hover::before, a.btn:focus-visible::before { background: var(--band-hover); }
.btn--disabled { color: #d6d5cf; cursor: not-allowed; }
.btn--disabled::before { background: var(--muted); }

/* past shows: kept, but quieter */
.event-card--past { color: #4a4647; }
.event-card--past .event-card__art img { filter: grayscale(.85) contrast(.9); opacity: .75; }
.event-card--past::before { filter: url(#deckle-card) brightness(.86); }

/* ============ LOAD-IN: grunge texture-in, staggered ============ */
.js .reveal { opacity: 0; }
.js .reveal.is-in { opacity: 1; }

@media (max-width: 760px) {
	/* fade behind the fixed nav so it stays readable over the cards */
	nav[aria-label="Main"]::before {
		content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 19;
		/* iOS Safari reserves a strip at the very bottom for its own UI; without
		   accounting for it, that strip shows the page background (not solid
		   black) peeking out under the fade. Extending the box by the safe-area
		   inset and holding the gradient fully solid across it keeps that strip
		   covered. */
		height: calc(72px + env(safe-area-inset-bottom, 0px));
		background: linear-gradient(to top,
			rgba(5,4,5,.95) 0,
			rgba(5,4,5,.95) env(safe-area-inset-bottom, 0px),
			rgba(5,4,5,0) 100%);
		pointer-events: none;
	}
	.event-card { grid-template-columns: 1fr; gap: 14px; }
	.event-card__body { padding: 4px 6px 0; }
	.event-card__action { padding: 0 6px 8px; }
	.event-card__action .btn { display: block; text-align: center; }
}

/* narrow phones: keep the Main and Legal navs from crowding the corners */
@media (max-width: 360px) {
	.nav, .nav--legal { gap: 14px; }
	.nav a, .nav--legal a { font-size: 13px; }
}