/*
 * Блог: список статей и страница статьи. Контрольные ширины: 1920, 1440,
 * 990, 375 — как на остальных страницах сайта.
 *
 * Крошки, .w-title, отступы секций и тёмный блок призыва приходят из
 * about.css: он подключён обеими страницами блога. Здесь — только то,
 * чего там нет: сетка карточек, типографика текста статьи и пагинация.
 */

/* --- Заголовок раздела --- */
.w-blog-intro { margin-top: 40px; }

.w-blog-intro__title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-blog-intro__text {
    max-width: 640px;
    margin: 16px 0 0;
    color: #4d4d4d;
    font-size: 20px;
    line-height: 1.45;
}

/* --- Сетка карточек --- */
.w-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

/* Карточка кликается целиком: ссылка растянута на всю плитку, а не только
   на заголовок — так в неё проще попасть и на телефоне. */
.w-blog-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 10px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.w-blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: #ededed;
}

.w-blog-card__media picture { display: block; height: 100%; }

.w-blog-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Плашка вместо отсутствующей обложки: без неё плитки в ряду разъезжаются. */
.w-blog-card__img--empty { background: #ededed; }

.w-blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    padding: 24px;
}

.w-blog-card__date {
    color: #8b8b8b;
    font-size: 14px;
    line-height: 1;
}

