/**
 * Event Gallery template styles
 * BEM namespace: .evt-gallery
 *
 * Layout reference: Figma `92:5880`.
 * Masonry uses CSS Grid with named row spans + `grid-auto-flow: dense` so
 * tall and wide tiles backfill cleanly without JS.
 */

/* Tokens sourced from live validateconference.com computed styles. */
:root {
	--evt-gallery-container: 1140px;
	--evt-gallery-gap: 20px;
	--evt-gallery-radius: 12px;

	--evt-gallery-color-primary: #06b0b2;          /* teal — decorative accent only */
	--evt-gallery-color-primary-accessible: #04787a; /* AA-pass on white (5.3:1) */
	--evt-gallery-color-primary-hover: #035e60;
	--evt-gallery-color-navy: #1f324d;
	--evt-gallery-color-purple: #7d57b5;
	--evt-gallery-color-lavender: #d2bef1;
	--evt-gallery-color-lavender-soft: #eaeaf9;

	--evt-gallery-color-fg: #4a4a4a;
	--evt-gallery-color-fg-strong: #1f324d;
	--evt-gallery-color-fg-muted: #69727d;
	--evt-gallery-color-bg: #ffffff;

	--evt-gallery-font-sans: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--evt-gallery-font-display: "Mulish", "Open Sans", system-ui, sans-serif;
	--evt-gallery-tracking-eyebrow: 5.5px;
}

.evt-gallery {
	font-family: var(--evt-gallery-font-sans);
	color: var(--evt-gallery-color-fg);
	background: var(--evt-gallery-color-bg);
	font-size: 16px;
	line-height: 24px;
}

/* ---------- hero ---------- */
.evt-gallery__hero {
	padding: clamp(48px, 7vw, 96px) 20px;
}

.evt-gallery__hero-inner {
	max-width: var(--evt-gallery-container);
	margin: 0 auto;
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 1024px) {
	.evt-gallery__hero-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 60px;
	}
}

