/* ==========================================================================
   Responsive layer for the GTAreactor archive.
   Desktop rendering is unchanged: everything below only applies inside the
   media queries. Two layouts exist:
     .layout-modern  – GTA V style (div layout, fixed 1200px body)
     .layout-classic – GTA III / VC / SA / IV styles (table layout)
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* header logo = link to the front page (all screen sizes) */
a.header-home { display: block; }
.design_header_left_cell a.header-home { width: 100%; height: 100%; min-height: inherit; }
.design_header_left_cell { height: 150px; }
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* gallery thumbnails are <img> elements: centred and unscaled like the old background images */
div.gallery.collection .image img.thumb { object-fit: none; object-position: center; }

/* accessibility: skip link (visible on keyboard focus) and a clear focus ring */
.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 3000;
	padding: 8px 14px;
	background: #fff;
	color: #081430 !important;
	font: bold 14px Lato, Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none !important;
	border: 2px solid #081430;
	border-radius: 0 0 4px 4px;
}
.skip-link:focus { top: 0; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}
#inhalt:focus { outline: none; }

/* mobile top bar + menu toggle (injected into every page, hidden on desktop) */
.mobile-bar { display: none; }

/* ---------------------------------------------------------------- shared mobile pieces */
@media (max-width: 1199px) {
	.layout-modern .mobile-bar { display: flex; }
}
@media (max-width: 899px) {
	.layout-classic .mobile-bar { display: flex; }
}

.mobile-bar {
	position: sticky;
	top: 0;
	z-index: 1000;
	align-items: center;
	justify-content: space-between;
	height: 46px;
	padding: 0 8px 0 14px;
	background: #081430;
	border-bottom: 1px solid #000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	font-family: Lato, Verdana, Arial, Helvetica, sans-serif;
}
.mobile-bar a.mobile-bar-home,
.mobile-bar a.mobile-bar-home:visited,
.mobile-bar a.mobile-bar-home:hover {
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.5px;
	text-decoration: none;
}
.mobile-bar-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font: bold 14px Lato, Verdana, Arial, Helvetica, sans-serif;
	cursor: pointer;
}
.mobile-bar-toggle:hover,
.mobile-bar-toggle:focus-visible { background: rgba(255, 255, 255, 0.12); }
.mobile-bar-icon,
.mobile-bar-icon::before,
.mobile-bar-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: #fff;
}
.mobile-bar-icon { position: relative; }
.mobile-bar-icon::before,
.mobile-bar-icon::after { content: ""; position: absolute; left: 0; }
.mobile-bar-icon::before { top: -6px; }
.mobile-bar-icon::after { top: 6px; }
.nav-open .mobile-bar-icon { background: transparent; }
.nav-open .mobile-bar-icon::before { transform: translateY(6px) rotate(45deg); }
.nav-open .mobile-bar-icon::after { transform: translateY(-6px) rotate(-45deg); }
/* without JavaScript the menu is simply shown inline, so no toggle */
html:not(.js) .mobile-bar-toggle { display: none; }

/* ==========================================================================
   GTA V layout
   ========================================================================== */
