/* Канва — по центру окна (как reviews / history) */
html body > .content.page-video-all {
  margin-left: auto;
  margin-right: auto;
}

/* Зеркальный отступ слева = ширина вертикального скроллбара (YaBrowser, см. video_all.html). */
html:has(.page-video-all) {
  box-sizing: border-box;
  padding-left: var(--scrollbar-balance-width, 0px); }

html:has(.page-video-all) body {
  overflow-x: hidden; }

html:has(.page-video-all) .visually-hidden {
  white-space: normal; }

html[data-theme="dark"]:has(.page-video-all) body > .content.page-home {
  background: #000; }

html[data-theme="dark"] .page-video-all,
html[data-theme="dark"] .page-video-all .video-grid .row .item .description .video-desc,
html[data-theme="dark"] .page-video-all .dzen-channel-reference a {
  color: #fff; }

html[data-theme="dark"] .page-video-all .video-grid .row .item .title {
  color: #555555; }

html[data-theme="dark"] .page-video-all .page-header .description {
  color: #fff; }

html[data-theme="dark"] .page-video-all .video-grid .row .item .description .video-desc {
  background-color: #202020; }

html[data-theme="dark"] .page-video-all .video-grid .row:first-of-type .item:first-of-type .description .video-desc {
  background-color: transparent; }

.page-video-all .page-content {
    left: 2.5396825397rem;
    top: 7.3015873016rem;
    width: 76.1904761905rem;
    height: auto !important; }
.page-video-all .pagination .item img.hover,
.page-video-all .pagination .item img.active,
.page-video-all .pagination .item.active img,
.page-video-all .pagination .item:hover img {
    display: none; }
.page-video-all .pagination .item:not(.active):hover img.hover,
.page-video-all .pagination .item.active img.active {
    display: initial; }
.page-video-all .pagination {
    padding-top: 0.2857142857rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 1.6984126984rem; }
.page-video-all .pagination .item {
    width: 2.3650793651rem;
    height: 1.6984126984rem; }
.page-video-all .pagination .item:not(:first-of-type) {
    margin-left: 0.7936507937rem; }
.page-video-all .pagination .item:last-of-type {
    width: 3.4603174603rem;
    margin-left: 0.873015873rem; }
.page-video-all .pagination .item.active {
    cursor: default; }
.page-video-all .pagination .item img {
    height: 100%; }
.page-video-all {
    color: #666; }
.page-video-all .video-grid {
    left: 0;
    top: 3.6825396825rem;
    width: 76.1904761905rem; }
.page-video-all .video-grid .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; }
.page-video-all .video-grid .row:not(:first-of-type) {
    margin-top: 2.2857142857rem; }
.page-video-all .video-grid .row .item {
    width: 18.1428571429rem;
    flex-grow: 0;
    margin-right: 1.2063492063rem; }
.page-video-all .video-grid .row .item:last-of-type {
    margin-right: 0; }
.page-video-all .video-grid .row .item a.thumb {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 10.2063492063rem; }
html[data-theme="dark"] .page-video-all .video-grid .row .item a.thumb {
    background: #000; }
.page-video-all .video-grid .row .item a.thumb img {
    width: 100%;
    object-fit: contain; }
html[data-theme="dark"] .page-video-all .video-grid .row .item a.thumb img {
    background: #000; }
.page-video-all .video-grid .row .item .title {
    text-align: left;
    height: 1.3968253968rem; }
.page-video-all .video-grid .row .item .description {
    text-align: left;
    height: 1.3968253968rem; }
.page-video-all .video-grid .row .item .description .video-desc {
    margin: 0;
    min-height: 1.3968253968rem;
    background-color: #e9e9e9; }
/* FR999 — без полоски под заставкой, но с той же высотой блока, что на video_1.html */
.page-video-all .video-grid .row:first-of-type .item:first-of-type .description .video-desc {
    background-color: transparent;
    visibility: hidden; }

/* Телефонный заголовок — на ПК / iPad скрыт */
.page-video-all .video-all-title-phone {
    display: none !important;
}

body.touch .page-video-all .pagination .item:not(.active):hover img.hover
{
    display: none;
}
body.touch .page-video-all .pagination .item:not(.active):hover img:not(.hover):not(.active)
{
    display: initial;
}

/* =====================================================================
   МОБИЛЬНАЯ ВЕРСИЯ — только телефон (как reviews / seminars):
   (max-width: 700px) AND (max-device-width: 700px).
   ПК / iPad (device ≥ 768), в т.ч. Split View, — без изменений.
   ===================================================================== */
@media (max-width: 700px) and (max-device-width: 700px) {

    html:has(.page-video-all),
    html:has(.page-video-all) body {
        height: auto !important;
        min-height: 100%;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        margin: 0 !important;
        box-sizing: border-box;
    }

    /* На телефоне компенсация скроллбара не нужна */
    html:has(.page-video-all) {
        padding-left: 0 !important;
    }
    html.is-yabrowser:not(.yb-fullscreen):has(.page-video-all) body {
        padding-left: 0 !important;
    }
    html.is-yabrowser:not(.yb-fullscreen):has(.page-video-all) .scroll-balance-left {
        display: none !important;
    }

    /* Как index / reviews: боковые 4vw + лого/меню на всю ширину через -4vw */
    html body > .content.page-home.page-video-all,
    html body > .content.page-video-all {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 4vw 10vw !important;
        overflow-x: hidden !important;
        overflow-y: visible;
        white-space: normal;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        position: relative !important;
    }

    /* Декоративная фоновая полоса — на телефоне не нужна */
    html body > .content.page-video-all > header .zone-image-16,
    html body > .content.page-video-all .zone-image-16 {
        display: none !important;
    }

    /* ===== Лого — во всю ширину экрана (выходим из padding 4vw) ===== */
    html body > .content.page-video-all > header {
        position: relative;
        display: block;
        width: calc(100% + 8vw) !important;
        max-width: none !important;
        margin: 0 -4vw !important;
        padding: 0 !important;
        height: auto;
        overflow: hidden;
        z-index: 10;
        box-sizing: border-box !important;
        left: auto !important;
    }
    html body > .content.page-video-all > header .zone-logo-image {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
    }
    html body > .content.page-video-all > header .zone-image-0 {
        position: absolute;
        left: 3.125%;
        top: 0;
        width: 93.75%;
        height: 100%;
    }

    /* ===== Меню — вплотную под лого, во всю ширину ===== */
    html body > .content.page-video-all > nav[aria-label="Главная навигация сайта"] {
        position: relative;
        display: block;
        width: calc(100% + 8vw) !important;
        max-width: none !important;
        margin: 0 -4vw !important;
        padding: 0 !important;
        height: auto;
        z-index: 10;
        box-sizing: border-box !important;
        left: auto !important;
    }
    html body > .content.page-video-all > nav[aria-label="Главная навигация сайта"] .zone-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
    }
    html body > .content.page-video-all > nav[aria-label="Главная навигация сайта"] [class*="zone-image-1-"] {
        position: absolute;
        top: 10%;
        height: 80%;
    }

    html body > .content.page-video-all > main,
    html body > .content.page-video-all > main > article {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* ===== Контент — в потоке; боковые отступы уже на .content (4vw) ===== */
    html body > .content.page-video-all .page-content {
        position: static !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 3.84vw;
        line-height: 1.35;
        white-space: normal;
    }
    /* Сбрасываем absolute/left rem у вложенных zone (иначе сдвиг).
       margin НЕ трогаем — иначе у .video-grid пропадает зазор к тексту. */
    html body > .content.page-video-all .page-content .zone {
        position: static !important;
        left: auto !important;
        top: auto !important;
    }

    /* Заголовок + ссылки на каналы */
    html body > .content.page-video-all .page-header {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
        gap: 3vw;
    }
    html body > .content.page-video-all .video-all-title-desktop {
        display: none !important;
    }
    html body > .content.page-video-all .video-all-title-phone {
        display: block !important;
        position: static;
        width: 100%;
        margin: 3vw 0 0;
        padding: 0;
        text-align: center;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 3.84vw !important;
        line-height: 1.35 !important;
        font-weight: bold;
    }
    html[data-theme="dark"] body > .content.page-video-all .video-all-title-phone.color-gold {
        color: #fff;
    }
    html body > .content.page-video-all .video-all-title-phone .video-all-yt-phone {
        color: inherit;
        text-decoration: underline;
        font-weight: bold;
    }
    html body > .content.page-video-all .page-header .description {
        text-align: center;
        font-size: 3.84vw !important;
        line-height: 1.15 !important;
        font-weight: bold;
        margin: 3vw 0 0;
        flex-grow: 0;
        width: 100%;
    }
    html body > .content.page-video-all .page-header footer {
        position: static;
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    html body > .content.page-video-all .dzen-channel-reference {
        position: static;
        width: 100%;
        text-align: center;
        font-size: 3.2vw;
        line-height: 1.45;
        white-space: normal;
    }
    html body > .content.page-video-all .dzen-channel-reference a {
        display: inline;
        white-space: nowrap;
    }
    html body > .content.page-video-all .video-all-yt-desktop {
        display: none !important;
    }
    html body > .content.page-video-all .video-all-channel-gap {
        display: inline;
        white-space: pre;
    }

    /* ===== Сетка видео: 1 колонка; зазор к заголовку/каналам ===== */
    html body > .content.page-video-all .page-content .zone.video-grid,
    html body > .content.page-video-all .video-grid {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 6vw 0 0 !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        gap: 4vw;
    }
    html body > .content.page-video-all .video-grid .row {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        margin: 0 !important;
        gap: 4vw;
    }
    html body > .content.page-video-all .video-grid .row .item {
        width: 100%;
        margin: 0 !important;
        flex-grow: 0;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    /* Пустой title у первой заставки — не схлопываем зазор к заголовку страницы */
    html body > .content.page-video-all .video-grid .row .item .title:empty {
        display: none;
    }
    html body > .content.page-video-all .video-grid .row .item a.thumb {
        position: relative;
        display: block;
        width: 100%;
        height: auto !important;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        margin-top: 0;
    }
    html[data-theme="dark"] body > .content.page-video-all .video-grid .row .item a.thumb {
        background: #000;
    }
    html body > .content.page-video-all .video-grid .row .item a.thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    html[data-theme="dark"] body > .content.page-video-all .video-grid .row .item a.thumb img {
        background: #000;
    }
    html body > .content.page-video-all .video-grid .row .item .title,
    html body > .content.page-video-all .video-grid .row .item .description {
        position: static;
        width: 100%;
        height: auto !important;
        min-height: 0;
        margin: 0;
        padding: 0;
        font-size: 3.84vw !important;
        line-height: 1.35 !important;
        text-align: left;
        white-space: normal;
        overflow: visible;
    }
    html body > .content.page-video-all .video-grid .row .item .title {
        margin: 0 0 1.5vw;
        font-weight: bold;
    }
    html body > .content.page-video-all .video-grid .row .item .description {
        margin-top: 0.8vw;
    }
    html body > .content.page-video-all .video-grid .row .item .description .video-desc {
        margin: 0;
        min-height: 0;
        padding: 1.5vw 2vw;
        font-size: inherit;
        line-height: inherit;
        box-sizing: border-box;
    }
    html:not([data-theme="dark"]) body > .content.page-video-all .video-grid .row .item .title {
        color: #333333;
    }
    html:not([data-theme="dark"]) body > .content.page-video-all {
        color: #333333;
    }
}