/* Hero type matches Figma 92:6442-6444: Mulish, no oversized clamp. */
.evt-gallery__hero-eyebrow {
	font-family: var(--evt-gallery-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1.85px;
	text-transform: uppercase;
	color: var(--evt-gallery-color-primary-accessible);
	margin: 0 0 16px;
}

.evt-gallery__hero-title {
	font-family: var(--evt-gallery-font-display);
	font-size: clamp(34px, 6vw, 48px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.96px;
	margin: 0 0 20px;
	color: var(--evt-gallery-color-fg-strong);
}

.evt-gallery__hero-body {
	font-family: var(--evt-gallery-font-display);
	font-size: 16.8px;
	line-height: 25px;
	color: var(--evt-gallery-color-fg);
}

.evt-gallery__hero-body p {
	margin: 0 0 1em;
}

.evt-gallery__hero-body p:last-child {
	margin-bottom: 0;
}

.evt-gallery__hero-video {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #000;
	border-radius: var(--evt-gallery-radius);
	overflow: hidden;
}

.evt-gallery__hero-video iframe,
.evt-gallery__hero-video video,
.evt-gallery__hero-video > * {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

/* ---------- grid ---------- */
.evt-gallery__section {
	max-width: var(--evt-gallery-container);
	margin: 0 auto;
	padding: clamp(28px, 4vw, 44px) 20px 80px;
}

/* "Photos" eyebrow above the grid (Figma 92:7465): Mulish bold, teal, tracked.
   Uses the AA-pass teal (#04787a) for the same reason the hero eyebrow does —
   brand #06b0b2 is ~2.1:1 on white. Wrapper-scoped to survive the kit's `p`. */
.evt-gallery .evt-gallery__photos-heading {
	margin: 0 0 18px;
	font-family: var(--evt-gallery-font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1.32px;
	line-height: 1.2;
	color: var(--evt-gallery-color-primary-accessible);
}

.evt-gallery__grid {
	display: grid;
	gap: var(--evt-gallery-gap);
	grid-template-columns: 1fr;
	grid-auto-flow: dense;
}

@media (min-width: 640px) {
	.evt-gallery__grid {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 200px;
	}
}

@media (min-width: 1024px) {
	.evt-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: 240px;
	}
}

.evt-gallery__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--evt-gallery-radius);
	background: #f3f4f6;
	grid-row: span 1;
}

@media (min-width: 640px) {
	.evt-gallery__tile {
		grid-row: span 1;
	}
	.evt-gallery__tile--tall {
		grid-row: span 2;
	}
	.evt-gallery__tile--wide {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.evt-gallery__tile--tall {
		grid-row: span 2;
	}
	.evt-gallery__tile--wide {
		grid-row: span 2;
		grid-column: span 2;
	}
}

.evt-gallery__tile-link {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.evt-gallery__tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.evt-gallery__tile-link:hover .evt-gallery__tile-img,
.evt-gallery__tile-link:focus-visible .evt-gallery__tile-img {
	transform: scale(1.04);
}

.evt-gallery__tile-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 16px;
	color: #fff;
	font-size: 13px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
	pointer-events: none;
	opacity: 1;
	transition: opacity 200ms ease;
}

/* Touch + small screens keep captions visible; desktop hover/focus reveals them
   to avoid covering imagery at rest. Coarse pointer = touch device of any size. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	.evt-gallery__tile-caption {
		opacity: 0;
	}
	.evt-gallery__tile:hover .evt-gallery__tile-caption,
	.evt-gallery__tile:focus-within .evt-gallery__tile-caption {
		opacity: 1;
	}
}

/* a11y focus ring */
.evt-gallery :is(button, a):focus-visible {
	outline: 2px solid var(--evt-gallery-color-primary);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
 * Specificity guard — see event-agenda.css. The Elementor/theme global `h1`
 * rules out-rank the single-class hero selector and re-inherit the wrong
 * size/weight; the `.evt-gallery` wrapper raises specificity to (0,2,0).
 * Values mirror Figma 92:5880.
 * -------------------------------------------------------------------------- */
.evt-gallery .evt-gallery__hero-title {
	font-family: var(--evt-gallery-font-display);
	font-size: clamp(34px, 6vw, 48px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.96px;
	color: var(--evt-gallery-color-fg-strong);
}

.evt-gallery .evt-gallery__hero-eyebrow {
	font-family: var(--evt-gallery-font-display);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1.85px;
	color: var(--evt-gallery-color-primary-accessible);
}

/* --------------------------------------------------------------------------
 * Controls spacing. The day tabs reuse the Agenda's sticky `.evt-agenda__controls`
 * bar; the gallery wants more breathing room between the navy hero and the tabs
 * than the agenda (Figma 92:5882). Scoped to `.evt-gallery` so the agenda is
 * untouched.
 * -------------------------------------------------------------------------- */
.evt-gallery .evt-agenda__controls-inner {
	padding-top: clamp(28px, 4vw, 48px);
	padding-bottom: clamp(20px, 3vw, 32px);
	transition: padding-top 150ms ease;
}

/* Once the tab bar pins under the sticky site header (`.is-stuck` is added by
   event-gallery.js), open up extra space so the tabs don't sit flush against
   the header bottom. Only when stuck, so the initial hero->tabs gap is unchanged. */
.evt-gallery .evt-agenda__controls.is-stuck .evt-agenda__controls-inner {
	padding-top: clamp(48px, 6vw, 72px);
}

@media (prefers-reduced-motion: reduce) {
	.evt-gallery .evt-agenda__controls-inner {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Lightbox (Figma 92:8864). White card with the photo on top (lavender-tint
 * frame) and a caption block below: tag pill, title, "Location · Date", then
 * Previous / counter / Next. Full-screen blurred dark backdrop; close top-right.
 * -------------------------------------------------------------------------- */
.evt-gallery__lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(26, 37, 48, 0.92);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 200ms ease;
}

.evt-gallery__lightbox[hidden] {
	display: none;
}

.evt-gallery__lightbox.is-open {
	opacity: 1;
}

.evt-gallery__lightbox-backdrop {
	position: absolute;
	inset: 0;
	cursor: zoom-out;
}

.evt-gallery__lightbox-card {
	position: relative;
	z-index: 1;
	margin: 0;
	width: min(864px, 100%);
	/* Definite height (not max-height) so the flex image area resolves and the
	   photo is constrained/letterboxed instead of overflowing the card. */
	height: min(90vh, 760px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.evt-gallery__lightbox-imgwrap {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(210, 190, 241, 0.15);
}

.evt-gallery__lightbox-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.evt-gallery__lightbox-meta {
	flex: 0 0 auto;
	padding: 21px 23px 23px;
	border-top: 1px solid rgba(50, 79, 119, 0.12);
}

.evt-gallery__lightbox-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.evt-gallery__lightbox-counter {
	flex: 1 1 auto;
	text-align: center;
	font-family: var(--evt-gallery-font-display);
	font-size: 14.4px;
	font-weight: 600;
	color: #7a97a5;
}

.evt-gallery__lightbox-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid rgba(50, 79, 119, 0.22);
	border-radius: 6px;
	background: #fff;
	color: #4a6070;
	font-family: var(--evt-gallery-font-display);
	font-size: 14.4px;
	font-weight: 600;
	cursor: pointer;
}

.evt-gallery__lightbox-btn:hover,
.evt-gallery__lightbox-btn:focus-visible {
	background: rgba(210, 190, 241, 0.18);
	color: var(--evt-gallery-color-fg-strong);
}

.evt-gallery__lightbox-close {
	position: absolute;
	top: 13px;
	right: 13px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(50, 79, 119, 0.12);
	color: #1a2530;
	cursor: pointer;
}

.evt-gallery__lightbox-close:hover,
.evt-gallery__lightbox-close:focus-visible {
	background: #fff;
}

/* Kit guard. `.evt-gallery__lightbox-btn` / `-close` are <button>s, so the
 * Elementor kit's global button styling (uppercase, big padding, min-height,
 * fill colour, radius) otherwise inflates them. Re-assert under the wrapper
 * (0,2,0) to beat themed `.x button` rules without !important. */
.evt-gallery .evt-gallery__lightbox-btn,
.evt-gallery .evt-gallery__lightbox-close {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.2;
}

.evt-gallery .evt-gallery__lightbox-btn {
	padding: 6px 14px;
	border: 1px solid rgba(50, 79, 119, 0.22);
	border-radius: 6px;
	background: #fff;
	color: #4a6070;
}

.evt-gallery .evt-gallery__lightbox-close {
	width: 31px;
	height: 31px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(50, 79, 119, 0.12);
	color: #1a2530;
}

@media (prefers-reduced-motion: reduce) {
	.evt-gallery__lightbox {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Back-to-top button — fixed, follows the scroll, fades in once the user has
 * scrolled (toggled by event-gallery.js via .is-visible). Sits below the
 * lightbox (z 100000) but above page content + the sticky tab bar (z 20).
 * -------------------------------------------------------------------------- */
.evt-gallery__to-top {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--evt-gallery-color-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(31, 50, 77, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.evt-gallery__to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.evt-gallery__to-top:hover,
.evt-gallery__to-top:focus-visible {
	background: var(--evt-gallery-color-primary-hover);
}

/* Kit guard — it's a <button>, so neutralise the kit's inflated box/text. */
.evt-gallery .evt-gallery__to-top {
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	min-height: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	text-transform: none;
	letter-spacing: normal;
}

@media (prefers-reduced-motion: reduce) {
	.evt-gallery__to-top {
		transition: opacity 200ms ease, visibility 200ms;
		transform: none;
	}
}