@media (max-width: 1199px) {
	body.layout-modern {
		width: auto;
		background-attachment: scroll;
	}

	/* header: logo scales with the screen, decorations go */
	.layout-modern .main_header {
		float: none;
		height: min(155px, 26vw);
		border: 0;
		background-size: auto 100%;
	}
	.layout-modern .header_left {
		width: 100%;
		max-width: 605px;
		height: 100%;
		background-size: contain;
	}
	.layout-modern .header_right,
	.layout-modern .header_skydiver { display: none; }

	/* one column: menu (panel) – content – right menu – footer */
	.layout-modern .main_content {
		display: flex;
		flex-direction: column;
		float: none;
		height: auto;
		padding-top: 0;
		border: 0;
	}
	.layout-modern .content {
		order: 1;
		float: none;
		width: auto;
		height: auto;
		margin: 12px 10px 0;
	}
	.layout-modern .content_left,
	.layout-modern .content_right { display: none; }
	.layout-modern .content_header,
	.layout-modern .content .content_header {
		position: relative !important;
		top: 0;
		left: 0;
		width: auto;
	}
	.layout-modern .content_area {
		margin-top: -1px !important;
		padding: 10px;
	}

	.layout-modern .menu_right {
		order: 2;
		position: static;
		float: none;
		width: auto;
		height: auto;
		margin: 16px 10px 0;
		padding: 0 10px 10px;
		border: 1px solid #000;
	}

	.layout-modern .main_footer { float: none; border: 0; margin-top: 16px; }
	.layout-modern .footer_left,
	.layout-modern .footer_right { display: none; }
	.layout-modern .footer_middle { float: none; width: auto; height: auto; padding: 4px 0 10px; }

	/* left menu: inline without JS, slide-in panel with JS */
	.layout-modern .menu_left {
		order: 0;
		float: none;
		width: auto;
		height: auto;
		border-right: 0;
		padding: 0 10px 10px;
	}
	.js .layout-modern .menu_left { display: none; }
	.js.nav-open .layout-modern .menu_left {
		display: block;
		position: fixed;
		top: 46px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 6px 10px 30px;
		border-top: 1px solid #000;
	}

	/* menu categories as a grid of cards */
	.layout-modern .menu-groups {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		column-gap: 10px;
		row-gap: 14px;
		align-content: start;
	}
	.layout-modern .menu-group { padding-top: 18px; }
	.layout-modern .menu_linkbit_left,
	.layout-modern .menu_linkbit_right { margin-bottom: 0; line-height: 2; }
	.layout-modern .menu_linkbit_left a,
	.layout-modern .menu_linkbit_right a { font-size: 10.5pt; }
	.layout-modern .menu_catbit_right { margin-left: 0; }
}

/* ==========================================================================
   Classic layout (GTA III / VC / SA / IV)
   ========================================================================== */
