.content-photos {
    width: 100%;

    /*
     * Desktop:
     * центральная фотография максимум 520px.
     * Остальное пространство используется,
     * чтобы показать части соседних фотографий.
     */
    --photo-slide-width:
            min(
                    520px,
                    calc(100% - 140px)
            );

    --photo-gap: 18px;
}



/* Размерные представления медиатеки. Поведение карусели/lightbox не меняется. */
.content-photos[data-variant="medium"] {
    --photo-slide-width: min(300px, calc(100vw - 96px));
    --photo-gap: 14px;
}

.content-photos[data-variant="thumbs"] {
    --photo-slide-width: 150px;
    --photo-gap: 10px;
}

.content-photos[data-variant="thumbs"] .content-photo-slide figcaption,
.content-photos[data-variant="thumbs"] .content-photo-clone figcaption {
    display: none;
}

/*
|--------------------------------------------------------------------------
| Заголовки
|--------------------------------------------------------------------------
*/

.content-photos-name {
    margin-bottom: 7px;

    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.2;

    letter-spacing: .05em;
    text-transform: uppercase;

    color: var(--muted);
}


.content-photos-title {
    margin: 0 0 14px;
}


/*
|--------------------------------------------------------------------------
| Stage
|--------------------------------------------------------------------------
|
| На desktop stage занимает всю ширину content block.
| Центральная фотография уже stage, поэтому по сторонам
| видны соседние.
|
*/

.content-photos-stage {
    position: relative;

    overflow: hidden;

    width: 100%;
    margin: 0 auto;

    padding: 8px 0;

    user-select: none;

    touch-action:
            pan-y
            pinch-zoom;
}


/*
|--------------------------------------------------------------------------
| Track
|--------------------------------------------------------------------------
*/

.content-photos-track {
    display: flex;

    align-items: flex-start;

    gap: var(--photo-gap);

    width: max-content;

    transform:
            translate3d(
                    0,
                    0,
                    0
            );

    transition:
            transform 360ms
            cubic-bezier(
                    .22,
                    .61,
                    .36,
                    1
            );

    will-change: transform;
}


.content-photos.is-dragging
.content-photos-track,
.content-photos.is-jumping
.content-photos-track {
    transition: none;
}

/*
 * Во время технического clone -> real прыжка отключаем
 * не только transform трека, но и внутренние transition карточек.
 * Иначе opacity/scale/filter визуально "доезжают" после телепорта.
 */
.content-photos.is-jumping
.content-photo-slide,
.content-photos.is-jumping
.content-photo-clone {
    transition: none;
}


/*
|--------------------------------------------------------------------------
| Слайды
|--------------------------------------------------------------------------
*/

.content-photo-slide,
.content-photo-clone {
    flex:
            0 0
            var(--photo-slide-width);

    width:
            var(--photo-slide-width);

    margin: 0;

    /*
     * Неактивные соседние фотографии:
     * чуть меньше и темнее.
     */
    transform:
            scale(.88);

    transform-origin:
            center center;

    opacity: .48;

    filter:
            brightness(.66)
            saturate(.72);

    transition:
            transform 360ms
            cubic-bezier(
                    .22,
                    .61,
                    .36,
                    1
            ),
            opacity 280ms ease,
            filter 280ms ease;

    will-change:
            transform,
            opacity,
            filter;
}


/*
 * Центральная фотография.
 */

.content-photo-slide.is-active,
.content-photo-clone.is-active {
    z-index: 2;

    transform:
            scale(1);

    opacity: 1;

    filter: none;
}


/*
 * Во время drag убираем лишнюю анимацию scale.
 */

.content-photos.is-dragging
.content-photo-slide,
.content-photos.is-dragging
.content-photo-clone {
    transition:
            opacity 180ms ease,
            filter 180ms ease;
}


/*
|--------------------------------------------------------------------------
| Фотографии
|--------------------------------------------------------------------------
*/

.content-photo-slide img,
.content-photo-clone img {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;
    height: auto;

    object-fit: cover;

    border-radius:
            var(--radius-md);

    pointer-events: none;

    -webkit-user-drag: none;
    user-drag: none;
}


.content-photos[data-variant="compact"]
.content-photo-slide img,

.content-photos[data-variant="compact"]
.content-photo-clone img,

.content-photos[data-variant="wide"]
.content-photo-slide img,

.content-photos[data-variant="wide"]
.content-photo-clone img {
    aspect-ratio: 1 / 1;
    height: auto;
}


/*
|--------------------------------------------------------------------------
| Подпись фотографии
|--------------------------------------------------------------------------
*/

.content-photo-slide figcaption,
.content-photo-clone figcaption {
    padding:
            10px
            12px
            12px;

    font-family:
            var(--font-ui);

    font-size: 14px;
    line-height: 1.45;

    color: var(--muted);
}


/*
|--------------------------------------------------------------------------
| Стрелки
|--------------------------------------------------------------------------
*/

.content-photos-arrow {
    position: absolute;

    top: 50%;
    z-index: 4;

    display: grid;
    place-items: center;

    width: 44px;
    height: 64px;

    padding: 0;

    transform:
            translateY(-50%);

    border: 0;
    outline: 0;

    background: transparent;

    color:
            rgba(
                    255,
                    255,
                    255,
                    .88
            );

    font-size: 46px;
    font-weight: 300;
    line-height: 1;

    text-shadow:
            0
            2px
            12px
            rgba(
                    0,
                    0,
                    0,
                    .68
            );

    cursor: pointer;

    touch-action:
            manipulation;
}


