/*
 * Доповнення до styles.min.css після переходу на Joomla 6.
 * styles.min.css зібраний під FontAwesome 5 — у Joomla 6 вбудований FontAwesome 6,
 * тож даємо старій назві шрифту ті самі файли.
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../../../media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2");
}

/*
 * Заголовок статті: у Joomla 3 це був h2, у Joomla 6 — h1.
 * Залишаємо h1 (правильно для SEO), але з виглядом колишнього h2.
 */
.main > .container .component-wrapper .item-page .page-header h1 {
  color: hsl(var(--main-color-h), var(--main-color-s), var(--main-color-l));
  font-size: calc(1.325rem + 0.9vw);
}

@media (min-width: 1200px) {
  .main > .container .component-wrapper .item-page .page-header h1 {
    font-size: 2rem;
  }
}

/*
 * Phoca Gallery 6: картки категорій і зображень мають розмір medium-мініатюри
 * (500×450 у налаштуваннях), тому в рядок влазить лише дві. Як на старому
 * сайті — п'ять у рядок на десктопі, картинка/іконка під ширину картки.
 */
.pg-categories-items-box .pg-category-box,
.pg-category-items-box .pg-item-box {
  flex: 0 0 calc(20% - 1em);
}

.pg-categories-items-box .pg-category-box .pg-image,
.pg-category-items-box .pg-item-box .pg-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 10 / 9;
}

@media (max-width: 991.98px) {
  .pg-categories-items-box .pg-category-box,
  .pg-category-items-box .pg-item-box {
    flex-basis: calc(33.333% - 1em);
  }
}

@media (max-width: 575.98px) {
  .pg-categories-items-box .pg-category-box,
  .pg-category-items-box .pg-item-box {
    flex-basis: calc(50% - 1em);
  }
}

/*
 * Назва — під мініатюрою, а не поверх неї (у вузькій картці плашка закривала
 * пів зображення). Картки в рядку однакової висоти, назва — до двох рядків.
 */
.pg-categories-items-box,
.pg-category-items-box {
  align-items: stretch;
}

.pg-categories-items-box .pg-category-box,
.pg-category-items-box .pg-item-box {
  display: flex;
  flex-direction: column;
}

.pg-categories-items-box .pg-category-box-info,
.pg-category-items-box .pg-item-box-info {
  flex: 1 0 auto;
  display: flex;
}

.pg-categories-items-box .pg-category-box-title,
.pg-category-items-box .pg-item-box-title {
  position: static;
  font-size: 85%;
  border-radius: 0 0 3px 3px;
  background: hsl(var(--main-color-h), var(--main-color-s), var(--main-color-l));
}

.pg-categories-items-box .pg-category-box-title a,
.pg-category-items-box .pg-item-box-title a {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  vertical-align: top;
  max-width: calc(100% - 1.5em);
  color: #fff;
}

/*
 * Вбудоване в статтях (Google Drive, YouTube, Facebook, PDF, AllVideos)
 * має фіксовану ширину 450–960px — на телефоні з'являється горизонтальна
 * прокрутка. Обмежуємо шириною колонки.
 */
.component-wrapper iframe,
.component-wrapper video,
.component-wrapper .avPlayerContainer,
.component-wrapper .avPlayerBlock {
  max-width: 100%;
}