/* ============================================================================
   БЛОГ ATOM LAB - «ЛАБОРАТОРНЫЙ ЖУРНАЛ»
   Заведено 14.09.2026, переоформлено 04.10.2026 по слову Антона
   («красивее и интереснее, фон как в WhatsApp с рисуночками по нашему делу»).

   Сетка АСИММЕТРИЧНАЯ: первая карточка на всю ширину и горизонтально, две
   другие парой под ней. Статей три и они неравнозначны: первая ведёт.

   ЧТО ПОМЕНЯЛОСЬ 04.10.2026:
   - Фон: светло-лавандовый с плиткой assets/img/blog/doodles.svg - линейные
     рисунки (футболка, колба, атом, игла, кепка, рамка с ракелем, катушка,
     кружка, худи, веер pantone, шоппер). Прозрачность зашита в самом SVG
     (stroke-opacity .11), чтобы рисунки читались еле-еле и не спорили с текстом.
   - Шрифты. Раньше блог ссылался на --font-display и --ink, которых на этих
     страницах НЕ БЫЛО (они живут в style.css главной), и заголовки падали в
     системный sans. Теперь переменные заведены здесь же, поверх стеков
     detail.css (--display / --body, с подогнанными запасными шрифтами).
   - Шапка раздела - тёмная фиолетовая плашка с орбитами и сферами-пигментом,
     как на главной. Статья - белый лист на узорном фоне, с буквицей,
     маркерами у подзаголовков, тезисом-плашкой и FAQ карточками.
   Текст страниц не менялся ни на букву: только оформление.
   ============================================================================ */

