/**
 * Масштабный UI в духе T-Journal — только визуал, без нового функционала.
 */

:root {
    --scale-bg: #ebebeb;
    --scale-card-bg: #ffffff;
    --scale-card-radius: 20px;
    --scale-card-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    --scale-card-shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.09);
    --scale-feed-width: 720px;
    --scale-feed-wide: 1100px;
    --scale-gap: 16px;
    --scale-text: #111111;
    --scale-text-muted: #5c5c5c;
    --header-gradient: #ffffff;
    --header-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
    --header-accent: #333333;
}

body {
    background-color: var(--scale-bg);
    color: var(--scale-text);
    -webkit-font-smoothing: antialiased;
}

/* ——— Шапка ——— */
.site-header {
    background: #fff;
    box-shadow: var(--header-shadow);
    min-height: 56px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.site-header .search__input {
    background: #f3f3f3;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 15px;
    padding: 10px 14px 10px 36px;
}

.site-header .search__input:focus {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

.v-create-button__main {
    border-radius: 12px;
}

.layout__content {
    padding: 0 12px;
}

@media (min-width: 1180px) {
    .layout__right-column {
        width: 300px;
        padding-right: 12px;
    }
}

/* ——— Ширина ленты (главная) ——— */
@media (min-width: 640px) {
    .page.page--index#page_wrapper,
    .app--content-feed#page_wrapper {
        width: var(--scale-feed-width);
        max-width: var(--scale-feed-width);
        margin: 0 auto;
    }
}

/* ——— Категории / профили (шапка + лента + сайдбар) ——— */
@media (min-width: 640px) and (max-width: 999px) {
    #page_wrapper.page--index:not(.page):not(.app--content-feed) {
        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }
}

@media (min-width: 1000px) {
    #page_wrapper.page--index:not(.page):not(.app--content-feed) {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
    }
}

@media (min-width: 640px) and (max-width: 1559px) {
    #page_wrapper:not(.page--index) {
        max-width: var(--scale-feed-width);
        margin: 0 auto;
    }
}

@media (min-width: 1560px) {
    #page_wrapper:not(.page--index):not(.app--content-feed) {
        max-width: 1020px;
        margin: 0 auto;
    }
}

/* ——— Табы и фильтры ——— */
.ui-sorting {
    margin-bottom: var(--scale-gap);
}

.ui-sorting.ui-sorting--with-tabs {
    background: var(--scale-card-bg);
    border-radius: var(--scale-card-radius);
    padding: 16px 20px 12px;
    box-shadow: var(--scale-card-shadow);
    margin-bottom: var(--scale-gap);
}

.v-tab {
    font-size: 17px;
    font-weight: 500;
    padding: 8px 4px;
}

.v-tab--active .v-tab__label {
    font-weight: 700;
}

.ui-filters__inner {
    background: #f0f0f0;
    padding: 4px;
    border-radius: 14px;
}

.ui-rounded-button__link {
    font-size: 15px;
    padding: 6px 16px;
    border-radius: 12px;
    font-weight: 500;
}

.ui-rounded-button--active .ui-rounded-button__link {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-weight: 600;
}

/* ——— Карточки постов ——— */
.feed__chunk {
    display: flex;
    flex-direction: column;
    gap: var(--scale-gap);
}

.feed__item {
    border-radius: var(--scale-card-radius);
    overflow: hidden;
    box-shadow: var(--scale-card-shadow);
    margin-bottom: 0;
}

.feed__item .content-feed.l-island-bg {
    border-radius: var(--scale-card-radius);
    background: var(--scale-card-bg);
}

