/* Мобильная раскладка fotokto.ru — первый этап.
 *
 * Правило одно: на узком экране колонки перестают быть колонками и
 * выстраиваются друг под другом, а всё, что прибито в пикселях, отпускается.
 * Десктоп не трогаем — правила живут только внутри медиазапроса. */

@media (max-width: 767px) {

	/* --- общая рамка ------------------------------------------------- */

	/* Всё, что шире экрана, ужимаем разом. box-sizing нужен, чтобы
	   собственные padding и border не выталкивали блок за край. */
	#pageContainer,
	.main,
	.body,
	.footer,
	.toolbar .box,
	.toolbar .menu,
	.userInfo,
	.userInfo .otherBox,
	.interestingLinks,
	.interestingLinks ul,
	.gdBox, .gdTopics, .gdVideo,
	.adsW300, .adsW250,
	.photoCommon,
	.gallery,
	.galleryConteiner,
	.ads, .adsL, .adsR,
	.pager, .pagerLine {
		width: auto;
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}

	/* Колонки друг под другом: контент, потом боковая. */
	.body,
	.userInfo {
		width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
	}

	/* --- содержимое --------------------------------------------------- */

	/* Картинки не должны распирать страницу. Высота auto, иначе снимок
	   с заданными width/height в разметке сплющится. */
	img {
		max-width: 100%;
		height: auto;
	}

	/* Таблицы и длинные адреса — частая причина горизонтальной прокрутки. */
	table {
		max-width: 100%;
	}

	/* Таблица рейтинга: шесть колонок, ниже 378 px не ужимается — на экране
	   360 это 18 px прокрутки всей страницы. Разрешаем прокручивать саму
	   таблицу пальцем внутри её рамки, страница при этом стоит на месте.
	   Селектор длиннее обычного нарочно: страница рейтинга лежит в базе,
	   а не в шаблоне, и свои стили несёт блоком прямо в теле документа —
	   он идёт после подключённых файлов и по равной специфичности выигрывает. */
	.post-manual .rt {
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}
	.post-manual .rt.rank th,
	.post-manual .rt.rank td {
		padding-right: 5px;
	}
	.text, .body p, .body div {
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	/* --- альбом ---------------------------------------------------------- */

	/* Заголовку альбома шаблон ставит инлайном width:600px — всем, кроме
	   владельца, то есть каждому посетителю и каждому роботу. Инлайн бьётся
	   только !important. Из шаблона убирать не стал: на широком экране это
	   рабочая ширина, а ради телефона менять десктоп незачем. */
	.photoAlbumView h1 {
		width: auto !important;
		max-width: 100%;
		float: none;
	}

	/* --- страница снимка ---------------------------------------------- */

	.sPhoto,
	.sPhoto .data,
	.sPhoto .iline,
	.src, #spSrc {
		width: auto;
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}

	/* --- шапка и меню -------------------------------------------------- */

	/* Пункты меню переносятся на несколько строк вместо одной длинной. */
	.toolbar .menu {
		float: none;
		white-space: normal;
	}
	.toolbar .menu .item {
		float: none;
		display: inline-block;
	}
	.toolbar .auth {
		float: none;
		width: auto;
		max-width: 100%;
	}

	/* --- переключатель периода в лентах --------------------------------- */

	/* Треугольник-указатель под вкладками прибит к left:398px — координате,
	   посчитанной под ширину 1000 px. На телефоне переключатель занимает
	   362 px, указатель оказывается за его пределами и в одиночку добавляет
	   странице 33 px горизонтальной прокрутки. Он декоративный (фоновая
	   картинка) и ни на что не указывает даже на широком экране: позиция
	   у него постоянная, а не по выбранной вкладке. */
	.switch .marker {
		display: none;
	}

	/* --- сетка превью --------------------------------------------------- */

	/* Плитки перестают быть фиксированной сеткой: два в ряд на телефоне. */
	.galleryConteiner .item,
	.gallery .item {
		width: 48%;
		margin: 0 1% 8px 1%;
		box-sizing: border-box;
	}
	.galleryConteiner .item img,
	.gallery .item img {
		width: 100%;
		height: auto;
	}

	/* --- страница снимка: нижние колонки ------------------------------- */

	/* Информация под снимком делится на две колонки 565 + 310. На телефоне
	   они встают друг под друга. */
	.sPhoto .info .leftSide,
	.sPhoto .info .rightSide {
		float: none;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Комментарии и всё, что внутри, тоже отпускаем. */
	.sPhoto .info .comments,
	#spCommentsContainer,
	.sPhoto .info .author {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* --- остальные ленты ------------------------------------------------ */

	/* Блоги, видео, конкурсы, выбор редакции. У каждого раздела своя обёртка
	   с float:left и шириной 665-670 px — та же история, что у .photoCommon,
	   только под своим именем. Отпускаем разом. */
	.topicStream,
	.topicsList,
	.videoStream,
	.concursList,
	.editors {
		width: auto;
		max-width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	/* Текстовая колонка рядом с превью (600 у блогов, 505 у конкурсов)
	   встаёт под ним. Превью тоже распрямляем, иначе текст обтекает его
	   в три буквы на строку. */
	.topicStream .info,
	.topicsList .info,
	.topicsList .photo,
	.concursList .item .info,
	.concursList .item .photo {
		width: auto;
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}
	.topicsList a.name:link,
	.topicsList a.name:visited,
	.topicStream .author {
		float: none;
		max-width: 100%;
	}
	/* Картинке анонса в личном блоге потолок в 540 px задан инлайном прямо
	   в blog/list.html, а инлайн не перебить обычным правилом. Убрать его
	   из шаблона нельзя: в общем списке блогов (blog/stream/common.html)
	   такой же класс, но картинки там шире, и перенос потолка в blog.css
	   ужал бы их с 600 до 540 на десктопе. Поэтому !important точечно. */
	.topicsList .photo img {
		max-width: 100% !important;
	}

	/* Отдельная запись блога — ещё один шаблон со своей сеткой: .topic 640
	   плюс боковая колонка .boxRight 235, комментарии 640, ответ 555,
	   поле ввода 628, кнопки share 270. И .topicView из старой разметки. */
	.topic,
	.topic .info,
	.topic .comments .item,
	.topic .comments .context,
	.topic .comments .textarea,
	.topic .commonTools .share,
	.boxRight,
	.topicView .info,
	.topicView .comments .item,
	.topicView .comments .context,
	.topicView .comments .textarea,
	.topicView .commonTools .share {
		width: auto;
		max-width: 100%;
		float: none;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}
	.topic img,
	.topicView img {
		max-width: 100%;
	}

	/* Плитки видео: были 215 px по три в ряд, стало по две от ширины экрана.
	   Высоты сняты — они обрезали кадр под старый размер. */
	.videoStream .item {
		width: 48%;
		height: auto;
		margin: 0 1% 10px 1%;
		box-sizing: border-box;
	}
	.videoStream .photo {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	.videoStream .photo img {
		width: 100%;
		min-height: 0;
		height: auto;
	}
	.videoStream .info {
		width: auto;
		max-width: 100%;
	}

	/* --- регистрация ------------------------------------------------------ */

	/* Коробка формы 440 плюс поля по краям — 491 на экране 360. */
	.regForm,
	.regForm .codeField {
		width: auto;
		max-width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
	.regForm .textbox,
	.regForm .select,
	.regForm .textarea,
	.regForm .send,
	.regForm .fieldBox small {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* --- поиск по людям --------------------------------------------------- */

	/* Раздел «Люди» — форма шириной 712 с полями по 172 в четыре колонки.
	   Ширины колонок объявлены с !important, поэтому и здесь без него никак. */
	.search,
	.searchNotice,
	.search .cols2,
	.search .cols3,
	.search .cols4 {
		width: auto !important;
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}
	/* Поля по два в ряд вместо четырёх. */
	.search .fieldBox {
		width: 48%;
		box-sizing: border-box;
	}
	.search .fieldBox .textbox,
	.search .fieldBox .select,
	.search .fieldBox .send {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.search .cCustom .item {
		float: none;
		width: auto;
		max-width: 100%;
	}

	/* --- всплывающий просмотрщик ---------------------------------------- */

	/* Просмотрщик открывается по клику с любой ленты и подключён на каждой
	   странице. Его коробка задана в 895 px плюс 40 px полей — 935 всего.
	   Пока viewport стоял в 1000, это помещалось; с device-width коробка
	   стала шире экрана вдвое, а крестик закрытия уезжал за правый край.
	   !important нужен ровно здесь: ширину скрипт дублирует инлайном
	   (optimalWidth в xCORE.showPhoto.js), а инлайн бьёт любой селектор.
	   Поля по 10 px оставляем нарочно — по подложке вокруг коробки
	   закрывают просмотрщик тапом мимо. */
	#spContainer {
		width: auto !important;
		max-width: 100%;
		min-height: 0;
		margin: 10px;
		padding: 10px;
		box-sizing: border-box;
	}

	/* Крестик 16x16 в углу — мимо такого пальцем попасть трудно. */
	#spContainer a.close:link,
	#spContainer a.close:visited {
		top: 0;
		right: 0;
		width: 34px;
		height: 34px;
		background-position: center center;
		background-color: #212121;
		border-color: #212121;
	}

	/* Внутренности с собственной шириной: комментарии, ответы, форма правки
	   и согласие на показ «Ню». Остальное — блоки, они и так по родителю. */
	#spInfo .textarea,
	#spComments .item,
	#spComments .context,
	#spComments .item.reply,
	#spComments .item.reply .context,
	#spEditBox,
	#spEditBox .textbox,
	#spEditBox .textarea,
	#spEditBox .select,
	#spEditBox .nuBox,
	#spNuAgree:link,
	#spNuAgree:visited {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	#spComments .context,
	#spEditBox .textarea,
	#spEditBox .select,
	#spEditBox .nuBox {
		float: none;
	}
	/* Ответ отступал от родителя на 40 px — на телефоне это четверть ширины. */
	#spComments .item.reply {
		margin-left: 12px;
	}

	/* --- плашка согласия на куки --------------------------------------- */

	.cookie-consent,
	.cookie-consent__block,
	.cookie-consent__btns {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}



	/* --- главная для гостя ---------------------------------------------- */

	/* Отдельный шаблон (index/outside.css) с собственной сеткой: всё прибито
	   к 895px, а селекторы вида «.index .splash .bg» перебиваются только
	   такой же вложенностью — поэтому ниже она везде повторена. */

	/* Ряды-обёртки разделов. */
	.index .cl {
		width: auto;
		max-width: 100%;
		padding: 0 12px;
		box-sizing: border-box;
	}

	/* Пунктирные линии-украшения позиционированы в пикселях от левого края
	   и на узком экране просто перечёркивают заголовок. */
	.index .dotLine {
		display: none;
	}

	/* Приветственный экран: подложка и текст лежат абсолютно поверх фона.
	   Текст возвращаем в поток, высоту отдаём содержимому, подложку
	   растягиваем на весь блок. */
	.index .splash .photoBg {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	.index .splash .bg {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 0;
	}
	.index .splash .cont {
		position: static;
		width: auto;
		max-width: 100%;
		height: auto;
		padding: 25px 15px 30px 15px;
		box-sizing: border-box;
	}
	.index .splash .leftSide,
	.index .splash .rightSide {
		float: none;
		width: auto;
		max-width: 100%;
	}
	.index .splash h1 {
		font-size: 24px;
		line-height: 26px;
		padding: 0;
	}
	.index .splash .counter,
	.index .splash .counterOnline,
	.index .splash .forWhat {
		padding-left: 0;
		padding-top: 16px;
	}
	.index .splash .regBox {
		padding: 24px 0 0 0 !important;
	}

	/* Четыре пояснительных плитки в строку — на телефоне по две. */
	.index .teasers {
		height: auto;
		padding: 0 0 30px 0;
	}
	.index .teasers .el {
		float: none;
		display: inline-block;
		vertical-align: top;
		margin-top: 25px;
	}
	.index .teasers .t1,
	.index .teasers .t2,
	.index .teasers .t3,
	.index .teasers .t4 {
		width: 45%;
		margin-left: 0;
		margin-right: 2%;
	}

	/* Ленты снимков и блогов — настоящие карусели: внутри лежит полоса
	   шириной в несколько тысяч пикселей, которую двигает скрипт. Ломать её
	   не нужно, достаточно разрешить пролистывать пальцем. */
	.index .photo .window,
	.index .critic .window,
	.index .blogs .window,
	.index .video .window {
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}
	.index .video .player {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 0 15px 0;
	}
	/* Ролик приходит врезкой 600x360. Ширину отдаём экрану, высоту считаем
	   от неё же, чтобы кадр не растягивался: 56.25vw — это те же 16:9. */
	.index .video .player iframe,
	.index .video .player object,
	.index .video .player embed {
		width: 100%;
		max-width: 100%;
		height: 56.25vw;
		max-height: 360px;
	}

	/* Пара картинок на лендинге нарочно шире своей рамки: рамка обрезает
	   их до квадрата (аватары) и до кадра 280x172 (превью роликов). Общее
	   правило «картинка не шире родителя» такую обрезку ломает. */
	.index .users .item img,
	.index .video .item img {
		max-width: none;
	}

	/* Конкурсы и события — не карусель, а список во всю ширину.
	   Селекторы обязательно через .window: у вошедшего пользователя своя
	   главная (index/inside.html), там тоже есть .index .concurs .item, но
	   без карусели и со своими отступами. Без .window правила дотягивались
	   бы и туда, перебивая их по одинаковой специфичности. */
	.index .concurs .window,
	.index .events .window {
		width: auto;
		max-width: 100%;
		height: auto;
	}
	.index .concurs .window .item,
	.index .events .window .item {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-bottom: 25px;
	}
	.index .concurs .window .item a.preview:link,
	.index .concurs .window .item a.preview:visited,
	.index .events .window .item a.preview:link,
	.index .events .window .item a.preview:visited {
		float: none;
		margin: 0 0 12px 0;
	}
	.index .concurs .window .item .text,
	.index .events .window .item .text {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
	}

	/* Полоса «Нас уже столько-то» с кнопкой регистрации справа. */
	.index .users .joinUs .text {
		float: none;
		width: auto;
		max-width: 100%;
	}
	.index .users a.reg:link,
	.index .users a.reg:visited {
		float: none;
		width: 100%;
		margin: 15px 0 0 0;
		box-sizing: border-box;
	}
	.index .users .counter {
		position: static;
		text-align: left;
		padding: 0 0 12px 0;
	}

	/* Форум: две колонки по 440px друг под друга. */
	.index .forum .leftColum,
	.index .forum .rightColum {
		float: none;
		width: auto;
		max-width: 100%;
	}
	.index .forum .leftColum .topics,
	.index .forum .rightColum .posts {
		height: auto;
	}
	.index .forum .rightColum .info {
		float: none;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	.index .forum .rightColum .avatar {
		margin: 0 0 12px 0;
	}
	.index .forum .rightColum .info .corner {
		display: none;
	}
	.index .forum a.seeAll:link,
	.index .forum a.seeAll:visited {
		float: none;
		margin: 20px auto 0 auto;
	}

	/* Нижний блок с приглашением: два блока в ряд. */
	.index .joinBox .leftColum,
	.index .joinBox .rightColum {
		float: none;
		width: auto;
		max-width: 100%;
		margin: 0 0 15px 0;
		box-sizing: border-box;
	}

	/* Подвал главной. */
	.ifooter .box {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}
	.ifooter .copy {
		height: auto;
		padding-bottom: 20px;
	}
	.ifooter .counters,
	.ifooter .copyrights {
		float: none;
		width: auto;
		max-width: 100%;
	}
	.ifooter .adult {
		position: static;
		display: inline-block;
		margin: 15px 0 0 0;
	}
	.ifooter .secMenu {
		height: auto;
		padding: 20px 12px;
	}
	.ifooter .secMenu a:link,
	.ifooter .secMenu a:visited {
		display: inline-block;
		margin: 0 15px 10px 0;
	}

	/* Баннер партнёра свёрстан на flex с фиксированной высотой. */
	.banner {
		margin-bottom: 40px;
	}
	.banner-wrap {
		flex-wrap: wrap;
		height: auto;
		gap: 20px;
		padding: 25px 15px;
	}
	.banner-info__title {
		font-size: 26px;
	}
	.banner-info__desc {
		font-size: 15px;
	}
	.banner-info__button,
	.banner-info__sys {
		width: 100%;
	}
	.banner-pic {
		display: none;
	}

	/* --- главная для вошедшего ------------------------------------------- */

	/* Ещё один шаблон главной — index/inside.html со своим inside.css.
	   Сетка: две колонки по 440, блоки по 435, поле поиска 760, ряды
	   .cols2 и .editors по 890.

	   Классы .photo, .video, .concurs, .events здесь и на гостевой главной
	   называются одинаково, но означают разное: там карусели, тут обычные
	   блоки. Поэтому все правила ниже идут через .box — он есть только
	   в этом шаблоне и заодно даёт нужный перевес по специфичности. */
	.index .leftColum,
	.index .rightColum,
	.index .leftColumShort,
	.index .leftColumShort h2,
	.index .box,
	.index .box h2,
	.index .cols2,
	.index .cols2 h2,
	.index .critic,
	.index .editors {
		width: auto;
		max-width: 100%;
		float: none;
		box-sizing: border-box;
	}

	/* Строка поиска: поле 760 слева и кнопка 100 справа. В столбик. */
	.index .search .textbox,
	.index .search .send {
		float: none;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	.index .search .send {
		margin: 8px 0 0 0;
	}

	/* Текстовые колонки по 370 рядом с аватаром или превью. */
	.index .box.topics .info,
	.index .box.forum .info,
	.index .box.concurs .item .info {
		float: none;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Плитки видео были 215 по два в ряд — теперь от ширины экрана. */
	.index .box.video .item {
		width: 48%;
		margin: 0 1% 8px 1%;
		box-sizing: border-box;
	}
	.index .box.video .photo,
	.index .box.video .info {
		width: auto;
		max-width: 100%;
	}
	.index .box.video .photo img {
		width: 100%;
		min-height: 0;
		height: auto;
	}
	.index .box.events .item,
	.index .box.events .item .withPhoto {
		width: auto;
		max-width: 100%;
		float: none;
	}

	/* Нижняя пара колонок под виджеты: 590 слева и 280 справа. */
	.index .cols2 .shareColum,
	.index .cols2 .vkColum {
		float: none;
		width: auto;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}

	/* --- подвальное меню ------------------------------------------------ */

	/* Ссылки идут в строку с отступом 30px справа. На узком экране последняя
	   вылезала за край: строчный элемент переносится, но отступ остаётся.
	   Делаем их блочно-строчными и уменьшаем отступ — переносятся аккуратно. */
	.smenu a:link,
	.smenu a:visited {
		display: inline-block;
		margin: 0 10px 8px 10px;
	}
}