.blog-page, .article-page {
  --font-display: var(--display, "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif);
  --font-ui: var(--body, "Manrope", "Manrope Fallback", Arial, sans-serif);
  --ink: #17121f;
  --ink-muted: #5f5870;
  --brand-violet: #5B2D8E;
  --brand-violet-deep: #240762;
  --brand-orange: #E2661B;
  --paper: #ffffff;
  --line: rgba(36, 7, 98, .1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --container: 1200px;
  color: var(--ink);
  background-color: #F4F1F9;
  background-image: url("/assets/img/blog/doodles.svg");
  background-size: 360px 360px;
  background-repeat: repeat;
}
.blog-page main, .article-page main { position: relative; }

/* ---------- шапка раздела: тёмная плашка с орбитами ---------- */
/* Плашка - сама секция с overflow:hidden: орбита обрезается по её краю и не
   даёт горизонтальной прокрутки (первый вариант с плашкой-псевдоэлементом
   давал scrollWidth 1623 на 1440). */
.blog-hero { position: relative; overflow: hidden; width: calc(100% - 2 * clamp(10px, 2.4vw, 32px)); max-width: 1120px; margin: clamp(80px, 9vw, 112px) auto 0;
  border-radius: clamp(24px, 3vw, 40px); box-shadow: 0 30px 60px -36px rgba(36, 7, 98, .7);
  background:
    radial-gradient(520px 320px at 88% 10%, rgba(138, 79, 196, .55), transparent 70%),
    radial-gradient(420px 300px at 8% 110%, rgba(226, 102, 27, .32), transparent 70%),
    linear-gradient(135deg, #1a0647 0%, #2d0b6e 55%, #3c138c 100%); }
.blog-hero__inner { position: relative; z-index: 2; max-width: var(--container); margin: 0 auto; padding: clamp(46px, 6vw, 84px) clamp(22px, 5vw, 64px) clamp(46px, 6vw, 80px); color: #fff; }
.blog-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #ffb27e; }
.blog-kicker::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--brand-orange); }
.blog-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.95rem, 8.7vw, 6.45rem); line-height: .9; letter-spacing: .01em; text-transform: uppercase; margin: 16px 0 20px;
  background: linear-gradient(100deg, #fff 30%, #d7c3ff 75%, #ffb27e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.blog-hero__lead { max-width: 600px; margin: 0; font-size: var(--fs-lead); line-height: 1.65; color: rgba(255, 255, 255, .8); }
/* орбиты и сфера: две тонкие дуги и одна «капля пигмента», без анимации */
.blog-hero__orbit { position: absolute; z-index: 1; right: clamp(-120px, -4vw, -20px); top: clamp(-60px, -3vw, -20px); width: min(46vw, 560px); aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; pointer-events: none; transform: rotate(-18deg); }
.blog-hero__orbit::before { content: ""; position: absolute; inset: 14% -10%; border: 1px solid rgba(255, 178, 126, .28); border-radius: 50%; }
.blog-hero__orbit::after { content: ""; position: absolute; left: 6%; top: 22%; width: clamp(30px, 4vw, 58px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffd2b0 0%, #E2661B 45%, #7a2a05 100%); box-shadow: 0 0 40px rgba(226, 102, 27, .55); }

/* ---------- сетка: первая крупная, две парой ---------- */
.blog-grid { max-width: var(--container); margin: 0 auto; padding: clamp(28px, 4vw, 48px) clamp(18px, 4vw, 40px) clamp(72px, 9vw, 128px); display: grid; gap: clamp(18px, 2.4vw, 30px); }
.blog-pair { display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: repeat(2, minmax(0, 1fr)); }

.post-card { position: relative; display: grid; overflow: hidden; border-radius: 26px; background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(36, 7, 98, .04), 0 18px 40px -30px rgba(36, 7, 98, .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
/* полоска-градиент сверху карточки проявляется на наведении */
.post-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, var(--brand-violet), #8A4FC4, var(--brand-orange)); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(36, 7, 98, .5); border-color: rgba(91, 45, 142, .28); }
.post-card:hover::after { transform: scaleX(1); }
.post-card__media { position: relative; overflow: hidden; background: #ddd5ec; }
.post-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(26, 6, 71, .28)); pointer-events: none; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.8vw, 38px); }
.post-card h2, .post-card h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: 1.04; letter-spacing: .01em; margin: 0; color: var(--ink); transition: color .25s; }
.post-card:hover h2, .post-card:hover h3 { color: var(--brand-violet); }
.post-card p { margin: 0; color: var(--ink-muted); line-height: 1.62; }

/* служебная строка: лабораторная разметка */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: auto 0 0; padding-top: 16px; border-top: 1px dashed rgba(36, 7, 98, .18);
  font-family: var(--font-ui); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.post-meta__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-orange); }
.post-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; border-radius: 50px;
  background: linear-gradient(135deg, rgba(91, 45, 142, .12), rgba(226, 102, 27, .1)); color: var(--brand-violet);
  font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.post-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c79bff, #5B2D8E); }

/* первая карточка: горизонтальная, картинка слева */
.post-card--lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.post-card--lead .post-card__media { min-height: 380px; }
.post-card--lead .post-card__body { justify-content: center; padding: clamp(26px, 3.6vw, 52px); }
.post-card--lead h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.post-card--lead p { font-size: var(--fs-lead); }
/* парные: картинка сверху */
.post-card--pair .post-card__media { aspect-ratio: 16 / 10; }
.post-card--pair h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.post-card--pair p { font-size: .97rem; }

@media (max-width: 900px) {
  .post-card--lead { grid-template-columns: 1fr; }
  .post-card--lead .post-card__media { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 640px) {
  .blog-pair { grid-template-columns: 1fr; }
  .blog-hero__orbit { width: 300px; right: -150px; top: -40px; }
  /* на узком экране сфера налезала на «Лабораторный журнал» - оставляем только дуги */
  .blog-hero__orbit::after { display: none; }
}

/* ============================================================================
   СТРАНИЦА СТАТЬИ. Белый лист 820px на узорном фоне, колонка текста ~720.
   ============================================================================ */
.article-wrap { max-width: 820px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 24px); }

.crumbs { max-width: 820px; margin: 0 auto; padding: clamp(96px, 11vw, 140px) clamp(18px, 5vw, 24px) 0; font-family: var(--font-ui); font-size: .8rem; color: var(--ink-muted); }
.crumbs a { color: var(--brand-violet); text-decoration: none; border-bottom: 1px solid rgba(91, 45, 142, .3); }
.crumbs a:hover { border-color: var(--brand-violet); }
.crumbs span { opacity: .5; padding: 0 8px; }

.article-head { max-width: 820px; margin: 0 auto; padding: 22px clamp(18px, 5vw, 24px) 0; }
.article-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5.2vw, 3.5rem); line-height: 1; letter-spacing: .005em; text-transform: uppercase; margin: 16px 0 18px; color: var(--brand-violet-deep); }
.article-lead { position: relative; font-size: var(--fs-lead); line-height: 1.6; color: #3d3550; margin: 0 0 22px; padding-left: 18px; }
.article-lead::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--brand-violet), var(--brand-orange)); }
.article-head .post-meta { border-top: 0; padding-top: 0; }

