/* Responsive rules for the ported design (the source is desktop-first, 1440px canvas). */

/* Front-page FAQ: the open/closed look is baked into inline styles at render time,
   so the same states need CSS to follow the accordion once the visitor clicks. */
.home [data-accordion-item] {
	background: rgba(255, 255, 255, 0.03) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	box-shadow: none !important;
}

.home [data-accordion-item].is-open {
	background: rgba(255, 255, 255, 0.055) !important;
	border-color: rgba(255, 62, 138, 0.55) !important;
	box-shadow: rgba(0, 0, 0, 0.85) 0 14px 36px -22px !important;
}

.home [data-accordion-item] [data-accordion-trigger] > span:first-child {
	color: rgba(255, 255, 255, 0.55) !important;
}

.home [data-accordion-item].is-open [data-accordion-trigger] > span:first-child {
	color: #FF3E8A !important;
}

.home [data-accordion-item] [data-accordion-trigger] > span:last-child {
	border-color: rgba(255, 255, 255, 0.55) !important;
	background: rgba(255, 255, 255, 0.04) !important;
	color: rgba(255, 255, 255, 0.6) !important;
	transform: rotate(0deg) !important;
}

.home [data-accordion-item].is-open [data-accordion-trigger] > span:last-child {
	border-color: rgba(255, 62, 138, 0.7) !important;
	background: rgba(255, 62, 138, 0.14) !important;
	color: #FF6FA5 !important;
	transform: rotate(180deg) !important;
}

/* "Read more" collapsible blocks driven by [data-toggle-target] in main.js. */
.gta6-collapse {
	display: none;
}

.gta6-collapse.is-open {
	display: block;
	margin-top: 12px;
}

.gta6-collapse p {
	margin: 0 0 12px;
}

.gta6-collapse p:last-child {
	margin-bottom: 0;
}

/* Pagination — the design's pill row. */
.gta6-pagination {
	margin-top: 52px;
}

.gta6-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.gta6-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.65);
	font-family: Oswald, sans-serif;
	font-size: 13px;
	font-weight: 500;
	transition: border-color 300ms ease, color 300ms ease, background 300ms ease;
}

.gta6-pagination .page-numbers.current {
	background: linear-gradient(100deg, #FF3E8A, #FF8A3D);
	border-color: transparent;
	color: #180712;
	font-weight: 600;
}

.gta6-pagination .page-numbers.dots {
	border-color: transparent;
	color: rgba(255, 255, 255, 0.55);
}

.gta6-pagination a.page-numbers:hover,
.gta6-pagination a.page-numbers:focus-visible {
	border-color: rgba(255, 62, 138, 0.6);
	background: rgba(255, 62, 138, 0.12);
	color: #FFFFFF;
}

/* Article body: the design styles every element inline; WP content needs rules. */
.gta6-article__body {
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.68);
}

.gta6-article__body > *:first-child {
	margin-top: 26px;
}

.gta6-article__body p {
	margin: 14px 0 0;
}

.gta6-article__body h2 {
	margin: 38px 0 0;
	font-family: Oswald, sans-serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	text-transform: uppercase;
	color: #FFFFFF;
}

.gta6-article__body h3 {
	margin: 20px 0 0;
	font-family: Oswald, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.gta6-article__body ul,
.gta6-article__body ol {
	margin: 14px 0 0;
	padding-left: 26px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 1.7;
}

.gta6-article__body strong {
	color: #FFFFFF;
}

.gta6-article__body a {
	color: #FF6FA5;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gta6-article__body blockquote {
	margin: 26px 0 0;
	padding: 20px 26px;
	border-left: 3px solid #FF3E8A;
	border-radius: 0 14px 14px 0;
	background: rgba(255, 255, 255, 0.04);
	font-size: 17px;
	line-height: 1.65;
	font-style: italic;
	color: rgba(255, 255, 255, 0.8);
}

.gta6-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

.gta6-article__body figure {
	margin: 26px 0 0;
}

.gta6-article__body figcaption {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.55);
}

.gta6-article__body table {
	width: 100%;
	margin-top: 16px;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	overflow: hidden;
}

.gta6-article__body th {
	padding: 13px 18px;
	text-align: left;
	background: rgba(0, 0, 0, 0.45);
	font-family: Oswald, sans-serif;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.gta6-article__body td {
	padding: 13px 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Comment form — matches the design's card. */
.gta6-comment-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.09);
}

.gta6-comment-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}

.gta6-comment-form .comment-form-comment,
.gta6-comment-form .form-submit {
	margin: 0;
}

.gta6-comment-form input[type="submit"] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	background: linear-gradient(100deg, #FF3E8A, #FF8A3D);
	color: #180712;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: filter 260ms ease, transform 420ms cubic-bezier(.19, 1, .22, 1);
}

