/*
 * Responsive overrides for the home page.
 * Desktop styles are intentionally left untouched.
 */

@media only screen and (max-width: 1023px) {
	body {
		min-width: 0;
		overflow-x: hidden;
	}

	.userbar,
	.menu,
	.frontrow_wrap,
	.frontrow_tabs,
	.content_home,
	.footer {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Header */
	.userbar {
		height: 58px;
		padding: 0 12px;
	}

	.guest_wrap {
		float: none;
		width: auto;
		margin-top: 0;
		padding-top: 12px;
		white-space: nowrap;
	}

	.menu_single,
	.menu_double,
	.menu_triple {
		height: 158px;
		margin: 0 0 16px;
	}

	.logo {
		top: 8px;
		bottom: auto;
		left: 12px;
		width: 126px;
		height: 80px;
		background-position: left top;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.search {
		position: absolute;
		top: 108px;
		left: 12px;
		right: 12px;
		float: none;
	}

	.search form,
	.search fieldset {
		width: 100%;
	}

	.search input {
		width: calc(100% - 42px);
		height: 36px;
		margin: 0;
		box-sizing: border-box;
	}

	#search_submit {
		top: 0;
		right: 0;
		width: 36px;
		height: 36px;
	}

	div#tabs > ul {
		position: absolute;
		top: 10px;
		left: 150px;
		right: 6px;
		display: flex;
		padding: 0;
		margin: 0;
	}

	div#tabs > ul > li {
		float: none;
		flex: 1 1 0;
		min-width: 0;
	}

	div#tabs > ul > li > a,
	div#tabs > ul > li.parent > a,
	div#tabs > ul > li.active > a,
	div#tabs > ul > li.active > a:hover {
		width: auto;
		height: auto;
		min-height: 44px;
		margin: 0;
		padding: 12px 3px 0;
		box-sizing: border-box;
		font-size: 16px;
		line-height: 20px;
	}

	div#tabs > ul ul,
	div#tabs ul li.subtabs_hover ul,
	div#tabs ul li.subtabs_hover_2 ul,
	#subtabs_slogan {
		display: none !important;
	}

	/* The featured posters become a touch-friendly horizontal strip. */
	.frontrow_wrap {
		display: flex;
		gap: 12px;
		height: auto;
		min-height: 232px;
		margin: 0;
		padding: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		text-align: left;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.frontrow_wrap[style*="display: block"] {
		display: flex !important;
	}

	.frontrow_item {
		float: none;
		flex: 0 0 150px;
		width: 150px;
		height: 218px;
		margin: 0;
		scroll-snap-align: start;
	}

	.frontrow_item div {
		right: 0;
		width: auto;
		box-sizing: border-box;
	}

	.frontrow_tabs {
		margin: 10px auto 8px;
		padding: 0 12px;
	}

	/* Four fixed desktop columns become a responsive grid. */
	.content_home {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 10px;
		margin: 0 0 20px;
	}

	.content_home > .main_column {
		float: none;
		min-width: 0;
	}

	.titles_list_home,
	.critics_list_home,
	.blog_list_home,
	.reviews_list_home,
	.reviews_list_movies,
	.reviews_list_games,
	.reviews_list_default {
		width: auto;
		margin: 10px 0;
	}

	.blog_list_a a,
	.blog_list_b a {
		width: auto;
		padding-right: 28px;
	}

	.main_column .special_promo_side {
		max-width: 100%;
		margin-left: 0;
		box-sizing: border-box;
	}

	/* Footer */
	.footer {
		display: flex;
		gap: 20px;
		padding: 10px 16px 28px;
	}

	.footer div.left,
	.footer div.center {
		float: none;
		flex: 1 1 0;
		width: auto;
	}

	.footer div.right {
		float: none;
		width: auto;
		padding-left: 0;
	}
}

@media only screen and (max-width: 640px) {
	.guest_wrap {
		font-size: 12px;
	}

	a.button_add,
	a.button_add:visited {
		margin-right: 5px;
		padding: 0 8px;
		font-size: 14px;
	}

	.content_home {
		display: block;
		padding: 8px 12px 16px;
	}

	.content_home > .main_column {
		width: 100%;
	}

	.frontrow_item {
		flex-basis: min(150px, calc((100vw - 40px) / 2));
		width: min(150px, calc((100vw - 40px) / 2));
	}

	.footer {
		display: block;
	}

	.footer div.left,
	.footer div.center {
		width: 100%;
		margin-bottom: 18px;
	}
}

@media only screen and (max-width: 380px) {
	.logo {
		width: 112px;
		height: 72px;
	}

	div#tabs > ul {
		left: 132px;
	}

	div#tabs > ul > li > a,
	div#tabs > ul > li.parent > a,
	div#tabs > ul > li.active > a,
	div#tabs > ul > li.active > a:hover {
		font-size: 14px;
	}

	a.guest_login,
	a.guest_login:visited {
		padding-right: 5px;
	}
}