/* ═══════════════════════════════════════════════════════════════════════════
   БЛОГ MEGAETK.RU

   Собран из словаря самого сайта, а не придуман рядом с ним:

   * внутренняя страница у Мега ЭТК — ТЁМНАЯ (`.portfolio-in` — фон #3d3d3d,
     отступ сверху 20rem). Блог живёт по тому же правилу;
   * заголовок — класс `.title` шаблона: Montserrat 600, 5.8rem, ВЕРХНИЙ
     РЕГИСТР. Свой заголовок блога не выдумываем, берём этот;
   * углы прямые. На сайте нет ни одного скругления крупнее пары пикселей —
     первая версия блога с пилюлями-фильтрами радиусом 100px выпадала из него
     сильнее всего;
   * акцент — красный #ed1c24 и фирменный «уголок»: незакрытая снизу рамка
     перед надписью-рубрикатором. На главной он стоит перед каждой секцией
     («⌐ ПОРТФОЛИО», «⌐ FAQ»), поэтому в блоге он же держит структуру.

   Корневой размер плавающий (html{font-size:.5208335vw}), значит rem читается
   как «пиксели при ширине 1920» — как и во всём шаблоне.
   ═══════════════════════════════════════════════════════════════════════════ */

.blog {
    --ink: #3d3d3d;
    --ink-deep: #333;
    --paper: #fff;
    --panel: #e9e9ec;
    --red: #ed1c24;
    --muted-dark: #b9b9b9;
    --muted-light: #6a6a6a;
    --line-light: #e2e4e8;
}

/* ── Фирменный уголок ────────────────────────────────────────────────────
   Ровно тот же знак, что стоит перед заголовками секций на главной. */
.blog-eyebrow {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--red);
}
.blog-eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 2.6rem;
    height: 1.4rem;
    border: .2rem solid var(--red);
    border-bottom: 0;
}

/* Надпись-уголок НА ТЁМНОМ ФОНЕ: текст белый, уголок остаётся красным.
   Красный #ed1c24 на #3d3d3d даёт 4.38:1 — ниже порога AA для мелкого текста,
   а фирменный цвет менять нельзя. Значение несёт текст, знак декоративен —
   поэтому расходятся именно они. */
