:root {
	--bg: #fff;
	--fg: #222;
	--accent: #007acc;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #111;
		--fg: #eee;
		--accent: #46c;
	}
}

/* Explicit theme toggle overrides (win over media query when set) */
html.dark {
	--bg: #111;
	--fg: #eee;
	--accent: #46c;
}

html.light {
	--bg: #fff;
	--fg: #222;
	--accent: #007acc;
}

body {
	margin: 0;
	font-family: sans-serif;
	background-color: var(--bg);
	color: var(--fg);
}

.lightbox-open {
	overflow: hidden;
}

.gallery-grid {
	column-count: 1;
	column-gap: 1rem;
	padding: 1rem;
}

@media (width >= 768px) {
	.gallery-grid {
		column-count: 2;
	}
}

@media (width >= 1024px) {
	.gallery-grid {
		column-count: 3;
	}
}

/* Lightbox: not a Svelte component, styled globally for script.js target */
#lightbox {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 90%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s;
}

#lightbox[aria-hidden='false'] {
	visibility: visible;
	opacity: 1;
}

#lb-content img,
#lb-content video {
	max-width: 90vw;
	max-height: 80vh;
	border-radius: 8px;
}

#lb-caption {
	color: #fff;
	margin-top: 0.5rem;
	text-align: center;
	max-width: 90vw;
}

#lb-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: none;
	border: none;
	font-size: 2rem;
	color: #fff;
	cursor: pointer;
}