/* Карточка проекта (шаблон 10): описание во всю ширину и плеер рядом с галереей.
   Добавлено 27.09.2026 */

/* ---- Описание под галереей ---- */
.project-text{
    max-width: 1000px;
    font-size: 17px;
    line-height: 1.7;
}
.project-text p{ margin-bottom: 16px; }
.project-text h2{
    max-width: 1000px;
    margin: 40px 0 14px;
}
.project-text > h2:first-child,
.project-text > h3:first-child{ margin-top: 0; }
.project-text h3{ margin: 30px 0 12px; }
.project-text ul,
.project-text ol{ margin: 0 0 18px; padding-left: 22px; }
.project-text li{ margin-bottom: 8px; }
.project-text .table{ max-width: 640px; }
.project-text .table td{ padding: 10px 12px; }
.project-text p > b:first-child,
.project-text p > strong:first-child{ display: inline-block; margin-bottom: 2px; }

/* ---- Цена рядом с галереей ---- */
.product-info .project-price{ margin-bottom: 20px; }
.product-info .project-price p:last-child{ margin-bottom: 0; }

/* ---- Плеер рядом с галереей ---- */
.project-video{ margin: 0 0 20px; }

.video-teaser{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 18px;
    padding: 10px 18px;
    border: 1px solid #FBB254;
    border-radius: 6px;
    color: #3e3e3e;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.video-teaser:hover{ background: #FBB254; color: #fff; text-decoration: none; }
.video-teaser b{ font-weight: 600; opacity: .6; }
.video-teaser-icon{
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #FBB254;
}
.video-teaser:hover .video-teaser-icon{ border-left-color: #fff; }
.video-label{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #3e3e3e;
}
.video-label b{ font-weight: 600; color: #8c8c8c; }
.video-label-icon{
    width: 0; height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #FBB254;
}
.video-frame{
    position: relative;
    padding-top: 56.25%;
    background: #14171a;
    border-radius: 6px;
    overflow: hidden;
}
.video-frame iframe,
.video-frame .video-poster{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
}
.video-frame[data-embed]{ cursor: pointer; }
.video-frame .video-poster{ object-fit: cover; }
.video-bar{
    position: absolute;
    top: 0; left: 0; right: 0;
    display: block;
    padding: 12px 16px;
    background: linear-gradient(rgba(20,23,26,.75), rgba(20,23,26,0));
    color: #fff;
    font-size: 15px;
    line-height: 1.3;
}
.video-bar-title{
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video-play{
    position: absolute;
    top: 50%; left: 50%;
    width: 74px; height: 74px;
    margin: -37px 0 0 -37px;
    border-radius: 50%;
    background: rgba(20, 23, 26, .6);
    border: 2px solid #fff;
    transition: background .2s, transform .2s;
}
.video-play:after{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    margin: -11px 0 0 -6px;
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}
.video-frame:hover .video-play{
    background: #FBB254;
    border-color: #FBB254;
    transform: scale(1.06);
}
.video-duration{
    position: absolute;
    right: 12px; bottom: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(20, 23, 26, .8);
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
}
.video-caption{
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #767676;
}
.video-caption a{ color: #1d4ed8; }

/* На десктопе окно видео повторяет размер фотографии рядом */
@media (min-width: 992px){
    .catalog_product .product-slider{ max-width: 600px; }
    .product-info .project-video{ max-width: 600px; }
    .product-info .video-frame{ padding-top: 0; height: var(--video-h, 450px); }
    /* фото галереи задаёт высоту само, без фикс. 450 и полос по краям */
    .catalog_product #msGallery .img{ height: auto; }
    .catalog_product #msGallery .img img{ max-height: none; }
}
.product-head{ margin-bottom: 18px; }
.product-head h1{ margin-bottom: 12px; }
.product-head .project-price p:last-child{ margin-bottom: 0; }

@media (max-width: 991px){
    .project-text{ font-size: 16px; line-height: 1.65; }
    .project-text h2{ margin-top: 30px; }
    .project-video{ margin-bottom: 8px; }
    .video-teaser{ padding: 9px 15px; font-size: 14px; }
    .video-bar{ padding: 9px 12px; font-size: 13px; }
    .video-play{ width: 58px; height: 58px; margin: -29px 0 0 -29px; }
    .video-play:after{ margin: -9px 0 0 -5px; border-width: 9px 0 9px 14px; }
}

/* Слайдер держит все кадры в потоке, поэтому браузер тянет их разом ещё до
   того, как их пролистают. До запуска слайдера показываем только первый,
   остальные грузятся по мере листания. 27.09.2026 */
.gallery:not(.slick-initialized):not(.gallery-ready) .item:nth-child(n+2){ display: none; }