.w-blog-card__title {
    margin-top: 10px;
    color: var(--w-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.w-blog-card__text {
    margin-top: 10px;
    color: #6e6e6e;
    font-size: 15px;
    line-height: 1.5;
}

/* --- Блог v2 (Анастасия 02.11.2026): чипы тем, свежая статья крупно, тема на обложке --- */
/* Чипы — часть шапки раздела: от заголовка 24, как строка кнопок под текстом шапки (spacing.md). */
body.w-page .w-blog-intro + .w-section { margin-top: var(--space-l); padding-top: 0; }   /* сильнее общего правила «шапка → содержимое» из layout.css */
.w-blog-topics { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: 0; }

.w-blog-topics__item {
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    color: var(--w-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background var(--w-ease), color var(--w-ease);
}

.w-blog-topics__item:hover { color: var(--w-green); }
.w-blog-topics__item[aria-current="page"] { background: var(--w-green); color: #fff; }

.w-blog-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    margin-top: var(--space-l);
    border-radius: 16px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
}

.w-blog-lead__media { display: block; aspect-ratio: 2 / 1; max-height: 380px; width: 100%; background: #ededed; }   /* высота от ширины: на большом экране карточка не вытягивается */
.w-blog-lead__media picture { display: block; height: 100%; }
.w-blog-lead__media .w-blog-card__img { height: 100%; }

.w-blog-lead__body { display: flex; flex-direction: column; justify-content: flex-start; padding: var(--space-xl); }   /* текст сверху, не по центру (Анастасия 02.11) */
.w-blog-lead__btn { margin-top: auto !important; }   /* кнопка внизу карточки — без пустоты под текстом */
.w-blog-lead__text { margin-bottom: var(--space-l); }
@media (min-width: 1440px) { .w-blog-lead__title { font-size: 30px; } .w-blog-lead__text { font-size: 16px; -webkit-line-clamp: 4; } }

.w-blog-lead__title { margin-top: var(--space-s); color: var(--w-ink); font-size: 28px; font-weight: 700; line-height: 1.2; text-wrap: balance; }

.w-blog-lead__text {
    display: -webkit-box;
    margin-top: var(--space-s);
    overflow: hidden;
    color: #6e6e6e;
    font-size: 15px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.w-blog-lead__btn {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-s);
    margin-top: var(--space-l);
    padding: 6px 6px 6px 20px;
    border-radius: 999px;
    background: var(--w-green);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.w-blog-lead__arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--w-green); font-size: 14px; }

.w-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); color: #8b8b8b; font-size: 13px; line-height: 1.3; }
.w-blog-meta__new { padding: 3px 10px; border-radius: 999px; background: #e3eee8; color: var(--w-green); font-weight: 700; }
.w-blog-meta__time::before { content: "◷ "; }

.w-blog-lead + .w-blog-grid { margin-top: var(--space-l); }
.w-blog-card__media { position: relative; overflow: hidden; }

.w-blog-card__topic {
    position: absolute;
    top: var(--space-s);
    left: var(--space-s);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: var(--w-green);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

/* Обычная карточка (Анастасия 02.11): фото со скруглением внутри карточки, дата + тема, 2 строки заголовка и подводки, время и круглая стрелка. */
.w-blog-card__link { padding: var(--space-s) var(--space-s) var(--space-m); border-radius: 16px; transition: box-shadow var(--w-ease); }
.w-blog-card__media { border-radius: 12px; }
.w-blog-card__body { padding: var(--space-m) var(--space-xs) 0; }
.w-blog-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); }
.w-blog-card__date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.w-blog-card__cal { flex: none; }
.w-blog-card .w-blog-card__topic { position: static; padding: 4px 10px; background: #e3eee8; }
.w-blog-card .w-blog-card__title { display: -webkit-box; margin-top: var(--space-s); overflow: hidden; font-size: 18px; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.w-blog-card__text { display: -webkit-box; margin-top: var(--space-xs); overflow: hidden; font-size: 14px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.w-blog-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-m); color: #8b8b8b; font-size: 13px; }
.w-blog-card__go { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #e3eee8; color: var(--w-green); font-size: 15px; transition: background var(--w-ease), color var(--w-ease); }
@media (hover: hover) {
    .w-blog-card__link:hover { box-shadow: 0 14px 32px rgba(29, 96, 71, .10); }
    .w-blog-card__link:hover .w-blog-card__go { background: var(--w-green); color: #fff; }
}

@media (max-width: 989px) {
    .w-blog-lead { grid-template-columns: minmax(0, 1fr); }
    .w-blog-lead__media { aspect-ratio: 16 / 9; max-height: none; }
    .w-blog-lead__btn { margin-top: var(--space-l) !important; }
    .w-blog-lead__body { padding: var(--space-l) var(--space-m); }
    .w-blog-lead__title { font-size: 22px; }
}

/* --- Пагинация --- */
/* Разметку рисует Laravel, поэтому стили вешаются на его классы. */
.w-blog-pagination { margin-top: 40px; }

.w-blog-pagination nav { display: flex; justify-content: center; }

.w-blog-pagination svg { width: 18px; height: 18px; }

/* --- Страница статьи (вариант 2, Анастасия 02.11) ---
 * Заголовок на большой обложке, ниже текст и липкая колонка справа.
 * Ширина статьи 1360 (было 860 + обложка того же размера): обложка крупнее,
 * а колонка текста не шире ~75 знаков, чтобы строка читалась легко.
 */
/* Обложка — во всю ширину сетки, как шапка и крошки (Анастасия 02.11); текст и колонка справа — в 1360 по центру. */
.w-article { margin-top: 40px; }

.w-article__hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(440px, 34vw, 620px);
    border-radius: 24px;
    overflow: hidden;
    background: #23362d;
}

.w-article__cover { position: absolute; inset: 0; }

.w-article__cover picture { display: block; height: 100%; }

.w-article__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение снизу и слева: белый заголовок читается на любом фото. */
.w-article__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(10, 24, 18, .05) 20%, rgba(10, 24, 18, .55) 60%, rgba(10, 24, 18, .88) 100%),
        linear-gradient(90deg, rgba(10, 24, 18, .45) 0%, rgba(10, 24, 18, 0) 65%);
}

.w-article__head {
    position: relative;
    z-index: 1;
    max-width: 1040px;
    /* Отступы от края обложки 32 — заголовок ближе к углу (Анастасия 02.11: «уменьши отступы»). */
    padding: 32px;
    color: #fff;
}

.w-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    font-size: 14px;
    line-height: 1.2;
}

.w-article__topic {
    padding: 6px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--w-green);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

.w-article__date,
.w-article__time { display: inline-flex; align-items: center; gap: 6px; opacity: .9; }

.w-article__time::before {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.w-article__title {
    margin: 20px 0 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1.02;
    text-transform: uppercase;
    text-wrap: balance;
    color: #fff;
}

/* Статья без обложки: заголовок на фоне страницы, тёмным. */
.w-article__hero--plain { min-height: 0; background: none; }
.w-article__hero--plain::after { content: none; }
.w-article__hero--plain .w-article__head { padding: 0; color: var(--w-ink); }
.w-article__hero--plain .w-article__title { color: var(--w-ink); }
.w-article__hero--plain .w-article__topic { background: #e3eee8; }

.w-article__cols {
    max-width: 1360px;
    margin-right: auto;
    margin-left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 80px;
    align-items: start;
    margin-top: 56px;
}

/* Текст статьи — на белой плашке, как карточки блога (Анастасия 02.11). Ширина строки та же: 820 + поля. */
.w-article__main {
    max-width: 916px;
    padding: 48px;
    border-radius: 24px;
    background: #fff;
}

.w-article__lead {
    margin: 0 0 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #e1e4e2;
    color: var(--w-ink);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5;
}

/*
 * Типографика текста статьи.
 *
 * Правила вешаются на потомков .w-article__body, а не на классы: HTML
 * приходит из редактора, и своих классов у него нет. Поэтому же заданы
 * отступы «сверху» — редактор выдаёт сплошную череду блоков.
 * Межстрочный 1.75 и абзац 20 — «чтобы текст хорошо читался» (Анастасия 02.11).
 */
.w-article__body {
    color: #2b3631;
    font-size: 18px;
    line-height: 1.75;
}

.w-article__body > :first-child { margin-top: 0; }

.w-article__body p { margin: 20px 0 0; }

.w-article__body h2 {
    margin: 56px 0 0;
    font-family: var(--w-font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--w-ink);
    scroll-margin-top: 24px;
}

.w-article__body h3 {
    margin: 36px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--w-ink);
}

.w-article__body h2 + p,
.w-article__body h3 + p { margin-top: 16px; }

.w-article__body ul,
.w-article__body ol { margin: 20px 0 0; padding-left: 24px; }

.w-article__body li { margin-top: 10px; }

.w-article__body li::marker { color: var(--w-green); }

.w-article__body a { color: var(--w-green); }

.w-article__body strong { color: var(--w-ink); }

.w-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 32px 0 0;
    border-radius: 16px;
}

.w-article__body blockquote {
    margin: 32px 0 0;
    padding: 24px 28px;
    border-radius: 16px;
    background: #e3eee8;
    color: var(--w-ink);
}

.w-article__body blockquote p:first-child { margin-top: 0; }

/* Таблица из редактора на телефоне уезжает за край — прокручиваем её. */
.w-article__body table {
    display: block;
    width: 100%;
    margin: 32px 0 0;
    border: 1px solid #e1e4e2;
    border-radius: 16px;
    border-collapse: separate;
    border-spacing: 0;
    overflow-x: auto;
    background: #fff;
    font-size: 16px;
    line-height: 1.5;
}

.w-article__body th,
.w-article__body td {
    padding: 14px 18px;
    border-bottom: 1px solid #e1e4e2;
    text-align: left;
    vertical-align: top;
}

.w-article__body tr:last-child td { border-bottom: 0; }

.w-article__body th { background: #e3eee8; color: var(--w-ink); font-weight: 700; }

/* Колонка справа: оглавление и заявка, едут вместе с текстом. */
.w-article__side {
    position: sticky;
    top: 24px;
    display: grid;
    gap: 16px;
}

.w-article__toc {
    padding: 24px;
    border-radius: 24px;
    background: #fff;
}

.w-article__toc-title { margin: 0; color: var(--w-ink); font-size: 16px; font-weight: 700; }

.w-article__toc-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: toc;
}

.w-article__toc-list li { counter-increment: toc; }

.w-article__toc-list a {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    color: var(--w-ink);
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
}

.w-article__toc-list a::before {
    content: counter(toc, decimal-leading-zero);
    flex: none;
    padding-top: 1px;
    color: var(--w-green);
    font-size: 12px;
    font-weight: 700;
}

.w-article__ask {
    padding: 24px;
    border-radius: 24px;
    background: var(--w-green);
    color: #fff;
}

.w-article__ask-title {
    margin: 0;
    font-family: var(--w-font-display);
    font-size: 28px;
    line-height: 1.05;
    text-transform: uppercase;
}

.w-article__ask-text { margin: 10px 0 0; font-size: 15px; line-height: 1.45; opacity: .85; }

.w-article__ask-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 6px 6px 6px 18px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--w-green);
    font: 700 14px/1 var(--w-font);
    white-space: nowrap;
    cursor: pointer;
}

