/*
  Seatmap-only layout override.

  Goals:
  - Keep the normal Skel layout behavior (floats, gutters, centered container).
  - Expand the main container and content column so the seatmap fits INSIDE #content.box.
  - Sidebar keeps the same width as before.

  Grid:
  - 47 columns x 24px = 1128px
  - Desired #content.box padding on seatmap page: 39px

  Needed inner width for #content.box to avoid overflow:
  - 1128px (grid) + 39px*2 (padding) = 1206px

  Note about Skel gutters:
  - Each column has padding-left: 2.5em (see skel.css). #content.box sits inside the column,
    so we account for that by giving the 8u column enough width.

  This CSS file MUST only be loaded on the seatmap page.
*/

:root {
	--seatmap-grid-width: 1128px;
	--seatmap-box-pad: 39px;
	--seatmap-sidebar-width: 25em; /* matches 4u on the normal 75em container */
}

/* Only apply when the viewport is wide enough to fit content + sidebar without wrapping */
@media screen and (min-width: 1700px) {
	/* Widen the main container just enough to fit the seatmap content + sidebar */
	section#main.container {
		width: 100% !important;
		max-width: calc(
			var(--seatmap-grid-width)
			+ (var(--seatmap-box-pad) * 2)
			+ var(--seatmap-sidebar-width)
			+ 2.5em /* content column left gutter */
		) !important;
	}

	/* Keep sidebar width stable (do not let it scale up with the wider container) */
	section#main.container > .row > [class~="4u"] {
		width: var(--seatmap-sidebar-width) !important;
	}

	/* Give the content column the remaining width */
	section#main.container > .row > [class~="8u"] {
		width: calc(100% - var(--seatmap-sidebar-width)) !important;
	}

	/* Seatmap page padding inside the content box */
	section#main.container section#content.box {
		padding: var(--seatmap-box-pad) !important;
		overflow-x: visible !important;
	}
}