/*
 * BELVA project detail layer.
 * Viewer остаётся отдельным модулем.
 */


/* =========================================================
   PAGE RHYTHM
   ========================================================= */

body.belva-project-page {
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;

    --belva-project-width:
        1240px;

    --belva-project-pad:
        32px;

    --belva-project-gold:
        #e1ad5e;

    --belva-project-text:
        #f5f3ef;

    --belva-project-muted:
        #9aa3ae;

    --belva-project-border:
        rgba(255,255,255,.095);

    --belva-project-panel:
        rgba(15,21,29,.86);
}


body.belva-project-page main {
    overflow:
        visible;
}


/* =========================================================
   HERO
   ========================================================= */

.belva-project-hero-v8 {
    position:
        relative;

    isolation:
        isolate;

    display:
        grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(270px,.55fr);

    gap:
        30px;

    width:
        min(
            calc(100% - 32px),
            var(--belva-project-width)
        );

    margin:
        30px auto 42px;

    padding:
        clamp(
            24px,
            4vw,
            48px
        );

    overflow:
        hidden;

    border:
        1px solid
        var(--belva-project-border);

    border-radius:
        24px;

    background:
        radial-gradient(
            circle at 92% 4%,
            rgba(225,173,94,.13),
            transparent 27%
        ),
        radial-gradient(
            circle at 6% 0%,
            rgba(50,100,120,.18),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            rgba(19,26,35,.98),
            rgba(9,13,19,.985)
        );

    box-shadow:
        0 26px 90px
        rgba(0,0,0,.23);
}


.belva-project-hero-v8::after {
    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    width:
        340px;

    height:
        340px;

    right:
        -180px;

    bottom:
        -230px;

    border:
        1px solid
        rgba(225,173,94,.13);

    border-radius:
        50%;
}


.belva-project-hero-v8__main {
    min-width:
        0;
}


.belva-project-hero-v8__back {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        32px;

    margin-bottom:
        23px;

    padding:
        6px 10px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.025);

    color:
        #aab1ba !important;

    font-size:
        10px;

    font-weight:
        720;

    line-height:
        1;

    text-decoration:
        none !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease;
}


.belva-project-hero-v8__back:hover {
    border-color:
        rgba(225,173,94,.34);

    background:
        rgba(225,173,94,.07);

    color:
        #f0c982 !important;
}


.belva-project-hero-v8__back::before {
    content:
        "←";

    color:
        var(--belva-project-gold);

    font-size:
        13px;
}


.belva-project-hero-v8__eyebrow {
    display:
        block;

    margin-bottom:
        11px;

    color:
        var(--belva-project-gold);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .115em;

    text-transform:
        uppercase;
}


.belva-project-hero-v8 h1 {
    max-width:
        900px;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        var(--belva-project-text) !important;

    font-size:
        clamp(
            38px,
            5.6vw,
            76px
        ) !important;

    font-weight:
        760 !important;

    line-height:
        .96 !important;

    letter-spacing:
        -.055em !important;

    text-wrap:
        balance;
}


.belva-project-hero-v8__description {
    max-width:
        720px;

    margin:
        19px 0 0;

    color:
        #a6aeb8;

    font-size:
        clamp(
            13px,
            1.35vw,
            16px
        );

    line-height:
        1.65;
}


.belva-project-hero-v8
.belva-project-meta {
    width:
        auto;

    margin:
        24px 0 0;

    gap:
        7px;
}


/* =========================================================
   HERO FACTS
   ========================================================= */

.belva-project-hero-v8__aside {
    align-self:
        stretch;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-width:
        0;

    padding:
        18px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        17px;

    background:
        rgba(7,11,16,.46);

    backdrop-filter:
        blur(12px);
}


.belva-project-hero-v8__aside-title {
    margin:
        0 0 14px;

    color:
        #8f98a3;

    font-size:
        9px;

    font-weight:
        850;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.belva-project-facts-v8 {
    display:
        grid;

    gap:
        7px;
}


.belva-project-fact-v8 {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    min-height:
        49px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.023);
}


.belva-project-fact-v8 span {
    color:
        #858e99;

    font-size:
        9px;

    font-weight:
        700;
}


