/*
  Точечные правки вёрстки. detkam-online.com, 24.08.2026

  Отдельным файлом намеренно. styles.css сжат в одну строку длиной
  восемьдесят с лишним тысяч символов: правка внутри него не читается
  ни в истории изменений, ни глазами, и откатить её тяжело.
  Здесь же видно, что именно переопределено и зачем.

  Файл подключается после styles.css, поэтому при равной специфичности
  выигрывает он. !important стоит там, где переопределяемое правило
  тоже объявлено с !important либо задано более узким медиазапросом.
*/

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

	/* 1. Полоса категорий повторяет пункты главного меню, а на узком
	      экране её ссылки не помещаются и она превращается в пустую
	      тёмную плашку над заголовком. В styles.css она скрыта только
	      до 700px — на телефонах пошире оставалась видимой. */
	.categories {
		display: none !important;
	}

	/* 2. В styles.css у заголовка стоит margin-top:-1.1em внутри
	      @media (max-device-width:415px). Отрицательный отступ больше
	      строки — заголовок затягивает вверх, и он наезжает на то,
	      что стоит над ним. Снимаем на всех узких экранах сразу,
	      не разбирая, какой из брейкпоинтов сработал: их в файле
	      больше тридцати, и они пересекаются. */
	.story .title {
		margin-top: 0 !important;
		margin-bottom: 10px;
	}

	/* 3. «Хлебные крошки» не переносятся: у вложенного блока .over стоит
	      white-space:nowrap, и на телефоне строка «Главная » Минусовки »
	      Минусовки песен из мультфильмов » Чунга-Чанга» растягивает
	      страницу до 549 точек при экране 430. Отсюда пустая полоса
	      справа и съехавшее влево содержимое: страница шире экрана,
	      и её можно двигать вбок.
	      Измерено на живой странице 24.08.2026: после переноса ни один
	      элемент за 430 точек не выходит. */
	.speedbar {
		display: block !important;
		white-space: normal !important;
	}

	.speedbar .over,
	.speedbar li,
	.speedbar span,
	.speedbar a,
	#dle-speedbar {
		white-space: normal !important;
	}

	/* 4. Карточки в списках разделов — две беды разом.

	      Первая: плеер объявлен как float:right шириной 579 точек. На узком
	      экране он рядом ни с чем не помещается и всплывает поверх соседей.

	      Вторая, и она главная: в styles.css внутри @media (max-width:420px)
	      стоит .std-list li .main-box-a { height: 155px } — жёсткая высота
	      вместе с overflow:hidden. Содержимое в неё не влезает, и нижняя
	      часть плеера просто срезается: полоса перемотки и время оказываются
	      на разделителе и на плашках категорий.

	      Решение: высота по содержимому, а раскладка на flex вместо float —
	      картинка и текст в строку, плеер отдельной строкой во всю ширину.

	      Замерено на живой странице 25.08.2026 при ширине карточки 400 точек:
	      было — плеер выходит за низ карточки на 49 точек; стало — на 55
	      точек внутри неё. Высота карточки выросла с 220 до 292: элементы
	      перестали налезать друг на друга и встали в столбик. */
	.st-bl .main-box-a,
	.std-list li .main-box-a {
		height: auto !important;
		overflow: visible;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.st-bl .main-box-a > a.img {
		float: none;
		flex: 0 0 auto;
		margin-right: 12px;
	}

	.st-bl .info {
		flex: 1 1 0;
		min-width: 0;
	}

	.st-bl .player {
		flex: 1 1 100%;
		float: none;
		width: 100%;
		clear: none;
		margin-top: 6px;
	}

	.st-bl .player .dleaudioplayer,
	.st-bl .player .mdtc-clnplrv-audio {
		width: 100%;
		max-width: 100%;
	}

	.st-bl .stat {
		float: none;
	}

	.st-bl .clear-short {
		clear: both;
	}
}