/* Press page (/press/). Loaded only on pages that list it in `extraCss`. */

/* ---------- 17. Press page ---------- */
.press-hero {
	position: relative;
	overflow: hidden;
	padding: 72px 0 var(--s-7);
	border-bottom: 1px solid var(--c-line);
}

.press-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
	opacity: 0.7;
}

.press-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--c-bg) 8%, rgba(15, 17, 19, 0.75) 45%, rgba(15, 17, 19, 0.25) 80%), linear-gradient(to top, var(--c-bg), transparent 55%);
}

.press-hero .container {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--s-6);
	flex-wrap: wrap;
}

.press-hero h1 picture { display: block; }

.press-hero__logo {
	width: min(440px, 80vw);
	height: auto;
	margin: var(--s-4) 0 var(--s-4);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

/* The h1 holds the logo (the visible title) and the "Press kit" subtitle. */
.press-hero h1 {
	font-size: var(--fs-xl);
	font-weight: 600;
	color: var(--c-heading);
}

.press-hero .lede { max-width: 520px; }

.press-hero__lede { margin-top: var(--s-2); }

.press-zip__note {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.press-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-3);
}

.breadcrumbs {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.breadcrumbs a {
	color: var(--c-text-muted);
}

.press-layout {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: var(--s-8);
	align-items: start;
	padding-top: var(--s-7);
	padding-bottom: var(--section-y);
}

/* The aside runs the full height of the layout, so the section nav (its
   last item) can stick below the header once the fact sheet has scrolled
   past. The aside itself never sticks: it is taller than a screen. */
.press-aside {
	align-self: stretch;
	display: grid;
	align-content: start;
	gap: var(--s-5);
}

.factsheet {
	border-radius: var(--r-lg);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	padding: var(--s-5);
}

.factsheet h2 { margin-bottom: var(--s-4); }

.factsheet dl {
	display: grid;
	gap: var(--s-3);
}

.factsheet dl > div {
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--c-line);
}

.factsheet dl > div:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.factsheet dt {
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-text-muted);
}

.factsheet dd {
	color: var(--c-heading);
	font-size: var(--fs-card);
}

.press-nav {
	position: sticky;
	top: calc(var(--header-h) + var(--s-4));
	display: grid;
}

/* A stuck nav sits inside the root's scroll padding (layout.css), so
   focusing one of its links would scroll the page, and scroll it again on
   every Tab, since the nav stays put. Its links' scroll box starts at the
   padding line instead, so the browser sees them as in view. */
.press-nav a {
	scroll-margin-top: calc(var(--s-4) - var(--s-5));
	display: block;
	padding: 6px var(--s-3);
	border-left: 2px solid var(--c-line);
	color: var(--c-text-muted);
	text-decoration: none;
	font-size: var(--fs-sm);
}

.press-nav a:hover {
	color: var(--c-heading);
	border-left-color: var(--c-water-lit);
}

.press-main {
	min-width: 0;
	display: grid;
	/* minmax(0, ...): a long unbreakable child must not widen the column. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-8);
}

.press-section > h2 {
	font-size: var(--fs-2xl);
	margin-bottom: var(--s-5);
	display: flex;
	align-items: center;
	gap: var(--s-4);
}

.press-section > h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--c-line);
}

.press-section p,
.press-section li {
	/* In rem, not ch: the 18 px lede and the 16 px paragraphs share one
	   right edge. */
	max-width: 39rem;
}

.press-features {
	display: grid;
	gap: var(--s-4);
}

.press-features strong,
.press-section .lede strong,
.asset figcaption strong { color: var(--c-heading); }

.press-sub {
	font-size: var(--fs-lg);
	margin: var(--s-6) 0 var(--s-4);
}

.press-sub:first-of-type { margin-top: 0; }

.press-note { margin-top: var(--s-4); }

.press-videos {
	display: grid;
	gap: var(--s-4);
}

