/*
 * Vastkind article Signal Frame.
 * Shared by every post template; body and sidebar layouts remain independent.
 */

.post-page--signal-frame {
    --vk-signal-stage: var(--vk-experience-color-stage, #000917);
    --vk-signal-stage-raised: var(--vk-experience-color-raised-dark, #07111f);
    --vk-signal-paper: var(--vk-experience-color-page, #f4ecdb);
    --vk-signal-ink: var(--vk-experience-color-text-on-dark, #f3eadb);
    --vk-signal-muted: var(--vk-experience-color-muted-on-dark, #aab4ca);
    --vk-signal-line: var(--vk-experience-color-border-on-dark, #40516f);
    --vk-signal-violet: var(--vk-experience-color-action-primary, #5b50d6);
    --vk-signal-live: var(--vk-experience-color-live-verified, #65e8c3);
    width: 100%;
    max-width: none;
    margin: 0;
    padding-top: 0;
    background: var(--vk-signal-paper);
}

body.post-template .post-page--signal-frame > .post--signal-frame {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.post-template .post-page--signal-frame .post-page__wrapper .post--signal-frame {
    max-width: 822px;
}

body.post-template .post-page--signal-frame .post-page__wrapper--default {
    margin-top: 0;
}

.post-page--signal-frame .post-page__breadcrumbs {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 15px max(24px, calc((100vw - 1240px) / 2));
    border-top: 1px solid rgba(64, 81, 111, 0.48);
    border-bottom: 1px solid var(--vk-signal-line);
    background: var(--vk-signal-stage);
    color: var(--vk-signal-muted);
    font-family: var(--vk-experience-type-technical, "IBM Plex Mono", monospace);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.post-page--signal-frame .post-page__breadcrumbs :is(.breadcrumbs, .breadcrumbs__list) {
    max-width: 1240px;
    margin-inline: auto;
}

.post-page--signal-frame .post-page__breadcrumbs :is(a, .breadcrumbs__item) {
    color: var(--vk-signal-muted);
}

.post-page--signal-frame .post-page__breadcrumbs a:hover {
    color: var(--vk-signal-live);
}

body.post-template .post-page--signal-frame .post-header--signal-frame {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 0 56px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(101, 232, 195, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(101, 232, 195, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 78% 16%, rgba(91, 80, 214, 0.16), transparent 34%),
        var(--vk-signal-stage);
    background-size: 32px 32px, 32px 32px, auto, auto;
    box-shadow: none;
    color: var(--vk-signal-ink);
}

body.post-template .post-page--signal-frame .post-header--signal-frame::before {
    content: none !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--vk-signal-live) 0 8%,
        var(--vk-signal-violet) 8% 42%,
        transparent 72%
    );
    pointer-events: none;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__signal-copy {
    position: relative !important;
    z-index: 2;
    order: 1;
    box-sizing: border-box;
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0 !important;
    width: min(calc(100% - 64px), 1240px) !important;
    max-width: none !important;
    min-height: 0;
    margin: 0 auto !important;
    padding: clamp(44px, 5vw, 78px) 0 clamp(38px, 4.5vw, 64px) !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.post-page--signal-frame .vk-signal-frame__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 20px;
    color: var(--vk-signal-live);
    font-family: var(--vk-experience-type-technical, "IBM Plex Mono", monospace);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-transform: uppercase;
}

.post-page--signal-frame .vk-signal-frame__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: var(--vk-signal-live);
    box-shadow: 10px 0 0 rgba(91, 80, 214, 0.7);
}

.post-page--signal-frame .vk-signal-frame__frontier {
    color: #d4c8ff;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 8px 14px !important;
    margin: 0 0 22px !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-tag {
    min-height: 0;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-tags .post-tag:first-child::before {
    content: none !important;
    display: none !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-tag__name,
body.post-template .post-page--signal-frame .post-header--signal-frame .post-tag__name-wrapper {
    color: var(--vk-signal-muted) !important;
    font-family: var(--vk-experience-type-technical, "IBM Plex Mono", monospace) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    -webkit-text-fill-color: var(--vk-signal-muted) !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-tag__name::before {
    content: "// ";
    color: var(--vk-signal-violet);
    -webkit-text-fill-color: var(--vk-signal-violet);
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__title,
body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__title--with-bg {
    width: 100% !important;
    max-width: 14ch !important;
    margin: 0 auto !important;
    padding: 0 !important;
    color: var(--vk-signal-ink) !important;
    font-family: var(--vk-experience-type-display, "Newsreader", Georgia, serif) !important;
    font-size: clamp(54px, 6.2vw, 92px) !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em !important;
    line-height: 0.94 !important;
    text-align: center !important;
    text-shadow: none;
    text-transform: none;
    -webkit-text-fill-color: var(--vk-signal-ink) !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__title span {
    display: inline !important;
    padding: 0 !important;
    color: var(--vk-signal-ink) !important;
    background: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: inherit !important;
    -webkit-text-fill-color: var(--vk-signal-ink) !important;
    box-decoration-break: slice !important;
    -webkit-box-decoration-break: slice !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__excerpt {
    width: 100% !important;
    max-width: 62ch !important;
    margin: 24px auto 0 !important;
    color: var(--vk-signal-muted) !important;
    font-family: var(--vk-experience-type-body, "Manrope", Arial, sans-serif) !important;
    font-size: clamp(17px, 1.5vw, 20px) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1.55 !important;
    text-align: center !important;
    -webkit-text-fill-color: var(--vk-signal-muted) !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 20px;
    width: 100%;
    max-width: 900px;
    margin: 30px auto 0 !important;
    padding-top: 16px;
    border-top: 1px solid rgba(64, 81, 111, 0.72);
    color: var(--vk-signal-muted) !important;
    font-family: var(--vk-experience-type-technical, "IBM Plex Mono", monospace) !important;
    font-size: 11px !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__meta :is(a, time, span) {
    color: var(--vk-signal-muted) !important;
    -webkit-text-fill-color: var(--vk-signal-muted) !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .vk-article-trust {
    display: none !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame > :is(
    .post-header__img-wrapper,
    .post-header__no-img-wrapper
) {
    position: relative !important;
    z-index: 1;
    inset: auto !important;
    order: 2;
    box-sizing: border-box;
    display: block;
    width: min(calc(100% - 64px), 1240px) !important;
    height: auto !important;
    aspect-ratio: 16 / 8.5;
    max-height: 620px;
    margin: 0 auto !important;
    overflow: hidden;
    border: 1px solid var(--vk-signal-line);
    border-bottom: 3px solid var(--vk-signal-violet);
    border-radius: 0 !important;
    background: var(--vk-signal-stage-raised);
    box-shadow: 12px 12px 0 rgba(91, 80, 214, 0.16);
}

body.post-template .post-page--signal-frame .post-header--signal-frame > .post-header__img-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 9, 23, 0.04), rgba(0, 9, 23, 0.18)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
    pointer-events: none;
}

body.post-template .post-page--signal-frame .post-header--signal-frame > .post-header__img-wrapper picture {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    filter: saturate(0.94) contrast(1.04);
}

.post-page--signal-frame .post-content {
    margin-top: 0;
}

body.post-template .post-page--signal-frame .post-page__wrapper .post-header--signal-frame .post-header__title {
    font-size: clamp(44px, 4.4vw, 64px) !important;
}

@media (max-width: 760px) {
    body.post-template .post-page--signal-frame .post-page__breadcrumbs {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 18px !important;
        overflow-x: auto;
        font-size: 9px;
        scrollbar-width: none;
    }

    body.post-template .post-page--signal-frame .post-page__breadcrumbs::-webkit-scrollbar {
        display: none;
    }

    body.post-template .post-page--signal-frame .post-page__breadcrumbs :is(.breadcrumbs, .breadcrumbs__list) {
        width: max-content;
        max-width: none;
    }

    body.post-template .post-page--signal-frame .post-page__breadcrumbs :is(
        .breadcrumbs__item,
        .breadcrumbs__link
    ) {
        color: var(--vk-signal-muted) !important;
        font-family: var(--vk-experience-type-technical, "IBM Plex Mono", monospace) !important;
        font-size: 9px !important;
        letter-spacing: 0.04em !important;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame {
        width: 100% !important;
        margin: 0 0 34px !important;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__signal-copy {
        box-sizing: border-box;
        width: 100% !important;
        margin: 0 !important;
        padding: 34px 20px 30px !important;
        align-items: flex-start;
        text-align: left !important;
    }

    .post-page--signal-frame .vk-signal-frame__kicker {
        justify-content: flex-start;
        margin-bottom: 16px;
        font-size: 9px;
        letter-spacing: 0.09em;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame .post-tags {
        justify-content: flex-start !important;
        gap: 8px 14px !important;
        margin-bottom: 16px !important;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__title,
    body.post-template .post-page--signal-frame .post-page__wrapper .post-header--signal-frame .post-header__title {
        max-width: 16ch !important;
        margin: 0 !important;
        font-size: clamp(39px, 11.5vw, 50px) !important;
        letter-spacing: -0.025em !important;
        line-height: 0.98 !important;
        text-align: left !important;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__excerpt {
        max-width: none !important;
        margin: 18px 0 0 !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        text-align: left !important;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame .post-header__meta {
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px 14px;
        margin: 22px 0 0 !important;
        padding-top: 14px;
        font-size: 9px !important;
    }

    body.post-template .post-page--signal-frame .post-header--signal-frame > :is(
        .post-header__img-wrapper,
        .post-header__no-img-wrapper
    ) {
        width: 100% !important;
        aspect-ratio: 16 / 10;
        margin: 0 !important;
        border-right: 0;
        border-left: 0;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-page--signal-frame * {
        scroll-behavior: auto !important;
    }
}