.gta6-comment-form .comment-form-cookies-consent,
.gta6-comment-form .comment-notes,
.gta6-comment-form .logged-in-as {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.gta6-comments {
	color: rgba(255, 255, 255, 0.7);
}


.gta6-burger {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	/* On a 320px screen the header ran out of room and squeezed this button down
	   to 31px, well under a comfortable finger. It keeps its size now and the
	   pre-order button gives way instead. */
	min-width: 44px;
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.gta6-burger span {
	display: block;
	width: 18px;
	height: 2px;
	background: #FFFFFF;
}

/* ==========================================================================
   Responsive layout.
   The design was ported 1:1 from a 1440px canvas and carries inline styles on
   almost every box, so every override below needs !important to win.
   Nothing here applies from 1200px up — the desktop view stays pixel-identical.
   ========================================================================== */

/* Wide tablets: tighten the header and footer grids. */
@media (max-width: 1200px) {
	.gta6-footer__grid {
		grid-template-columns: minmax(200px, 1.2fr) repeat(3, minmax(120px, 1fr)) !important;
		gap: 32px !important;
	}
}

@media (max-width: 1024px) {
	.gta6-header__inner,
	.gta6-footer__grid,
	.gta6-footer__bottom {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.gta6-nav {
		gap: 20px !important;
	}
	.gta6-nav a {
		font-size: 13px;
	}
	.gta6-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* The seven menu items need ~590px and the countdown block another ~200px.
   Below 1200px the two no longer both fit next to the logo and the pre-order
   button, and the last item ("GTA 6 Answers") was printing underneath the
   countdown. The countdown is the expendable half — it is repeated on the
   countdown page — so it steps aside first. */
@media (max-width: 1199px) {
	.gta6-countdown {
		display: none !important;
	}
}

/* Below 1024px even the bare menu no longer fits, so it moves behind the burger.
   This covers tablet landscape (1024 is handled by the rule above). */
@media (max-width: 1023px) {
	.gta6-burger {
		display: flex;
	}
	.gta6-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 72px;
		display: none !important;
		flex-direction: column;
		align-items: stretch !important;
		gap: 0 !important;
		height: auto !important;
		padding: 8px 24px 20px;
		background: #000000;
		border-bottom: 1px solid rgba(255, 255, 255, 0.16);
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	.gta6-nav.is-open {
		display: flex !important;
	}
	.gta6-nav a {
		height: 52px !important;
		font-size: 15px;
	}
	.gta6-header__inner {
		position: relative;
	}
}

/* Phones: tighter gutters. */
@media (max-width: 860px) {
	.gta6-header__inner {
		position: relative;
		gap: 12px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.gta6-footer__grid {
		gap: 32px !important;
		padding: 44px 18px 0 !important;
	}
	.gta6-footer__bottom {
		padding: 22px 18px !important;
		gap: 14px !important;
	}
	.gta6-top {
		right: 16px !important;
		bottom: 16px !important;
	}
}

/* --------------------------------------------------------------------------
   Content containers.
   Two shells carry the page width: the full-bleed sections (max-width: 1440px,
   padding 0 32px) and the article shells (padding: 40px 32px 96px).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.gta6-main [style*="max-width: 1440px"] {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.gta6-main [style*="padding: 40px 32px 96px"] {
		padding: 32px 24px 72px !important;
	}
}

@media (max-width: 640px) {
	/* Footer keeps two link columns on a tablet; one column only on a phone. */
	.gta6-footer__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.gta6-main [style*="max-width: 1440px"] {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.gta6-main [style*="padding: 40px 32px 96px"] {
		padding: 26px 18px 56px !important;
	}
}

/* --------------------------------------------------------------------------
   Section rhythm: the 1440px canvas uses 64–84px of vertical air per section.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.gta6-main [style*="padding: 84px 0px"],
	.gta6-main [style*="padding: 80px 0px"] {
		padding-top: 54px !important;
		padding-bottom: 50px !important;
	}
	.gta6-main [style*="padding: 72px 32px"],
	.gta6-main [style*="padding: 72px 24px"],
	.gta6-main [style*="padding: 64px 32px"] {
		padding-top: 44px !important;
		padding-bottom: 40px !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 640px) {
	.gta6-main [style*="padding: 84px 0px"],
	.gta6-main [style*="padding: 80px 0px"] {
		padding-top: 42px !important;
		padding-bottom: 38px !important;
	}
	.gta6-main [style*="padding: 72px 32px"],
	.gta6-main [style*="padding: 72px 24px"],
	.gta6-main [style*="padding: 64px 32px"] {
		padding-top: 36px !important;
		padding-bottom: 32px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	/* Roomy cards: 34px of inset eats a third of a 390px screen. */
	.gta6-main [style*="padding: 34px"] {
		padding: 20px !important;
	}
	.gta6-main [style*="padding: 30px"] {
		padding: 20px !important;
	}
	.gta6-main [style*="padding: 26px 30px"],
	.gta6-main [style*="padding: 28px 26px"] {
		padding: 20px 18px !important;
	}
}

/* --------------------------------------------------------------------------
   Two-column page layouts (main column + rail).
   Every one of them pairs a fluid column with a 280–340px rail, so below 900px
   there is no honest way to keep both: the rail wins the space and the article
   drops to ~330px. Listed one by one on purpose — a blanket
   [style*="grid-template-columns"] rule would also flatten the card grids and
   the spec tables, which are fine in two or three columns on a tablet.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.gta6-main [style*="minmax(0px, 1.32fr) minmax"],
	.gta6-main [style*="minmax(0px, 1.55fr) minmax(320px"],
	.gta6-main [style*="minmax(0px, 1.25fr) minmax"],
	.gta6-main [style*="minmax(0px, 1.2fr) minmax"],
	.gta6-main [style*="minmax(0, 1.2fr) minmax"],
	.gta6-main [style*="minmax(0px, 1fr) minmax(320px"],
	.gta6-main [style*="minmax(0px, 1fr) minmax(300px"],
	.gta6-main [style*="minmax(0px, 1fr) minmax(280px"],
	.gta6-main [style*="minmax(240px, 340px) minmax"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* Rails are sticky against a column that no longer exists. */
	.gta6-main [style*="position: sticky"] {
		position: static !important;
	}
	/* Hero art is pinned to the right edge of a two-column hero. */
	.gta6-main [style*="justify-self: end"] {
		justify-self: center !important;
	}
	/* The front page map teaser is inset to 90% to leave room for the rail. */
	.gta6-main [style*="width: 90%"] {
		width: 100% !important;
	}
}

/* The front page news carousel pairs a lead poster with three stacked cards.
   Its rail is only 300px, so at 768px both columns still hold their content —
   it stays two-up on a tablet and only stacks on a phone. */
@media (max-width: 640px) {
	.gta6-main [style*="minmax(0px, 1.55fr) minmax(300px"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --------------------------------------------------------------------------
   Fixed-column grids that stay multi-column on a tablet and step down in
   sensible stages instead of collapsing straight to one column.
   -------------------------------------------------------------------------- */

/* Front page fact strip: 6 → 3 → 2. */
@media (max-width: 1024px) {
	.gta6-facts {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 560px) {
	.gta6-facts {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.gta6-facts > * {
		padding: 16px 14px !important;
	}
}

/* Release-date countdown: 4 units stay side by side until they get too narrow. */
@media (max-width: 480px) {
	.gta6-main [data-countdown][style*="repeat(4, minmax(0px, 1fr))"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Front page "confirmed locations" tiles: icon + two lines need the full row. */
@media (max-width: 560px) {
	.gta6-main [style*="repeat(2, minmax(0px, 1fr)); gap: 12px"] {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Spec tables built out of grid rows (Component / Minimum / Recommended):
   the label takes its own row so the two values keep readable width. */
@media (max-width: 640px) {
	.gta6-main [style*="132px minmax(0px, 1fr) minmax(0px, 1fr)"] {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 4px 16px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.gta6-main [style*="132px minmax(0px, 1fr) minmax(0px, 1fr)"] > *:first-child {
		grid-column: 1 / -1;
	}
}

/* Release-date timeline: date / rail / entry. The date column shrinks, the
   timeline rail stays so the vertical line keeps reading as a timeline. */
@media (max-width: 700px) {
	.gta6-main [style*="150px 40px minmax(0px, 1fr)"] {
		grid-template-columns: 78px 26px minmax(0, 1fr) !important;
		gap: 0 10px !important;
	}
	.gta6-main [style*="150px 40px minmax(0px, 1fr)"] > *:first-child {
		white-space: normal !important;
		font-size: 11px !important;
	}
}

/* RP server ranking rows: rank + badge + copy + rating/CTA on one line needs
   about 700px. On a phone the rating block drops to a second line and turns
   horizontal, so the description keeps a readable measure. */
@media (max-width: 640px) {
	.gta6-main [style*="gap: 18px; padding: 20px 24px; border-radius: 18px"] {
		flex-wrap: wrap !important;
		align-items: flex-start !important;
		gap: 12px 14px !important;
		padding: 16px !important;
	}
	.gta6-main [style*="gap: 18px; padding: 20px 24px; border-radius: 18px"] > *:nth-child(3) {
		flex: 1 1 140px !important;
	}
	.gta6-main [style*="gap: 18px; padding: 20px 24px; border-radius: 18px"] > *:last-child {
		flex: 1 1 100% !important;
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 8px 16px !important;
	}
	.gta6-main [style*="gap: 18px; padding: 20px 24px; border-radius: 18px"] > *:last-child > a {
		margin-left: auto;
	}
}

/* Icon/number + text rows: keep the pairing, shrink the fixed gutter. */
@media (max-width: 480px) {
	.gta6-main [style*="grid-template-columns: 96px minmax"],
	.gta6-main [style*="grid-template-columns: 88px minmax"] {
		grid-template-columns: 78px minmax(0, 1fr) !important;
		gap: 10px !important;
	}
	.gta6-main [style*="grid-template-columns: 64px minmax"] {
		grid-template-columns: 48px minmax(0, 1fr) !important;
		gap: 14px !important;
	}
}

/* --------------------------------------------------------------------------
   Oversized fixed boxes from the desktop canvas.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	/* Front page news block: the lead card and the stack of three beside it are
	   locked to the same 520px so they line up on the desktop canvas. Once the
	   two columns stack that constraint is meaningless — the lead card just
	   needs a poster height and the three small cards a readable one each
	   (520/3 leaves 97px, not enough for a two-line uppercase headline). */
	.gta6-main a[style*="min-height: 520px"] {
		min-height: 340px !important;
	}
	.gta6-main div[style*="min-height: 520px"] {
		min-height: 0 !important;
	}
	.gta6-main div[style*="min-height: 520px"] > a[style*="flex: 1 1 0px"] {
		min-height: 132px !important;
	}
	.gta6-main [style*="min-height: 420px"] {
		min-height: 260px !important;
	}
	.gta6-main [style*="min-height: 380px"] {
		min-height: 220px !important;
	}
	.gta6-main [style*="max-width: 340px"] {
		max-width: 260px !important;
	}
}

/* --------------------------------------------------------------------------
   Typography and touch targets.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	/* Long single words (URLs, "SYSTEM-REQUIREMENTS") must not push the page. */
	.gta6-main h1,
	.gta6-main h2,
	.gta6-main h3,
	.gta6-main h4 {
		overflow-wrap: break-word;
		word-break: break-word;
	}
	/* Everything you can tap gets at least 40px. */
	.gta6-page a[style*="height: 38px"],
	.gta6-page button[style*="height: 38px"],
	.gta6-page a[style*="height: 36px"],
	.gta6-page button[style*="height: 36px"],
	.gta6-page a[style*="height: 34px"],
	.gta6-page button[style*="height: 34px"],
	.gta6-page a[style*="height: 32px"],
	.gta6-page button[style*="height: 32px"] {
		height: 40px !important;
	}
	.gta6-page [role="tablist"] button,
	.gta6-page [data-tab] {
		min-height: 40px;
	}
}

/* --------------------------------------------------------------------------
   Post content coming from the editor: tables scroll inside themselves rather
   than stretching the page (there is no wrapper element to hook onto).
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.gta6-article__body table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gta6-article__body th,
	.gta6-article__body td {
		padding: 11px 14px;
		white-space: nowrap;
	}
	.gta6-article__body blockquote {
		padding: 16px 18px;
	}
	.gta6-article__body h2 {
		font-size: 23px;
	}
	.gta6-article__body h3 {
		font-size: 18px;
	}
}

/* Last-resort guard: nothing in the design should ever exceed the viewport.
   Kept below 900px only, where the sticky rails are already switched off. */
@media (max-width: 900px) {
	.gta6-page,
	.gta6-main {
		overflow-x: clip;
	}
}

/* ==========================================================================
   Touch targets.
   The design was drawn for a mouse: several controls are 14-36px tall, below
   the 40px a finger needs. Below 768px they are grown to at least 44px. The
   controls carry inline styles, so every rule here needs !important.
   ========================================================================== */
@media (max-width: 767px) {

	/* Header logo: the anchor hugged the 28px logo image. */
	.gta6-header .dh1 {
		height: 44px;
	}

	/* News carousel arrows. */
	[data-carousel-prev],
	[data-carousel-next] {
		width: 44px !important;
		height: 44px !important;
	}

	/* Carousel dots stay 3px tall visually; the tappable area is an invisible
	   overlay, so the row does not grow and neighbouring dots never overlap
	   (the strip's gap is 8px, and half of it is claimed on each side). */
	.gta6-carousel__dot {
		position: relative;
	}
	.gta6-carousel__dot::after {
		content: "";
		position: absolute;
		top: 50%;
		left: -4px;
		right: -4px;
		height: 44px;
		transform: translateY(-50%);
	}

	/* Footer link columns: 17px rows with an 11px gap. Padding replaces the gap,
	   so the rows touch instead of overlapping. */
	.gta6-footer__grid nav {
		gap: 0 !important;
	}
	.gta6-footer__grid nav .dh239 {
		display: block;
		padding: 12px 0 !important;
	}

	/* Inline "watch / breadcrumb" links. */
	a.dh450 {
		display: inline-flex !important;
		align-items: center;
		min-height: 44px;
	}
}