/* ---------------------------------------------------------
   Custom additions for Apesanteur (shows section, gallery,
   lightbox, nav). Kept separate from the generated main.css
   so template updates don't clobber these.
--------------------------------------------------------- */

/* Logo/title link back to the homepage: no underline, no color shift */
#header a.home-link {
	border-bottom: none;
	color: inherit;
}

	#header a.home-link:hover {
		color: inherit;
		opacity: 0.85;
	}

/* Nav bar under the header */
#nav-bar {
	display: flex;
	justify-content: center;
	gap: 1.5em;
	padding: 0.75em 0 0.25em;
	position: relative;
	z-index: 10;
}

	#nav-bar a {
		color: #ffffff;
		text-decoration: none;
		font-size: 0.85em;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		border-bottom: 1px solid transparent;
		padding-bottom: 0.2em;
		transition: border-color 0.2s ease;
	}

		#nav-bar a:hover,
		#nav-bar a.active {
			border-color: #4eb980;
		}

/* Video wrapper (hero videos + donation video), positioned so the
   unmute button (added by video-sound.js) can sit on top of it */
.video-frame {
	position: relative;
	margin: 0 auto 1em;
}

	.video-frame video {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 6px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.25);
		background: #000;
	}

.show-hero-video {
	max-width: 1100px;
}

.donation-video {
	max-width: 900px;
}

.unmute-btn {
	position: absolute;
	right: 1em;
	bottom: 1em;
	z-index: 5;
	background: rgba(0,0,0,0.65);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

	.unmute-btn:hover {
		background: rgba(0,0,0,0.85);
	}

/* Wide, low-padding container for image-heavy pages */
.wide-container {
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 1.5em;
	box-sizing: border-box;
}

	@media screen and (max-width: 480px) {
		.wide-container {
			padding: 0 1em;
		}
	}

/* Compact box: same visual treatment as .box but with far less
   padding/margin, for pages that want photos to dominate */
.box.compact {
	padding: 1.5em;
	margin-bottom: 2em;
}

	@media screen and (max-width: 736px) {
		.box.compact {
			padding: 1em;
		}
	}

/* Big visual link cards (home -> sections, spectacles -> shows) */
.card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5em;
}

	.card-grid-item {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: 8px;
		aspect-ratio: 3 / 4;
		box-shadow: 0 10px 30px rgba(0,0,0,0.2);
	}

		.card-grid-item img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
			transition: transform 0.4s ease;
		}

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

		.card-grid-item .card-overlay {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 1.75em 1.5em 1.5em;
			background: linear-gradient(to top, rgba(0,0,0,0.88), rgba(0,0,0,0));
			color: #ffffff;
		}

			.card-overlay h3 {
				color: #ffffff;
				margin: 0 0 0.3em;
			}

			.card-overlay p {
				color: rgba(255,255,255,0.85);
				font-size: 0.9rem;
				line-height: 1.5;
				margin: 0 0 0.9em;
			}

	@media screen and (max-width: 736px) {
		.card-grid {
			grid-template-columns: 1fr;
		}

		.card-grid-item {
			aspect-ratio: 4 / 3;
		}
	}

/* Artistic intention quote */
.artistic-intention {
	font-size: 1.2rem;
	line-height: 1.8;
	font-style: italic;
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	color: #5b5b5b;
}

/* Photo gallery grid */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5em;
}

	.gallery-grid a {
		display: block;
		overflow: hidden;
		border-radius: 4px;
		aspect-ratio: 1 / 1;
	}

	.gallery-grid img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		transition: transform 0.3s ease;
	}

	.gallery-grid a:hover img {
		transform: scale(1.06);
	}

	@media screen and (max-width: 736px) {
		.gallery-grid {
			grid-template-columns: repeat(2, 1fr);
			gap: 0.35em;
		}
	}

/* Masonry-style photo gallery: keeps each photo at full column width
   and its natural aspect ratio, so mixed portrait/landscape photos
   from different sub-folders all stay big instead of being cropped
   into uniform squares. */
.photo-masonry {
	column-count: 3;
	column-gap: 0.6em;
}

	.photo-masonry a {
		display: block;
		break-inside: avoid;
		margin-bottom: 0.6em;
		border-radius: 4px;
		overflow: hidden;
	}

	.photo-masonry img {
		width: 100%;
		height: auto;
		display: block;
		transition: transform 0.3s ease;
	}

	.photo-masonry a:hover img {
		transform: scale(1.04);
	}

	@media screen and (max-width: 980px) {
		.photo-masonry {
			column-count: 2;
		}
	}

	@media screen and (max-width: 600px) {
		.photo-masonry {
			column-count: 1;
		}
	}

/* Category quote heading above each gallery block */
.gallery-quote {
	margin-bottom: 1.25em;
}

/* Extra-large citation text (used on Déséquilibres) */
.quote-large {
	font-size: 2.1rem;
	line-height: 1.5;
	max-width: 1000px;
}

	@media screen and (max-width: 736px) {
		.quote-large {
			font-size: 1.5rem;
		}
	}

/* Lightbox */
#lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.92);
	z-index: 10000;
	align-items: center;
	justify-content: center;
}

	#lightbox-overlay.open {
		display: flex;
	}

	#lightbox-overlay img {
		max-width: 90vw;
		max-height: 85vh;
		box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	}

	.lightbox-close,
	.lightbox-prev,
	.lightbox-next {
		position: absolute;
		color: #fff;
		background: rgba(255,255,255,0.1);
		border: none;
		cursor: pointer;
		font-size: 1.6rem;
		line-height: 1;
		padding: 0.6em 0.9em;
		border-radius: 50%;
	}

	.lightbox-close:hover,
	.lightbox-prev:hover,
	.lightbox-next:hover {
		background: rgba(255,255,255,0.25);
	}

	.lightbox-close {
		top: 1.2em;
		right: 1.2em;
	}

	.lightbox-prev {
		left: 1.2em;
		top: 50%;
		transform: translateY(-50%);
	}

	.lightbox-next {
		right: 1.2em;
		top: 50%;
		transform: translateY(-50%);
	}

	@media screen and (max-width: 736px) {
		.lightbox-prev, .lightbox-next {
			font-size: 1.1rem;
			padding: 0.4em 0.6em;
		}
	}

/* Credits list */
.credits-list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
}

	.credits-list li strong {
		color: #333;
		margin-right: 0.4em;
	}

/* Shows hub cards */
.shows-hub-note {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 2em;
	color: #5b5b5b;
}