/* Ссылки вместо <div> в шапке.

   В макете directory_hubs пункты меню и кнопки — это <div> и <span>: он рисует
   вид, а не поведение. На живом сайте это должны быть <a>, иначе по ним нельзя
   перейти и их не видит поисковик. У <a> другое поведение по умолчанию —
   строчный элемент с подчёркиванием и синим цветом, — поэтому пункты выпадающих
   списков вставали в строку вместо столбца. Здесь только то, что возвращает
   ссылкам вид исходных блоков; сами значения дизайна не меняются. */

/* Вес селекторов поднят намеренно.

   На хабах поверх дизайн-пакета продолжают грузиться bootstrap и default.css
   сайта, а там:
       a:not(.btn) { text-decoration: underline }   (вес 0,1,1)
       a:hover     { color: #008c44 }               (вес 0,1,1)
   Правило вида .lp-ihdr-71 весит 0,1,0 и проигрывало — в меню на наведении
   вылезали зелёный цвет и подчёркивание. Поэтому здесь селекторы с тегом и
   явными состояниями: a.lp-ihdr-71 (0,1,1, но объявлен позже) и
   a.lp-ihdr-71:hover (0,2,1). Никаких !important — вес достаточен. */

a.lp-ihdr-71,
a.lp-ihdr-71:link,
a.lp-ihdr-71:visited,
a.lp-ihdr-71:hover,
a.lp-ihdr-71:focus,
a.lp-ihdr-71:active,
a.lp-ihdr-81,
a.lp-ihdr-81:link,
a.lp-ihdr-81:visited,
a.lp-ihdr-81:hover,
a.lp-ihdr-81:focus,
a.lp-ihdr-81:active {
	display: block;
	color: inherit;
	text-decoration: none;
}

a.lp-ihdr-27, a.lp-ihdr-27:link, a.lp-ihdr-27:visited, a.lp-ihdr-27:hover, a.lp-ihdr-27:focus,
a.lp-ihdr-28, a.lp-ihdr-28:link, a.lp-ihdr-28:visited, a.lp-ihdr-28:hover, a.lp-ihdr-28:focus,
a.lp-ihdr-74, a.lp-ihdr-74:link, a.lp-ihdr-74:visited, a.lp-ihdr-74:hover, a.lp-ihdr-74:focus,
a.lp-ihdr-75, a.lp-ihdr-75:link, a.lp-ihdr-75:visited, a.lp-ihdr-75:hover, a.lp-ihdr-75:focus {
	text-decoration: none;
}

/* Строки списка: цвет и фон при наведении задаёт дизайн, подчёркивание от
   bootstrap нужно снять во всех состояниях */
a.lp-sdir-11,
a.lp-sdir-11:link,
a.lp-sdir-11:visited,
a.lp-sdir-11:hover,
a.lp-sdir-11:focus,
a.lp-sdir-11:active {
	text-decoration: none;
}

a.lp-sdir-11:hover {
	color: var(--lp-green);
}

/* Подвал тёмный: своё подчёркивание при наведении у него есть (footer-base.css),
   а зелёный цвет от default.css там неуместен */
a.lp-foot-5,
a.lp-foot-5:link,
a.lp-foot-5:visited,
a.lp-foot-5:hover,
a.lp-foot-5:focus,
a.lp-foot-5:active {
	color: #fff;
}

a.lp-foot-5 {
	text-decoration: none;
}

a.lp-foot-5:hover {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .8);
}

/* Логотип обёрнут в ссылку на главную — обёртка не должна ломать выравнивание */
.lp-ihdr-4 > a,
.lp-ihdr-4 > a:hover {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

/* Поле поиска в шапке — это <form>, у макета там был <div> */
form.lp-ihdr-13 {
	margin: 0;
}

/* Плотность и раскладка списков во всех хабах (правка владельца 20.08).

   Три вещи разом:

   1. Колонка уже. В макете max-width 1360 — на списках это растягивало строки
      во всю ширину экрана, и глаз терял связь названия со счётчиком. 1100 —
      ширина контентной колонки из того же пакета (search.html).

   2. Вместо grid — колонки CSS. Сетка выравнивает группы одной строки по самой
      высокой, и под короткими группами оставались провалы в пол-экрана.
      Колонки заполняются по потоку и упаковываются без пустот; группа не
      разрывается между колонками (break-inside).

   3. Плотность строк — та, что подобрали на странице стран: она подошла всем
      трём хабам, так что применяется ко всем, а не через модификатор. */

.lp-sdir-1 {
	max-width: 1100px;
}

.lp-sdir-9 {
	display: block;
	columns: 3;
	column-gap: 50px;
}

.lp-sdir-9 > div {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 36px;
}

.lp-sdir-11 {
	padding: 6px 10px;
}

.lp-sdir-12 {
	line-height: 20px;
}

@media (max-width: 900px) {
	.lp-sdir-9 {columns: 2;}
}

@media (max-width: 620px) {
	.lp-sdir-9 {columns: 1;}
}