/* GC Events widget — immersive event tiles. Per-card colours arrive as inline
   custom properties (--gc-ev-*). No font imports; uses theme --gc-* tokens. */

.gc-events, .gc-events *, .gc-events *::before, .gc-events *::after { box-sizing: border-box; }
.gc-events {
	padding: 88px 0;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	-webkit-font-smoothing: antialiased;
}
.gc-events-inner {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: 48px;
}

/* Header */
.gc-events-header { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.gc-events--head-left .gc-events-header { max-width: 46ch; margin-left: 0; margin-right: 0; text-align: left; }
.gc-events-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gc-blue-dark, #3D82B3);
}
.gc-events-eyebrow::before,
.gc-events-eyebrow::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: currentColor;
	opacity: .28;
}
.gc-events--head-left .gc-events-eyebrow::before { display: none; }
.gc-events-header h2 {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -.022em;
	margin: 0 0 0.35em;
	text-wrap: balance;
	font-size: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
	color: var(--gc-ink, #14212B);
}
.gc-events-header p { color: var(--gc-muted, #5A6B75); font-size: 16px; margin: 0; }

/* Grid */
.gc-events-grid {
	display: grid;
	grid-template-columns: repeat(var(--gc-ev-cols, 3), 1fr);
	gap: 24px;
}

/* Carousel: one row that scrolls, arrows on the stage so the track's own
   overflow clip never cuts them off. */
.gc-events-stage { position: relative; }
.gc-events-track {
	display: flex;
	gap: 24px;
	/* Centre the row when the cards do not fill it. "safe" matters: plain centre
	   would push the first card past the scroll origin once they overflow,
	   leaving it unreachable. */
	justify-content: safe center;
	/* Room for the card's hover lift and shadow, which an overflow clip would
	   otherwise slice flat along the top and bottom. */
	padding: 14px 12px 46px;
	margin: 0 -12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gc-events-track::-webkit-scrollbar { display: none; }

/* Edge to edge: the row fills the viewport so cards run off both sides. The
   header keeps the container width, so only the strip breaks out. */
.gc-events--full .gc-events-stage {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* Match the section's own side padding so the first card still lines up with
   the heading, while the strip itself reaches both viewport edges. The matching
   scroll padding is what keeps the gap even: without it, snapping parks the
   first card on the padding edge and the row rests flush against the viewport
   while the far end still holds its 48px. */
.gc-events--full .gc-events-track {
	padding-inline: 48px;
	margin-inline: 0;
	scroll-padding-inline: 48px;
}
/* Registered so the two fade widths interpolate: an unregistered custom property
   jumps between values instead of easing. */
@property --gc-ev-fade-l {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}
@property --gc-ev-fade-r {
	syntax: '<length>';
	inherits: false;
	initial-value: 0px;
}
/* Mask, not a gradient overlay: it fades the cards themselves to transparent,
   so it works over any section background or image. Each side is independent and
   only present while there is more row to reach on that side, so a carousel at
   either end keeps its outer card crisp. */
.gc-events--fade-x .gc-events-track {
	--gc-ev-fade-l: var(--gc-ev-fade-x, 64px);
	--gc-ev-fade-r: var(--gc-ev-fade-x, 64px);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gc-ev-fade-l), #000 calc(100% - var(--gc-ev-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--gc-ev-fade-l), #000 calc(100% - var(--gc-ev-fade-r)), transparent 100%);
	transition: --gc-ev-fade-l .28s ease, --gc-ev-fade-r .28s ease;
}
.gc-events--fade-x .gc-events-track.is-at-start { --gc-ev-fade-l: 0px; }
.gc-events--fade-x .gc-events-track.is-at-end { --gc-ev-fade-r: 0px; }
@media (prefers-reduced-motion: reduce) {
	.gc-events--fade-x .gc-events-track { transition: none; }
}
/* The arrows sit inside the faded zone, so lift them out of the mask. */
.gc-events--fade-x .gc-events-nav { z-index: 5; }
.gc-events--full .gc-events-nav--prev { left: 24px; }
.gc-events--full .gc-events-nav--next { right: 24px; }
.gc-events-track .gc-ev-card {
	flex: 0 0 min(var(--gc-ev-card-w, 340px), var(--gc-ev-card-cap, 100%));
	max-width: min(var(--gc-ev-card-w, 340px), var(--gc-ev-card-cap, 100%));
	scroll-snap-align: start;
}
.gc-events-nav {
	position: absolute;
	top: calc(50% - 24px);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--gc-blue-lighter, #DCEEFA);
	border-radius: 50%;
	background: var(--gc-white, #fff);
	color: var(--gc-blue-dark, #3D82B3);
	box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20, 33, 43, .12));
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease, opacity .2s ease;
}
.gc-events-nav:hover { background: var(--gc-blue, #5BA7DB); color: #fff; transform: scale(1.08); }
.gc-events-nav:focus-visible { outline: 2px solid var(--gc-blue, #5BA7DB); outline-offset: 3px; }
.gc-events-nav svg { width: 22px; height: 22px; }
.gc-events-nav--prev { left: -20px; }
.gc-events-nav--next { right: -20px; }
.gc-events-nav[disabled] { opacity: 0; pointer-events: none; }

/* Tile */
.gc-ev-card {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 18px;
	overflow: hidden;
	display: block;
	color: var(--gc-white, #fff);
	text-decoration: none;
	isolation: isolate;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.gc-ev-media { position: absolute; inset: 0; z-index: 0; }
.gc-ev-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Readability fade behind the text. Sits over the photo, under the pill and
   body, and is sized and coloured per card because the right amount depends
   entirely on the image underneath. */
.gc-ev-scrim {
	position: absolute;
	z-index: 1;
	inset: auto 0 0 0;
	height: var(--gc-ev-scrim-h, 60%);
	pointer-events: none;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--gc-ev-scrim, #0F1A22) calc(var(--gc-ev-scrim-op, .85) * 100%), transparent) 0%,
		color-mix(in srgb, var(--gc-ev-scrim, #0F1A22) calc(var(--gc-ev-scrim-op, .85) * 45%), transparent) 45%,
		transparent 100%);
	transition: opacity .5s ease;
}

.gc-ev-pill {
	position: absolute;
	z-index: 3;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: var(--gc-radius-pill, 999px);
	font-size: 12px;
	font-weight: 700;
	background: var(--gc-ev-pill-bg, #5BA7DB);
	color: var(--gc-ev-pill-text, #ffffff);
	box-shadow: 0 4px 12px -2px rgba(20, 33, 43, 0.35);
}
/* State colours. A per-card pill colour still overrides these, because the
   card's inline --gc-ev-pill-bg wins over the stylesheet. */
.gc-ev-card--upcoming .gc-ev-pill { background: var(--gc-ev-pill-bg, var(--gc-blue, #5BA7DB)); }
.gc-ev-card--past .gc-ev-pill { background: var(--gc-ev-pill-bg, #6B7A85); }
.gc-ev-card--live .gc-ev-pill {
	background: var(--gc-ev-pill-bg, #D64545);
	text-transform: uppercase;
	letter-spacing: .06em;
	animation: gc-ev-pulse 2s ease-in-out infinite;
}
.gc-ev-pill-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: gc-ev-blink 2s ease-in-out infinite;
}
@keyframes gc-ev-pulse {
	0%, 100% { box-shadow: 0 4px 12px -2px rgba(20, 33, 43, .35), 0 0 0 0 rgba(214, 69, 69, .55); }
	50% { box-shadow: 0 4px 12px -2px rgba(20, 33, 43, .35), 0 0 0 9px rgba(214, 69, 69, 0); }
}
/* The live card's frame breathes on the same 2s beat as its pill, so the two
   read as one signal. Only the inset bloom animates; the hairline stays put. */
@keyframes gc-ev-glow-pulse {
	0%, 100% {
		box-shadow:
			inset 0 0 0 1px color-mix(in srgb, var(--gc-ev-glow-hue) 14%, transparent),
			inset 0 0 var(--gc-ev-glow-blur, 18px) color-mix(in srgb, var(--gc-ev-glow-hue) var(--gc-ev-glow-strength, 48%), transparent),
			inset 0 0 calc(var(--gc-ev-glow-blur, 18px) * 2.6) color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) / 2.2), transparent);
	}
	50% {
		box-shadow:
			inset 0 0 0 1px color-mix(in srgb, var(--gc-ev-glow-hue) 26%, transparent),
			inset 0 0 calc(var(--gc-ev-glow-blur, 18px) * 1.5) color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) + 26%), transparent),
			inset 0 0 calc(var(--gc-ev-glow-blur, 18px) * 3.6) color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) / 1.5), transparent);
	}
}
.gc-events--glow .gc-ev-card--live::after {
	animation: gc-ev-glow-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.gc-events--glow .gc-ev-card--live::after { animation: none; }
}
@keyframes gc-ev-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}
.gc-ev-body {
	position: absolute;
	z-index: 2;
	inset: auto 0 0 0;
	padding: 20px 22px 24px;
	/* Crisp near layer for legibility + a gentle wide halo. No clipping
	   container around the text, so the halo fades in every direction. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.35);
}
.gc-ev-date {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--gc-ev-date, #ffffff);
	margin-bottom: 6px;
}
.gc-ev-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gc-ev-date, #ffffff);
}
.gc-ev-loc { display: inline-flex; align-items: center; gap: 6px; opacity: .92; }
.gc-ev-loc svg { width: 14px; height: 14px; flex: none; }
.gc-ev-stand {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: var(--gc-radius-pill, 999px);
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	font-size: 12px;
	letter-spacing: .02em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.gc-ev-stand strong { font-weight: 800; }
.gc-ev-title {
	font-family: var(--gc-font-heading, "Manrope", system-ui, sans-serif);
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
	font-size: 21px;
	color: var(--gc-ev-title, #ffffff);
}
/* Fade/slide reveal (no height-clip container), so the text-shadow is never
   sliced into a straight edge. */
/* The description takes no height until hover, so the text block above it sits
   on the bottom edge and is genuinely lifted as the description opens, rather
   than the description fading into space already reserved for it.
   grid-template-rows 0fr -> 1fr is what makes an auto height animatable. */
.gc-ev-reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.gc-ev-reveal-inner {
	overflow: hidden;
	min-height: 0;
}
.gc-ev-desc { margin-top: 10px; }
.gc-ev-desc {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--gc-ev-desc, #ffffff);
}

/* Edge glow. The hue follows the card's pill through the same cascade the pill
   itself uses, so an inline --gc-ev-pill-bg or a state default both carry over.
   The bloom is inset and painted above the photo, so glow size costs no track
   room and the row's overflow clip can never cut it. */
.gc-events--glow .gc-ev-card {
	--gc-ev-glow-hue: var(--gc-ev-pill-bg, var(--gc-blue, #5BA7DB));
	border: 1px solid color-mix(in srgb, var(--gc-ev-glow-hue) 18%, transparent);
	box-shadow:
		0 0 12px color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) / 2.6), transparent);
}
.gc-events--glow .gc-ev-card--past { --gc-ev-glow-hue: var(--gc-ev-pill-bg, #6B7A85); }
.gc-events--glow .gc-ev-card--live { --gc-ev-glow-hue: var(--gc-ev-pill-bg, #D64545); }
.gc-events--glow .gc-ev-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	border-radius: inherit;
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--gc-ev-glow-hue) 14%, transparent),
		inset 0 0 var(--gc-ev-glow-blur, 18px) color-mix(in srgb, var(--gc-ev-glow-hue) var(--gc-ev-glow-strength, 48%), transparent),
		inset 0 0 calc(var(--gc-ev-glow-blur, 18px) * 2.6) color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) / 2.2), transparent);
	transition: box-shadow .4s ease;
	pointer-events: none;
}

@media (hover: hover) {
	.gc-events--glow .gc-ev-card:hover,
	.gc-events--glow .gc-ev-card:focus-visible {
		border-color: color-mix(in srgb, var(--gc-ev-glow-hue) 34%, transparent);
		box-shadow:
			0 0 14px color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) / 1.6), transparent),
			0 24px 44px -18px rgba(20, 33, 43, .5);
	}
	.gc-events--glow .gc-ev-card:hover::after,
	.gc-events--glow .gc-ev-card:focus-visible::after {
		box-shadow:
			inset 0 0 0 1px color-mix(in srgb, var(--gc-ev-glow-hue) 24%, transparent),
			inset 0 0 calc(var(--gc-ev-glow-blur, 18px) * 1.4) color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) + 22%), transparent),
			inset 0 0 calc(var(--gc-ev-glow-blur, 18px) * 3.4) color-mix(in srgb, var(--gc-ev-glow-hue) calc(var(--gc-ev-glow-strength, 48%) / 1.8), transparent);
	}
	.gc-ev-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px -18px rgba(20, 33, 43, 0.5); }
	.gc-ev-card:hover .gc-ev-media img { transform: scale(1.06); }
	.gc-ev-card:hover .gc-ev-reveal,
	.gc-ev-card:focus-visible .gc-ev-reveal { grid-template-rows: 1fr; opacity: 1; }
}
@media (hover: none) {
	.gc-ev-reveal { grid-template-rows: 1fr; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.gc-ev-card, .gc-ev-media img, .gc-ev-reveal { transition: none; }
	.gc-ev-reveal { grid-template-rows: 1fr; opacity: 1; }
	.gc-ev-card:hover { transform: none; }
	.gc-ev-card:hover .gc-ev-media img { transform: none; }
	.gc-ev-card--live .gc-ev-pill, .gc-ev-pill-dot { animation: none; }
}

@media (max-width: 960px) {
	.gc-events-inner { padding-inline: 20px; }
	.gc-events-grid { grid-template-columns: 1fr; }
	.gc-ev-card { aspect-ratio: 16 / 10; }
	/* Arrows would overhang the viewport at this width; the track still swipes. */
	.gc-events-nav { display: none; }
	.gc-events { --gc-ev-card-cap: 82vw; padding: 56px 0; }
	.gc-events--full .gc-events-track { padding-inline: 20px; }
}

@media (max-width: 640px) {
	.gc-events { padding: 52px 0; }
	.gc-events-header { margin-bottom: 28px; }
	.gc-events-eyebrow { font-size: 10.5px; gap: 10px; margin-bottom: 12px; }
	.gc-events-header h2 { font-size: 1.6rem; }
	.gc-events-header p { font-size: 15px; line-height: 1.5; }
	.gc-events-grid { gap: 14px; }
	.gc-events-track { gap: 14px; padding: 8px 12px 30px; }
	.gc-ev-card { aspect-ratio: 16 / 9; border-radius: 14px; }
	.gc-ev-pill { top: 12px; left: 12px; padding: 4px 10px; font-size: 11px; letter-spacing: 0; }
	.gc-ev-card--live .gc-ev-pill { animation: none; letter-spacing: 0.04em; }
	.gc-ev-pill-dot { animation: none; }
	.gc-ev-body { padding: 14px 16px 16px; }
	.gc-ev-date { font-size: 11.5px; letter-spacing: 0.02em; margin-bottom: 4px; }
	.gc-ev-meta { gap: 4px 10px; margin-bottom: 6px; font-size: 12px; }
	.gc-ev-stand {
		padding: 2px 8px;
		font-size: 11px;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
	.gc-ev-title { font-size: 17px; }
	.gc-ev-desc { margin-top: 6px; font-size: 13.5px; line-height: 1.45; }
}

@media (max-width: 480px) {
	.gc-events { --gc-ev-card-cap: 88vw; padding: 44px 0; }
	.gc-events-inner { padding-inline: 16px; }
	.gc-events--full .gc-events-track { padding-inline: 16px; }
	.gc-events-header h2 { font-size: 1.45rem; }
	.gc-ev-card { aspect-ratio: 3 / 2; }
	.gc-ev-body { padding: 12px 14px 14px; }
	.gc-ev-title { font-size: 16px; }
}

/* Eyebrow: one spec across every Gencore widget. Inter 11.5/600/.16em,
   uppercase, no trailing rule. */
.gc-events-eyebrow {
	display: block;
	font-family: var(--gc-font-body, "Inter", system-ui, sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: 14px;
}

.gc-events-eyebrow::before,
.gc-events-eyebrow::after { display: none; }

@media (max-width: 640px) {
	.gc-events-eyebrow { font-size: 10.5px; margin-bottom: 12px; }
}