.asset-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
}

.asset-grid--two { grid-template-columns: 1fr 1fr; }

.asset {
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	display: flex;
	flex-direction: column;
}

.asset__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-surface-2);
}

.asset__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Focal points for tall or wide art cropped into 16:10 tiles. */
.asset__media--left img { object-position: 45% 100%; }
.asset__media--low img { object-position: 50% 72%; }

/* Screenshots link to their full-size file (js/lightbox.js) and zoom on
   hover like the home gallery. */
.asset__zoom {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.asset__zoom:focus-visible { outline-offset: -2px; }

.asset__zoom img { transition: transform 600ms var(--ease); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.asset__zoom:hover img { transform: scale(1.03); }
}

/* Wide art with the logo in it: show it whole rather than crop the title. */
.asset__media--contain img { object-fit: contain; }

/* Trailer inside an asset tile: the tile supplies the frame. */
.asset--trailer .trailer {
	border-radius: 0;
	box-shadow: none;
}

/* The tile clips anything outside it, and the poster's scrim would cover
   an outline inside it, so the focus ring is drawn on the frame layer
   (::before, above the scrim), just inside the edge. */
.asset--trailer .trailer:focus-visible { outline: none; }

.asset--trailer .trailer:focus-visible::before {
	inset: 4px;
	border: 2px solid var(--c-focus);
	border-radius: var(--r-sm);
}

/* A smaller disc than home's; in a tile of 480 px or less the trailer's
   own narrow disc (components.css) takes over. */
@container (min-width: 481px) {
	.asset--trailer .trailer__play {
		width: 72px;
		height: 72px;
	}

	.asset--trailer .trailer__play svg {
		width: 26px;
		height: 26px;
	}
}

.asset--trailer .trailer-note {
	margin: 0;
	padding: var(--s-3) var(--s-4) 0;
}

.asset figcaption {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* The download link sits on the label's first line when it wraps. */
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3) var(--s-4);
	font-size: var(--fs-sm);
}

.asset figcaption > span { color: var(--c-text-muted); }

/* The label wraps before the download link drops to its own line. */
.asset figcaption > span:first-child {
	flex: 1 1 12ch;
	min-width: 0;
}

.dl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* A taller tap target (39 px) without moving the caption. */
	padding-block: var(--s-2);
	margin-block: calc(-1 * var(--s-2));
	font-weight: 600;
	font-size: var(--fs-sm);
	white-space: nowrap;
}

/* Download glyph as a mask, not an inline SVG per link: one small request
   instead of ~20 copies in the HTML. Pending (span) links show no glyph. */
a.dl::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("/icons/download.svg") center / contain no-repeat;
	mask: url("/icons/download.svg") center / contain no-repeat;
}

.logo-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--s-4);
}

/* One box height for every logo tile, wide or not, so a row's captions
   start on one line and the full-width tile never balloons. */
.logo-tile .asset__media {
	display: grid;
	place-items: center;
	padding: var(--s-5);
	height: 10rem;
}

/* <picture> is the grid item here, so it needs the box for the img to fit in. */
.logo-tile .asset__media picture {
	width: 100%;
	height: 100%;
	min-height: 0;
}

.logo-tile .asset__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The narrow tiles stack the label over the link, the same in every tile.
   flex: none, or the 12ch basis above becomes a height in a column. */
.logo-tile:not(.logo-tile--wide) figcaption {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-1);
}

.logo-tile:not(.logo-tile--wide) figcaption > span:first-child { flex: none; }

.press-cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	align-items: center;
	margin-top: var(--s-5);
}

/* Additional links: live profiles and the Steam developer page. Two to a
   row, so the longest handle fits on one line. */
.press-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-3);
}

/* With an odd count the last link takes the whole row. */
.press-links li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.press-links a {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	height: 100%;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-md);
	border: 1px solid var(--c-line);
	background: var(--c-surface);
	text-decoration: none;
	color: var(--c-heading);
	transition: border-color var(--t-med);
}