.w-article__ask-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--w-green);
    color: #fff;
}

@media (hover: hover) {
    .w-article__toc-list a:hover { color: var(--w-green); }
    .w-blog-card__link:hover .w-blog-card__title { color: var(--w-green); }
    .w-blog-card__link:hover .w-blog-card__img { transform: scale(1.03); }
    .w-blog-card__img { transition: transform var(--w-ease); }
}

/* --- 1440 --- */
@media (max-width: 1919px) {
    .w-blog-intro__text { font-size: 18px; }
    .w-article__cols { gap: 56px; }
    .w-article__body h2 { font-size: 32px; }
}

/* --- 990 --- */
@media (max-width: 1439px) {
    .w-blog-grid { gap: 20px; }
    .w-blog-card__body { padding: 20px; }
}

/* --- Мобильный --- */
@media (max-width: 989px) {
    .w-blog-intro { margin-top: 24px; }
    .w-blog-intro__text { font-size: 16px; }
    .w-blog-grid { grid-template-columns: minmax(0, 1fr); }
    .w-blog-card__title { font-size: 18px; }
    .w-article { margin-top: 24px; }
    .w-article__hero { min-height: 460px; border-radius: 16px; }
    .w-article__head { padding: 24px 20px; }
    .w-article__cols { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 32px; }
    .w-article__side { position: static; }
    .w-article__lead { margin-bottom: 24px; padding-bottom: 24px; font-size: 18px; }
    .w-article__body { font-size: 16px; line-height: 1.7; }
    .w-article__main { padding: 24px 20px; border-radius: 16px; }
    .w-article__body h2 { margin-top: 40px; font-size: 26px; }
    .w-article__body h3 { font-size: 19px; }
}
/* На телефоне карточка узкая: заголовку три строки, иначе обрезается на середине мысли. */
@media (max-width: 767px) {
    .w-blog-card .w-blog-card__title { -webkit-line-clamp: 3; }
}