.content-photos-arrow:hover {
    color: #fff;
}


.content-photos-prev {
    left: 8px;
}


.content-photos-next {
    right: 8px;
}


/*
|--------------------------------------------------------------------------
| Счётчик
|--------------------------------------------------------------------------
*/

.content-photos-counter {
    position: absolute;

    right: 12px;
    bottom: 20px;

    z-index: 4;

    padding:
            5px
            9px;

    border-radius:
            999px;

    background:
            rgba(
                    0,
                    0,
                    0,
                    .58
            );

    font-family:
            var(--font-ui);

    font-size: 13px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    .88
            );

    backdrop-filter:
            blur(7px);
}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
|
| На мобильном desktop-эффект полностью отключаем.
|
| Возвращаем старую схему:
|
| - одна квадратная фотография;
| - stage ограничен размером фотографии;
| - соседние фотографии не видны;
| - никаких scale;
| - никаких brightness / opacity;
| - gap отсутствует;
|
| При этом JS с клонами продолжает обеспечивать
| бесконечную прокрутку.
|
*/

@media (max-width: 768px) {

    .content-photos {
        --photo-slide-width:
                min(88vw, 380px);

        --photo-gap: 0px;
    }


    /*
     * Как было раньше:
     * stage сам становится размером фотографии.
     */

    .content-photos-stage {
        width:
                min(88vw, 380px);

        margin:
                0 auto;

        padding: 0;
    }


    /*
     * Полностью отключаем desktop-оформление
     * соседних фотографий.
     */

    .content-photo-slide,
    .content-photo-clone {
        transform: none;

        opacity: 1;

        filter: none;
    }


    .content-photo-slide.is-active,
    .content-photo-clone.is-active {
        transform: none;

        opacity: 1;

        filter: none;
    }


    /*
     * Во время drag тоже не нужны
     * переходы масштаба/яркости.
     */

    .content-photos.is-dragging
    .content-photo-slide,
    .content-photos.is-dragging
    .content-photo-clone {
        transition: none;
    }


    .content-photo-slide img,
    .content-photo-clone img {
        width: 100%;

        aspect-ratio: 1 / 1;
        height: auto;
    }


    .content-photos-arrow {
        width: 38px;
        height: 54px;

        font-size: 39px;
    }


    .content-photos-prev {
        left: 2px;
    }


    .content-photos-next {
        right: 2px;
    }


    .content-photos-counter {
        right: 8px;
        bottom: 8px;
    }
}

/*
|--------------------------------------------------------------------------
| Одиночная фотография
|--------------------------------------------------------------------------
|
| Один элемент в photos — это не карусель.
| Он стоит обычной картинкой в потоке, без затемнения, scale и квадратного crop.
| Клик по .content-photo-slide по-прежнему открывает общий lightbox.
|
*/

.content-photos-single .content-photos-stage {
    overflow: visible;
    width: 100%;
    padding: 0;
}

.content-photos-single .content-photos-track {
    display: block;
    width: 100%;
    transform: none !important;
}

.content-photos-single .content-photo-slide {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    transform: none;
    opacity: 1;
    filter: none;
    transition: none;
    cursor: zoom-in;
}

.content-photos-single .content-photo-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    pointer-events: none;
}

.content-photos-single .content-photo-slide figcaption {
    max-width: 100%;
    padding: 8px 0 0;
}

@media (max-width: 768px) {
    .content-photos-single .content-photos-stage {
        width: 100%;
    }

    .content-photos-single .content-photo-slide {
        width: fit-content;
        max-width: 100%;
    }

    .content-photos-single .content-photo-slide img {
        width: auto;
        max-width: 100%;
        height: auto;
        aspect-ratio: auto;
    }
}

/* v26: mixed image/video media carousel */
.content-media-video {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: #000;
    -webkit-user-drag: none;
    user-select: none;
}

.content-photos[data-variant="compact"] .content-media-video,
.content-photos[data-variant="wide"] .content-media-video {
    aspect-ratio: 1 / 1;
}

.content-photos-single .content-media-video {
    aspect-ratio: auto;
    max-height: 72vh;
    object-fit: contain;
}

/* Unified media container: the original photos block now hosts images and video. */
.content-photo-slide .content-media-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 68vh;
    object-fit: contain;
    background: #000;
    border-radius: inherit;
}
.content-photo-slide[data-media-type="video"] { cursor: pointer; }

/* v45: compact media-library representations. */
.content-photos[data-variant="medium"] .content-photos-stage,
.content-photos[data-variant="thumbs"] .content-photos-stage {
    width: 100%;
}

.content-photos[data-variant="medium"] .content-photo-slide img,
.content-photos[data-variant="medium"] .content-photo-clone img,
.content-photos[data-variant="medium"] .content-media-video,
.content-photos[data-variant="thumbs"] .content-photo-slide img,
.content-photos[data-variant="thumbs"] .content-photo-clone img,
.content-photos[data-variant="thumbs"] .content-media-video {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 768px) {
    .content-photos[data-variant="medium"] {
        --photo-slide-width: min(260px, 68vw);
        --photo-gap: 12px;
    }

    .content-photos[data-variant="thumbs"] {
        --photo-slide-width: 150px;
        --photo-gap: 10px;
    }

    .content-photos[data-variant="medium"] .content-photos-stage,
    .content-photos[data-variant="thumbs"] .content-photos-stage {
        width: 100%;
    }
}