@media (max-width: 899px) {
	.layout-classic .upper_right_heli { display: none; }

	/* header: logo cell scaled, tiled middle strip fills the rest */
	.layout-classic .design_header_table,
	.layout-classic .design_header_table tbody { display: block; height: auto; }
	.layout-classic .design_header_table tr { display: flex; }
	.layout-classic .design_header_left_cell {
		display: block;
		flex: 0 1 auto;
		height: min(150px, 30vw);
		background-size: contain;
		background-repeat: no-repeat;
	}
	.layout-classic .design_header_middle_cell {
		display: block;
		flex: 1 1 0;
		height: min(150px, 30vw);
		background-size: auto 100%;
	}
	.layout-classic .design_header_right_cell { display: none; }

	/* main table becomes a single column */
	.layout-classic .design_main_table,
	.layout-classic .design_main_table > tbody,
	.layout-classic .design_main_table > tbody > tr,
	.layout-classic .design_main_table > tbody > tr > td { display: block; width: auto; }
	.layout-classic .design_main_table > tbody > tr { display: flex; flex-direction: column; }
	.layout-classic .design_content_cell { order: 1; border-left: 0; border-right: 0; }
	.layout-classic .design_menu_right_cell { order: 2; padding: 10px 10px 16px; border: 0; }
	.layout-classic .design_menu_left_cell { order: 0; padding: 10px; border: 0; }
	.layout-classic .design_content_box { width: auto; margin: 12px 10px; }
	.layout-classic .design_content_title_table { width: 100%; }

	/* footer row: only the copyright */
	.layout-classic .design_bottom_left_cell,
	.layout-classic .design_bottom_right_cell { display: none !important; }
	.layout-classic .design_bottom_middle_cell { padding: 8px; }

	/* left menu: inline without JS, slide-in panel with JS */
	.js .layout-classic .design_menu_left_cell { display: none; }
	.js.nav-open .layout-classic .design_menu_left_cell {
		display: block;
		position: fixed;
		top: 46px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 16px 10px 30px;
		border-top: 1px solid #000;
	}
	/* the column backgrounds are 170px wide strips with built-in edge lines;
	   full-width they get the strip's main colour instead */
	.layout-classic .design_menu_left_cell,
	.layout-classic .design_menu_right_cell { background-image: none; }
	.style-gta3 .design_menu_left_cell,
	.style-gta3 .design_menu_right_cell { background-color: #052745; }
	.style-gtavc .design_menu_left_cell,
	.style-gtavc .design_menu_right_cell { background-color: #7ba0ec; }
	.style-gtasa .design_menu_left_cell,
	.style-gtasa .design_menu_right_cell { background-color: #4a72a0; }
	.style-gta4 .design_menu_left_cell,
	.style-gta4 .design_menu_right_cell { background-color: #0e2c48; }

	/* menu categories as a grid of cards */
	.layout-classic .menu-groups {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
		column-gap: 10px;
		row-gap: 12px;
		align-content: start;
	}
	.layout-classic .design_menu_left,
	.layout-classic .design_menu_right { line-height: 2; margin-bottom: 0; }
	.layout-classic .design_menu_left a,
	.layout-classic .design_menu_right a { font-size: 10pt; }
}

/* ==========================================================================
   Content (both layouts)
   ========================================================================== */
@media (max-width: 1199px) {
	.layout-modern .content_area { overflow-x: auto; overflow-wrap: break-word; }
}
@media (max-width: 899px) {
	.layout-classic .design_content_page_box { overflow-x: auto; overflow-wrap: break-word; padding: 10px; }
}
@media (max-width: 1199px) {
	.layout-modern .content_area img,
	.layout-classic .design_content_page_box img { max-width: 100%; height: auto; }
	.layout-modern .content_area iframe,
	.layout-classic .design_content_page_box iframe { max-width: 100%; }
	/* videos: fluid width (fixed widths inside table cells would widen the tables) */
	.layout-modern .yt-consent,
	.layout-modern iframe.yt-player,
	.layout-classic .yt-consent,
	.layout-classic iframe.yt-player { width: 100% !important; max-width: 560px; }
	/* min-height + aspect-ratio would imply a 409px minimum width */
	.layout-modern .yt-consent,
	.layout-classic .yt-consent { aspect-ratio: auto !important; }

	/* galleries: centred, wrapping thumbnails */
	.gallery.collection { display: flex; flex-wrap: wrap; justify-content: center; }
	.gallery.collection .image { float: none; }
	.gallery.collection div.clear { display: none; }

	/* team page contact line was absolutely positioned for 600px */
	.p_team_contact { position: static; width: auto; margin-top: 4px; }
	.p_team_desc { height: auto; min-height: 80px; }
}
@media (max-width: 640px) {
	/* galleries: two scaled thumbnails per row */
	.gallery.collection .image { width: calc(50% - 6px); margin: 3px; }
	.gallery.collection .image .bg { position: relative; background-size: cover; }
	.gallery.collection .image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
	div.gallery.collection .image img.thumb { object-fit: cover; }
	.gallery.collection .image .border1,
	.gallery.collection .image .border2 { top: 0; left: 0; width: 100%; height: 100%; border-width: 6px; }

	/* side-by-side boxes (e.g. sitemap, Q&A pages) stack on phones */
	.content_area div[style*="width: 50%"],
	.design_content_page_box div[style*="width: 50%"] {
		width: auto !important;
		float: none !important;
	}
	.content_area div[style*="width: 50%"] > div,
	.design_content_page_box div[style*="width: 50%"] > div { margin: 0 0 8px 0 !important; }
	.p_img_left,
	.p_img_right { float: none; display: block; padding: 0 0 8px; text-align: center; }
	.p_headline,
	.p_content,
	.p_navbar_s,
	.p_90 { width: auto; }
}