/* Start:/local/templates/media-led/components/bitrix/news/portfolio/bitrix/news.detail/.default/style.css?17924803539173*/
div.news-detail img.detail_picture
{
	float:left;
	margin:0 8px 6px 1px;
}
.news-date-time
{
	color:#486DAA;
}


.article_cats{
  width: 100%;
  border-bottom: 1px solid #e2e2e2;
  text-align: center;
}
.article_item{
  padding: 10px 15px;
  background-color: #00569c;
  color: #fff;
  margin: 15px;
  display: inline-block;
}
.article_item a{
  color: white;
}


@media (max-width:768px) {
  youtube iframe {
    width: 100%;
    max-width: 100%;
  }
}
.portfolio-h2 {
  margin-top: 30px;
}
.portfolio-contancts {}
.portfolio-contancts-h2 {
  text-align: center;
  margin-top: 40px;
}
.portfolio-contancts-form {
  max-width: 600px;
  margin: 0 auto;
}
.owl-portfolio {
  width: 100%;
  overflow: hidden;
}
.owl-portfolio .owl-stage {
  display: flex;
}
.portfolio-slide {
}
.portfolio-slide img {
  width: 100%;
}
.owl-nav {
  display: none;
}
.owl-dots {
  margin-top: 30px;
  display: flex;
  gap:10px;
  justify-content: center;
}
.owl-dot {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border:1px solid #999;
  background-color: #fff;
  position: relative;
}
.owl-dot.active::before {
  content: ' ';
  height: 5px;
  width: 5px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #c6c6c6;
}
.news-date{
  width: 49%;
  text-align: left;
  font-style: italic;
  text-decoration: underline;
  display: inline-block;
}
.news-cat{
  width: 50%;
  text-align: right;
  display: inline-block;
}
.date_cat_container{
  width: 100%;
}


.detail-gallery {
  margin-bottom: 30px;
  position: relative;
}
.detail-gallery__button {
  background: rgb(255 255 255 / 83%);
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail-gallery__button:hover {
  background: rgb(255 255 255 / 100%);
}
.detail-gallery__button::after {
  transform: scale(0.4);
}

.swiper-slide {
  height: 300px;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.swiper-slide img {
  height: 100%;
}

.swiper-pagination {
  position: relative !important;
  margin-top: 40px;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 1px solid #999;
  background-color: #fff;
  position: relative;
  opacity: 1;
}

.swiper-pagination-bullet-active::before {
  content: ' ';
  height: 5px;
  width: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #c6c6c6;
}

/* intarium 20.10.2026 (2026-10-20-portfolio-detail-css-alt): вид детальных страниц портфолио - левый край текста по H1 и галерее, слайды 4:3 равной высоты, видео 16:9, без горизонтальной прокрутки на телефоне. Привязка main.page:has(...portfolio), нужен :has(); в старых браузерах вид как раньше. Откат - changelog 2026-10-20-portfolio-detail-css-alt. */
/* 1. Дата и рубрика: flex, рубрика справа, на узком экране переносится целиком (было: 49% + 50% inline-block, рубрика уезжала под дату влево) */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .date_cat_container{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1rem;width:100%;margin-bottom:.5rem}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .date_cat_container .news-date,
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .date_cat_container .news-cat{display:block;width:auto;max-width:100%}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .date_cat_container .news-cat{margin-left:auto;text-align:right}

/* 2. Левый край текста = H1. Боковой padding и max-width снимаем только у внешних .container (прямые дети текста и .container внутри .bg-light).
   Вложенные .row>.container НЕ трогать: их 13.5px компенсируют минус-поле своего .row, иначе текст уедет на 13.5px левее H1. */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .news-detail>.container,
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .news-detail .bg-light>.container{max-width:none;padding-left:0;padding-right:0}

/* 3. Эмуляция .ratio (в Bootstrap v5.0.0-alpha1 класса нет) */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ratio{position:relative;width:100%;background:#000;border-radius:.25rem;overflow:hidden}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ratio-16x9{aspect-ratio:16/9}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ratio>iframe,
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ratio>video{position:absolute;top:0;left:0;width:100%;height:100%;border:0;object-fit:contain}
/* фото внутри .ratio (Антара, style="max-height:400px"): без принудительного 16:9, чтобы не растягивать */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ratio:has(>img){aspect-ratio:auto;background:none;overflow:visible}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ratio>img{display:block;width:100%;height:auto;max-height:400px;object-fit:contain}

/* 4. video и iframe без обёртки .ratio (Валуйки, ГТРК, video в col-md-6): 100% ширины, 16:9. Форму Битрикс24 не трогаем. */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail video,
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail iframe:not(.ratio>iframe):not(.portfolio-contancts *){display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;border:0;background:#000}
/* iframe прямо в тексте (Валуйки) на широком экране не растягиваем на всю ширину.
   v2: те же :not(), что в правиле выше, иначе специфичность (0,6,3) против (0,7,4) и max-width:100% перебивал 800px - ролик был 1220x686 */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .news-detail>iframe:not(.ratio>iframe):not(.portfolio-contancts *){max-width:800px}

/* 5. Мёртвые классы Bootstrap 5 (в alpha1 их нет): эмулируем только внутри детальной портфолио */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .ps-3{padding-left:1rem}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .rounded-3{border-radius:.5rem}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .fw-bold{font-weight:700}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail .fw-semibold{font-weight:600}

/* 6. Списки (ОПЦИОНАЛЬНО, можно убрать блок): сайтовое правило ".news-detail ul li{list-style:inside;padding-left:3%}" рисует маркеры и в list-unstyled,
   а у обычных списков маркер внутри без висячего отступа. */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail ul.list-unstyled>li{list-style:none;padding-left:0}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail ul:not(.list-unstyled){padding-left:1.25rem}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .news-detail ul:not(.list-unstyled)>li{list-style:disc outside;padding-left:0}

/* 7. Галерея: слайд 4:3 одинаковой высоты. Фото целиком (contain) на светлом фоне: у "Елены Г" вертикальные кадры 3:4 (видеостойки), cover срезал бы экран. */
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .detail-gallery .swiper-slide{height:auto;aspect-ratio:4/3;align-self:flex-start;background:#f2f4f7;border-radius:.25rem;overflow:hidden}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .detail-gallery .portfolio-slide{position:absolute;top:0;right:0;bottom:0;left:0}
main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .detail-gallery .portfolio-slide img{display:block;width:100%;height:100%;object-fit:contain}

/* 8. Тач-цели стрелок галереи на мобильных: 44px вместо 40px */
@media (max-width:767.98px){
  main.page:has(.date_cat_container .news-cat a[href*="/portfolio/"]) .detail-gallery .detail-gallery__button{width:44px;height:44px}
}

/* End */
/* /local/templates/media-led/components/bitrix/news/portfolio/bitrix/news.detail/.default/style.css?17924803539173 */