/* Мобильная версия: экраны до 800px. Подключается последним, после layout.css и site.css. */

@media only screen and (max-width: 800px) {

	/* ---------- шапка: компактная полоса, логотип слева, меню справа ---------- */
	/* шапка: логотип 56px + золотая линия 5px (как под логотипом на десктопе) */
	:root {
		--menu-h: 61px;
	}
	/* полоса шапки — прозрачная обёртка меню поверх логотипа, чтобы кнопка меню была сверху */
	#menu-wrap {
		height: 61px;
		padding-top: 0;
		background: transparent;
		box-shadow: none;
		z-index: 1003;
	}
	/* логотип заполняет верхние 56px по высоте; что не влезает по ширине — обрезается по бокам.
	   Ниже — золотая линия из фона десктопной шапки (bg_menu.png, строки 120–124) */
	.logo {
		position: fixed;
		top: 0;
		left: 0;
		margin-left: 0;
		width: 100%;
		height: 61px;
		z-index: 1001;
		background: url('../images/logo.png') no-repeat center top / auto 56px,
			url('../images/bg_menu.png') repeat-x left -64px / 2px 160px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
	}
	.menu-collapser {
		height: 56px;
		line-height: 56px;
		padding: 0;
	}
	.collapse-button {
		left: auto;
		right: 12px;
		top: 28px;
		margin-left: 0;
		width: 44px;
		height: 38px;
		padding: 9px 12px;
		border-radius: 4px;
		background: rgba(83, 62, 35, .85);
		box-shadow: none;
	}
	.collapse-button:hover,
	.collapse-button:focus {
		background: #533e23;
	}
	.collapse-button .icon-bar {
		width: 20px;
		height: 2px;
		margin: 4px 0;
		box-shadow: none;
	}
	/* раскрытое меню — под шапкой, на всю ширину */
	ul.slimmenu.collapsed {
		position: absolute;
		top: 61px;
		left: 0;
		right: 0;
		max-height: calc(100vh - 61px);
		overflow-y: auto;
		background: #f6efe3;
		box-shadow: 0 10px 20px rgba(0, 0, 0, .15);
		text-align: left;
	}
	ul.slimmenu.collapsed li a {
		margin: 0;
		padding: 15px 24px;
		font-size: 15px;
		border-bottom: 1px solid rgba(83, 62, 35, .12);
	}
	ul.slimmenu.collapsed li a:hover {
		border-bottom: 1px solid rgba(83, 62, 35, .12);
		background: rgba(154, 121, 69, .12);
	}

	/* ---------- контент на всю ширину экрана с полями 16px ---------- */
	#content .container,
	#content .container_n {
		width: auto;
		padding-left: 16px;
		padding-right: 16px;
	}
	#content .container .column,
	#content .container .columns {
		width: auto;
		float: none;
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	/* ---------- заголовки и текст ---------- */
	#content h4 {
		font-size: 20px;
		line-height: 1.3;
		word-wrap: break-word;
	}
	#content h5 {
		font-size: 18px;
		line-height: 1.3;
	}
	#content p,
	#content li {
		font-size: 15px;
		line-height: 1.6;
	}

	/* ---------- о нас: фото подстраиваются под ширину экрана вместе с рамкой ---------- */
	#about .border-wrap {
		max-width: 100%;
		box-sizing: border-box;
	}
	#about img {
		max-width: 100%;
		height: auto;
		box-sizing: border-box;
	}
	#about .border-wrap img {
		width: 100%;
	}

	/* ---------- наши работы: 2 колонки, на узких телефонах 1 ---------- */
	.portfolio-box {
		width: 50%;
	}

	/* ---------- издательство: страницы книг без искажения пропорций ---------- */
	.blog-wrap img {
		height: auto;
	}
	.blog-wrap li {
		padding-top: 10px;
	}
	.blog-wrap li h6 {
		padding-top: 15px;
	}

	/* ---------- подвал ---------- */
	.footer .border-right-footer {
		border-right: none;
	}
	.footer .one-third.column {
		margin-bottom: 20px;
	}
	/* ссылки в подвале — удобные для пальца */
	.footer .cl-effect-7 a {
		display: inline-block;
		margin: 4px 8px;
		padding: 8px 4px;
	}
	.footer .cl-effect-7 a span,
	.footer .cl-effect-7 a p {
		font-size: 13px;
	}
}

@media only screen and (max-width: 479px) {
	.portfolio-box {
		width: 100%;
	}
}

/* ---------- подписи на плитках работ видны всегда: на телефонах и планшетах нет наведения мыши ---------- */
@media only screen and (max-width: 800px), (hover: none) {
	.portfolio-box .folio-mask1,
	.portfolio-box .folio-mask2 {
		display: none;
	}
	.portfolio-box h6,
	.portfolio-box:hover h6 {
		top: auto;
		bottom: 0;
		margin: 0;
		padding: 36px 12px 10px;
		opacity: 1;
		font-size: 13px;
		line-height: 1.3;
		text-align: left;
		background: linear-gradient(rgba(40, 30, 20, 0), rgba(40, 30, 20, .85));
	}
	.portfolio-box p {
		display: none;
	}
}