/* ===========================================================================
   THE EMPTY HALLS — PAGE LAYOUT

   Two columns above the fold: the write-up on the left, a media rail on the
   right holding the screenshot carousel, the Steam card and the Discord card.
   Everything runs the full width of the window.

   The page used to float the carousel right and the Steam card left, which
   left the prose running the full width of the window on desktop and let the
   two cards collide. This grid replaces those floats.

   Loaded by: the-empty-halls.html
   =========================================================================== */

/* The page runs the full width of the window — no capped, centred column — so
   the text starts at the left edge and the rail ends at the right edge at
   every size.

   Both tracks are proportional so they grow together. The rail stops at 520px
   because the carousel is 4:3: let it get much wider and the rail towers over
   the write-up beside it. */
.teh-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 520px);
	align-items: start;
	gap: 24px;
	margin-bottom: 32px;
	text-justify: auto;
}

.teh-copy p {
	line-height: 1.65;
	margin-top: 0;
	margin-bottom: 1.15em;
}

.teh-copy p:last-child {
	margin-bottom: 0;
}

.teh-copy .lead {
	font-size: 1.075rem;
	line-height: 1.6;
	color: var(--color-text-1);
}

/* The right-hand column. Cards are stacked with one consistent gap instead of
   each one carrying its own margins. */
.teh-rail {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

/* Cards fill the rail rather than sitting at their own natural widths. */
.teh-rail > * {
	width: 100%;
	max-width: 100%;
	margin: 0;
	float: none;
}

/* ---------------------------------------------------------------------------
   Card corner badges.

   Both cards put a "Steam" / "Discord" badge in the top-right corner, absolutely
   positioned. That was designed for the 512px-wide card on TSBM; in this rail
   the card can be half that and the title ran underneath the badge. So the
   title reserves the badge's width, and on a narrow card the badge drops its
   wording and keeps just the logo.

   Keyed off the card's own width rather than the viewport's, because the same
   card is a different size in the two-column and stacked layouts.
   --------------------------------------------------------------------------- */

.teh-rail .game-widget-container {
	container-type: inline-size;
	container-name: gamecard;
	/* The Discord title runs to two lines at every card width, so both cards
	   are held to its height rather than sitting at 180 and 197. A little over
	   it, so both land on the floor rather than one being content-driven. */
	min-height: 200px;
}

.teh-rail .game-title {
	padding-right: 76px;
	line-height: 1.2;
}

@container gamecard (max-width: 380px) {
	.steam-badge span,
	.discord-badge span {
		display: none;
	}

	.steam-badge,
	.discord-badge {
		padding: 7px;
		border-radius: 50%;
	}

	/* Matches .teh-rail .game-title's specificity so it actually wins. */
	.teh-rail .game-title {
		padding-right: 28px;
	}
}

/* ---------------------------------------------------------------------------
   Wide cards.

   In the bottom row of the wide layout a card can be over 900px across, where
   the stacked content leaves a very wide button under one short line of text.
   Past this width the card lays out as a banner instead: art, then the text,
   then the button on the right.

   .card-text is display: contents until then, so narrow cards keep the exact
   four-item stack they had before the wrapper existed.
   --------------------------------------------------------------------------- */

.teh-rail .card-text {
	display: contents;
}

/* Only the arrangement changes on a wide card — the type, art and button keep
   the sizes they have everywhere else. */
@container gamecard (min-width: 560px) {
	.teh-rail .game-icon-section {
		flex: 0 0 180px;
		width: auto;
	}

	/* Both children run the full height: the text spreads top-to-bottom exactly
	   as it does in the stacked card, and the button sits on the bottom line
	   rather than floating in the middle. */
	.teh-rail .game-content {
		flex-direction: row;
		align-items: stretch;
		gap: 32px;
	}

	.teh-rail .card-text {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-width: 0;
	}

	/* Title and subtitle stay paired at the top; the tag drops to the bottom
	   line so it sits level with the button across the card. */
	.teh-rail .wishlist-tag,
	.teh-rail .discord-tag {
		margin-top: auto;
		margin-bottom: 0;
	}

	/* The title sits well clear of the corner badge in this layout. */
	.teh-rail .game-title {
		padding-right: 0;
	}

	/* Sits on the same bottom line as the stacked card's button, so the two
	   cards side by side line up instead of one being centred. */
	.teh-rail .action-buttons {
		flex: 0 0 260px;
		align-items: flex-end;
	}
}

/* ---------------------------------------------------------------------------
   Sections under the two-column block (poll, patch notes). They run the full
   content width, so they line up with the copy on the left and the rail on
   the right.
   --------------------------------------------------------------------------- */

.teh-section {
	clear: both;
	margin-top: 40px;
}

/* #main_area h2 in style_main.css zeroes the bottom margin, hence the ID here. */
#main_area .teh-section > h2 {
	margin-top: 0;
	margin-bottom: 16px;
}

/* ---------------------------------------------------------------------------
   Wide screens.

   Full width makes the write-up short and wide — at 1920 it is only ~350px
   tall while a rail of carousel + two cards is ~850px, leaving a large hole
   under the text. So above this width the cards come out of the rail and sit
   in a row beneath the write-up, and the carousel takes the right-hand column
   on its own, spanning both rows.
   --------------------------------------------------------------------------- */

@media (min-width: 1250px) {
	.teh-top {
		/* Steam takes the wide cell under the write-up — buying the game is the
		   priority, so it gets the banner. The stacked order below is
		   unaffected: this only renames the cells, not the DOM. */
		grid-template-areas:
			"copy  carousel"
			"steam discord";
		row-gap: 24px;
	}

	.teh-copy {
		grid-area: copy;
	}

	.teh-rail {
		display: contents;
	}

	.teh-rail > .carousel-container {
		grid-area: carousel;
	}

	.teh-rail > .steam-version {
		grid-area: steam;
	}

	.teh-rail > .discord-version {
		grid-area: discord;
	}

	/* Both cards fill the row, so the pair stays the same height whichever one
	   has the taller content. */
	.teh-rail > .steam-version,
	.teh-rail > .discord-version {
		align-self: stretch;
	}
}

/* ---------------------------------------------------------------------------
   One column. Below this the text column gets too narrow to read next to the
   rail.

   Stacking the whole rail on top would put ~660px of screenshots and cards
   before the first sentence. Instead the rail is dissolved with
   display: contents so its children become items of .teh-top directly, and
   they are interleaved: screenshots, the Steam card, then the write-up, with
   the Discord card after it.
   --------------------------------------------------------------------------- */

@media (max-width: 849px) {
	.teh-top {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.teh-rail {
		display: contents;
	}

	.teh-rail > .carousel-container {
		order: 1;
	}

	.teh-rail > .steam-version {
		order: 2;
	}

	.teh-top > .teh-copy {
		order: 3;
	}

	.teh-rail > .discord-version {
		order: 4;
	}

	/* The rail is no longer a box that can be capped, so the media caps itself.
	   The text still runs the full width. */
	.teh-rail > .carousel-container,
	.teh-rail > .game-widget-container {
		max-width: 480px;
	}
}