/* ==========================================================================
   BLOCKBUSTER THEATRE - RESPONSIVE TWEAKS & UTILITIES
   ========================================================================== */

/* Ultra-wide Displays (1920px+) */
@media (min-width: 1920px) {

	.poster-section,
	.grid {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 36px;
	}

	.carousel-inner,
	.carousel-inner .item {
		height: 700px;
	}
}

/* Tablets & Small Laptops (1024px and down) */
@media (max-width: 1024px) {
	#progressbar li {
		font-size: 0.75rem;
	}

	#progressbar li::before {
		width: 34px;
		height: 34px;
		line-height: 32px;
	}
}

/* Mobile Devices (768px and down) */
@media (max-width: 768px) {
	body {
		padding-top: 70px;
	}

	header {
		height: 70px;
	}

	.page-banner {
		padding-top: 32px;
	}

	.timetable-controls {
		padding: 0 14px;
	}

	.day-tabs {
		gap: 8px;
	}

	.day-tab {
		padding: 9px 13px;
		font-size: 0.72rem;
	}

	.movie-card {
		grid-template-columns: 1fr;
		padding: 18px 16px;
		gap: 16px;
	}

	.showtimes-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.primary-nav {
		display: flex;
		position: fixed;
		top: 70px;
		left: 0;
		right: 0;
		background: var(--glass-bg);
		backdrop-filter: blur(1px);
		-webkit-backdrop-filter: blur(1px);
		border-bottom: 1px solid var(--border-subtle);
		padding: 24px 20px;
		z-index: 999;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-52px);
		pointer-events: none;
		transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth);
	}

	.primary-nav.open {
		display: flex;
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}

	.primary-nav .menu {
		flex-direction: column;
		width: 100%;
		gap: 12px;
	}

	.primary-nav .menu li a {
		width: 100%;
		text-align: center;
		padding: 14px 30px;
		font-size: 1.05rem;
	}

	.primary-nav .menu li a.current {
		box-shadow: 0 10px 22px var(--accent-glow);
	}

	.nav-cta-btn {
		padding: 14px 30px !important;
	}

	.hamburger {
		display: flex;
	}

	.carousel-inner,
	.carousel-inner .item {
		height: 480px;
	}

	.carousel-caption {
		bottom: 40px;
	}

	.carousel-caption .hero-actions {
		gap: 8px;
	}

	.carousel-caption .hero-actions .button {
		padding: 9px 14px;
		font-size: 0.78rem;
		border-radius: var(--radius-sm);
	}

	.carousel-caption p {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.seat-row {
		gap: 5px;
	}

	.seat {
		width: 22px;
		height: 22px;
	}

	.booking-form {
		padding: 20px 14px;
	}

	.carousel-caption.movie h1 {
		font-size: clamp(2.8rem, 8vw, 4rem);
	}

	.carousel-caption.movie p,
	.col-no-border.col-2-3 p {
		font-size: 16px;
		line-height: 1.65;
	}

	.runtime-movies,
	.day-of-week {
		font-size: 14px;
	}

	.col-no-border.col-2-3 h2,
	.col.col-1-3 h1 {
		font-size: 22px;
	}

	.show-time {
		font-size: 14px;
		padding: 8px 14px;
	}

	.genre-filter-container {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 16px;
	}
}

/* Small Phones (480px and down) */
@media (max-width: 480px) {

	.carousel-inner,
	.carousel-inner .item {
		height: 400px;
	}

	.carousel-control {
		display: none;
	}

	.seat-row {
		gap: 3px;
	}

	.seat {
		width: 18px;
		height: 18px;
		border-radius: 4px 4px 2px 2px;
	}

	.row-label {
		display: none;
	}

	.form-actions {
		flex-direction: column-reverse;
	}

	.form-actions .form-button {
		width: 100%;
	}

	.ticket-details-grid {
		grid-template-columns: 1fr;
	}

	.carousel-caption .hero-actions .button {
		padding: 8px 11px;
		font-size: 0.72rem;
	}
}

/* ==========================================================================
   Responsive Breakpoints & Fluid Mobile Layouts
   ========================================================================== */

@media (max-width: 900px) {

	.movie-body-layout,
	.about-grid-layout {
		grid-template-columns: 1fr;
	}

	.primary-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		border-bottom: 1px solid var(--border-subtle);
		padding: 24px;
		box-shadow: var(--shadow-lg);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-50px);
		pointer-events: none;
		transition: opacity var(--transition-smooth), transform var(--transition), visibility var(--transition-slow);
	}

	.primary-nav.open {
		display: flex;
		flex-direction: column;
		width: 100%;
		gap: 12px;
		opacity: 1 !important;
		visibility: visible !important;
		transform: translateY(0) !important;
		pointer-events: auto !important;
	}

	.hamburger {
		display: flex;
	}
}

@media (max-width: 600px) {

	.poster-section,
	.grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 16px;
	}

	.poster-column .overlay {
		padding: 12px;
	}

	.overlay-text {
		font-size: 1rem;
	}

	.payment-methods-grid {
		grid-template-columns: 1fr;
	}

	footer {
		flex-direction: column;
		text-align: center;
	}
}

@media (max-width: 900px) {
	.movie-page {
		grid-template-columns: 1fr;
	}
}