/* Start:/local/templates/versta_desktop/assets/css/pages/journal.css?179172675910712*/
/*
 * Экран 23 «Журнал» (BES-76): bitrix:news [news.1] — /company/news/, /blog/.
 * Подключают страницы комплексного шаблона (parts/list.php, detail.php): Layout::pageCss('journal').
 *
 *  1. Заголовок страницы (модификаторы page-head: journal, journal-article) и чипы рубрик
 *  2. Лид-материал (.journal-lead)
 *  3. Сетка и карточка (.journal-grid, .journal-card), пустое состояние
 *  4. Статья (.journal-article), галерея, «← Все статьи», «Ещё в журнале»
 *  5. Узкие экраны
 *
 * Вся карточка кликабельна: ссылка на заголовке растянута ::after на карточку (position: relative),
 * в доступном имени ссылки — только заголовок.
 */

/* ========== 1. Заголовок страницы ========== */
.page-head--journal .page-head__lead {
    align-self: end;
}

/* Чипы рубрик — справа от заголовка (только если у инфоблока есть разделы) */
.journal-rubrics__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Статья: длинный заголовок новости — ещё на ступень меньше и не во всю ширину */
.page-head--journal-article .page-head__title {
    max-width: 1120px;
    text-wrap: balance;
}

.page-head--journal-article .page-head__title--long {
    font-size: var(--vd-fs-h2);
    line-height: .95;
}

/* Заголовок длиннее 60 символов (detail.php) */
.page-head--journal-xlong .page-head__title--long {
    font-size: var(--vd-fs-h3);
    line-height: 1;
}

/* ========== 2. Лид-материал ========== */
.journal-lead {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 3.89vw, 56px);
    align-items: end;
    padding-inline: var(--vd-gutter);
}

.journal-lead__media {
    height: clamp(360px, 44.4vw, 760px);
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
    overflow: hidden;
}

.journal-lead__img,
.journal-lead__ph {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 35%;
    transition: transform .6s ease;
}

.journal-lead__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    min-width: 0;
    padding-bottom: 8px;
}

.journal-lead__date {
    font: 12px / 1 var(--vd-font-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.journal-lead__title {
    max-width: 100%;
    font: 700 var(--vd-fs-h2) / .95 var(--vd-font-display);
    letter-spacing: .03em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    text-wrap: balance;
}

/* Длинные заголовки новостей (40+ и 70+ символов) — на ступень и на две меньше */
.journal-lead__title--long {
    font-size: var(--vd-fs-h3);
    line-height: 1;
}

.journal-lead__title--xlong {
    font-size: clamp(26px, 2.5vw, 42px);
    line-height: 1.02;
    letter-spacing: .04em;
}

.journal-lead__text {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--vd-text-2);
}

.journal-lead__link {
    color: inherit;
}

.journal-lead__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.journal-lead__link:focus-visible {
    outline: none;
}

.journal-lead:has(.journal-lead__link:focus-visible) {
    outline: 2px solid var(--vd-accent);
    outline-offset: 6px;
    border-radius: var(--vd-radius);
}

.journal-lead--link:hover .journal-lead__img {
    transform: scale(1.02);
}

.journal-lead--link:hover .journal-lead__more {
    color: var(--vd-accent);
}

.journal-lead--link:hover .journal-lead__more::after {
    transform: translateX(3px);
}

/* ========== 3. Сетка и карточка ========== */
.journal-list {
    padding: 8px var(--vd-gutter) clamp(72px, 8.33vw, 120px);
}

.journal-list--after-lead {
    padding-top: clamp(64px, 6.67vw, 96px);
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(40px, 3.89vw, 56px) var(--vd-gap);
}

.journal-list .pagination {
    margin-top: clamp(56px, 5.56vw, 80px);
}

.journal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.journal-card__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
    overflow: hidden;
}

.journal-card__img,
.journal-card__ph {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 35%;
    transition: transform .6s ease;
}

.journal-card__date {
    font: 11.5px / 1 var(--vd-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--vd-text-3);
}

