/**
 * WAR Theme - Responsive
 *
 * Desktop-first. Hierarchy is preserved at every step; nothing stacks
 * earlier than it has to.
 */

/* ---- Large laptop: tighten the rail, keep both columns ------------- */
@media (max-width: 1180px) {
	:root {
		--war-rail-gap: 40px;
		--war-band-main: none;
	}

	.war-hero__media {
		margin-inline-end: calc(var(--war-s10) * -1);
	}

	.war-recent__nav--prev { left: -18px; }
	.war-recent__nav--next { right: -18px; }
}

/* ---- Small laptop -------------------------------------------------- */
@media (max-width: 1024px) {
	:root {
		--war-fs-hero: 46px;
		--war-fs-display: 30px;
		--war-rail-w: 56px;
		--war-rail-gap: 28px;
		--war-section: 72px;
	}

	/* Rail collapses to icons rather than disappearing. */
	.war-rail__label,
	.war-rail__grouplabel,
	.war-rail__link .war-pill-soon {
		display: none;
	}

	.war-rail__link {
		justify-content: center;
		padding-inline: 0;
	}

	.war-nav ul {
		gap: var(--war-s5);
	}

	.war-spotlight__console {
		width: 200px;
		right: calc(var(--war-s10) * -1);
	}
}

/* ---- Tablet -------------------------------------------------------- */
@media (max-width: 900px) {
	:root {
		--war-fs-hero: 42px;
		--war-section: 64px;
	}

	.war-band {
		grid-template-columns: minmax(0, 1fr);
	}

	.war-rail {
		position: static;
		padding-block: 0 var(--war-s6);
		margin-block-end: var(--war-s6);
		border-block-end: 1px solid var(--war-line);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.war-rail::-webkit-scrollbar {
		display: none;
	}

	.war-rail__group,
	.war-rail__inner {
		display: flex;
		gap: var(--war-s2);
	}

	.war-rail__group + .war-rail__group {
		margin: 0;
		padding: 0;
		border: 0;
	}

	.war-rail__link {
		padding-inline: var(--war-s3);
	}

	.war-hero__grid,
	.war-spotlight__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--war-s8);
	}

	.war-hero__media {
		margin-inline: calc(var(--war-s5) * -1);
		min-height: 320px;
	}

	.war-hero__img {
		min-height: 320px;
		-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%);
		mask-image: linear-gradient(to top, transparent 0%, #000 20%);
	}

	.war-hero__intro {
		max-width: 46ch;
	}

	.war-spotlight__console {
		position: static;
		width: 220px;
		margin-block-start: var(--war-s5);
	}

	.war-market__grid {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.war-spotlight__games {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.war-recent__track {
		grid-auto-columns: calc((100% - (3 * 15px)) / 4);
	}

	.war-stats__panel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--war-s6);
	}

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

	.war-nav {
		position: fixed;
		inset: var(--war-header-h) 0 auto 0;
		justify-self: stretch;
		background: var(--war-black);
		border-block-end: 1px solid var(--war-line);
		padding: var(--war-s5) var(--war-s5) var(--war-s6);
		display: none;
		z-index: 60;
	}

	.war-nav.is-open {
		display: block;
	}

	.war-nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--war-s4);
	}

	.war-navtoggle {
		display: inline-flex;
	}

	.war-header__inner {
		grid-template-columns: auto 1fr auto;
	}

	.war-user__name {
		display: none;
	}
}

/* ---- Mobile --------------------------------------------------------- */
@media (max-width: 620px) {
	:root {
		--war-fs-hero: 34px;
		--war-fs-display: 26px;
		--war-fs-value: 28px;
		--war-section: 52px;
		--war-container: 100%;
		--war-container-wide: 100%;
	}

	.war-hero__actions .war-btn {
		flex: 1 1 auto;
	}

	.war-hero__stats {
		flex-wrap: wrap;
		gap: var(--war-s4);
	}

	.war-hero__stat + .war-hero__stat {
		padding-inline-start: var(--war-s4);
	}

	.war-discover__grid,
	.war-stats__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.war-spotlight__games {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.war-market__card {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.war-market__spark {
		grid-column: 1 / -1;
		height: 44px;
	}

	.war-recent__nav {
		display: none;
	}

	.war-recent__track {
		grid-auto-columns: 42%;
	}

	.war-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--war-s6);
	}

	.war-hero__scroll {
		display: none;
	}
}