/*
 * ==========================================================
 * SERVICE-VENT
 * Стилі каталогу матеріалів Help.
 * ==========================================================
 */


/*
 * Групова картка документів.
 *
 * Кожна логічна група займає всю ширину:
 *
 *   Офіційна документація
 *   Матеріали SERVICE-VENT
 */

.help-document-group-card {
  grid-column: 1 / -1;

  min-height: 0;
}


.help-document-group-card > h2 {
  margin:
    0
    0
    10px
    0;

  padding-bottom: 12px;

  border-bottom:
    1px
    solid
    #59616c;

  text-align: center;
}


/*
 * Список документів усередині групи.
 */

.help-document-list {
  display: flex;
  flex-direction: column;
}


/*
 * Один документ.
 *
 * Ліворуч:
 *   назва та опис.
 *
 * Праворуч:
 *   кнопки мовних версій.
 */

.help-document-item {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 18px;

  align-items: center;

  padding:
    16px
    0;

  border-top:
    1px
    solid
    #46505b;
}


.help-document-item:first-child {
  border-top: 0;
}


.help-document-item:last-child {
  padding-bottom: 0;
}


/*
 * Назва документа.
 */

.help-document-info h3 {
  margin:
    0
    0
    6px
    0;

  font-size: 18px;
}


/*
 * Опис документа.
 */

.help-document-info p {
  margin: 0;

  color: #c7ccd2;

  line-height: 1.5;
}


/*
 * Спеціальний рівень доступу.
 *
 * Public не відображається.
 */

.help-document-meta {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 9px;
}


.help-document-badge {
  display: inline-block;

  padding: 4px 8px;

  border:
    1px
    solid
    #59616c;

  border-radius: 5px;

  font-size: 12px;
}


/*
 * Кнопки мовних версій файла.
 */

.help-document-files {
  display: flex;
  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 8px;
}


/*
 * ==========================================================
 * Mobile.
 * ==========================================================
 */

@media (max-width: 768px) {

  .help-document-item {
    grid-template-columns: 1fr;
  }


  .help-document-files {
    justify-content: flex-start;
  }

}