/* Раздел документации: список приборов слева, их документы справа.
   Вёрстка списка файлов переиспользует классы .doc-po__* из style.css,
   здесь только то, чего в теме не было: состояние выбранного прибора,
   кнопка вместо ссылки и поведение на узких экранах. */

/* Заголовок свёрнутого списка (виден только до 720px — так задано в теме).
   display не трогаем: показом управляет style.css. */
.documentation__dropdown-head {
  width: 100%;
  background: #fff;
  font-family: inherit;
  text-align: left;
  gap: 10px;
}
.documentation__dropdown-name { pointer-events: none; }
.documentation__dropdown-head .arrow-down { pointer-events: none; }
.dropdown-head--active .arrow-down { transform: rotate(180deg); }

/* пункт списка — <button>, чтобы у страницы не появлялось лишних адресов */
.documentation__dropdown-item-link {
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
@media (hover: hover) {
  .documentation__dropdown-item-link:hover {
    background: var(--svetlosiniy);
  }
}
.documentation__dropdown-list .documentation__dropdown-item-link--active,
.documentation__dropdown-list .documentation__dropdown-item-link--active:hover {
  background: var(--firmennyy-siniy);
  border-bottom-color: var(--firmennyy-siniy);
  color: #fff;
}

.doc-re { min-width: 0; }
/* вступление повторяет прежнюю раскладку: картинка слева, текст справа */
.doc-re__intro { display: flex; gap: 30px; }
.doc-re__intro[hidden], .doc-re__panel[hidden] { display: none; }
.doc-re__intro .services__img { max-width: 420px; }
@media (max-width: 991px) { .doc-re__intro { flex-direction: column; gap: 18px; } }
.doc-re__panel { width: 100%; }
.doc-re__empty {
  font-size: 14px;
  line-height: 150%;
  color: #737d8b;
  padding: 10px 0;
}

/* у ссылки на файл текст не должен разъезжаться при длинном названии */
.doc-po__item-btn { text-decoration: none; }
.doc-po__item-btn-left span { min-width: 0; overflow-wrap: anywhere; }
@media (hover: hover) {
  .doc-po__item-btn:hover { background: var(--svetlosiniy); }
}

@media (max-width: 767px) {
  .documentation .services__content { flex-direction: column; gap: 20px; }
  .documentation__sidebar { max-width: none; min-width: 0; }
  .doc-po__item-btn { flex-wrap: wrap; }
}

/* Страница «Программное обеспечение» (/doc/po/): в теме .doc-po всегда две колонки
   (текст | список файлов), на телефоне список уезжал вправо за экран
   (ширина страницы 561 px при экране 390). До 720 px — одна колонка. */
@media (max-width: 720px) {
	.documentation .doc-po {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}