.journal-card__title {
    font: 600 clamp(17px, 1.46vw, 21px) / 1.3 var(--vd-font-text);
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.journal-card__link {
    color: inherit;
}

.journal-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.journal-card__link:focus-visible {
    outline: none;
}

.journal-card:has(.journal-card__link:focus-visible) {
    outline: 2px solid var(--vd-accent);
    outline-offset: 6px;
    border-radius: var(--vd-radius);
}

.journal-card--link:hover .journal-card__img {
    transform: scale(1.03);
}

/* Пустой журнал (/blog/) */
.journal-empty {
    padding: 0 var(--vd-gutter) clamp(72px, 8.33vw, 120px);
}

/* ========== 4. Статья ========== */
.journal-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(32px, 3.33vw, 48px);
    padding-inline: var(--vd-gutter);
}

/* Анонс над фото */
.journal-article__lead {
    max-width: 760px;
    font-size: var(--vd-fs-lead);
    line-height: 1.55;
    color: var(--vd-text-2);
}

.journal-article__lead > * + * {
    margin-top: .6em;
}

/* Фото без обрезки: альбомное — до 1100 px, портретное — по колонке текста; высота — не больше экрана */
.journal-article__media {
    width: fit-content;
    max-width: min(100%, 1100px);
}

.journal-article__media--portrait {
    max-width: min(100%, 760px);
}

.journal-article__img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(85vh, 1000px);
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
}

/* Колонка текста — 760 px из .content (styles.css) */
.journal-article__text {
    width: 100%;
}

/* Постраничный текст (<BREAK />) — навигация слева, как текст */
.journal-article .pagination {
    align-items: flex-start;
}

/* Галерея из свойств-файлов */
.journal-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1100px;
}

.journal-gallery__title {
    font: 700 var(--vd-fs-h4) / 1 var(--vd-font-display);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.journal-gallery__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.journal-gallery__link {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
    overflow: hidden;
}

.journal-gallery__img,
.journal-gallery__ph {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    transition: transform .6s ease;
}

.journal-gallery__link:hover .journal-gallery__img {
    transform: scale(1.03);
}

/* «← Все статьи» */
.journal-back {
    padding: clamp(40px, 4.44vw, 64px) var(--vd-gutter) 0;
}

.journal-back:last-child {
    padding-bottom: clamp(72px, 8.33vw, 120px);
}

.journal-back__link {
    display: inline-flex;
    align-items: baseline;
    gap: .4em;
    padding-bottom: 4px;
    border-bottom: 1px solid currentColor;
    font: 600 14px / 1 var(--vd-font-text);
    color: var(--vd-ink);
}

.journal-back__link::before {
    content: '←';
    content: '←' / '';
    transition: transform var(--vd-transition);
}

.journal-back__link:hover::before {
    transform: translateX(-3px);
}

/* «Ещё в журнале» */
.journal-more {
    padding: clamp(64px, 7.8vw, 112px) var(--vd-gutter) clamp(72px, 8.33vw, 120px);
}

.journal-more .section-head {
    margin-bottom: 36px;
}

/* BES-101: общий каркас уже задаёт поля и нижний отступ. */
.journal-page .journal-lead,
.journal-page .journal-list,
.journal-page .journal-empty,
.journal-page .journal-article,
.journal-page .journal-back,
.journal-page .journal-more {
    padding-inline: 0;
}

.journal-page .journal-list,
.journal-page .journal-empty,
.journal-page .journal-back:last-child,
.journal-page .journal-more {
    padding-bottom: 0;
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .journal-page .journal-lead {
        grid-template-columns: minmax(0, 1fr);
    }

    .journal-page .journal-lead__media {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .journal-page .journal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ========== 5. Узкие экраны ========== */
@media (max-width: 1024px) {
    .journal-rubrics__list {
        justify-content: flex-start;
    }

    .journal-lead {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .journal-lead__media {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .journal-lead__body {
        gap: 18px;
        padding-bottom: 0;
    }

    .journal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 20px;
    }
}

@media (max-width: 767px) {
    .journal-lead__media {
        aspect-ratio: 4 / 3;
    }

    .journal-lead__title--long,
    .journal-lead__title--xlong {
        font-size: clamp(26px, 7vw, 34px);
    }

    .journal-gallery__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .journal-more .section-head {
        margin-bottom: 24px;
    }
}

@media (max-width: 560px) {
    .journal-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
}

/* End */
/* /local/templates/versta_desktop/assets/css/pages/journal.css?179172675910712 */