.article-cover { position: relative; max-width: 1100px; margin: clamp(26px, 4vw, 44px) auto clamp(-60px, -5vw, -36px); padding: 0 clamp(18px, 4vw, 40px); z-index: 1; }
.article-cover img { width: 100%; height: auto; border-radius: 28px; display: block; box-shadow: 0 40px 70px -40px rgba(36, 7, 98, .6); }

/* белый лист с текстом статьи заходит под обложку */
.article-body { position: relative; max-width: 820px; background: var(--paper); border-radius: 28px; border: 1px solid var(--line);
  box-shadow: 0 24px 60px -44px rgba(36, 7, 98, .5);
  padding: clamp(80px, 9vw, 112px) clamp(20px, 6vw, 56px) clamp(32px, 5vw, 56px);
  font-size: var(--fs-text); line-height: 1.78; color: #2a2333; }
@media (max-width: 860px) { .article-body { margin: 0 clamp(10px, 3vw, 24px); } }
/* буквица у первого абзаца */
.article-body > p:first-child::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.6em; line-height: .82; margin: 6px 6px 0 0; color: var(--brand-violet); }
.article-body h2 { position: relative; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; text-transform: uppercase; margin: clamp(38px, 5vw, 56px) 0 16px; padding-left: 22px; color: var(--brand-violet-deep); }
.article-body h2::before { content: ""; position: absolute; left: 0; top: .2em; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb27e, var(--brand-orange)); box-shadow: 0 0 0 4px rgba(226, 102, 27, .14); }
.article-body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.12rem, 1.9vw, 1.32rem); text-transform: uppercase; margin: 28px 0 10px; color: var(--brand-violet-deep); }
.article-body p { margin: 0 0 16px; }
.article-body ul { list-style: none; margin: 0 0 20px; padding: 0; }
.article-body li { position: relative; margin-bottom: 12px; padding-left: 28px; }
.article-body li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--brand-violet); }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--brand-violet); text-decoration: underline; text-decoration-color: rgba(91, 45, 142, .35); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: var(--brand-violet); }

/* выделенный тезис - фиолетовая плашка с кавычкой */
.pull { position: relative; margin: clamp(24px, 3vw, 34px) 0; padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 30px) clamp(54px, 6vw, 74px); border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #2d0b6e, #5B2D8E); color: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.18rem, 2.1vw, 1.5rem); line-height: 1.3; text-transform: uppercase; }
.pull::before { content: "\201C"; position: absolute; left: clamp(16px, 2vw, 24px); top: clamp(4px, 1vw, 10px); font-family: Georgia, serif; font-size: clamp(3.6rem, 6vw, 4.6rem); line-height: 1; color: #ffb27e; }
.pull::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); }