.blog-index .blog-eyebrow,
.article-top .blog-eyebrow { color: #fff; }
.blog-index .blog-eyebrow::before,
.article-top .blog-eyebrow::before { border-color: var(--red); }

/* На светлом фоне ровно то же правило: смысл несёт текст, поэтому он берёт
   цвет поверхности, а фирменный красный остаётся у знака. Красный #ed1c24 на
   белом даёт 4.35:1 — для надписи в 1.3rem этого не хватает. */
.article-sheet .blog-eyebrow { color: var(--ink); }

/* ═══ РАЗВОДЯЩАЯ ═══════════════════════════════════════════════════════ */

.blog-index {
    padding-top: 20rem;
    padding-bottom: 12rem;
    background-color: var(--ink);
}
.blog-index__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 4rem;
    font-size: 1.6rem;
    color: var(--muted-dark);
}
.blog-index__crumbs a { color: var(--muted-dark); transition: color .3s ease; }
.blog-index__crumbs a:hover { color: #fff; }

.blog-index__head { margin-bottom: 6rem; }
.blog-index__eyebrow { margin-bottom: 2.4rem; }
.blog-index__title { margin-bottom: 3.2rem; color: #fff; }
.blog-index__lead {
    max-width: 88rem;
    font-size: 2.2rem;
    line-height: 1.55;
    color: var(--muted-dark);
}

/* Фильтр рубрик — прямоугольники с тонкой рамкой, как селекты портфолио. */
.blog-rubrics {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 6.4rem;
}
.blog-rubrics__item {
    display: inline-flex;
    align-items: center;
    padding: 1.5rem 2.8rem;
    border: .1rem solid rgba(255, 255, 255, .28);
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.blog-rubrics__item:hover { border-color: #fff; }
.blog-rubrics__item._active {
    background-color: var(--red);
    border-color: var(--red);
}

/* Карточка — светлая панель с фотографией внутри, как в портфолио. */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.2rem;
}
.blog-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    background-color: var(--panel);
    transition: transform .35s ease;
}
.blog-card:hover { transform: translateY(-.6rem); }
.blog-card__pic {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: #fff;
}
.blog-card__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}
.blog-card:hover .blog-card__pic img { transform: scale(1.05); }
.blog-card__rubric {
    position: absolute;
    left: 0;
    top: 0;
    padding: .9rem 1.8rem;
    background-color: var(--red);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}
.blog-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding-top: 2.4rem;
}
.blog-card__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--ink);
    transition: color .3s ease;
}
.blog-card:hover .blog-card__title { color: var(--red); }
.blog-card__text {
    margin-top: 1.6rem;
    font-size: 1.7rem;
    line-height: 1.55;
    color: var(--muted-light);
}
.blog-card__meta {
    display: flex;
    gap: 2rem;
    margin-top: auto;
    padding-top: 2.4rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.blog-empty {
    padding: 10rem 0;
    font-size: 2.2rem;
    color: var(--muted-dark);
}
.blog-pager { margin-top: 6rem; color: #fff; }
.blog-pager a { color: #fff; }

/* ═══ СТАТЬЯ ═══════════════════════════════════════════════════════════ */

/* Тёмная шапка статьи — та же плоскость, что у разводящей. */
.article-top {
    padding-top: 20rem;
    padding-bottom: 24rem;
    background-color: var(--ink);
}
.article-top__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 4rem;
    font-size: 1.6rem;
    color: var(--muted-dark);
}
.article-top__crumbs a { color: var(--muted-dark); transition: color .3s ease; }
.article-top__crumbs a:hover { color: #fff; }
.article-top__eyebrow { margin-bottom: 2.4rem; }
.article-top__title {
    max-width: 120rem;
    margin-bottom: 3.2rem;
    color: #fff;
}
.article-top__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3.2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-dark);
}
.article-top__meta b { color: #fff; font-weight: 500; }

/* Белый лист статьи наезжает на тёмную шапку — один заметный приём на всю
   страницу. Смысл прямой: документ положили на тёмную плоскость сайта. */
.article-sheet {
    margin-top: -20rem;
    margin-bottom: 12rem;
    padding: 0 0 8rem;
    background-color: var(--paper);
}
.article-sheet__cover {
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background-color: var(--panel);
}
.article-sheet__cover img { width: 100%; height: 100%; object-fit: cover; }
.article-sheet__inner { padding: 6.4rem 8rem 0; }

.article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32rem;
    gap: 7rem;
    align-items: start;
}
.article__aside {
    position: sticky;
    top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

/* Оглавление */
.article-toc { border-top: .2rem solid var(--ink); padding-top: 2.4rem; }
.article-toc__title {
    margin-bottom: 2.4rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
}
.article-toc ol { counter-reset: toc; list-style: none; padding: 0; }
.article-toc li { counter-increment: toc; margin-bottom: 1.6rem; font-size: 1.6rem; line-height: 1.45; }
.article-toc li::before {
    content: counter(toc, decimal-leading-zero);
    margin-right: 1.2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--red);
}
.article-toc a { color: var(--muted-light); transition: color .3s ease; }
.article-toc a:hover { color: var(--ink); }

/* Автор */
.author-card { border-top: .2rem solid var(--ink); padding-top: 2.4rem; }
.author-card__label {
    margin-bottom: 2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
}
.author-card__row { display: flex; gap: 1.8rem; align-items: center; }
.author-card__pic { flex: 0 0 7.2rem; width: 7.2rem; height: 7.2rem; overflow: hidden; background: var(--panel); }
.author-card__pic img { width: 100%; height: 100%; object-fit: cover; }
.author-card__name {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    text-transform: uppercase;
    color: var(--ink);
}
.author-card__position { margin-top: .6rem; font-size: 1.5rem; color: var(--muted-light); }
.author-card__about { margin-top: 1.6rem; font-size: 1.5rem; line-height: 1.55; color: var(--muted-light); }

/* ── Тело статьи ──────────────────────────────────────────────────────── */
.article__body { font-size: 1.9rem; line-height: 1.7; color: #4a4a4a; }
.article__body > * + * { margin-top: 2.4rem; }
.article__body h2 {
    margin-top: 6.4rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 3.2rem;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ink);
}
.article__body h3 {
    margin-top: 4.4rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.3;
    color: var(--ink);
}
.article__body p { font-size: 1.9rem; line-height: 1.7; }
.article__body strong { color: var(--ink); font-weight: 600; }
.article__body a { color: var(--red); text-decoration: underline; text-underline-offset: .3rem; }
.article__body ul { padding: 0; }
.article__body ul li { position: relative; margin-bottom: 1.4rem; padding-left: 3rem; list-style: none; }
.article__body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .9rem;
    width: 1.4rem;
    height: .8rem;
    border: .2rem solid var(--red);
    border-bottom: 0;
}
.article__body ol { padding-left: 0; counter-reset: num; list-style: none; }
.article__body ol li { counter-increment: num; position: relative; margin-bottom: 1.4rem; padding-left: 4.4rem; }
.article__body ol li::before {
    content: counter(num, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: .2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--red);
}
.article__body table { width: 100%; border-collapse: collapse; font-size: 1.7rem; }
.article__body thead th {
    background-color: var(--ink);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.article__body th, .article__body td { padding: 1.6rem 2rem; border: .1rem solid var(--line-light); text-align: left; }
.article__body tbody tr:nth-child(even) { background-color: #fafafb; }

/* Цитата — тёмная плашка с красным уголком. Свой вид блока, который ищет
   скан вёрстки: на сайте цитат не было вовсе, и этот образец задаёт форму. */
.article__body blockquote, .article-quote {
    position: relative;
    margin: 5.6rem 0;
    padding: 4rem 4rem 3.2rem;
    background-color: var(--ink);
    color: #fff;
    font-size: 2.1rem;
    line-height: 1.55;
}
.article__body blockquote::before, .article-quote::before {
    content: "";
    position: absolute;
    left: 4rem;
    top: -1.2rem;
    width: 4.8rem;
    height: 2.4rem;
    border: .3rem solid var(--red);
    border-bottom: 0;
    background-color: var(--ink);
}
/* Подпись автора цитаты: светлая, а не красная. Красный #ed1c24 на тёмном
   #3d3d3d даёт контраст около 3:1 — для строки в 1.4rem этого мало. Красным
   остаётся только уголок сверху, он декоративный и текста не несёт. */
.article__body blockquote cite, .article-quote cite {
    display: block;
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: .1rem solid rgba(255, 255, 255, .18);
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.4rem;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.article__body figure { margin: 5.6rem 0; }
.article__body figure img { width: 100%; height: auto; display: block; }
.article__body figcaption {
    margin-top: 1.4rem;
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--muted-light);
}

/* Врезка-предупреждение */
.article__note {
    margin: 4.8rem 0;
    padding: 3.2rem 3.6rem;
    border-left: .4rem solid var(--red);
    background-color: #f6f7f8;
    font-size: 1.8rem;
    line-height: 1.6;
}

/* ── FAQ: как на главной — белые карточки с тонким красным плюсом ─────── */
.article-faq { margin-top: 8rem; }
.article-faq__head { margin-bottom: 3.2rem; }
.article-faq__title {
    margin-top: 2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 3.2rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--ink);
}
.article-faq__item { margin-bottom: 1.2rem; border: .1rem solid var(--line-light); background-color: #fff; }
.article-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    padding: 2.6rem 3rem;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.9rem;
    line-height: 1.4;
    color: var(--ink);
}
.article-faq__q::after {
    content: "";
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background:
        linear-gradient(var(--red), var(--red)) center / 100% .2rem no-repeat,
        linear-gradient(var(--red), var(--red)) center / .2rem 100% no-repeat;
    transition: transform .3s ease;
}
.article-faq__item._open .article-faq__q::after { transform: rotate(45deg); }
.article-faq__a { display: none; padding: 0 3rem 2.8rem; font-size: 1.8rem; line-height: 1.65; color: var(--muted-light); }
.article-faq__item._open .article-faq__a { display: block; }

/* ── Источники ───────────────────────────────────────────────────────── */
.article-sources { margin-top: 6.4rem; padding-top: 3.2rem; border-top: .2rem solid var(--ink); }
.article-sources__title {
    margin-top: 2rem;
    margin-bottom: 2.4rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
}
.article-sources ol { counter-reset: src; list-style: none; padding: 0; }
.article-sources li { counter-increment: src; position: relative; margin-bottom: 1.4rem; padding-left: 4rem; font-size: 1.6rem; line-height: 1.5; word-break: break-word; }
.article-sources li::before {
    content: counter(src, decimal-leading-zero);
    position: absolute;
    left: 0;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: var(--red);
}
.article-sources a { color: var(--muted-light); text-decoration: underline; text-underline-offset: .3rem; }
.article-sources a:hover { color: var(--red); }

.article-tags { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 4.8rem; }
.article-tags__item {
    padding: 1rem 2rem;
    border: .1rem solid var(--line-light);
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted-light);
}

