* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background-color: #000000;
	background-image: url("images/theater.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
	background-size: cover;
	height: 100%;
	overflow-y: auto;
}

body {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Safari iOS fix */
@supports (-webkit-touch-callout: none) {
	html, body {
		height: -webkit-fill-available;
	}
}

.spacer-top,
.spacer-bottom {
	height: 5vh; /* Fallback for older browsers */
	height: 5dvh; /* Modern browsers - dynamic viewport height */
	flex-shrink: 0;
	width: 100%;
}

/* Top Banner (stays visible, doesn't fade) */
.top-banner {
	width: 31.5%;
	flex: 0 0 auto;
	margin-bottom: 0.5%;
	position: relative;
}

.top-banner img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}

.banner-text {
	position: absolute;
	top: 50%;
	left: 5%;
	right: 5%;
	transform: translateY(-50%);
	font-family: 'Philosopher', serif;
	font-weight: 700;
	color: #211c1c;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
	letter-spacing: 0.1em;
	font-size: clamp(4.5rem, 4vw, 3rem);
}

@media (max-width: 1920px) {
	.banner-text {
		font-size: clamp(3rem, 4vw, 3rem);
		left: 3%;
		right: 3%;
	}
}

@media (max-width: 768px) {
	.banner-text {
		font-size: clamp(1.3rem, 5.5vw, 2.2rem);
		left: 3%;
		right: 3%;
	}
}

@media (max-width: 480px) {
	.banner-text {
		font-size: clamp(1.1rem, 6vw, 1.8rem);
		left: 2%;
		right: 2%;
		letter-spacing: 0.05em;
	}
}

/* Ultra small devices */
@media (max-width: 320px) {
	.banner-text {
		font-size: 1rem;
		white-space: normal;
		line-height: 1.2;
	}
}

/* Content Container (fades in/out) */
.container {
	width: 45%;
	flex: 1 1 0; /* Allow growing/shrinking */
	min-height: 0; /* Critical for flexbox children to respect parent */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-in-out; // Match HTML transition duration.
	margin-bottom: 0.3%;
}

.container.fade-in {
	opacity: 1;
}

.container.fade-out {
	opacity: 0;
}

/* Main Grid Layout */
.main-grid {
	display: grid;
	grid-template-columns: 19.1% 57.8% 19.1%;
	gap: 2%;
	flex: 1 1 0; /* Fill container */
	min-height: 0; /* Critical for nested flex/grid */
}

/* Side Columns (Left & Right) */
.left-column,
.right-column {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.image-box {
	width: 100%;
	position: relative;
	flex: 1 1 0; /* Distribute space evenly */
	min-height: 0; /* Allow shrinking */
}

.image-box img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	transition: transform 0.3s ease, filter 0.3s ease;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

.image-box:hover img {
	transform: scale(1.05);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) brightness(1.1);
}

.image-box:not(:last-child) {
	margin-bottom: 2%;
}

/* Center Feature */
.center-feature {
	display: flex;
	align-items: center;
	height: 100%;
	min-height: 0;
}

.center-feature img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

/* Bottom Row (stays visible, doesn't fade) */
.bottom-row {
	width: 45%;
	display: grid;
	grid-template-columns: 13.2% 13.2% 40% 13.2% 13.2%;
	gap: 1.8%;
	flex: 0 0 auto;
	margin-top: 0.5%;
	align-items: center;
}

.bottom-box img {
	width: 100%;
	max-height: 25vh; /* Fallback for older browsers. */
	max-height: 25dvh; /* Modern browsers - dynamic viewport height. */
	height: auto;
	display: block;
	object-fit: contain;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.bottom-box:hover img {
	transform: scale(1.1);
	filter: brightness(1.15);
}

/* Aspect-ratio locked ticket container with container query units. */
.bottom-box-center {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 1865 / 675;
	width: 100%;
}

.bottom-box-center img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: fill;
}

.ticket-title {
	position: absolute;
	top: 50%;
	left: 10%;
	right: 20%;
	transform: translateY(-50%);
	font-family: 'Philosopher', serif;
	font-weight: 700;
	color: #1a1a1a;
	text-align: center;
	line-height: 1.1;
	pointer-events: none;
}

.ticket-year {
	position: absolute;
	right: 6.5%;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	transform-origin: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 6cqi;
	font-weight: 700;
	color: #9b916f;
	pointer-events: none;
}

/* Z-Index Classes */
.z500  { z-index: 500; }
.z600  { z-index: 600; }
.z700  { z-index: 700; }
.z800  { z-index: 800; }
.z850  { z-index: 850; }
.z950  { z-index: 950; }
.z1000 { z-index: 1000; }
.z1100 { z-index: 1100; }

/* Responsive Design */
@media (max-width: 1400px) {
	.container,
	.bottom-row {
		width: 62%;
	}
	.top-banner {
		width: 43.4%;
	}
}

@media (max-width: 1200px) {
	.container,
	.bottom-row {
		width: 70%;
	}
	.top-banner {
		width: 49%;
	}
}

@media (max-width: 1024px) {
	.container,
	.bottom-row {
		width: 78%;
	}
	.top-banner {
		width: 54.6%;
	}
	.main-grid {
		grid-template-columns: 20% 56% 20%;
	}
	.bottom-row {
		grid-template-columns: 14% 14% 40% 14% 14%;
		gap: 2%;
	}
}

/* Special handling for very short heights. */
@media (max-height: 600px) {
	.spacer-top,
	.spacer-bottom {
		height: 3dvh; /* Smaller spacers on short screens. */
	}
	
	.image-box img {
		max-height: 20dvh;
	}
}

/* Mobile ticket text fixes. */
@media (max-width: 768px) {
	.ticket-title {
		left: 6% !important;
		right: 16% !important;
		font-size: clamp(0.55rem, 4.5cqi, 1.4rem) !important;
		line-height: 1.05;
		word-break: break-word !important;
		white-space: normal !important;
	}

	.ticket-year {
		font-size: 5cqi;
		right: 5%;
	}
}

@media (max-width: 480px) {
	.ticket-title {
		left: 5% !important;
		right: 15% !important;
		font-size: clamp(0.45rem, 4cqi, 1.1rem) !important;
		line-height: 1.0;
	}

	.ticket-year {
		font-size: 4.5cqi;
		right: 4%;
	}
}