/* ================================================== */
/* Отдельная страница просмотра PDF (карточки блога)  */
/* Панель сверху и просмотрщик во всю оставшуюся      */
/* высоту: сам файл не отдаётся, показываются картинки */
/* ================================================== */

.view-bar {
   display: flex;
   align-items: center;
   gap: 16px;

   /* По бокам – отступ карточки просмотра (её padding), чтобы кнопки стояли
      ровно над её содержимым, а не над внешним краем: иначе выглядит съехавшим */
   padding: 12px;
}

.view-bar__title {
   flex: 1;
   min-width: 0;

   margin: 0;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

   font-family: 'Raleway Medium', sans-serif;
   font-size: clamp(14px, 1.3vw, 19px);
   color: #FFFFFF;
}

.view-bar__back,
.view-bar__home {
   flex: none;

   display: inline-flex;
   align-items: center;
   gap: 6px;

   font-family: 'Raleway Medium', sans-serif;
   font-size: clamp(15px, 1.2vw, 17px);
   color: #E56F25;
   text-decoration: none;

   padding: 8px 14px;
   border: 1px solid #E56F25;
   border-radius: 999px;

   cursor: pointer;
   transition: background-color .15s linear, color .15s linear;
}

@media (any-hover: hover) {
   .view-bar__back:hover,
   .view-bar__home:hover {
      background-color: #E56F25;
      color: #FFFFFF;
   }
}

/* Просмотрщик занимает всю высоту между панелью и низом экрана */
.view-main {
   flex: 1;
   display: flex;
   min-height: 0;
   padding-bottom: 14px;
}

/* Класс --expanded нужен, чтобы просмотрщик не прятался на узких экранах
   (в docs.css обычный .pdf-viewer там display: none), но всё «оверлейное»
   поведение здесь лишнее: на этой странице он и есть страница */
.view-main .pdf-viewer--expanded {
   flex: 1;
   min-height: 0;

   position: static;
   inset: auto;
   z-index: auto;
   box-shadow: none;

   padding: 12px;
   border-radius: 14px;
}

/* На телефоне мобильное правило docs.css обнуляло скругление и нижний отступ –
   просмотрщик прилипал к краю блока, хотя сверху отступ был */
@media (max-width: 900px) {
   .view-main .pdf-viewer--expanded {
      padding: 10px;
      border-radius: 12px;
   }
}

/* Стрелка нарисована, а не набрана: у шрифта знак «←» мельче кегля и сидит на
   базовой линии – в кнопке он получался мелким и смещённым вниз */
.view-bar__arrow {
   flex: none;
   width: 1.1em;
   height: 1.1em;
}

@media (max-width: 600px) {
   /* Всё в одну строку: кнопки по краям, название между ними. Длинное имя
      сокращается многоточием (min-width: 0 + ellipsis выше), поэтому строка
      не разъезжается, каким бы длинным ни был файл */
   .view-bar {
      gap: 8px;
      padding: 10px;
   }

   .view-bar__title {
      font-size: 14px;
   }

   .view-bar__back,
   .view-bar__home {
      padding: 7px 11px;
      font-size: 14px;
   }

   /* На узких телефонах у «Назад» остаётся одна стрелка: подпись съедала место
      у названия файла, а стрелка понятна и без слова */
   @media (max-width: 400px) {
      .view-bar__back {
         font-size: 0; /* прячем подпись, стрелка задана своим размером */
         padding: 7px 10px;
      }

      .view-bar__arrow {
         width: 18px;
         height: 18px;
      }
   }
}