@media (min-width: 860px) {
    .feed__item:hover {
        box-shadow: var(--scale-card-shadow-hover);
        transform: translateY(-1px);
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
}

.l-island-a {
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 640px) {
    .l-island-a {
        padding-left: 28px;
        padding-right: 28px;
    }
}

.content-header--short {
    padding-top: 12px;
    margin-bottom: 0;
}

@media (max-width: 639px) {
    .content-header--short {
        padding-top: 10px;
    }

    .feed__item .content-feed.l-mb-28,
    .feed__item .content-feed.lm-mb-20 {
        margin-bottom: 14px !important;
    }
}

.content-header--short .content-header__item {
    font-size: 13px;
    color: var(--scale-text-muted);
}

.content-title--short {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.02em;
    margin-top: 2px;
    margin-bottom: 8px;
    color: var(--scale-text);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 639px) {
    .content-title--short {
        font-size: 17px;
        line-height: 1.22;
        margin-bottom: 4px;
        -webkit-line-clamp: 2;
    }
}

.content-footer--short {
    padding-top: 2px;
    padding-bottom: 4px;
}

/* ——— Острова / виджеты ——— */
.l-island-bg,
.l-island-round {
    border-radius: var(--scale-card-radius);
}

.l-island-bg {
    box-shadow: var(--scale-card-shadow);
}

.v-island {
    border-radius: var(--scale-card-radius);
}

/* ——— Шапка категории ——— */
.v-header {
    border-radius: var(--scale-card-radius);
    overflow: hidden;
    box-shadow: var(--scale-card-shadow);
}

.v-header__title,
.v-header-title__main {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.v-header-cover {
    border-radius: var(--scale-card-radius) var(--scale-card-radius) 0 0;
}

/* ——— Правая колонка (комментарии) ——— */
.layout__right-column .l-island-bg,
.layout__right-column .v-island {
    border-radius: var(--scale-card-radius);
    box-shadow: var(--scale-card-shadow);
}

/* ——— Каталог подписок ——— */
.subsite_card_simple {
    border-radius: 16px;
    margin-bottom: 8px;
    transition: background 0.15s ease;
}

.subsite_card_simple:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* ——— Страница поста ——— */
.content-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

@media (max-width: 859px) {
    .content-title {
        font-size: 30px;
    }
}

.content {
    font-size: 19px;
    line-height: 1.65;
}

/* ——— Новости дня ——— */
.news_widget.l-island-bg {
    border-radius: var(--scale-card-radius);
    box-shadow: var(--scale-card-shadow);
    margin-bottom: var(--scale-gap);
}

/* ——— Превью в ленте ——— */
.feed__item .content-feed .l-island-a {
    padding-left: 20px;
    padding-right: 20px;
}

@media (min-width: 640px) {
    .feed__item .content-feed .l-island-a {
        padding-left: 22px;
        padding-right: 22px;
    }
}

.feed-post-preview__body .feed-post-preview__text p {
    font-size: 15px;
    line-height: 1.4;
    color: var(--scale-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 639px) {
    .feed-post-preview__body .feed-post-preview__text p {
        font-size: 14px;
        line-height: 1.35;
        -webkit-line-clamp: 2;
    }
}

.feed-post-preview__body .post-single-image {
    max-height: 240px;
    overflow: hidden;
    border-radius: 10px;
}

.feed-post-preview__body .post-single-image img {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    object-position: center top;
    border-radius: 10px;
}

@media (max-width: 639px) {
    .feed-post-preview__body .post-single-image,
    .feed-post-preview__body .post-single-image img {
        max-height: 200px;
    }
}

.feed-post-preview__body figure {
    margin-top: 8px;
    margin-bottom: 0;
}

@media (max-width: 639px) {
    .feed-post-preview__body figure {
        margin-top: 6px;
    }
}

/* ——— Компактная подписка на мобилке ——— */
@media (max-width: 719px) {
    .subsite-card {
        gap: 8px;
    }

    .subsite-card .v-subscribe-button--full {
        grid-template-columns: auto;
    }

    .subsite-card .v-subscribe-button__subscribe .v-button__label {
        display: none;
    }

    .subsite-card .v-subscribe-button__subscribe {
        width: 40px;
        min-width: 40px;
        padding: 0;
    }

    .v-header__actions .v-subscribe-button__subscribe .v-button__label {
        display: none;
    }

    .v-header__actions .v-subscribe-button__subscribe {
        width: 40px;
        min-width: 40px;
        padding: 0;
    }

    .v-header__title {
        font-size: 28px;
    }
}

/* ——— Мобильная вёрстка: без горизонтального «плывущего» экрана ——— */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

.app-shell,
.main.layout,
.layout__content {
    max-width: 100%;
    min-width: 0;
}

#page_wrapper,
.page.page--entry,
.w_1020 {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 639px) {
    #page_wrapper,
    .page.page--entry,
    .w_1020 {
        max-width: 100%;
    }
}

.content-header {
    flex-wrap: wrap;
    max-width: 100%;
}

.content-header__info {
    flex: 1 1 auto;
    flex-wrap: wrap;
    row-gap: 4px;
}

.content-header-author__name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(160px, 42vw);
}

.content-title {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

.content--full,
.content.content--full {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

.content--full img,
.content--full figure,
.content--full .post-single-image,
.content--full table,
.content--full pre,
.content--full iframe {
    max-width: 100%;
    height: auto;
}

.feed-post-preview__body img {
    display: block;
    width: 100%;
    max-width: 100%;
}

.content--full .post-single-image img,
.content--full img {
    height: auto;
}

.content--full table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}