/* Responsive overrides for movie/game lists and item pages. */

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

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

	.content {
		min-height: 0;
		padding: 12px;
		margin: 0 0 20px;
	}

	/* Shared compact 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;
	}

	/* /movies/ and /games/ */
	.parent_wrap {
		width: calc(100% - 260px);
	}

	.parent_row {
		float: none;
		width: 100%;
	}

	.parent_list,
	.parent_list_short {
		width: calc(50% - 20px);
		box-sizing: border-box;
	}

	.parent_row .parent_list_short:only-child,
	.parent_wrap > .parent_list {
		width: calc(100% - 20px);
	}

	.content.page_movie > .main_column,
	.content.page_game > .main_column {
		float: right;
		width: 240px;
	}

	.content.page_movie .reviews_list,
	.content.page_game .reviews_list {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* Individual movie/game header and media */
	.page_item_title {
		margin: 5px 5px 16px;
	}

	.page_item_title h1 {
		font-size: 24px;
		line-height: 29px;
	}

	.page_item_blocks {
		width: calc(100% - 398px);
	}

	.page_item_global_rankings,
	.page_item_info {
		width: calc(100% - 20px);
		box-sizing: border-box;
	}

	.page_item_share {
		width: calc(100% - 200px);
		min-width: 280px;
		box-sizing: border-box;
	}

	.page_item_share p {
		width: auto;
		margin-left: 10px;
	}

	/* Reviews and wisdom lists */
	.item_reviews_list {
		width: calc(100% - 210px);
	}

	.item_reviews_list .source {
		width: 24%;
		padding-left: 2%;
		padding-right: 2%;
		box-sizing: border-box;
	}

	.item_reviews_list .author,
	.item_reviews_list .wisdom {
		width: 48%;
		padding-left: 2%;
		padding-right: 2%;
		box-sizing: border-box;
	}

	.item_reviews_list .rating {
		width: 24%;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	.item_reviews_list_summary {
		width: calc(100% - 10px);
	}

	.item_reviews_list_sorting .source {
		width: auto;
		margin-left: 220px;
	}

	.comments,
	.nocomments {
		width: calc(100% - 210px);
		box-sizing: border-box;
	}

	.comment_text,
	.comments_pagination,
	.comments_input_controls,
	.comments_input_sending,
	.comments_input textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.comments_pagination {
		width: calc(100% - 210px);
		height: auto;
		min-height: 50px;
		overflow-x: auto;
		white-space: nowrap;
	}

	.comments_input {
		padding-left: 220px;
		padding-right: 0;
	}

	.comments_input_disabled {
		padding-left: 220px;
	}

	/* Shared 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: 700px) {
	.content {
		padding: 10px;
	}

	.box_page_title h1,
	.page_item_title h1 {
		font-size: 22px;
		line-height: 27px;
	}

	/* Catalogue becomes a single readable column. */
	.parent_wrap,
	.content.page_movie > .main_column,
	.content.page_game > .main_column {
		float: none;
		width: 100%;
	}

	.parent_list,
	.parent_list_short,
	.parent_row .parent_list_short:only-child,
	.parent_wrap > .parent_list {
		float: none;
		width: 100%;
		margin: 10px 0 20px;
	}

	/* Ratings are compact cards above a centered poster. */
	.page_item_ratings {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		float: none;
		width: 100%;
		max-height: none;
		margin: 0 0 14px;
		box-sizing: border-box;
		text-align: center;
	}

	.page_item_ratings > a {
		display: block;
	}

	.page_item_site_rating,
	.page_item_foreign_rating,
	.page_item_users_rating {
		min-width: 0;
		padding: 68px 2px 4px;
	}

	.page_item_foreign_rating,
	.page_item_users_rating {
		padding-top: 50px;
	}

	.page_item_site_rating h4,
	.page_item_foreign_rating h4,
	.page_item_users_rating h4 {
		left: 50%;
		transform: translateX(-50%);
	}

	.page_item_ratings i {
		font-size: 10px;
	}

	.page_item_poster {
		float: none;
		margin: 0 auto 14px;
	}

	.page_item_blocks,
	.page_item_global_rankings,
	.page_item_info {
		float: none;
		width: 100%;
		min-height: 0;
		margin-left: 0;
	}

	.page_item_comments,
	.page_item_user_rating,
	.page_item_media {
		margin-left: 0;
		margin-right: 10px;
	}

	.page_item_share,
	.page_item_share_short {
		float: none;
		clear: both;
		width: 100%;
		min-width: 0;
		margin-left: 0;
		overflow: hidden;
	}

	.page_item_info_saleshd,
	.page_item_info_sales {
		max-width: 100%;
		overflow-x: auto;
	}

	/* Review headers and rows stack without horizontal clipping. */
	.item_reviews_list_sorting .source,
	.item_reviews_list_sorting .grade {
		float: none;
		width: auto;
		margin: 5px 0;
		text-align: left;
	}

	.item_reviews_list_header,
	.item_wisdom_list_header,
	.item_reviews_list {
		float: none;
		width: 100%;
	}

	.item_reviews_list_header h2,
	.item_wisdom_list_header h3 {
		height: auto;
		min-height: 0;
		padding: 10px;
		font-size: 20px;
		text-align: left;
	}

	.item_reviews_list .row_a,
	.item_reviews_list .row_b,
	.item_reviews_list .row_c {
		padding: 10px;
	}

	.item_reviews_list .source,
	.item_reviews_list .author,
	.item_reviews_list .wisdom,
	.item_reviews_list .rating {
		float: none;
		width: 100%;
		margin: 0;
		padding: 5px 0;
		text-align: left;
	}

	.item_reviews_list .source i {
		display: inline;
		padding-left: 5px;
	}

	.item_reviews_list .rating {
		min-height: 36px;
	}

	.item_reviews_list_summary,
	.item_reviews_list_summary h2,
	.item_reviews_list_summary div.overall {
		float: none;
		width: auto;
		margin: 10px 0;
	}

	.item_reviews_list_more {
		padding: 24px 0;
		text-align: center;
	}

	.comments_pagination_header,
	.comments_pagination,
	.comments_ad_side,
	.comments,
	.nocomments {
		float: none;
		width: 100%;
	}

	.comments_pagination_header {
		height: auto;
		min-height: 46px;
		text-align: left;
	}

	.comments_pagination_header h2,
	.comments_pagination_header h3 {
		padding: 0 10px;
		line-height: 46px;
	}

	.comments_ad_side {
		display: none;
	}

	.comment_quote,
	.comment_spoiler_hd,
	.comment_spoiler {
		width: auto;
	}

	.comments_input,
	.comments_input_disabled {
		padding: 24px 0 50px;
	}

	.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.button_add,
	a.button_add:visited {
		margin-right: 5px;
		padding: 0 8px;
		font-size: 14px;
	}

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

	.page_item_ratings {
		gap: 4px;
		font-size: 11px;
	}
}