/* таблица: шапка фиолетовая, строки зеброй */
.table-scroll { overflow-x: auto; margin: 22px 0; border-radius: 18px; border: 1px solid var(--line); }
.article-body table { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; font-size: .95rem; line-height: 1.5; }
.article-body th, .article-body td { text-align: left; padding: 13px 16px; }
.article-body th { background: var(--brand-violet-deep); color: #fff; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.article-body tbody tr:nth-child(even) { background: #f6f2fb; }
.article-body td:first-child { font-weight: 700; color: var(--brand-violet-deep); }
.article-body tbody tr + tr td { border-top: 1px solid var(--line); }
/* на телефоне таблица ужимается в ширину листа, а не уезжает вбок: при min-width 520
   вторая колонка сравнения пряталась за краем без подсказки (тестировщик 04.10.2026) */
@media (max-width: 640px) {
  .article-body table { min-width: 0; font-size: .84rem; }
  .article-body th, .article-body td { padding: 10px 8px; }
  .article-body th { font-size: .64rem; letter-spacing: .06em; }
}

/* FAQ карточками */
.faq-block { margin: clamp(38px, 5vw, 56px) 0 0; }
.faq-item { margin-top: 12px; padding: 20px 22px; border-radius: 18px; background: #f7f4fb; border: 1px solid var(--line); transition: border-color .25s, background .25s; }
.faq-item:hover { background: #fff; border-color: rgba(91, 45, 142, .3); }
.faq-item h3 { margin: 0 0 8px; font-size: 1.08rem; }
.faq-item p { margin: 0; color: var(--ink-muted); }

/* следующая статья + финальный призыв */
.next-post { max-width: 820px; margin: clamp(28px, 4vw, 44px) auto 0; padding: 0 clamp(18px, 5vw, 24px); }
.next-post__card { display: flex; align-items: center; gap: 20px; padding: 16px 22px 16px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--paper);
  box-shadow: 0 18px 40px -32px rgba(36, 7, 98, .5); transition: border-color .25s, transform .25s; }
.next-post__card:hover { border-color: rgba(91, 45, 142, .35); transform: translateY(-2px); }
.next-post__card img { width: 104px; height: 78px; object-fit: cover; border-radius: 14px; flex: none; }
@media (max-width: 480px) {
  .next-post__card { gap: 14px; padding: 12px 14px 12px 12px; }
  .next-post__card img { width: 72px; height: 56px; }
}
.next-post__label { display: block; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #A8430B; }
.next-post__title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; line-height: 1.2; text-transform: uppercase; margin-top: 4px; color: var(--brand-violet-deep); }

.article-cta { position: relative; overflow: hidden; max-width: 1180px; margin: clamp(52px, 6vw, 88px) auto clamp(52px, 6vw, 80px); border-radius: clamp(24px, 3vw, 36px);
  padding: clamp(44px, 6vw, 80px) clamp(18px, 5vw, 40px); background: linear-gradient(135deg, #1a0647 0%, #2d0b6e 60%, #3c138c 100%); color: #fff; text-align: center; }
@media (max-width: 1220px) { .article-cta { margin-left: clamp(10px, 2.4vw, 20px); margin-right: clamp(10px, 2.4vw, 20px); } }
.article-cta > * { position: relative; z-index: 1; }
.article-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.55rem, 3.5vw, 2.6rem); text-transform: uppercase; margin: 0 0 12px; line-height: 1.04; }
.article-cta p { max-width: 540px; margin: 0 auto 24px; color: rgba(255, 255, 255, .8); }
.article-cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* пигментная пыль - два тихих пятна, без анимации */
.article-cta::before, .article-cta::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.article-cta::before { width: 320px; height: 320px; left: -90px; bottom: -150px; background: radial-gradient(circle, rgba(226, 102, 27, .4), transparent 68%); }
.article-cta::after { width: 380px; height: 380px; right: -120px; top: -170px; background: radial-gradient(circle, rgba(138, 79, 196, .55), transparent 66%); }

/* ---------- блок блога на главной (старая главная, оставлен для совместимости) ---------- */
.homeblog { padding: clamp(64px, 8vw, 116px) 0; background: var(--bg-light, #EAEAEA); }
.homeblog__inner { max-width: var(--container, 1200px); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.homeblog__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: clamp(24px, 3vw, 40px); }
.homeblog__title { font-family: var(--font-display, sans-serif); font-size: clamp(2.2rem, 6vw, 4rem); line-height: .98; text-transform: uppercase; margin: 12px 0 10px; }
.homeblog__lead { max-width: 520px; color: var(--ink-muted, #5A5766); line-height: 1.6; margin: 0; }
.homeblog__all { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 50px; border: 1px solid rgba(18,16,26,.22); font-family: var(--font-ui, sans-serif); font-weight: 600; font-size: .88rem; transition: background .25s, color .25s, border-color .25s; }
.homeblog__all:hover { background: var(--ink, #12101A); color: #fff; border-color: var(--ink, #12101A); }

@media (prefers-reduced-motion: reduce) {
  .post-card, .post-card::after, .post-card__media img, .next-post__card { transition: none; }
  .post-card:hover, .next-post__card:hover { transform: none; }
  .post-card:hover .post-card__media img { transform: none; }
}

/* Ссылка «заказать» из статьи на страницу услуги. Заведено 21.09.2026:
   статья отвечает «как выбрать», страница услуги - «что заказать», и они
   обязаны ссылаться друг на друга явно, иначе Google выберет одну из двух
   и обе просядут. */
.article-cta .blog-order { flex-basis: 100%; max-width: none; margin: 18px auto 0; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .75); }
.article-cta .blog-order a { color: #ffb27e; text-decoration: underline; text-underline-offset: 3px; }