.press-links a:hover { border-color: var(--c-water-lit); }

.press-links svg {
	width: 22px;
	height: 22px;
	flex: none;
}

.press-links span { min-width: 0; }

.press-links__host {
	display: block;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
	overflow-wrap: anywhere;
}

/* Awards, quotes and articles render only when press.js lists some. */
.press-list {
	display: grid;
	gap: var(--s-2);
	padding-left: var(--s-5);
	list-style: disc;
}

.press-quote {
	margin: 0 0 var(--s-4);
	padding-left: var(--s-4);
	border-left: 2px solid var(--c-water-lit);
}

.press-quote footer {
	margin-top: var(--s-2);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* Small laptops: the main column is 533-672 px, too narrow for three
   tiles or four logos. Keep tileSizes / logoSizesWide in press.njk in step. */
@media (max-width: 1100px) and (min-width: 961px) {
	.asset-grid { grid-template-columns: 1fr 1fr; }

	.logo-grid { grid-template-columns: repeat(3, 1fr); }

	.logo-tile--wide { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
	.press-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-6);
		padding-top: var(--s-5);
	}

	.press-aside { display: contents; }

	.factsheet { order: 0; }

	.factsheet dl {
		grid-template-columns: 1fr 1fr;
		column-gap: var(--s-4);
	}

	.factsheet__wide { grid-column: 1 / -1; }

	/* A row of pills stuck right under the header, on the page background
	   so text scrolls under it, not through it. */
	.press-nav {
		order: -1;
		top: var(--header-h);
		z-index: 10;
		display: flex;
		overflow-x: auto;
		gap: var(--s-2);
		padding-block: var(--s-2);
		background: var(--c-bg);
		/* A hairline under the row, like the header's, where text slides under. */
		box-shadow: 0 1px 0 var(--c-line);
		scrollbar-width: none;
	}

	/* The scroller clips whatever sticks out of it, so the pills draw their
	   focus ring inside their own edge (nav.js scrolls a focused pill fully
	   into the row). */
	.press-nav a:focus-visible { outline-offset: -2px; }

	/* Headings and focus land below the header and the stuck pill row. */
	:root:has(.press-nav) { scroll-padding-top: calc(var(--header-h) + 4.5rem); }

	/* The stuck pills count as already in view: the negative top margin
	   lifts their snap box above the padding, and the matching bottom
	   margin keeps that box upright, or WebKit scrolls the page by the
	   difference on every Tab. */
	.press-nav a {
		scroll-margin-top: calc(var(--s-2) - 4.5rem);
		scroll-margin-bottom: calc(4.5rem - var(--s-2));
	}

	.press-nav a {
		flex: none;
		border: 1px solid var(--c-line);
		border-radius: var(--r-pill);
		padding: 6px 14px;
	}

	.press-main { gap: var(--s-7); }

	.asset-grid { grid-template-columns: 1fr 1fr; }

	.logo-grid { grid-template-columns: repeat(3, 1fr); }

	.logo-tile--wide { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
	.asset-grid,
	.press-links { grid-template-columns: 1fr; }

	/* Two small logos to a row; the one left over takes the row. */
	.logo-grid { grid-template-columns: 1fr 1fr; }

	.logo-tile:last-child:nth-child(even) { grid-column: 1 / -1; }

	.press-hero__actions,
	.press-hero__actions .btn,
	.press-cta > .btn { width: 100%; }
}

/* Short screens (landscape phones, 400 % zoom): the pill row scrolls with
   the page like the header (layout.css), so the two don't cover half of it. */
@media (max-width: 960px) and (max-height: 500px) {
	.press-nav { position: static; }

	.press-nav a { scroll-margin: 0; }

	:root:has(.press-nav) { scroll-padding-top: var(--s-5); }
}