/* ===========================================================
 * J'VIS — Шаблон одиночной статьи (Figma node 185:290)
 * Загружается на single.php (типы post).
 * Шапка/футер/крошки — общие глобальные.
 * =========================================================== */

/* Контейнер статьи — 1200 max-width, 40 padding (как journal) */
.jvis-article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    font-family: 'Onest', sans-serif;
    color: #000;
    box-sizing: border-box;
}
.jvis-article,
.jvis-article * { box-sizing: border-box; }

/* ===== Дата + Заголовок ===== */
.jvis-article__head {
    margin-top: 40px; /* gap от крошек */
}
.jvis-article__date {
    font-size: 13px;
    font-weight: 200;
    color: #8c8888;
    line-height: 1;
    margin-bottom: 18px;
}
.jvis-article__title {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.25;
    color: #000;
    margin: 0;
    letter-spacing: 0;
}

/* ===== Обложка ===== */
.jvis-article__cover {
    margin-top: 40px;
    border-radius: 0;
    overflow: hidden;
}
.jvis-article__cover img,
.jvis-article__cover-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ===== Контент (Gutenberg) =====
 * Стили для абзацев, заголовков, изображений внутри редактора. */
.jvis-article__body {
    margin-top: 60px;
    font-family: 'Onest', sans-serif;
    font-weight: 200;          /* было 300 — для соответствия Figma (тоньше) */
    font-size: 18px;
    line-height: 1.55;
    color: #000;
}
.jvis-article__body > * { margin: 0 0 30px; }
.jvis-article__body > *:last-child { margin-bottom: 0; }

.jvis-article__body h2,
.jvis-article__body h3 {
    font-family: 'Onest', sans-serif;
    font-weight: 300;          /* было 400 — заголовки тоньше как в Figma */
    font-size: 22px;
    line-height: 1.3;
    margin: 36px 0 16px;
    color: #000;
}
.jvis-article__body h3 { font-size: 20px; }
.jvis-article__body p {
    font-size: 18px;
    font-weight: 200;          /* было 300 */
    line-height: 1.55;
    color: #000;
    margin: 0 0 20px;
}
.jvis-article__body ul,
.jvis-article__body ol {
    margin: 0 0 20px;
    padding-left: 28px;
}
.jvis-article__body li {
    margin-bottom: 8px;
    line-height: 1.55;
    font-weight: 200;          /* тоньше как в Figma */
}
/* strong/b внутри списка — чуть жирнее (но не bold) */
.jvis-article__body li strong,
.jvis-article__body li b,
.jvis-article__body p strong,
.jvis-article__body p b {
    font-weight: 400;
}
.jvis-article__body a {
    color: #C19099;
    text-decoration: underline;
}
.jvis-article__body a:hover { color: #000; }

/* Изображения внутри контента — full-width */
.jvis-article__body img {
    width: 100%;
    height: auto;
    display: block;
    margin: 36px 0;
}
/* Gutenberg image block */
.jvis-article__body .wp-block-image {
    margin: 36px 0;
}
.jvis-article__body .wp-block-image img {
    margin: 0;
}
/* Gutenberg columns (для двух- или трёх-колоночных галерей) */
.jvis-article__body .wp-block-columns {
    display: flex;
    gap: 30px;
    margin: 36px 0;
}
.jvis-article__body .wp-block-column {
    flex: 1;
    min-width: 0;
}
.jvis-article__body .wp-block-column img {
    margin: 0;
}
/* Gutenberg gallery */
.jvis-article__body .wp-block-gallery {
    display: grid;
    gap: 30px;
    margin: 36px 0;
}
.jvis-article__body .wp-block-gallery.columns-2 { grid-template-columns: 1fr 1fr; }
.jvis-article__body .wp-block-gallery.columns-3 { grid-template-columns: 1fr 1fr 1fr; }
.jvis-article__body .wp-block-gallery figure,
.jvis-article__body .wp-block-gallery img { margin: 0; }

/* ===== Кнопки: Вернуться / Поделиться ===== */
.jvis-article__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 20px;
}
.jvis-article__back {
    font-size: 16px;
    font-weight: 300;
    color: #000;
    text-decoration: none;
    transition: color 0.2s;
}
.jvis-article__back:hover { color: #C19099; }
.jvis-article__share {
    display: flex;
    align-items: center;
    gap: 16px;
}
.jvis-article__share-label {
    font-size: 16px;
    font-weight: 300;
    color: #000;
}
.jvis-article__share-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f5f5f5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.2s;
}
.jvis-article__share-link:hover { background: #e5e5e5; }

/* ===== Блок: Рекомендованные товары ===== */
.jvis-article-products {
    max-width: 1200px;
    margin: 50px auto 0;
    padding: 0 40px;
    box-sizing: border-box;
    font-family: 'Onest', sans-serif;
}
.jvis-article-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.jvis-article-product {
    display: block;
    text-decoration: none;
    color: #000;
    transition: opacity 0.2s;
}
.jvis-article-product:hover { opacity: 0.85; }
.jvis-article-product__img {
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #f5f5f5;
}
.jvis-article-product__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jvis-article-product__price {
    margin-top: 14px;
    font-size: 16px;
    font-weight: 300;
    color: #000;
}
.jvis-article-product__title {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 200;
    color: #8c8888;
    line-height: 1.3;
}

/* ===== Блок: Рекомендуемые статьи ===== */
.jvis-article-recommend {
    max-width: 1200px;
    margin: 80px auto 60px;
    padding: 0 40px;
    box-sizing: border-box;
    font-family: 'Onest', sans-serif;
}
.jvis-article-recommend__title {
    font-family: 'Onest', sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1;
    color: #000;
    margin: 0 0 36px;
}
.jvis-article-recommend__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}
.jvis-article-recommend__card {
    display: block;
    text-decoration: none;
    color: #000;
}
.jvis-article-recommend__img {
    aspect-ratio: 5/3;
    overflow: hidden;
    background: #f5f5f5;
}
.jvis-article-recommend__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jvis-article-recommend__cat {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 300;
    color: #000;
}
.jvis-article-recommend__name {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 200;
    color: #8c8888;
    line-height: 1.3;
}

/* ===== Адаптив ===== */
@media (max-width: 1024px) {
    .jvis-article-products__grid { grid-template-columns: repeat(2, 1fr); }
    .jvis-article-recommend__grid { grid-template-columns: repeat(3, 1fr); }
    .jvis-article__title { font-size: 24px; }
    .jvis-article__body { font-size: 17px; }
}
@media (max-width: 768px) {
    .jvis-article,
    .jvis-article-products,
    .jvis-article-recommend { padding: 0 20px; }
    .jvis-article__head { margin-top: 30px; }
    .jvis-article__title { font-size: 22px; }
    .jvis-article__cover { margin-top: 30px; }
    .jvis-article__body { margin-top: 40px; font-size: 16px; }
    .jvis-article__body .wp-block-columns,
    .jvis-article__body .wp-block-gallery.columns-2,
    .jvis-article__body .wp-block-gallery.columns-3 {
        grid-template-columns: 1fr;
        flex-direction: column;
    }
    .jvis-article__actions { flex-direction: column; align-items: flex-start; }
    .jvis-article-products__grid { grid-template-columns: repeat(2, 1fr); }
    .jvis-article-recommend__grid { grid-template-columns: repeat(2, 1fr); }
}