/* The Road — page layout. HAND-WRITTEN; not touched by the porter.
 *
 * Owner: "I want the road to be full width, no rail. map on the rigt."
 *
 * road.css is GENERATED from the prototype by scripts/build-games-assets.mjs
 * and carries a banner saying not to hand-edit it, because the next re-port
 * would silently drop the edit. So the full-width, map-on-the-right layout
 * lives here instead — the same arrangement the JS side already uses, where
 * road-schedule.js layers the desk's schedule over the shipped game rather
 * than editing road-engine.js. Enqueued with `rt-game-road` as a DEPENDENCY,
 * so this sheet always loads after the generated one and may override it.
 *
 * WHY A CONTAINER QUERY AND NOT A MEDIA QUERY. The same shortcode can be
 * dropped into any page. On templates/page-game-wide.html it gets ~1400px;
 * on an ordinary page it gets the ~700px reading column beside the editorial
 * rail. A viewport media query cannot tell those apart — at 1440px wide it
 * would fire in both, and a two-column plat inside a 700px column is a mess.
 * `@container` asks the only question that actually matters: how much room
 * does this game have? Where container queries are unsupported the whole
 * block is skipped and the game renders exactly as it does today, stacked.
 */

/* The container, plus one unbreaking.
 *
 * road.css sets `overflow-x: hidden` on this same element. `hidden` on one
 * axis forces the other axis to `auto`, which makes the element a scroll
 * container — and a scroll container between the map and the viewport is
 * what silently kills `position: sticky`. `clip` does the same clipping job
 * (nothing here may make the PAGE scroll sideways) without the scrollport.
 * It is also what games.css already asks for on .rt-game; road.css was
 * quietly overriding it. Specificity 0,2,0 beats road.css's 0,1,0. */
.rt-game.rt-road {
	container-name: rt-road;
	container-type: inline-size;
	overflow-x: clip;
}

/* 940px, not 1000px: at a 1024px viewport this game has 976px to work with,
 * and that is the narrowest desktop worth splitting — 488px a side leaves the
 * dispatch about 43 characters of measure, which is a newspaper column, and
 * the map keeps a usable window because it pans anyway. Below that the
 * stacked layout is genuinely better: the map gets the full width instead of
 * half of a small one. */
@container rt-road (min-width: 940px) {

	/* road.css caps the sheet at 820px — the prototype was a phone-first
	 * document. Full width here means the theme's own wide measure; the
	 * page template constrains the column to 1400px, so this just stops the
	 * sheet from re-imposing the old cap inside it. */
	.rt-road .sheet {
		max-width: none;
	}

	/* Two equal columns. Equal, not 60/40, because the map window ends up
	 * WIDER than it is today (678px at a 1400px sheet, against 656px in the
	 * old single column) — "map on the right" should not cost the map size.
	 * The neatline ticks and the foot rule still run the full width, the way
	 * they do on a real plat sheet. */
	.rt-road .neat {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"ticks    ticks"
			"mast     map"
			"rail     map"
			"ledger   map"
			"case     map"
			"dispatch map"
			"block    map"
			"foot     foot";
		align-content: start;
	}

	.rt-road .ticks     { grid-area: ticks; }
	.rt-road .mast      { grid-area: mast; }
	.rt-road .mapframe  { grid-area: map; }
	.rt-road .rail      { grid-area: rail; }
	.rt-road .ledger    { grid-area: ledger; }
	.rt-road .rt-game-case { grid-area: case; }
	.rt-road .dispatch  { grid-area: dispatch; }
	.rt-road .block     { grid-area: block; }
	.rt-road .foot      { grid-area: foot; }

	/* The map travels with the reader.
	 *
	 * The dispatch column is several times taller than the 400px plat, so a
	 * static map would scroll away three paragraphs into a station and the
	 * reader would be reading about a river crossing with no river on screen.
	 * `align-self: start` keeps the frame at its natural height instead of
	 * stretching to the column, and the grid area — every row from the
	 * masthead to the title block — is what it is free to travel down. This
	 * site has no sticky header to clear (see the .rt-rail note in
	 * rocheport-extras.css), so the offset is just breathing room, and it
	 * borrows the theme's own spacing token rather than inventing a number. */
	.rt-road .mapframe {
		position: sticky;
		top: var(--wp--preset--spacing--30, 1.5rem);
		align-self: start;
	}

	/* The column division, drawn as a plat rule rather than a gap: the map
	 * panel butts straight up against the text and is separated by ink. The
	 * left column's items already carry ~26px of right padding, which is the
	 * gutter. */
	.rt-road .mapwrap {
		border-left: 1px solid var(--rule);
	}

	/* The masthead deck's underline used to run the width of the sheet and
	 * close the header off. In two columns it would stop dead at the middle
	 * rule, which reads like a broken border rather than a deliberate one —
	 * so the deck keeps its space and loses the line, and the rail's own
	 * furniture below does the separating. */
	.rt-road .deck {
		border-bottom: 0;
	}
}

/* -- the chainage rail head, in a narrow column ----------------------------
 * Three labels — "East — St. Charles", the mileage, "Arrow Rock — West" — in
 * one `justify-content: space-between` flex row. Flex items will not shrink
 * below their own min-content, so once the column is narrower than the three
 * of them laid end to end the row simply overflows and the west end of the
 * road gets clipped off the sheet. That is already true today on a phone;
 * it stays true in any narrow column, including the left column here at the
 * bottom of the two-column range.
 *
 * So below 520px of game width the middle label drops to its own line and
 * the two ends keep the row: the reader still gets east, west and how far,
 * on two tidy lines instead of one clipped one. `nowrap` on the ends stops
 * "Arrow Rock — West" breaking after the dash. Container-scoped, so it keys
 * off the column the rail is actually in and not the size of the phone. */
@container rt-road (max-width: 520px) {
	.rt-road .railhead {
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 0;
	}
	.rt-road .railhead > span {
		white-space: nowrap;
	}
	.rt-road .railhead > span:nth-child(2) {
		order: 3;
		flex: 1 0 100%;
		text-align: center;
		margin-top: 6px;
	}
}