/* Возврат в блог */
.article-back { margin-top: 6.4rem; }
.article-back a {
    display: inline-flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.8rem 3.2rem;
    background-color: var(--red);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    transition: background-color .3s ease;
}
.article-back a:hover { background-color: #c9151c; }

/* ── Доступность и мелкий экран ───────────────────────────────────────── */
.blog-rubrics__item:focus-visible,
.article-faq__q:focus-visible,
.blog-card:focus-visible,
.article-back a:focus-visible { outline: .3rem solid var(--red); outline-offset: .4rem; }

@media (prefers-reduced-motion: reduce) {
    .blog-card, .blog-card__pic img, .article-faq__q::after { transition: none; }
    .blog-card:hover { transform: none; }
    .blog-card:hover .blog-card__pic img { transform: none; }
}

@media (max-width: 1280px) {
    .article__layout { grid-template-columns: 1fr; gap: 5rem; }
    .article__aside { position: static; flex-direction: row; flex-wrap: wrap; gap: 4rem; }
    .article__aside > * { flex: 1 1 32rem; }
}
@media (max-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .article-sheet__inner { padding: 4.8rem 4rem 0; }
}
@media (max-width: 640px) {
    .blog-index, .article-top { padding-top: 16rem; }
    .article-top { padding-bottom: 16rem; }
    .article-sheet { margin-top: -12rem; }
    .article-sheet__inner { padding: 3.2rem 2.4rem 0; }
    .blog-grid { grid-template-columns: 1fr; }
    .article__body h2 { font-size: 2.6rem; }
    .article__body blockquote, .article-quote { padding: 3.2rem 2.4rem 2.4rem; }
    .article__body blockquote::before, .article-quote::before { left: 2.4rem; }
}