/* ===========================================================
 * J'VIS — Журнал (новый дизайн из Figma)
 * Только стили страницы. Шапка v2 — в jvis-header-v2.css (глобально).
 * =========================================================== */

/* Сбросы для страницы журнала.
 * НЕ применять box-sizing глобально — ломает Tilda-вёрстку подвала.
 * Скоупим только под журнальные блоки .jvis-journal и .jvis-h2 (последний скоупит сам header-v2.css). */
body.page-template-page-journal {
    font-family: 'Onest', sans-serif;
    color: #000;
    background: #fff;
    margin: 0;
}
.jvis-journal,
.jvis-journal * {
    box-sizing: border-box;
}

/* ============== ЖУРНАЛ ============== */

.jvis-journal {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Хлебные крошки */
.jvis-journal__crumbs {
    padding: 50px 0 0; /* Figma: 50px gap шапка → крошки */
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 13px;
    color: #8c8888;
    display: flex;
    align-items: center;
    gap: 12px;
}
.jvis-journal__crumbs a {
    color: #8c8888;
    text-decoration: none;
}
.jvis-journal__crumbs a:hover { color: #000; }

/* Заголовок страницы */
.jvis-journal__title {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 30px;
    color: #000;
    margin: 40px 0 0; /* Figma: 40px gap крошки → заголовок */
    line-height: 1;
}

/* Меню категорий */
.jvis-journal__cats {
    display: flex;
    align-items: center;
    gap: 56px;
    padding: 0;
    margin: 36px 0 0; /* Figma: 36px gap заголовок → меню категорий */
    overflow-x: auto;
}
.jvis-journal__cat {
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 13px;
    color: #8c8888;
    text-decoration: none;
    padding: 8px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.jvis-journal__cat:hover { color: #000; }
.jvis-journal__cat.is-active {
    color: #000;
    border-bottom-color: #000;
}

/* ============== ПЛИТКА ============== */

.jvis-journal__grid {
    display: flex;
    flex-direction: column;
    gap: 35px; /* по Figma — расстояние между рядами */
    margin-top: 35px; /* Figma: 35px gap меню категорий → 1-й баннер */
}
.jvis-journal__row {
    display: grid;
    gap: 20px; /* по Figma — между плитками внутри ряда */
}
.jvis-journal__row--2 { grid-template-columns: 1fr 1fr; }
.jvis-journal__row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* Карточка */
.jvis-card {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 35px;
}
.jvis-card--xl { aspect-ratio: 1120 / 489; }
.jvis-card--md { aspect-ratio: 1 / 1.09; }
.jvis-card--sm { aspect-ratio: 1 / 1.09; }

/* Тёмная виньетка снизу — текст читаемый */
.jvis-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(51,51,51,0) 60%);
    pointer-events: none;
}

.jvis-card__link {
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
}

.jvis-card__content {
    position: relative;
    z-index: 3;
    color: #fff;
    pointer-events: none;
}
.jvis-card__content a,
.jvis-card__content button { pointer-events: auto; }

/* XL карточка — баннер по Figma (Group 6 внутри Баннер 1):
 * категория сверху content-блока, заголовок, кнопки внизу,
 * дата ОТДЕЛЬНО в правом нижнем углу карточки. */
.jvis-card--xl .jvis-card__content {
    width: 100%; /* чтобы дата справа имела куда стать */
}
.jvis-card--xl .jvis-card__cat {
    display: block;
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0.85;
    margin: 0 0 16px;
}
.jvis-card--xl .jvis-card__title {
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 36px;
    color: #fff;
    margin: 0 0 18px;
    line-height: 1.2;
    max-width: 700px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.jvis-card--xl .jvis-card__buttons {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}
/* Дата — абсолютно в правом нижнем углу content (который уже имеет padding 35 от card edge).
 * right:0 / bottom:0 относительно content → совпадает с правым-нижним углом карточки с padding. */
.jvis-card--xl .jvis-card__date {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: 'Onest', sans-serif;
    font-weight: 200;          /* было 300 (Figma) */
    font-size: 20px;
    line-height: 1;
    color: #fff;
}
.jvis-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 43px;
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 18px;
    text-transform: none;
    text-decoration: none;
    min-width: 270px;
    height: 48px;
    transition: opacity 0.2s;
}
.jvis-card__btn--white {
    background: #fff;
    color: #000;
}
.jvis-card__btn--pink {
    background: #cea8af;
    color: #000;
}
.jvis-card__btn:hover {
    opacity: 0.85;
}

/* MD карточка — средние блоки */
.jvis-card--md .jvis-card__cat,
.jvis-card--sm .jvis-card__cat {
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    opacity: 0.85;
    display: block;
    margin-bottom: 12px;
}
.jvis-card--md .jvis-card__title {
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 22px;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    padding-right: 100px;       /* резерв под дату */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Дата MD — абсолютно прижата к bottom-right карточки (как в Figma). */
.jvis-card--md .jvis-card__date {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    z-index: 4;
}

/* SM карточка */
.jvis-card--sm .jvis-card__cat { margin-bottom: 12px; }
.jvis-card--sm .jvis-card__title {
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    padding-right: 80px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Дата SM — absolute bottom-right */
.jvis-card--sm .jvis-card__date {
    position: absolute;
    right: 0;
    bottom: 0;
    font-family: 'Onest', sans-serif;
    font-weight: 200;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    z-index: 4;
}

/* ============== ПАГИНАЦИЯ ============== */
.jvis-journal__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 56px 0 24px;
}
.jvis-journal__page {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}
.jvis-journal__page.is-active {
    font-weight: 600;
}
.jvis-journal__page--next {
    font-weight: 600;
    font-size: 16px;
    padding-left: 8px;
}

/* ============== ФУТЕР V2 ============== */
.jvis-h2__footer {
    width: 100%;
    margin: 60px 0 0;
}
.jvis-h2__footer img {
    width: 100%;
    height: auto;
    display: block;
}

/* Скрываем Tilda WC-блоки (на journal не нужны).
 * Tilda-подвал ОСТАВЛЯЕМ — он подключён через readfile в page-journal.php. */
body.page-template-page-journal .t-records.jvis-wc-archive,
body.page-template-page-journal .jvis-wc-single { display: none !important; }

/* ============== АДАПТИВНОСТЬ ============== */
/* Адаптив шапки v2 — в jvis-header-v2.css */
@media (max-width: 1024px) {
    .jvis-journal__row--3 { grid-template-columns: 1fr 1fr; }
    .jvis-card--xl { aspect-ratio: 16/7; }
    .jvis-card--xl .jvis-card__title { font-size: 32px; max-width: 70%; }
    .jvis-card__btn { min-width: auto; padding: 12px 28px; font-size: 16px; }
}
@media (max-width: 768px) {
    .jvis-journal { padding: 0 16px; }
    .jvis-journal__crumbs { font-size: 12px; padding-top: 30px; }
    .jvis-journal__title { font-size: 24px; margin-top: 24px; }
    .jvis-journal__cats {
        gap: 18px;
        margin-top: 24px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .jvis-journal__cats::-webkit-scrollbar { display: none; }
    .jvis-journal__cat { font-size: 12px; padding: 8px 0; flex-shrink: 0; }
    .jvis-journal__grid { gap: 20px; margin-top: 24px; }

    .jvis-card { padding: 20px; }
    .jvis-card--xl { aspect-ratio: 4/5; }
    .jvis-card--xl .jvis-card__cat { font-size: 16px; margin-bottom: 8px; }
    .jvis-card--xl .jvis-card__title { font-size: 22px; max-width: 100%; padding-right: 0; }
    .jvis-card--xl .jvis-card__buttons { flex-direction: column; gap: 12px; }
    .jvis-card--xl .jvis-card__date { font-size: 14px; bottom: 16px; right: 16px; }
    .jvis-card__btn { width: 100%; min-width: 0; }

    .jvis-journal__row--2,
    .jvis-journal__row--3 { grid-template-columns: 1fr; gap: 16px; }
    .jvis-card--md,
    .jvis-card--sm { aspect-ratio: 1/1; }
    .jvis-card--md .jvis-card__title,
    .jvis-card--sm .jvis-card__title { font-size: 20px; padding-right: 90px; }
    .jvis-card--md .jvis-card__date,
    .jvis-card--sm .jvis-card__date { font-size: 13px; bottom: 16px; right: 16px; }

    .jvis-journal__pager { gap: 18px; padding-top: 40px; }
}
@media (max-width: 480px) {
    .jvis-card--xl .jvis-card__title { font-size: 18px; }
    .jvis-card--md .jvis-card__title,
    .jvis-card--sm .jvis-card__title { font-size: 17px; }
}