/*
 * Блог: список статей и страница статьи. Контрольные ширины: 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;
}

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

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

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

/* --- Страница статьи --- */
.w-article {
    max-width: 860px;
    margin: 40px auto 0;
}

.w-article__date {
    display: block;
    color: #8b8b8b;
    font-size: 14px;
    line-height: 1;
}

.w-article__title {
    margin: 14px 0 0;
    font-family: var(--w-font-display);
    font-size: var(--w-title);
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--w-ink);
}

.w-article__cover {
    margin-top: 28px;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #ededed;
}

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

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

/*
 * Типографика текста статьи.
 *
 * Правила вешаются на потомков .w-article__body, а не на классы: HTML
 * приходит из редактора, и своих классов у него нет. Поэтому же заданы
 * отступы «сверху» — редактор выдаёт сплошную череду блоков.
 */
.w-article__body {
    margin-top: 32px;
    color: var(--w-text);
    font-size: 18px;
    line-height: 1.6;
}

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

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

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

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

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

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

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

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

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

.w-article__body blockquote {
    margin: 24px 0 0;
    padding: 20px 24px;
    border-left: 3px solid var(--w-green);
    border-radius: 0 10px 10px 0;
    background: #fff;
    color: var(--w-ink);
}

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

/* Таблица из редактора на телефоне уезжает за край — прокручиваем её. */
.w-article__body table {
    display: block;
    width: 100%;
    margin: 24px 0 0;
    border-collapse: collapse;
    overflow-x: auto;
}

.w-article__body th,
.w-article__body td {
    padding: 10px 14px;
    border: 1px solid #e4e4e4;
    text-align: left;
}

.w-article__body th { background: #fff; font-weight: 700; }

@media (hover: hover) {
    .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 { max-width: 760px; }
    .w-article__body { font-size: 17px; }
    .w-article__body h2 { font-size: 28px; }
}

/* --- 990 --- */
@media (max-width: 1439px) {
    .w-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); 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__body { margin-top: 24px; font-size: 16px; }
    .w-article__body h2 { margin-top: 28px; font-size: 24px; }
    .w-article__body h3 { font-size: 19px; }
}