.belva-project-fact-v8 strong {
    min-width:
        0;

    overflow:
        hidden;

    color:
        #f2f0ec;

    font-size:
        10px;

    font-weight:
        800;

    text-align:
        right;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.belva-project-hero-v8__aside-note {
    margin:
        18px 0 0;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(255,255,255,.075);

    color:
        #7f8994;

    font-size:
        9px;

    line-height:
        1.55;
}


/* =========================================================
   GALLERY INTRO
   ========================================================= */

.belva-project-page
.belva-gallery-heading {
    margin-top:
        0;

    padding-top:
        5px;
}


.belva-project-page
.belva-gallery-heading h2 {
    max-width:
        800px;
}


/* =========================================================
   GALLERY POLISH
   ========================================================= */

.belva-project-page
.belva-gallery-host {
    align-items:
        stretch;
}


.belva-project-page
.belva-gallery-item {
    transform:
        translateZ(0);
}


.belva-project-page
.belva-gallery-item:focus-visible {
    outline:
        2px solid
        var(--belva-project-gold);

    outline-offset:
        3px;
}


.belva-project-page
.belva-gallery-item img {
    background:
        #11171e;
}


/* =========================================================
   CTA
   ========================================================= */

.belva-project-cta-v8 {
    position:
        relative;

    isolation:
        isolate;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        30px;

    width:
        min(
            calc(100% - 32px),
            var(--belva-project-width)
        );

    margin:
        0 auto 74px;

    padding:
        clamp(
            24px,
            4vw,
            42px
        );

    overflow:
        hidden;

    border:
        1px solid
        rgba(225,173,94,.19);

    border-radius:
        22px;

    background:
        radial-gradient(
            circle at 96% 0%,
            rgba(225,173,94,.12),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            rgba(22,28,36,.97),
            rgba(12,16,22,.98)
        );
}


.belva-project-cta-v8__eyebrow {
    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--belva-project-gold);

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.belva-project-cta-v8 h2 {
    max-width:
        770px;

    margin:
        0 !important;

    color:
        #f5f3ee !important;

    font-size:
        clamp(
            27px,
            3.2vw,
            43px
        ) !important;

    font-weight:
        760 !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -.04em !important;
}


.belva-project-cta-v8 p {
    max-width:
        690px;

    margin:
        13px 0 0;

    color:
        #969faa;

    font-size:
        12px;

    line-height:
        1.65;
}


.belva-project-cta-v8__actions {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    justify-content:
        flex-end;

    gap:
        8px;
}


.belva-project-cta-v8__button {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        44px;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        12px;

    color:
        #f2f1ed !important;

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.belva-project-cta-v8__button:hover {
    transform:
        translateY(-2px);
}


.belva-project-cta-v8__button--primary {
    border-color:
        rgba(225,173,94,.48);

    background:
        #e1ad5e;

    color:
        #17120a !important;
}


.belva-project-cta-v8__button--primary:hover {
    background:
        #ebba70;
}


.belva-project-cta-v8__button--secondary {
    background:
        rgba(255,255,255,.035);
}


.belva-project-cta-v8__button--secondary:hover {
    border-color:
        rgba(225,173,94,.32);

    background:
        rgba(225,173,94,.06);
}


/* =========================================================
   VIEWER POLISH
   ========================================================= */

.belva-project-page
.belva-viewer__stage {
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,.025),
            transparent 47%
        );
}


.belva-project-page
.belva-viewer__image {
    max-width:
        min(
            100%,
            1700px
        );

    border:
        1px solid
        rgba(255,255,255,.05);
}


.belva-project-page
.belva-viewer__nav {
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;
}


.belva-project-page
.belva-viewer__nav:hover {
    border-color:
        rgba(225,173,94,.42);

    background:
        rgba(31,25,17,.88);
}


.belva-project-page
.belva-viewer__thumb {
    transition:
        opacity .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.belva-project-page
.belva-viewer__thumb:hover {
    opacity:
        .88;

    transform:
        translateY(-1px);
}


/* =========================================================
   LEGACY ELEMENT NORMALIZATION
   ========================================================= */

.belva-project-page
main > br:first-child {
    display:
        none;
}


.belva-project-page
img[alt=""] {
    color:
        transparent;
}


/*
 * Старые страницы иногда несут мелкие текстовые заголовки
 * непосредственно перед галереей. Viewer уже помечает
 * точный дубль h1, этот слой просто убирает занимаемое место.
 */
.belva-project-page
.belva-project-duplicate-title {
    margin:
        0 !important;

    padding:
        0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .belva-project-hero-v8 {
        grid-template-columns:
            minmax(0,1fr)
            minmax(230px,.50fr);

        gap:
            18px;

        padding:
            28px;
    }


    .belva-project-hero-v8 h1 {
        font-size:
            clamp(
                38px,
                7vw,
                62px
            ) !important;
    }


    .belva-project-cta-v8 {
        grid-template-columns:
            1fr;
    }


    .belva-project-cta-v8__actions {
        justify-content:
            flex-start;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .belva-project-hero-v8 {
        grid-template-columns:
            1fr;

        gap:
            18px;

        width:
            calc(100% - 18px);

        margin:
            14px auto 28px;

        padding:
            22px 18px;

        border-radius:
            18px;
    }


    .belva-project-hero-v8__back {
        margin-bottom:
            18px;
    }


    .belva-project-hero-v8 h1 {
        font-size:
            clamp(
                36px,
                11vw,
                54px
            ) !important;

        line-height:
            .98 !important;
    }


    .belva-project-hero-v8__description {
        margin-top:
            15px;

        font-size:
            12px;

        line-height:
            1.6;
    }


    .belva-project-hero-v8
    .belva-project-meta {
        margin-top:
            19px;

        margin-bottom:
            0;
    }


    .belva-project-hero-v8__aside {
        padding:
            13px;

        border-radius:
            14px;
    }


    .belva-project-facts-v8 {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:
            6px;
    }


    .belva-project-fact-v8 {
        display:
            block;

        min-height:
            63px;

        padding:
            10px;
    }


    .belva-project-fact-v8 span {
        display:
            block;

        margin-bottom:
            7px;
    }


    .belva-project-fact-v8 strong {
        display:
            block;

        text-align:
            left;

        white-space:
            normal;
    }


    .belva-project-cta-v8 {
        width:
            calc(100% - 18px);

        margin-bottom:
            42px;

        padding:
            23px 18px;

        border-radius:
            17px;
    }


    .belva-project-cta-v8__actions {
        display:
            grid;

        grid-template-columns:
            1fr;

        width:
            100%;
    }


    .belva-project-cta-v8__button {
        width:
            100%;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .belva-project-facts-v8 {
        grid-template-columns:
            1fr 1fr;
    }


    .belva-project-hero-v8 h1 {
        font-size:
            clamp(
                34px,
                11.5vw,
                46px
            ) !important;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .belva-project-hero-v8__back,
    .belva-project-cta-v8__button,
    .belva-viewer__thumb,
    .belva-viewer__nav {
        transition:
            none !important;
    }
}