/* ── blog-base.css ─────────────────────────────── */
/* blog-base.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope * { box-sizing:border-box;margin:0;padding:0 }
.blog-scope { scroll-behavior:smooth }
.blog-scope {
    font-family: var(--font-b);
    color: var(--ink);
    background: var(--white);
    line-height: 1.55;
    font-size: 16px;
    padding-top: var(--site-header-h);
}
.blog-scope a { color:inherit;text-decoration:none }
.blog-scope .wrap { max-width:1160px;margin:0 auto;padding:0 22px }
.blog-scope .h2 { font-size:28px;margin-bottom:10px;letter-spacing:-.4px;font-family:var(--font-h);color:var(--site-heading) }
.blog-scope .field { margin-bottom:13px }
.blog-scope .field label { display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:5px }
.blog-scope .field input { width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius: var(--site-radius-sm);font-size:15px;font-family:var(--font-b) }
.blog-scope .field input:focus { outline:none;border-color:var(--primary) }
.blog-scope header { position:sticky;top:0;z-index:60;background:rgba(255,255,255,.98);backdrop-filter:blur(8px);border-bottom:1px solid var(--line) }
.blog-scope .featured { padding:6px 0 8px }


/* ── article-card.css ─────────────────────────────── */
/* article-card.css — КОМПОЗИТНИЙ блок: картка матеріалу (блок 1.5 LIGA-9360).

   Ручний файл, НЕ генерується build-blocks.py (він його пропускає).
   Такої картки в liga-ds немає — це композит блогу, тому збирається з атомів ДС
   (<ld-badge> категорії, <ld-avatar> автора) на токенах ДС.

   Правило перекладу: розміри прототипу округлені до найближчого кроку шкали ДС
   (--space-*: 2/4/6/8/12/16/20/24/32; --typo-sizes-h*: 11/12/14/16/18/20/24).
   Власних px тут немає — усе через токени, щоб бренд і щільність мінялися
   централізовано.

   Склад за тікетом: зображення 16:9 (alt обов'язковий) · бейдж категорії · дата ·
   час читання · заголовок (клемп 3 рядки) · опис до 200 знаків. Футера з
   автором у картці більше немає (рев'ю блогу, LIGA-11426, п. 2.2).
*/

.blog-scope article.card {
  background: var(--cntnr-bg-primary-default);
  border: 1px solid var(--cntnr-border-default);
  border-radius: var(--cntnr-corner-large);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Підняття при наведенні — НЕЙТРАЛЬНА висота ДС.
   Було `var(--elevation-2, …)`: токена з таким іменем у ДС немає, тож завжди
   спрацьовував запасний ліловий варіант. Справжнє ім'я —
   --shadow-z-index-eleveation-2-* (див. --ds-elevation-2 у variables.css). */
.blog-scope article.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-elevation-2);
}

/* Заглушка зображення. Реальні hero — 1200×630 WebP, картки 16:9 (тікет);
   поки джерело зображень не визначене, лишається градієнт-плейсхолдер. */
.blog-scope .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-500));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-alternative);
  font-size: var(--typo-sizes-h200);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-scope .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-scope .card-body {
  padding: var(--space-200) var(--space-200) var(--space-250);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-scope .meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  font-size: var(--typo-sizes-h200);
  color: var(--text-subtlest);
  margin-bottom: var(--space-150);
  flex-wrap: wrap;
}

    .blog-scope .card h3 {
        font-family: var(--liga-font-family);
        font-size: var(--typo-sizes-h450);
        color: var(--text-default);
        line-height: 1.35;
        margin: 0;
        /* Клемп 3 рядки (рев'ю блогу, п. 2.1): у два рядки не влазила жодна
     змістовна назва — картка показувала «Кінцевий бенефіціарний...». Місце
     під третій рядок звільнив футер з автором, прибраний з картки (п. 2.2).
     Назву, довшу за три рядки, повністю показує підказка при наведенні
     (`.card-title[data-tip]`, blog-extra.css). Слайдер «Обране редакцією»
     має власний клемп на 2 рядки (.feat-card h3) — його не чіпаємо. */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
.blog-scope .card h3 a { color: inherit; text-decoration: none; }
.blog-scope .card h3 a:hover { color: var(--text-accent); }

.blog-scope .card .desc {
  font-size: var(--typo-sizes-h300);
  color: var(--text-subtle);
  margin-top: var(--space-150);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-scope .card-foot {
  margin-top: var(--space-200);
  border-top: 1px solid var(--cntnr-border-default);
  padding-top: var(--space-150);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-100);
  font-size: var(--typo-sizes-h200);
  color: var(--text-subtlest);
}

.blog-scope .author {
  display: flex;
  align-items: center;
  gap: var(--space-100);
  font-weight: 600;
  color: var(--text-subtle);
}

/* клієнтська фільтрація за тегами (демо у прототипі) */
.blog-scope .card.is-hidden { display: none; }


/* ── articles-grid.css ─────────────────────────────── */
/* articles-grid.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .cols { display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start;padding-bottom:20px }
/* Рев'ю #11: 3 колонки (2 ряди по 3 = 6 карток). Смуга CTA підписки
   .nl-inline вставляється кроком rv-11 між рядом 1 і 2 (span на всю сітку). */
.blog-scope .grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px }

@media(max-width:980px) {
  .blog-scope .cols { grid-template-columns:1fr }
}

@media(max-width:760px) {
  .blog-scope .grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:480px) {
  .blog-scope .grid { grid-template-columns:1fr }
}


/* ── author-page.css ─────────────────────────────── */
/* author-page.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .stats { display:flex;gap:12px;white-space:nowrap }
.blog-scope .author-hero { display:flex;gap:26px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius: var(--radius-lg);padding:28px;box-shadow:var(--shadow-s);margin-top:24px }
.blog-scope .author-hero .big-ava { width:96px;height:96px;border-radius: 50%;background:linear-gradient(135deg,var(--violet-1),var(--violet-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;font-family:var(--font-h);flex-shrink:0 }
.blog-scope .author-hero h1 { font-size:28px;font-family:var(--font-h);color:var(--site-heading);letter-spacing:-.02em }
.blog-scope .author-hero .role { color:var(--primary);font-weight:700;font-size:14px;margin-top:4px }
.blog-scope .author-hero .bio { color:var(--muted);font-size:15px;margin-top:10px;max-width:640px }
.blog-scope .author-hero .soc { display:flex;gap:8px;margin-top:14px }
.blog-scope .author-hero .soc a { width:32px;height:32px;border-radius: 50%;background:var(--lav-2);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700 }
.blog-scope .author-hero .soc a:hover { background:var(--primary);color:#fff }
.blog-scope .expert-badge { display:inline-flex;align-items:center;gap:6px;background:var(--lav-2);color:var(--primary);font-size:12px;font-weight:700;padding:5px 12px;border-radius: var(--site-radius-card);margin-left:10px;vertical-align:middle }
.blog-scope .authors-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:6px 0 30px }
.blog-scope .author-card { background:#fff;border:1px solid var(--line);border-radius: var(--radius);padding:24px;text-align:center;box-shadow:var(--shadow-s);transition:transform .15s ease,box-shadow .15s ease;display:block }
.blog-scope .author-card:hover { transform:translateY(-3px);box-shadow:var(--shadow) }
.blog-scope .author-card .big-ava { width:76px;height:76px;border-radius: 50%;background:linear-gradient(135deg,var(--violet-1),var(--violet-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;font-family:var(--font-h);margin:0 auto 14px }
.blog-scope .author-card b { font-family:var(--font-h);font-size:17px;color:var(--site-heading);display:block }
.blog-scope .author-card .role { color:var(--primary);font-size:13px;font-weight:600;margin-top:4px }
.blog-scope .author-card p { font-size:13.5px;color:var(--muted);margin-top:10px }
.blog-scope .author-card .cnt-art { display:inline-block;margin-top:12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;width:100% }

@media(max-width:920px) {
  .blog-scope .authors-grid { grid-template-columns:repeat(2,1fr) }
}

@media(max-width:640px) {
  .blog-scope .authors-grid { grid-template-columns:1fr }
  .blog-scope .author-hero { flex-direction:column }
}


/* ── cta-final.css ─────────────────────────────── */
/* cta-final.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .cta-final { padding:56px 0;text-align:center }
.blog-scope .cta-final h2 { font-family:var(--font-h);font-size:30px;color:var(--site-heading);letter-spacing:-.4px;margin-bottom:10px }
.blog-scope .cta-final p { color:var(--muted);max-width:560px;margin:0 auto 24px }
.blog-scope .cta-final .cta-row { display:flex;gap:14px;justify-content:center;flex-wrap:wrap }


/* ── featured-slider.css ─────────────────────────────── */
/* featured-slider.css — блок макета блогу.

   ⚠️ Рев'ю #23 (11.08.2026): «наразі це урізані версії нижніх картинок —
   що на них потрапляє, рандом». Причина була саме така: у .feat-card .img
   стояла ФІКСОВАНА висота 120px, а картинки 16:9 (1344×768), тож object-fit
   :cover обрізав їх по центру навмання. Тепер висоту задає пропорція
   aspect-ratio:16/9 — та сама, що в .thumb на картках статей, тож
   обкладинка в слайдері й на картці показують один і той самий кадр.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .featured-head { display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px }
.blog-scope .slider-nav { display:flex;gap:8px }
.blog-scope .slider-nav button { width:36px;height:36px;border-radius: 50%;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-size:16px;color:var(--site-heading) }
.blog-scope .slider-nav button:hover { border-color:var(--primary);color:var(--primary) }
.blog-scope .blog-slider { display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-ms-overflow-style:none;scrollbar-width:none }
.blog-scope .blog-slider::-webkit-scrollbar { display:none }
.blog-scope .feat-card { scroll-snap-align:start;flex:0 0 460px;background:linear-gradient(160deg,var(--site-heading),var(--site-accent-hover));color:#fff;border-radius: var(--radius);overflow:hidden;display:flex;flex-direction:column;min-height:250px;box-shadow:var(--shadow);position:relative }
.blog-scope .feat-card .img { aspect-ratio:16/9;background:linear-gradient(135deg,var(--site-accent-hover),var(--site-accent));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.08em;text-transform:uppercase }
.blog-scope .feat-card .body { padding:16px 20px 18px;display:flex;flex-direction:column;flex:1 }
.blog-scope .feat-card .tag { font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--site-lav-2);font-weight:700 }
/* Клемп, як у картках сітки: 2 рядки заголовка й 3 ліда. Без нього картки
   слайдера розходились не тільки по вигляду — заміряно на «Обраному
   редакцією»: лід сусідніх карток 57, 80 і 339 пікселів, тобто третя картка
   виносила дату й час читання за свою межу. */
.blog-scope .feat-card h3 {
  font-family:var(--font-h);font-size:18px;margin-top:8px;line-height:1.3;color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* flex:1 тут БІЛЬШЕ НЕМА, і саме через клемп: розтягнутий лід виростав до
   висоти картки, і три рядки в нього просто вміщались — обрізати було нічого
   (заміряно: 316px, тобто 15 рядків тексту). Порожнє місце тепер забирає
   .meta через margin-top:auto — вона й так стоїть останньою. */
.blog-scope .feat-card p {
  font-size:13px;color:var(--site-lav);margin-top:8px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.blog-scope .feat-card .meta { margin-top:auto;padding-top:12px;font-size:12px;color:var(--site-lav-2);display:flex;gap:14px }

@media(max-width:640px) {
  .blog-scope .feat-card { flex:0 0 86vw }
}


/* ── filters.css ─────────────────────────────── */
/* filters.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .filters { padding:26px 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-bottom:1px solid var(--line);margin-bottom:28px }
.blog-scope .chips { display:flex;flex-wrap:wrap;gap:8px }

/* ⚠️ Без цього рядка приховування чипів НЕ ПРАЦЮЄ.
   Атрибут `hidden` ховає елемент правилом браузера `[hidden]{display:none}`,
   а воно має найнижчий пріоритет — будь-яке авторське `display` його б'є.
   У .ld-chip стоїть `display:inline-flex`, тож чипи з `hidden` лишались на
   екрані: JS чесно проставляв атрибут (перевірено — 6 із 10), а видимими
   були всі десять. Симптом виглядав як «кнопка працює навпаки». */
.blog-scope .chips .ld-chip[hidden] { display: none }
.blog-scope .ld-tabs__list { display:flex;gap:2px;margin-left:auto }

@media(max-width:640px) {
  .blog-scope .ld-tabs__list { margin-left:0 }
}

/* Локальна правка L1 (Serg, 04.08.2026): хештег перед назвою — як у хмарі
   тегів у сайдбарі. Символ додає CSS, а не розмітка: так видимий контент
   сторінки не змінюється. Чіп «Всі теги» — керування, тож без «#». */
.blog-scope .chips .ld-chip:not([data-tag="all"])::before { content:"#";opacity:.55;margin-right:1px }

/* ── Рев'ю #25 (11.08.2026): «дати на вибір всього 3 теги, всі інші за
   кнопкою всі теги». Розкриття НА МІСЦЕ (рішення Serg 12.08.2026).
   Кнопка навмисно НЕ називається «Всі теги»: чип із такою назвою уже є в
   тому ж рядку і означає протилежне — скинути фільтр. Два однакові написи
   поруч із різним змістом читались би як помилка.

   Локальний коментар Serg 12.08.2026: «хай ця кнопка буде в стилі така сама,
   як самі теги, і має якось влазити в рядок». Перша версія була окремою
   пунктирною кнопкою заввишки 34px проти чипів 40px — вона й «не влазила»:
   менша за сусідів і на іншому фоні. Тепер геометрію вона бере тим самим
   правилом, що й чипи (review-fixes.css), а фон і колір — ті самі токени
   ДС, що в .ld-chip--subtle.ld-chip--tone-primary.
   Класу .ld-chip кнопці НЕ даємо навмисно: тоді їй дописався б «#» із
   правила вище, а «#Ще теги» — це вже не назва дії. */
.blog-scope .chips-more {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-050);
  box-sizing: border-box;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--cntnr-corner-infinity);
  background: var(--status-trasperent-primary);
  color: var(--text-accent);
  font-family: var(--liga-font-family);
  font-weight: 600;
  letter-spacing: .25px;
  cursor: pointer;
  transition: background-color 160ms ease, filter 120ms ease;
}
/* Шеврон — єдина відмінність від тега: показує, що це дія, а не тема.
   ⚠️ Базова іконка ДС `ic--chevron` дивиться ВПРАВО (›), а стрілка вправо на
   розкривачі читається як «перейти кудись», а не «показати більше». Тому
   доводимо її до низу поворотом на 90°, а в розкритому стані — вгору. */
.blog-scope .chips-more .ic { font-size: .8em; transform: rotate(90deg); transition: transform .18s ease }
.blog-scope .chips-more[aria-expanded="true"] .ic { transform: rotate(-90deg) }
.blog-scope .chips-more:hover { filter: brightness(.97) }
.blog-scope .chips-more:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px }


/* ── lead-modal.css ─────────────────────────────── */
/* lead-modal.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .ov { position:fixed;inset:0;background:rgba(27,24,48,.6);display:none;align-items:center;justify-content:center;z-index:10000;padding:20px }
.blog-scope .ov.show { display:flex }
.blog-scope .modal { background:#fff;border-radius: var(--site-radius-card);max-width:520px;width:100%;max-height:92vh;overflow:auto;padding:30px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3) }
.blog-scope .modal h3 { font-size:22px;margin-bottom:6px;font-family:var(--font-h) }
.blog-scope .modal .x { position:absolute;top:14px;right:18px;border:none;background:none;font-size:28px;color:var(--muted);cursor:pointer;line-height:1 }


/* ── newsletter.css ─────────────────────────────── */
/* newsletter.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .form-note { font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center }
.blog-scope .newsletter { background:var(--lav);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0 }
/* Рев'ю #11: інлайн-варіант — смуга підписки МІЖ рядами карток. Живе
   всередині .grid, розтягнута на всі колонки (grid-column:1/-1). Не повнобічна,
   а картка на токенах ДС, щоб не рвати сітку. */
.blog-scope .grid > .nl-inline { grid-column:1 / -1;background:var(--lav);border:1px solid var(--line);border-radius:var(--site-radius-card);padding:28px 32px;margin:2px 0 }
.blog-scope .nl-inline .nl-in { align-items:center }
.blog-scope .nl-inline .nl-in h2 { font-size:22px }
.blog-scope .nl-in { display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center }
.blog-scope .nl-in h2 { font-family:var(--font-h);font-size:26px;color:var(--site-heading);letter-spacing:-.4px }
.blog-scope .nl-in .sub { color:var(--muted);font-size:15px;margin-top:8px;max-width:460px }
.blog-scope .nl-form { display:flex;gap:10px }
.blog-scope .nl-form input { flex:1;padding:13px 16px;border:1.5px solid var(--line);border-radius: var(--site-radius-pill);font-size:15px;font-family:var(--font-b);background:#fff }
.blog-scope .nl-form input:focus { outline:none;border-color:var(--primary) }
.blog-scope .nl-consent { font-size:12px;color:var(--muted);margin-top:10px;display:flex;gap:8px;align-items:flex-start }
.blog-scope .nl-consent input { margin-top:3px }

@media(max-width:640px) {
  .blog-scope .nl-in { grid-template-columns:1fr }
  .blog-scope .nl-form { flex-direction:column }
}


/* ── page-hero.css ─────────────────────────────── */
/* page-hero.css — КОМПОЗИТНИЙ блок: шапка сторінки (блок 1.2 / 2.1 LIGA-9364).

   Ручний файл, НЕ генерується build-blocks.py.
   Eyebrow + H1 + підзаголовок; на сторінці категорії — ще SEO-інтро 200–500 знаків
   (з адмінки), яке за тікетом виводиться ЛИШЕ на першій сторінці пагінації.

   Відступи й розміри — кроками шкали ДС. Виняток свідомий: розмір H1 бере
   формулу САЙТУ (--site-h1-size, .hero__title з теми liga360), бо заголовок
   сторінки має збігатися з рештою ligazakon.net, а не зі шкалою продуктової ДС.
*/

.blog-scope .blog-hero {
  padding: var(--space-300) 0 var(--space-400);
}

.blog-scope .eyebrow {
  color: var(--text-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--typo-sizes-h300);
  margin-bottom: var(--space-150);
}

.blog-scope .blog-hero h1 {
  font-size: var(--site-h1-size);          /* формула сайту, див. вище */
  font-family: var(--liga-font-family);
  color: var(--text-default);
  letter-spacing: -.02em;
}

.blog-scope .blog-hero p {
  max-width: 640px;
  color: var(--text-subtle);
  font-size: var(--typo-sizes-h400);
  margin-top: var(--space-150);
}

/* SEO-інтро категорії: підкладка — «прозорий» статусний токен ДС, тому
   автоматично слідує за брендом (на сайті це світла лавандова плашка). */
/* Селектор із тегом навмисно: сусіднє `.blog-hero p { max-width: 640px }` має
   специфічність (0,1,1) і перебивало голий `.cat-intro` (0,1,0) — саме тому
   перша спроба зняти обмеження не спрацювала. */
.blog-scope .blog-hero p.cat-intro,

.blog-scope .cat-intro {
  /* На всю ширину блока (правки Serg 31.07 і 03.08.2026). Спершу прибрали
     власний max-width:760px — але блок лишався 640px, бо .cat-intro це <p>
     ВСЕРЕДИНІ .blog-hero, а там є `.blog-hero p { max-width: 640px }`. Тому межу треба
     знімати явно, інакше успадковане обмеження перемагає.
     Довжину рядка тримає контейнер 1140px, окрема межа для цього абзацу не
     потрібна: це плашка-інтро секції, а не колонка тексту. */
  max-width: none;
  color: var(--text-subtle);
  font-size: var(--typo-sizes-h400);
  margin-top: var(--space-200);
  padding: var(--space-200) var(--space-250);
  background: var(--status-trasperent-primary);
  border-left: var(--space-050) solid var(--text-active);
  border-radius: var(--cntnr-corner-normal);
}


/* ── pagination.css ─────────────────────────────── */
/* pagination.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .pagination { display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 0 40px }
.blog-scope .loadmore button { padding:12px 30px;border:1.5px solid var(--primary);background:transparent;color:var(--primary);border-radius: var(--site-radius-pill);font-size:14px;cursor:pointer;font-weight:700 }
.blog-scope .loadmore button:hover { background:var(--primary);color:#fff }


/* ── sidebar.css ─────────────────────────────── */
/* sidebar.css — КОМПОЗИТНИЙ блок: сайдбар (блоки 1.7 промо-банер і 1.8 хмара тегів).

   Ручний файл, НЕ генерується build-blocks.py.
   За тікетом: desktop-only, sticky при скролі; на mobile — у потоці після сітки.
   Промо керується з адмінки (HTML-блок або зображення + посилання).

   Атоми ДС всередині: <ld-tag> у хмарі тегів, <ld-badge> у банері,
   кнопка — САЙТОВА (.btn), за рішенням про єдину систему кнопок.
*/

.blog-scope .sidebar {
    /* 118px = висота хедера (79) + стрічка категорій; обидва sticky */
    position: sticky;
    top: calc(var(--site-header-h) + 70px);
    display: flex;
    flex-direction: column;
    gap: var(--space-250);
    padding-bottom: 10px;
}

/* ── 1.7 промо-банер ─────────────────────────────────────────────── */
.blog-scope .sb-banner {
  background: linear-gradient(135deg,
              var(--color-primary-600) 0%,
              var(--color-primary-500) 55%,
              var(--color-primary-400) 120%);
  border-radius: var(--cntnr-corner-large);
  padding: var(--space-300);
  color: var(--text-alternative);
  /* Банер — єдина «піднята» поверхня сайдбару; висота нейтральна, з ДС
     (--elevation-2 у liga-ds не існує, справжнє ім'я — див. variables.css). */
  box-shadow: var(--ds-elevation-2);
}

.blog-scope .sb-banner h3 {
  font-family: var(--liga-font-family);
  font-size: var(--typo-sizes-h500);
  line-height: 1.3;
  color: var(--text-alternative);
  margin: 0;
}

.blog-scope .sb-banner p {
  font-size: var(--typo-sizes-h300);
  color: var(--text-alternative);
  opacity: .85;
  margin: var(--space-150) 0 var(--space-200);
}

/* Бейдж ДС стоїть на ФІОЛЕТОВОМУ градієнті, а тони ДС розраховані на світлий
   фон — світла плашка на фіолетовому дала б поганий контраст. Тому в межах
   банера перекриваємо на напівпрозорий білий (адаптація композита, не правка ДС). */
/* Специфічність: у ДС правило `ld-badge.ld-badge--subtle.ld-badge--tone-primary`
   має 3 класи+тег, і `.sb-banner ld-badge` його не перебивало (ld-*.css ще й
   підключений пізніше). Тому повторюємо модифікатори. */
.blog-scope .sb-banner ld-badge.ld-badge--subtle.ld-badge--tone-primary {
  background: rgba(255, 255, 255, .16);
  color: var(--text-alternative);
}

.blog-scope .sb-banner .btn {
  background: var(--cntnr-bg-primary-default);
  color: var(--text-accent);
  width: 100%;
  min-height: 44px;
  font-size: var(--typo-sizes-h300);
}

/* ── картка сайдбару ─────────────────────────────────────────────── */
.blog-scope .sb-card {
  background: var(--cntnr-bg-primary-default);
  border: 1px solid var(--cntnr-border-default);
  border-radius: var(--cntnr-corner-large);
  padding: var(--space-250);
}

.blog-scope .sb-card h3 {
  font-family: var(--liga-font-family);
  font-size: var(--typo-sizes-h400);
  color: var(--text-default);
  margin: 0 0 var(--space-150);
}

/* ── 1.8 хмара тегів ─────────────────────────────────────────────── */
.blog-scope .tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-075);
}

/* Кожен тег — компонент ДС <ld-tag> з посиланням усередині: тег стилізує сам
   елемент, а лінк на /blog/tag/{slug}/ обов'язковий за SEO-вимогою тікета. */
.blog-scope .tagcloud ld-tag { cursor: pointer; }
.blog-scope .tagcloud ld-tag a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 980px) {
  /* mobile: сайдбар іде в потоці після сітки (вимога тікета) */
  .blog-scope .sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .blog-scope .sidebar > * { flex: 1; min-width: 260px; }
}

/* Локальна правка L2 (Serg, 04.08.2026): у хмари тегів не було ЖОДНОГО
   стану наведення — тег виглядав як звичайний текст. Даємо той самий
   принцип, що й у .sb-link:hover: підкладка світлішає, текст в акцент. */
.blog-scope .tagcloud ld-tag { transition:background-color .15s, color .15s, border-color .15s }
.blog-scope .tagcloud ld-tag:hover { background:var(--site-lav-2);color:var(--site-accent-hover);border-color:var(--site-lav-2) }
.blog-scope .tagcloud ld-tag:hover a { color:var(--site-accent-hover) }
.blog-scope .tagcloud ld-tag a:focus-visible { outline:2px solid var(--site-accent);outline-offset:2px;border-radius:4px }


/* ── search.css ─────────────────────────────── */
/* search.css — блок макета блогу.
   Стилі виділені з прототипу Jira (LIGA-9364) і переведені на
   токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter.
   Згенеровано shared/build-blocks.py — правити тут, не в index.html. */

.blog-scope .searchbar { display:flex;gap:10px;margin-bottom:20px; }
.blog-scope .searchbar input { flex:1;padding:14px 18px;border:1.5px solid var(--line);border-radius: var(--site-radius-pill);font-size:15.5px;font-family:var(--font-b) }
.blog-scope .searchbar input:focus { outline:none;border-color:var(--primary) }
.blog-scope .search-meta { font-size:14px;color:var(--muted);margin:22px 0 4px }
.blog-scope .search-meta b { color:var(--site-heading) }


/* ── search-empty.css ─────────────────────────────── */
/* =====================================================================
   search-empty.css — порожній стан пошуку («нічого не знайдено»).

   Окремий файл, а не доповнення до search.css: той ГЕНЕРУЄТЬСЯ
   build-blocks.py (див. його карту блоків, ключ 'search'), тож дописане
   туди руками змило б наступною перегенерацією.
   Підключається лише там, де стан справді є — умовним рядком у
   distribute.py по наявності класу `empty-state` у розмітці.

   Сторінку-стан збирає `shared/make-search-empty.py` зі сторінки пошуку,
   тому правити треба ТАМ і тут, а не в готовому index.html.
   ===================================================================== */

/* Блок стоїть усередині .grid (3 колонки) і займає всю її ширину — той самий
   прийом, що в смуги підписки .nl-inline. Так стан не рве сітку сторінки. */
.blog-scope .grid > .empty-state {
  grid-column: 1 / -1;
  /* НЕ білий: сторінка пошуку теж біла, і картка трималася б на самій
     волосині бордера — для стану, який має бути помічений, це занадто тихо.
     #F8F7FF — саме той тон, яким ligazakon.net заливає секції на ВНУТРІШНІХ
     сторінках (перевірено на /price), тож блок читається як блок і при цьому
     лишається в мові сайту, а не стає ще однією білою карткою. */
  background: var(--site-tint-pale);
  border: 1px solid var(--line);
  border-radius: var(--site-radius-card);
  padding: 44px 32px 38px;
  text-align: center;
}

/* Плашка під іконку — та сама мова, що й у блоці дайджесту (.nl-tile):
   72×72, пастельний градієнт сайту. Свідомо НЕ робив її більшою «бо це
   порожній стан»: один розмір плашки на весь макет читається як система,
   два розміри — як випадковість. */
.blog-scope .empty-state .empty-ico {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: var(--site-radius-card);
  background-image: var(--site-grad-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--site-accent);
}

.blog-scope .empty-state h2 {
  font-family: var(--font-h);
  font-size: 24px;
  letter-spacing: -.3px;
  color: var(--site-heading);
  margin: 0 0 10px;
}
/* Сам запит виділяємо, щоб з екрана було видно, ПО ЧОМУ не знайшлось —
   інакше користувач не розуміє, що саме виправляти. */
.blog-scope .empty-state h2 q { font-style: normal; color: var(--site-accent) }

.blog-scope .empty-state .empty-lead {
  color: var(--muted);
  font-size: 15px;
  max-width: 52ch;
  margin: 0 auto;
}

/* Підказки — не декор: це головна робота порожнього стану. Тому список
   лівопіднятий у центрованому блоці (текст читається зліва, блок стоїть
   по центру), а не «розкиданий» по центру рядками різної довжини. */
.blog-scope .empty-state .empty-tips {
  list-style: none;
  padding: 0;
  margin: 22px auto 26px;
  max-width: 420px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.blog-scope .empty-state .empty-tips li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}
.blog-scope .empty-state .empty-tips .ic {
  color: var(--site-accent);
  margin-top: .28em;
  flex: none;
}

.blog-scope .empty-state .empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ряду тегів «Або оберіть тему» тут немає навмисно: він дублював сайдбарну
   картку «Часто шукають» тими самими чотирма тегами. Прибрано разом із
   розміткою (див. коментар у make-search-empty.py), правил під нього теж
   не лишаємо — мертвий CSS це такий самий борг, як мертвий код. */

/* Підпис над блоком популярних матеріалів: він іде ПІСЛЯ порожнього стану,
   і без заголовка картки читались би як «результати», яких нема. */
.blog-scope .grid > .empty-more-title {
  grid-column: 1 / -1;
  font-family: var(--font-h);
  font-size: 18px;
  color: var(--site-heading);
  margin: 10px 0 -6px;
}

@media (max-width: 600px) {
  .blog-scope .grid > .empty-state { padding: 32px 20px 28px }
  .blog-scope .empty-state h2 { font-size: 20px }
  .blog-scope .empty-state .empty-actions .btn,

  .blog-scope .empty-state .empty-actions .btn-primary,

  .blog-scope .empty-state .empty-actions .btn-outline { width: 100% }
}


/* ── ld-avatar.css ─────────────────────────────── */
/* ld-avatar.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.5 — аватар автора у футері картки; сторінка автора
   Джерело: liga-ds/src/lib/avatar/avatar.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-avatar__img
   Модифікатори: ld-avatar--lg, ld-avatar--md, ld-avatar--sm, ld-avatar--square, ld-avatar--xl
*/

.blog-scope ld-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
      overflow: hidden;
      background-color: var(--cntnr-bg-third-default);
      color: var(--text-subtle);
      font-family: var(--liga-font-family);
      font-weight: 600;
      line-height: 1;
      border-radius: var(--cntnr-corner-infinity);
      user-select: none;
    }
    .blog-scope ld-avatar.ld-avatar--square { border-radius: var(--cntnr-corner-normal); }
    .blog-scope .ld-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .blog-scope ld-avatar.ld-avatar--sm { width: 24px; height: 24px; font-size: 11px; }
    .blog-scope ld-avatar.ld-avatar--md { width: 32px; height: 32px; font-size: 12px; }
    .blog-scope ld-avatar.ld-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
    .blog-scope ld-avatar.ld-avatar--xl { width: 48px; height: 48px; font-size: 16px; }


/* ── ld-badge.css ─────────────────────────────── */
/* ld-badge.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.5 — бейдж категорії на картці
   Джерело: liga-ds/src/lib/badge/badge.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Модифікатори: ld-badge--dot, ld-badge--size-md, ld-badge--size-sm, ld-badge--solid, ld-badge--subtle, ld-badge--tone-danger, ld-badge--tone-info, ld-badge--tone-neutral, ld-badge--tone-primary, ld-badge--tone-success, ld-badge--tone-warning
*/

.blog-scope ld-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-050);
      width: fit-content;
      font-family: var(--liga-font-family);
      border-radius: var(--cntnr-corner-infinity);
      white-space: nowrap;
      box-sizing: border-box;
    }
    .blog-scope ld-badge.ld-badge--size-sm {
      min-height: 18px;
      padding: 0 var(--space-075);
      font-size: 11px;
      line-height: 14px;
      font-weight: 600;
      letter-spacing: 0.18px;
    }
    .blog-scope ld-badge.ld-badge--size-md {
      min-height: 24px;
      padding: 0 var(--space-100);
      font-size: 12px;
      line-height: 15px;
      font-weight: 600;
      letter-spacing: 0.25px;
    }
    .blog-scope ld-badge.ld-badge--dot {
      width: 8px; height: 8px;
      min-height: 0; padding: 0;
      border-radius: var(--cntnr-corner-infinity);
    }

    /* solid */
    .blog-scope ld-badge.ld-badge--solid.ld-badge--tone-primary { background: var(--status-filled-primary);  color: var(--text-alternative); }
    .blog-scope ld-badge.ld-badge--solid.ld-badge--tone-success { background: var(--status-filled-positive); color: var(--text-alternative); }
    .blog-scope ld-badge.ld-badge--solid.ld-badge--tone-danger { background: var(--status-filled-negative); color: var(--text-alternative); }
    .blog-scope ld-badge.ld-badge--solid.ld-badge--tone-warning { background: var(--status-filled-warning);  color: var(--text-alternative); }
    .blog-scope ld-badge.ld-badge--solid.ld-badge--tone-info { background: var(--status-filled-blue);     color: var(--text-alternative); }
    .blog-scope ld-badge.ld-badge--solid.ld-badge--tone-neutral { background: var(--status-filled-passive);  color: var(--text-alternative); }

    /* subtle */
    .blog-scope ld-badge.ld-badge--subtle.ld-badge--tone-primary { background: var(--status-trasperent-primary);  color: var(--text-accent); }
    .blog-scope ld-badge.ld-badge--subtle.ld-badge--tone-success { background: var(--status-trasperent-positive); color: var(--text-success); }
    .blog-scope ld-badge.ld-badge--subtle.ld-badge--tone-danger { background: var(--status-trasperent-negative); color: var(--text-danger); }
    .blog-scope ld-badge.ld-badge--subtle.ld-badge--tone-warning { background: var(--status-trasperent-warning);  color: var(--text-warning); }
    .blog-scope ld-badge.ld-badge--subtle.ld-badge--tone-info { background: var(--status-trasperent-blue);     color: var(--text-information); }
    .blog-scope ld-badge.ld-badge--subtle.ld-badge--tone-neutral { background: var(--status-trasperent-passive);  color: var(--text-default); }


/* ── ld-breadcrumbs.css ─────────────────────────────── */
/* ld-breadcrumbs.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.2 — хлібні крихти на всіх внутрішніх сторінках
   Джерело: liga-ds/src/lib/breadcrumbs/breadcrumbs.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-bc
     • ld-bc__item
     • ld-bc__item ld-bc__item--link
     • ld-bc__li
     • ld-bc__list
     • ld-bc__sep
*/

.blog-scope .ld-bc { font-family: var(--liga-font-family); }
    .blog-scope .ld-bc__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
    .blog-scope .ld-bc__li { display: inline-flex; align-items: center; }
    .blog-scope .ld-bc__item { display: inline-flex; align-items: center; gap: var(--space-075); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.15px; border-radius: var(--cntnr-corner-small, 6px); color: var(--text-subtle); text-decoration: none; }
    .blog-scope .ld-bc__item--link { color: var(--link-default); cursor: pointer; transition: color 160ms ease; }
    .blog-scope .ld-bc__item--link:hover { color: var(--text-click); text-decoration: underline; }
    .blog-scope .ld-bc__item--link:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
    .blog-scope .ld-bc__item--current { color: var(--text-default); font-weight: 600; }
    .blog-scope .ld-bc__sep { display: inline-flex; align-items: center; justify-content: center; margin: 0 var(--space-075); color: var(--icon-subtlest); }
    .blog-scope .ld-bc__sep svg { display: block; }


/* ── ld-checkbox.css ─────────────────────────────── */
/* ld-checkbox.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.9 — чекбокс згоди + опційний дайджест
   Джерело: liga-ds/src/lib/checkbox/checkbox.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-checkbox
     • ld-checkbox__box
     • ld-checkbox__check
     • ld-checkbox__dash
     • ld-checkbox__input
     • ld-checkbox__label
   Модифікатори: ld-checkbox--disabled
*/

.blog-scope .ld-checkbox {
      display: inline-flex; align-items: center; gap: var(--space-100);
      cursor: pointer; font-family: var(--liga-font-family);
    }
    .blog-scope .ld-checkbox--disabled { cursor: not-allowed; }
    .blog-scope .ld-checkbox__input {
      position: absolute; width: 1px; height: 1px;
      margin: 0; padding: 0; opacity: 0; white-space: nowrap;
    }
    .blog-scope .ld-checkbox__box {
      position: relative; flex: none;
      width: 16px; height: 16px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--checkbox-corner-checkbox-corner);
      background-color: var(--cntnr-bg-primary-default);
      border: 1px solid var(--color-neutral-solid-500);
      color: var(--icon-alternative-active);
      transition: background-color 160ms ease, border-color 160ms ease;
    }
    .blog-scope .ld-checkbox:hover .ld-checkbox__input:not(:disabled):not(:checked):not(:indeterminate) ~ .ld-checkbox__box {
      border-color: var(--checkbox-color-hover-checkbox);
    }
    .blog-scope .ld-checkbox__input:checked ~ .ld-checkbox__box,

    .blog-scope .ld-checkbox__input:indeterminate ~ .ld-checkbox__box {
      background-color: var(--checkbox-color-default-checkbox);
      border-color: var(--checkbox-color-default-checkbox);
    }
    .blog-scope .ld-checkbox__input:focus-visible ~ .ld-checkbox__box { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
    .blog-scope .ld-checkbox__input:disabled ~ .ld-checkbox__box { background-color: var(--cntnr-bg-primary-default); border-color: var(--cntnr-border-disabled); }
    .blog-scope .ld-checkbox__input:disabled:checked ~ .ld-checkbox__box,

    .blog-scope .ld-checkbox__input:disabled:indeterminate ~ .ld-checkbox__box {
      background-color: var(--btn-bg-primary-disable); border-color: var(--btn-bg-primary-disable);
    }
    .blog-scope .ld-checkbox__check,
 .blog-scope .ld-checkbox__dash { display: none; }
    .blog-scope .ld-checkbox__check { width: 11px; height: 8px; }
    .blog-scope .ld-checkbox__dash { width: 9px; height: 2px; border-radius: 1px; background-color: currentColor; }
    .blog-scope .ld-checkbox__input:checked:not(:indeterminate) ~ .ld-checkbox__box .ld-checkbox__check { display: block; }
    .blog-scope .ld-checkbox__input:indeterminate ~ .ld-checkbox__box .ld-checkbox__dash { display: block; }
    .blog-scope .ld-checkbox__label { color: var(--text-default); }
    .blog-scope .ld-checkbox__input:disabled ~ .ld-checkbox__label { color: var(--text-disabled); }


/* ── ld-chip.css ─────────────────────────────── */
/* ld-chip.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.4 — чіпси тегів у фільтрах; хмара тегів 1.8
   Джерело: liga-ds/src/lib/chip/chip.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-chip
     • ld-chip__icon
   Модифікатори: ld-chip--size-md, ld-chip--size-sm, ld-chip--solid, ld-chip--subtle, ld-chip--tone-danger, ld-chip--tone-info, ld-chip--tone-neutral, ld-chip--tone-primary, ld-chip--tone-success, ld-chip--tone-warning
*/

.blog-scope .ld-chip {
      display: inline-flex; align-items: center; gap: var(--space-050);
      width: fit-content; font-family: var(--liga-font-family);
      border-radius: var(--cntnr-corner-infinity); white-space: nowrap; box-sizing: border-box;
      border: 1px solid transparent; cursor: pointer;
      transition: background-color 160ms ease, border-color 160ms ease, filter 120ms ease;
    }
    .blog-scope .ld-chip--size-sm { min-height: 18px; padding: 0 var(--space-075); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.18px; }
    .blog-scope .ld-chip--size-md { min-height: 24px; padding: 0 var(--space-100); font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0.25px; }
    .blog-scope .ld-chip:hover:not(:disabled) { filter: brightness(0.97); }
    .blog-scope .ld-chip:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
    .blog-scope .ld-chip:disabled { cursor: not-allowed; opacity: 0.5; }

    /* subtle (off) */
    .blog-scope .ld-chip--subtle.ld-chip--tone-primary { background: var(--status-trasperent-primary);  color: var(--text-accent); }
    .blog-scope .ld-chip--subtle.ld-chip--tone-success { background: var(--status-trasperent-positive); color: var(--text-success); }
    .blog-scope .ld-chip--subtle.ld-chip--tone-danger { background: var(--status-trasperent-negative); color: var(--text-danger); }
    .blog-scope .ld-chip--subtle.ld-chip--tone-warning { background: var(--status-trasperent-warning);  color: var(--text-warning); }
    .blog-scope .ld-chip--subtle.ld-chip--tone-info { background: var(--status-trasperent-blue);     color: var(--text-information); }
    .blog-scope .ld-chip--subtle.ld-chip--tone-neutral { background: var(--status-trasperent-passive);  color: var(--text-default); }
    /* solid (selected) */
    .blog-scope .ld-chip--solid.ld-chip--tone-primary { background: var(--status-filled-primary);  color: var(--text-alternative); }
    .blog-scope .ld-chip--solid.ld-chip--tone-success { background: var(--status-filled-positive); color: var(--text-alternative); }
    .blog-scope .ld-chip--solid.ld-chip--tone-danger { background: var(--status-filled-negative); color: var(--text-alternative); }
    .blog-scope .ld-chip--solid.ld-chip--tone-warning { background: var(--status-filled-warning);  color: var(--text-alternative); }
    .blog-scope .ld-chip--solid.ld-chip--tone-info { background: var(--status-filled-blue);     color: var(--text-alternative); }
    .blog-scope .ld-chip--solid.ld-chip--tone-neutral { background: var(--status-filled-passive);  color: var(--text-alternative); }

    .blog-scope .ld-chip__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 14px; height: 14px; }
    .blog-scope .ld-chip__icon svg { width: 100%; height: 100%; display: block; }


/* ── ld-field.css ─────────────────────────────── */
/* ld-field.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.9 — обгортка поля підписки
   Джерело: liga-ds/src/lib/field/field.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-field__desc
     • ld-field__error
     • ld-field__label
     • ld-field__required
*/

.blog-scope ld-field {
      display: flex;
      flex-direction: column;
      gap: var(--space-075);
      font-family: var(--liga-font-family);
    }
    .blog-scope .ld-field__label { color: var(--text-default); font-size: 14px; font-weight: 600; line-height: 16px; letter-spacing: 0.15px; cursor: default; }
    .blog-scope .ld-field__required { color: var(--text-danger); }
    .blog-scope .ld-field__desc { color: var(--text-subtle); font-size: 12px; line-height: 16px; }
    .blog-scope .ld-field__error { color: var(--text-danger); font-size: 12px; line-height: 16px; }


/* ── ld-input.css ─────────────────────────────── */
/* ld-input.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.9 — email підписки; 1.x — пошук по блогу
   Джерело: liga-ds/src/lib/input/input.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-input__field
     • ld-input__icon
   Модифікатори: ld-input--size-lg, ld-input--size-md, ld-input--size-sm, ld-input--size-xl
*/

.blog-scope ld-input {
      display: inline-flex;
      align-items: center;
      gap: var(--space-100);
      box-sizing: border-box;
      width: 100%;
      background-color: var(--cntnr-bg-primary-default);
      border: 1px solid var(--cntnr-border-default);
      border-radius: var(--field-corner-field-corner);
      color: var(--text-default);
      transition: border-color 200ms ease, box-shadow 200ms ease;
    }
    .blog-scope ld-input:hover:not([data-disabled]):not([data-readonly]):not([data-invalid]) { border-color: var(--cntnr-border-hover); }
    .blog-scope ld-input:focus-within:not([data-disabled]) { border-color: var(--cntnr-border-active); box-shadow: 0 0 0 3px var(--color-primary-100); }
    .blog-scope ld-input[data-invalid] { border-color: var(--cntnr-border-error); }
    .blog-scope ld-input[data-invalid]:focus-within { box-shadow: 0 0 0 3px var(--color-other-colors-red-100); }
    .blog-scope ld-input[data-readonly] { background-color: var(--cntnr-bg-secondary-default); }
    .blog-scope ld-input[data-disabled] { background-color: var(--cntnr-bg-other-readonly-elements); border-color: var(--cntnr-border-disabled); color: var(--text-disabled); cursor: not-allowed; }

    .blog-scope ld-input.ld-input--size-sm { height: 24px; padding: 0 var(--space-100); }
    .blog-scope ld-input.ld-input--size-md { height: 32px; padding: 0 var(--space-150); }
    .blog-scope ld-input.ld-input--size-lg { height: 40px; padding: 0 var(--space-200); }
    .blog-scope ld-input.ld-input--size-xl { height: 48px; padding: 0 var(--space-200); }

    .blog-scope .ld-input__field {
      flex: 1 1 auto; min-width: 0; width: 100%;
      margin: 0; border: none; outline: none; background: transparent;
      font-family: var(--liga-font-family); font-size: 14px; line-height: 16px;
      letter-spacing: 0.29px; font-weight: 400; color: inherit; padding: 0;
    }
    .blog-scope .ld-input__field::placeholder { color: var(--text-subtlest); opacity: 1; }
    .blog-scope .ld-input__field:disabled { cursor: not-allowed; color: var(--text-disabled); -webkit-text-fill-color: var(--text-disabled); }

    .blog-scope .ld-input__icon {
      display: inline-flex; align-items: center; justify-content: center;
      flex: none; color: var(--icon-subtle);
    }
    .blog-scope .ld-input__icon svg { width: 100%; height: 100%; display: block; }
    .blog-scope ld-input.ld-input--size-sm .ld-input__icon { width: 16px; height: 16px; }
    .blog-scope ld-input.ld-input--size-md .ld-input__icon { width: 18px; height: 18px; }
    .blog-scope ld-input.ld-input--size-lg .ld-input__icon,

    .blog-scope ld-input.ld-input--size-xl .ld-input__icon { width: 20px; height: 20px; }


/* ── ld-modal.css ─────────────────────────────── */
/* ld-modal.css — компонент з дизайн-системи liga-ds.
   Навіщо: розділ 6 — модалка лід-форми
   Джерело: liga-ds/src/lib/modal/modal.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-modal
     • ld-modal__close
     • ld-modal__desc
     • ld-modal__title
*/

.blog-scope .ld-modal {
      position: relative;
      width: 100%;
      max-width: 480px;
      max-height: calc(100vh - 64px);
      overflow: auto;
      padding: var(--space-400);
      background-color: var(--cntnr-bg-primary-default);
      border-radius: var(--cntnr-corner-large);
      box-shadow: 0 20px 60px rgb(15 23 42 / 0.25);
      color: var(--text-default);
      font-family: var(--liga-font-family);
      outline: none;
    }
    .blog-scope .ld-modal__title {
      margin: 0 var(--space-600) var(--space-100) 0;
      font-size: 20px; line-height: 24px; font-weight: 600; color: var(--text-default);
    }
    .blog-scope .ld-modal__desc {
      margin: 0 0 var(--space-300);
      font-size: 14px; line-height: 20px; letter-spacing: 0.29px; color: var(--text-subtle);
    }
    .blog-scope .ld-modal__close {
      position: absolute; top: var(--space-200); right: var(--space-200);
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; padding: 0;
      border: none; background: transparent;
      color: var(--icon-subtle); border-radius: var(--cntnr-corner-infinity);
      cursor: pointer; transition: background-color 120ms ease, color 120ms ease;
    }
    .blog-scope .ld-modal__close:hover { background-color: var(--cntnr-bg-third-hover); color: var(--icon-default); }
    .blog-scope .ld-modal__close:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
    .blog-scope .ld-modal__close svg { width: 14px; height: 14px; display: block; }
  
    .blog-scope .cdk-overlay-backdrop.ld-modal-backdrop {
      background-color: var(--blanket-popup-background, rgb(0 0 0 / 0.5));
    }


/* ── ld-pagination.css ─────────────────────────────── */
/* ld-pagination.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.6 — посторінкова навігація ?page=N
   Джерело: liga-ds/src/lib/pagination/pagination.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-pag
     • ld-pag__ellipsis
     • ld-pag__item
     • ld-pag__item ld-pag__arrow
     • ld-pag__list
*/

.blog-scope .ld-pag { font-family: var(--liga-font-family); }
    .blog-scope .ld-pag__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-050); margin: 0; padding: 0; list-style: none; }
    .blog-scope .ld-pag__item {
      appearance: none; border: none; background: transparent; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      box-sizing: border-box; min-width: 36px; height: 36px; padding: 0 var(--space-075);
      border-radius: var(--corner-radius-infinity);
      font-family: inherit; font-size: 14px; line-height: 1; font-weight: 500;
      color: var(--text-default); transition: background-color 160ms ease, color 160ms ease;
    }
    .blog-scope .ld-pag__list[data-size='sm'] .ld-pag__item { min-width: 28px; height: 28px; font-size: 13px; }
    .blog-scope .ld-pag__item:hover:not(:disabled):not(.ld-pag__item--selected) { background-color: var(--color-primary-100); color: var(--text-accent); }
    .blog-scope .ld-pag__item:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }
    .blog-scope .ld-pag__item:disabled { cursor: not-allowed; color: var(--text-disabled); }
    .blog-scope .ld-pag__item--selected { background-color: var(--btn-bg-primary-active); color: var(--text-alternative); }
    .blog-scope .ld-pag__arrow { color: var(--icon-subtle); padding: 0; }
    .blog-scope .ld-pag__arrow:hover:not(:disabled) { background-color: var(--color-primary-100); color: var(--text-accent); }
    .blog-scope .ld-pag__arrow:disabled { color: var(--icon-disabled); background: transparent; }
    .blog-scope .ld-pag__arrow svg { display: block; }
    .blog-scope .ld-pag__ellipsis { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 36px; height: 36px; color: var(--text-subtle); user-select: none; }
    .blog-scope .ld-pag__list[data-size='sm'] .ld-pag__ellipsis { min-width: 28px; height: 28px; }


/* ── ld-tabs.css ─────────────────────────────── */
/* ld-tabs.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.4 — таби сортування (Нові / Найпопулярніші / У тренді)
   Джерело: liga-ds/src/lib/tabs/tabs.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-tab-panel
     • ld-tabs__count
     • ld-tabs__list
     • ld-tabs__tab
*/

.blog-scope .ld-tab-panel { margin-top: var(--space-300); color: var(--text-default); font-family: var(--liga-font-family); } .blog-scope .ld-tab-panel:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--cntnr-corner-small); }
    .blog-scope .ld-tabs__list {
      display: inline-flex; align-items: center; gap: var(--space-050);
      font-family: var(--liga-font-family);
    }
    .blog-scope .ld-tabs__list[data-variant='underline'] { gap: var(--space-100); border-bottom: 1px solid var(--divider-divider); }
    .blog-scope .ld-tabs__list[data-orientation='vertical'] { flex-direction: column; align-items: stretch; }
    .blog-scope .ld-tabs__list[data-orientation='vertical'][data-variant='underline'] { border-bottom: none; border-inline-start: 1px solid var(--divider-divider); }

    .blog-scope .ld-tabs__tab {
      appearance: none; border: none; background: transparent; cursor: pointer;
      display: inline-flex; align-items: center; gap: var(--space-100);
      font-family: inherit; font-size: 14px; line-height: 16px; font-weight: 500; letter-spacing: 0.15px;
      color: var(--text-subtle); white-space: nowrap;
      transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }
    .blog-scope .ld-tabs__tab[data-size='sm'] { font-size: 13px; gap: var(--space-075); }
    .blog-scope .ld-tabs__tab:disabled { color: var(--text-disabled); cursor: not-allowed; }
    .blog-scope .ld-tabs__tab:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; }

    /* pill */
    .blog-scope .ld-tabs__tab[data-variant='pill'] { border-radius: var(--tabs-corner-tabs-corner); padding: var(--space-100) var(--space-200); }
    .blog-scope .ld-tabs__tab[data-variant='pill'][data-size='sm'] { padding: var(--space-075) var(--space-150); }
    .blog-scope .ld-tabs__tab[data-variant='pill']:hover:not(:disabled):not([data-selected]) { background-color: var(--color-primary-100); color: var(--text-default); }
    .blog-scope .ld-tabs__tab[data-variant='pill'][data-selected] { background-color: var(--btn-bg-primary-active); color: var(--text-alternative); }
    .blog-scope .ld-tabs__tab[data-variant='pill'][data-selected] .ld-tabs__count { background-color: rgb(255 255 255 / 0.22); color: var(--text-alternative); }

    /* underline */
    .blog-scope .ld-tabs__tab[data-variant='underline'] { padding: var(--space-100) var(--space-100); border-radius: var(--cntnr-corner-small, 6px) var(--cntnr-corner-small, 6px) 0 0; border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .blog-scope .ld-tabs__tab[data-variant='underline'][data-size='sm'] { padding: var(--space-075) var(--space-100); }
    .blog-scope .ld-tabs__tab[data-variant='underline']:hover:not(:disabled):not([data-selected]) { color: var(--text-default); }
    .blog-scope .ld-tabs__tab[data-variant='underline'][data-selected] { color: var(--text-active); border-bottom-color: var(--color-primary-500); }
    .blog-scope .ld-tabs__tab[data-variant='underline'][data-selected] .ld-tabs__count { background-color: var(--color-primary-100); color: var(--text-accent); }

    .blog-scope .ld-tabs__count {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 20px; height: 20px; padding: 0 var(--space-075);
      border-radius: var(--corner-radius-infinity);
      background-color: var(--color-primary-100); color: var(--text-default);
      font-size: 12px; line-height: 1; font-weight: 600;
    }


/* ── ld-tag.css ─────────────────────────────── */
/* ld-tag.css — компонент з дизайн-системи liga-ds.
   Навіщо: блок 1.8 — теги
   Джерело: liga-ds/src/lib/tag/tag.component.ts (styles: []).
   Компонент оголошений з ViewEncapsulation.None, тому це звичайний
   глобальний CSS на токенах — виноситься у ваніль без змін.
   ⛔ Значення тут не правити: усе через токени ДС + шар site-brand.css.

   Розмітка (класи з template ДС):
     • ld-tag__icon
     • ld-tag__remove
   Модифікатори: ld-tag--size-md, ld-tag--size-sm, ld-tag--solid, ld-tag--subtle, ld-tag--tone-danger, ld-tag--tone-info, ld-tag--tone-neutral, ld-tag--tone-primary, ld-tag--tone-success, ld-tag--tone-warning
*/

.blog-scope ld-tag {
      display: inline-flex; align-items: center; gap: var(--space-050);
      width: fit-content; font-family: var(--liga-font-family);
      border-radius: var(--cntnr-corner-infinity); white-space: nowrap; box-sizing: border-box;
    }
    .blog-scope ld-tag.ld-tag--size-sm { min-height: 18px; padding: 0 var(--space-075); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.18px; }
    .blog-scope ld-tag.ld-tag--size-md { min-height: 24px; padding: 0 var(--space-100); font-size: 12px; line-height: 15px; font-weight: 600; letter-spacing: 0.25px; }

    .blog-scope ld-tag.ld-tag--solid.ld-tag--tone-primary { background: var(--status-filled-primary);  color: var(--text-alternative); }
    .blog-scope ld-tag.ld-tag--solid.ld-tag--tone-success { background: var(--status-filled-positive); color: var(--text-alternative); }
    .blog-scope ld-tag.ld-tag--solid.ld-tag--tone-danger { background: var(--status-filled-negative); color: var(--text-alternative); }
    .blog-scope ld-tag.ld-tag--solid.ld-tag--tone-warning { background: var(--status-filled-warning);  color: var(--text-alternative); }
    .blog-scope ld-tag.ld-tag--solid.ld-tag--tone-info { background: var(--status-filled-blue);     color: var(--text-alternative); }
    .blog-scope ld-tag.ld-tag--solid.ld-tag--tone-neutral { background: var(--status-filled-passive);  color: var(--text-alternative); }
    .blog-scope ld-tag.ld-tag--subtle.ld-tag--tone-primary { background: var(--status-trasperent-primary);  color: var(--text-accent); }
    .blog-scope ld-tag.ld-tag--subtle.ld-tag--tone-success { background: var(--status-trasperent-positive); color: var(--text-success); }
    .blog-scope ld-tag.ld-tag--subtle.ld-tag--tone-danger { background: var(--status-trasperent-negative); color: var(--text-danger); }
    .blog-scope ld-tag.ld-tag--subtle.ld-tag--tone-warning { background: var(--status-trasperent-warning);  color: var(--text-warning); }
    .blog-scope ld-tag.ld-tag--subtle.ld-tag--tone-info { background: var(--status-trasperent-blue);     color: var(--text-information); }
    .blog-scope ld-tag.ld-tag--subtle.ld-tag--tone-neutral { background: var(--status-trasperent-passive);  color: var(--text-default); }

    .blog-scope .ld-tag__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 14px; height: 14px; }
    .blog-scope .ld-tag__icon svg { width: 100%; height: 100%; display: block; }
    .blog-scope .ld-tag__remove {
      display: inline-flex; align-items: center; justify-content: center;
      flex: none; width: 16px; height: 16px;
      margin-inline-start: 2px; margin-inline-end: -4px;
      padding: 0; border: none; background: transparent; color: inherit;
      border-radius: var(--cntnr-corner-infinity); cursor: pointer; opacity: 0.65;
      transition: opacity 120ms ease, background-color 120ms ease;
    }
    .blog-scope .ld-tag__remove:hover { opacity: 1; background-color: var(--color-neutral-alpha-200); }
    .blog-scope .ld-tag__remove:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
    .blog-scope .ld-tag__remove svg { width: 10px; height: 10px; display: block; }


/* ── site-buttons.css ─────────────────────────────── */
/* site-buttons.css — ОДНА система кнопок на весь блог (рішення Serg, 03.08.2026).

   Що було не так. Правила кнопок ligazakon.net у `site-chrome.css` записані як
   `.site-header .btn` — тобто діяли ЛИШЕ в шапці. У тілі сторінки лишалися
   кнопки прототипу: `.btn-primary`, `.btn-outline`, `.btn-demo`, `.btn-ghost`,
   `.btn-sb-primary`, `.btn-sb-secondary`, `.seg-toggle button` — шість різних
   класів тільки на сторінці статті, кожен зі своїм радіусом, висотою і тінню.
   Питання дизайнера «ці кнопки точно в загальному стилі сайту?» — ні, не були.

   Що робимо. Базу `.btn` розшпилюємо з шапки (тут вона глобальна, ті самі
   значення з живого сайту: висота 46, радіус 29, вага 500), а класи прототипу
   перекладаємо на варіанти сайту через ті самі змінні `--btn-*`. Розмітку не
   чіпаємо: класи в HTML лишаються, змінюється лише те, що вони означають.

   Прототипні правила цих кнопок викинуті з блоків (build-blocks.py → BTN_DROP),
   інакше вони конкурували б із цим файлом.

   Підключається після блоків, перед review-fixes.css — див. distribute.py.
*/

.blog-scope .btn,

.blog-scope .btn-primary,

.blog-scope .btn-outline,

.blog-scope .btn-demo,

.blog-scope .btn-ghost,

.blog-scope .btn-sb-primary,

.blog-scope .btn-sb-secondary {
  --btn-main: var(--site-accent);
  --btn-hover: var(--site-accent-hover);
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-color: inherit;
  --btn-hover-bg: var(--btn-bg);
  --btn-hover-border: var(--btn-border);
  --btn-hover-color: var(--btn-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-100);
  height: 46px;
  padding: 0 22px;
  border-radius: 29px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-family: var(--site-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: none;                     /* прототипні кнопки несли власні тіні */
  transition: background-color .3s ease-out, border-color .3s ease-out,
              color .3s ease-out, transform .15s ease;
}
.blog-scope .btn:hover,

.blog-scope .btn-primary:hover,

.blog-scope .btn-outline:hover,

.blog-scope .btn-demo:hover,

.blog-scope .btn-ghost:hover,

.blog-scope .btn-sb-primary:hover,

.blog-scope .btn-sb-secondary:hover {
  background: var(--btn-hover-bg);
  border-color: var(--btn-hover-border);
  color: var(--btn-hover-color);
  text-decoration: none;
}
.blog-scope .btn:active,

.blog-scope .btn-primary:active,

.blog-scope .btn-outline:active,

.blog-scope .btn-demo:active,

.blog-scope .btn-ghost:active,

.blog-scope .btn-sb-primary:active,

.blog-scope .btn-sb-secondary:active { transform: translateY(1px); }

/* ── Варіанти сайту ─────────────────────────────────────────────────────── */
.blog-scope .btn--solid { --btn-bg: var(--btn-main); --btn-border: var(--btn-main); --btn-color: #fff;
               --btn-hover-bg: var(--btn-hover); --btn-hover-border: var(--btn-hover); --btn-hover-color: #fff; }
.blog-scope .btn--outline { --btn-bg: transparent; --btn-border: var(--btn-main); --btn-color: var(--btn-main);
                --btn-hover-bg: transparent; --btn-hover-border: var(--btn-hover); --btn-hover-color: var(--btn-hover); }
.blog-scope .btn--primary { --btn-main: var(--site-accent); --btn-hover: var(--site-accent-hover); }
.blog-scope .btn--black { --btn-main: var(--site-heading); --btn-hover: #0a0914; }
.blog-scope .btn--lg { height: 50px; padding: 0 26px; }
.blog-scope .btn--sm { height: 40px; padding: 0 18px; }

/* ── Класи прототипу → варіанти сайту ───────────────────────────────────── */
.blog-scope .btn-primary { --btn-bg: var(--btn-main); --btn-border: var(--btn-main); --btn-color: #fff;
               --btn-hover-bg: var(--btn-hover); --btn-hover-border: var(--btn-hover); --btn-hover-color: #fff; }
.blog-scope .btn-outline,

.blog-scope .btn-demo { --btn-bg: #fff; --btn-border: var(--btn-main); --btn-color: var(--btn-main);
               --btn-hover-bg: var(--color-primary-100); --btn-hover-border: var(--btn-hover); --btn-hover-color: var(--btn-hover); }
.blog-scope .btn-sm { height: 40px; padding: 0 18px; }

/* На ТЕМНОМУ фоні кнопка сайту інвертується: суцільна біла — головна дія,
   контурна біла — другорядна. Тими самими змінними, без окремої системи. */
.blog-scope .btn-sb-primary { --btn-bg: #fff; --btn-border: #fff; --btn-color: var(--site-accent);
                  --btn-hover-bg: var(--color-primary-100); --btn-hover-border: var(--color-primary-100);
                  --btn-hover-color: var(--site-accent-hover); }
.blog-scope .btn-ghost,

.blog-scope .btn-sb-secondary { --btn-bg: transparent; --btn-border: rgb(255 255 255 / .45); --btn-color: #fff;
                    --btn-hover-bg: rgb(255 255 255 / .14); --btn-hover-border: #fff; --btn-hover-color: #fff; }

/* Головна кнопка всередині інвертованих блоків — теж біла (див. global.css,
   там перелік таких поверхонь). Дублюємо тут значеннями змінних. */
.blog-scope .inline-cta .btn-primary,

.blog-scope .product-bridge .btn-primary,

.blog-scope .feat-card .btn-primary,

.blog-scope [data-surface="inverted"] .btn-primary {
  --btn-bg: #fff; --btn-border: #fff; --btn-color: var(--site-accent);
  --btn-hover-bg: var(--color-primary-100); --btn-hover-border: var(--color-primary-100);
  --btn-hover-color: var(--site-accent-hover);
}


/* ── review-fixes.css ─────────────────────────────── */
/* review-fixes.css — точкові правки за коментарями дизайнера (Serg, 03.08.2026).

   Навіщо окремий файл, а не правка в блоках:
   • частина блоків ГЕНЕРУЄТЬСЯ (build-blocks.py) — правка там зникне при
     наступному прогоні;
   • решта — це РОЗМІРИ компонентів ДС у контексті конкретної сторінки. Розмір
     компонента задає дизайн-система, але наскільки він великий саме в цьому
     блоці — рішення композиції. Тримаємо всі такі рішення в одному місці, щоб
     їх було видно й легко відкотити, а не розмазаними по десятку файлів.

   ⚠️ Сюди НЕ можна класти вигляд компонента (колір, форму, стани) — це
   власність liga-ds. Тільки габарити в контексті й дрібна розкладка.

   Підключається ОСТАННІМ (після ld-*.css та icons.css) — див. distribute.py.
*/

/* ── Аватар автора ────────────────────────────────────────────────────────
   «Зробив би аватарку трохи більшою». У шкалі ДС максимум ld-avatar--xl = 48px,
   для великої картки автора замало. */
.blog-scope .author-card ld-avatar.ld-avatar--xl,

.blog-scope .author-hero ld-avatar.ld-avatar--xl { width: 80px; height: 80px; font-size: 26px; }

/* ── Фільтри-чіпси на сторінці категорії ──────────────────────────────────
   «Давай по висоті зробимо ці теги сорок». У ДС chip--size-md = 24px: це
   компактний фільтр для щільних таблиць, а тут він головний елемент секції. */
/* Кнопка «Ще теги» бере рівно ту саму геометрію, що й чипи — одним
   правилом, а не копією чисел: інакше вони роз'їдуться при першій же
   правці розміру чипа (локальний коментар Serg 12.08.2026:
   «хай кнопка буде в стилі як самі теги і влазить у рядок»). */
.blog-scope .chips .ld-chip,

.blog-scope .chips .chips-more { height: 40px; padding-inline: var(--space-200); font-size: var(--typo-sizes-h300); }

/* ── Плашки в шапці статті ────────────────────────────────────────────────
   «Ці теги побільше — сороковими, мабуть, або тридцять другими».
   Взято 32: плашки стоять В ОДИН РЯДОК з датою, і 40 вже переважували б
   заголовок. Якщо треба 40 — це одне число нижче.
   «А дату змістимо вправо» — margin-left:auto відтискає її та все, що після
   неї, до правого краю рядка. */
.blog-scope .article-meta ld-badge,

.blog-scope .article-meta ld-tag { height: 32px; padding-inline: var(--space-150); font-size: var(--typo-sizes-h300); }
.blog-scope .article-meta .meta-date { margin-left: auto; }
.blog-scope .article-meta .meta-sep { display: none; }   /* крапка-роздільник зайва, коли є відступ */

/* ── Іконки ризиків — червоні ─────────────────────────────────────────────
   «Давайте іконки зробимо червоного кольору». Іконка бере колір з тексту
   (currentColor), тому фарбуємо саме її, а не весь рядок. */
.blog-scope .risk-item .ic--risk { color: var(--text-danger); }

/* ── Кнопки на всю ширину блока ───────────────────────────────────────────
   «Зроби кнопку на всю ширину, як і нижня» / «кнопку на всю ширину блока».
   Причина, чому вони були вужчі: це <button>, а у form-control ширина auto
   рахується як shrink-to-fit, тож display:block сам по собі не розтягує. */
.blog-scope .checklist-cta .btn-primary,

.blog-scope .btn-sb-primary,

.blog-scope .btn-sb-secondary { width: 100%; }

/* ── Фінальний CTA: орнамент із Figma ─────────────────────────────────────
   «Для цього блока на всіх сторінках треба зробити прикольний бекграунд…
   давай я тобі додам орнамент» + посилання на Figma.
   Джерело: SEO catalogs L360 → node 5029:107601 «Container», група «Flowers».
   Витягнуто через Desktop Bridge (exportAsync SVG) — не перемальовано, це
   ті самі вектори. Градієнт підкладки теж із того вузла:
   білий → #E5E2FF (50%) → білий, горизонтально.
   Орнамент декоративний → у ::before, поза потоком і поза доступністю. */
.blog-scope .cta-final {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #ffffff 0%, #e5e2ff 50%, #ffffff 100%);
}
.blog-scope .cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  /* SVG уже обрізаний по кадру Figma (1134×260) — тягнемо його `cover`, щоб
     товщина ліній лишалась близькою до оригіналу на будь-якій ширині блока */
  background: url('/assets/img/blog/ornament-flowers.svg') center / cover no-repeat;
  pointer-events: none;
}
.blog-scope .cta-final > * { position: relative; }   /* контент над орнаментом */

/* ── Активний пункт у мега-меню ───────────────────────────────────────────
   «Додати в блок Медіа посилання на блог і зробити його активним, ніби ми
   там знаходимось». Позначка активності — і візуальна, і машинна
   (aria-current="page" у розмітці). */
.blog-scope .mega-list .is-current {
  color: var(--site-accent);
  font-weight: 600;
}

/* ── Іконка ролі — в колір своєї картки ───────────────────────────────────
   «Кожна іконка має бути в колір своєї підкладки». Заголовок ролі вже фарбує
   прототип (.role-card.ceo .role-title тощо) — іконка бере той самий колір.
   Значення не дублюємо: `color: inherit` від .role-title не працює (іконка —
   сусід, не нащадок), тому перелічуємо ті самі п'ять кольорів. */
.blog-scope .role-card.ceo .role-ico { color: #E65100; }
.blog-scope .role-card.hr .role-ico { color: var(--green); }
.blog-scope .role-card.lawyer .role-ico { color: #1565C0; }
.blog-scope .role-card.accountant .role-ico { color: #7B1FA2; }
.blog-scope .role-card.military .role-ico { color: #455A64; }

/* ── Відступи, яких бракувало ─────────────────────────────────────────────
   «Між цими кнопками має бути паддинг, зараз вони впритул» — кнопки сайдбару
   стали блоками на всю ширину й злиплися.
   «Бракує паддинга між переглядами і кількістю коментарів» — обидва лічильники
   лежали в одному .stats без проміжку. */
.blog-scope .sidebar-cta .btn-sb-primary { margin-bottom: var(--space-150); }
.blog-scope .card-foot .stats,

.blog-scope .stats { display: inline-flex; align-items: center; gap: var(--space-200); }
.blog-scope .stats > * { display: inline-flex; align-items: center; gap: var(--space-075); }

/* ── Обгортка навколо табів ───────────────────────────────────────────────
   ⚠️ ЦЕ ВІДСТУП ВІД ДИЗАЙН-СИСТЕМИ, свідомий (рішення Serg, 03.08.2026).
   У liga-ds у tabs лише два варіанти: pill (голі пілюлі) і underline (лінія
   під групою). Заповненої підкладки навколо групи в бібліотеці немає — я
   перевірив компонент. Дизайнер попросив саме її: «навколо табів у нас є така
   обгортка, щоб було зрозуміло, що це не кнопочки, а таби».
   Тому малюємо сегментний контрол ТУТ, а не правкою ld-tabs.css: щоб було
   видно, що це блог-специфіка, і щоб оновлення бібліотеки її не затерло.
   Якщо такий контрол зʼявиться в ДС — цей блок треба зняти. */
.blog-scope .ld-tabs__list[data-variant='pill'] {
  background: var(--color-primary-100);
  border: 1px solid var(--cntnr-border-default);
  border-radius: var(--corner-radius-infinity);
  padding: var(--space-050);
  gap: var(--space-025);
}
.blog-scope .ld-tabs__list[data-variant='pill'] .ld-tabs__tab {
  height: 32px;
  /* ховер поверх підкладки має бути світлішим за неї, інакше «тоне» */
  --tabs-hover: var(--cntnr-bg-primary-default);
}
.blog-scope .ld-tabs__list[data-variant='pill'] .ld-tabs__tab:hover:not([data-selected]) {
  background: var(--tabs-hover);
}
/* Той самий сегментний контрол ДС у модалці ліда — розтягнутий на всю ширину
   трьома рівними частинами (як був кастомний .seg-toggle). Це лише розкладка
   в контексті модалки; вигляд сегмента лишається ДС-івським. */
.blog-scope .modal .ld-tabs__list[data-variant='pill'] { display: flex; margin-top: var(--space-200); }
.blog-scope .modal .ld-tabs__list[data-variant='pill'] .ld-tabs__tab { flex: 1; justify-content: center; }

/* ── Футер впритул до останнього блока ────────────────────────────────────
   «Між футером і блоком промо теж зʼявився паддинг, треба прибрати».
   Джерело — реальний CSS сайту: `.site-footer { margin-top: 64px }`. На
   ligazakon.net під футером зазвичай білий контент, і відступ там доречний.
   У блозі останній блок (CTA) має власний фон і градієнт, тож 64px читались
   як випадкова біла смуга. Прибираємо тільки тут, сам site-chrome.css
   лишається копією сайту байт-у-байт. */
.blog-scope .site-footer { margin-top: 0; }

/* ── Обкладинка в картці «Обране редакцією» ───────────────────────────────
   У блоці 5.1 картка має власну смугу .img (120px) — там була текстова
   заглушка «Hero-зображення», тепер справжня обкладинка. Кадруємо по
   заповненню, щоб висота смуги лишалась як у прототипі. */
.blog-scope .feat-card .img { padding: 0; overflow: hidden; }
.blog-scope .feat-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Контраст другорядного тексту на КОЛЬОРОВИХ підкладках ────────────────
   «Тут текст треба трохи контрастніше, по дизайн-системі. І подивись суміжні
   блоки — може, і десь ще».
   Виміряно: --site-muted #6b6b80 на лавандовій #c2c7f8 дає 3.17 при нормі
   4.5; на зеленій 4.01, на рожевій 3.89 — усі нижче норми.
   Беремо СУСІДНІЙ токен ДС на крок темніше: --text-subtle #4b4b55 →
   5.26 / 6.64 / 6.45 відповідно. Свій колір не вигадуємо. */
.blog-scope .salary-badge .sl,

.blog-scope .salary-badge .ss,

.blog-scope .callout p,

.blog-scope .role-card p,

.blog-scope .mistake-item p,

.blog-scope .risk-item span,

.blog-scope .checklist-cta p { color: var(--text-subtle); }

/* Заголовок ролі кольоровий за задумом (кодує роль), але помаранчевий на
   кремовому давав 3.46. Затемнюємо ТОЙ САМИЙ колір домішкою чорнила —
   відтінок ролі лишається, контраст доходить до норми.
   ⚠️ Селектори повторюють специфічність прототипу (.role-card.ceo .role-title
   = 3 класи) — інакше його правило перемагає. І `currentColor` тут не годиться:
   у `color:` він означає УСПАДКОВАНИЙ колір, а не власний колір елемента. */
.blog-scope .role-card.ceo .role-title,
        .blog-scope .role-card.ceo .role-ico { color: color-mix(in srgb, #E65100 60%, var(--text-default)); }
.blog-scope .role-card.hr .role-title,
         .blog-scope .role-card.hr .role-ico { color: color-mix(in srgb, var(--green) 70%, var(--text-default)); }
.blog-scope .role-card.lawyer .role-title,
     .blog-scope .role-card.lawyer .role-ico { color: color-mix(in srgb, #1565C0 80%, var(--text-default)); }
.blog-scope .role-card.accountant .role-title,
 .blog-scope .role-card.accountant .role-ico { color: color-mix(in srgb, #7B1FA2 85%, var(--text-default)); }
.blog-scope .role-card.military .role-title,
   .blog-scope .role-card.military .role-ico { color: color-mix(in srgb, #455A64 75%, var(--text-default)); }

/* ── Шапка статті: розміри й проміжок ─────────────────────────────────────
   «Теги 32 по висоті, і гэп між ними 8 або 12». Висота вже 32 (вище),
   тут — проміжок 12px кроком ДС. */
.blog-scope .article-meta { gap: var(--space-150); }

/* ── Ховер на картках ─────────────────────────────────────────────────────
   «Хай бордер навколо стає більш фіолетовим». Колір — активна межа
   контейнера з ДС (--cntnr-border-active), не власний. */
.blog-scope .author-card,

.blog-scope article.card,

.blog-scope .art-related .article-card { transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.blog-scope .author-card:hover,

.blog-scope article.card:hover,

.blog-scope .art-related .article-card:hover { border-color: var(--cntnr-border-active); }

/* ── Стрілки слайдера «Обране редакцією» ──────────────────────────────────
   «Ці маленькі іконки й кнопки треба по нашому стилю решти кнопок
   secondary». Беремо контурну кнопку сайту, у колі, з іконкою ДС. */
.blog-scope .slider-nav button {
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--btn-main, var(--site-accent));
  border-radius: var(--corner-radius-infinity);
  background: transparent;
  color: var(--site-accent);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out;
}
.blog-scope .slider-nav button:hover { background: var(--color-primary-100); border-color: var(--site-accent-hover); color: var(--site-accent-hover); }
.blog-scope .slider-nav .ic { font-size: 20px; }

/* ── Очищення поля пошуку ─────────────────────────────────────────────────
   «Хрестик має бути з наших іконок, а не якась ліва». Нативний хрестик
   WebKit малює сам браузер і перефарбувати його не можна — ховаємо його й
   ставимо власну кнопку з іконкою ДС.

   Правка Serg (03.08.2026): «іконка не з краю інпута, посунути ближче до
   правого краю». Раніше кнопка була `position:absolute` в самій `.searchbar`
   з `right:150px` — магічне число, підігнане під ширину кнопки «Знайти».
   Через це хрестик стояв усередині поля, а не при його краї, і будь-яка
   зміна ширини «Знайти» його зсувала. Тепер поле пошуку загорнуте у
   `.search-field`, і хрестик прив'язаний до ПРАВОГО КРАЮ САМОГО ІНПУТА
   (`right:16px`) — без магічних чисел і незалежно від кнопки поряд. */
.blog-scope .searchbar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.blog-scope .searchbar .search-field { flex: 1; position: relative; display: flex; }
.blog-scope .searchbar .search-field input { flex: 1; padding-right: 44px; }  /* місце під хрестик */
.blog-scope .searchbar .search-clear {
  position: absolute;
  right: 16px;                      /* при правому краї інпута */
  top: 50%; transform: translateY(-50%);
  border: 0; background: none; padding: var(--space-050);
  color: var(--text-subtle); cursor: pointer; line-height: 0;
}
.blog-scope .searchbar .search-clear:hover { color: var(--text-default); }
.blog-scope .searchbar .search-clear .ic { font-size: 18px; }



.blog-scope .field input:not([type="checkbox"]):focus,

.blog-scope .modal input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--cntnr-border-active);
  box-shadow: 0 0 0 3px var(--color-primary-100);   /* фокус-кільце ДС */
}
.blog-scope .field input::placeholder,

.blog-scope .modal input::placeholder { color: var(--text-subtlest); }

/* ── Рев'ю #26 і #27 (11.08.2026): вирівнювання у блоці підписки ───────────
   #26 «Банер не рівний по осях, всі блоки текстів на різних висотах».
   Причина не в «різних висотах текстів», а в тому, що .nl-in — сітка з
   `align-items:center`: колонки центрувались ОДНА ВІДНОСНО ОДНОЇ, і оскільки
   ліва вища за праву (157px проти 128px), права з'їжджала вниз. Заміряно:
   заголовок починався на 29px від верху банера, поле вводу — на 44px.
   Ставимо `start` — обидві колонки починаються з однієї лінії. */
.blog-scope .nl-inline .nl-in,

.blog-scope .nl-in { align-items: start; }

/* #27 «чекбокс вирівняний по-різному для кожного пункту, краще за першим
   реченням». Причина — в компоненті ДС: `ld-checkbox` має `align-items:
   center`, і для дворядкового підпису бокс опинявся на 11px нижче першого
   рядка, а для однорядкового — на 1px. Звідси й «по-різному».
   Правимо ТІЛЬКИ в контексті сторінки (.nl-consent), а не сам компонент:
   для звичайного однорядкового чекбокса центрування коректне, і міняти
   його в ДС — не наше рішення. Питання до ДС записано в HANDOFF. */
.blog-scope .nl-consent.ld-checkbox { align-items: flex-start; }
/* 1px — оптична компенсація: бокс 18px проти рядка 16px, без зсуву він
   здається піднятим над текстом. */
.blog-scope .nl-consent.ld-checkbox .ld-checkbox__box { margin-top: 1px; }

/* ═══ РАУНД #3 · рев'ю Василя Баранця (31.08.2026) ══════════════════════════
   #30 «розвести ці блоки — cta залишаємо тут, table of content перенести в
   ліву частину екрану, зміст синхронізувати по розмірах з cta».
   #32 «для мобільної версії зміст статті ставимо під цим блоком (не стікі)».

   ⚠️ ШИРИНА — свідома ціна, а не недогляд. Три колонки в контейнер сайту
   (1160px) не влазять: при рівних бічних колонках по 308px на текст статті
   лишалось би 444px — вужче за сам сайдбар. Заміряно на живій сторінці.
   Рішення Serg 31.08.2026: розкладку СТАТТІ розширюємо до 1400px, а шапка,
   крихти й футер лишаються 1160 — стик між ними видно, і це прийнято.
   Ціляємось у той .wrap, що містить розкладку, а не у всі підряд. */
@media (min-width: 1100px) {
    .blog-scope .wrap:has(> .page-layout) {
        max-width: 1400px;
    }
  .blog-scope .page-layout { grid-template-columns: 308px minmax(0, 1fr) 308px; }

  /* Липкість тепер своя в кожної колонки: до цього зміст і CTA були одним
     елементом (.sidebar-col), і липнули разом. Верх той самий — 88px, тобто
     80px липкої шапки сайту + 8px подиху, щоб картки не торкались її межі. */
  .blog-scope .toc-col {
    position: sticky;
    top: 88px;
    align-self: start;
    /* мінус липка шапка (88) і нижня смуга CTA (~76) + подих: довгий зміст
       отримує власний скрол, а не вилазить за екран */
    max-height: calc(100vh - 88px - 76px - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;   /* скрол списку не «пробиває» на сторінку */
    scrollbar-width: thin;
  }
  .blog-scope .toc-col .toc-card { margin-bottom: 0 }

  /* Картка змісту тримає висоту свого списку — і нічого понад те.
     Правило-двійник із blog-article.css; прибрано там і тут, щоб файли
     не розʼїхались (причина — у коментарі там же). */
}

/* Нижче 1100px три колонки втрачають сенс: текст статті став би вужчим за
   бічні картки. Складаємось у одну колонку — зміст під першим блоком і НЕ
   липкий (#32), CTA ховаємо: його роль грає нижня смуга .mob-sticky, яка
   з 04.08.2026 показується на всіх ширинах.
   `display:contents` на колонці статті — щоб порядком керувати поштучно:
   сам <aside> сусідить із <main>, тож без цього він міг би стати лише ДО
   або ПІСЛЯ всієї статті, а не одразу за героєм. */
@media (max-width: 1099px) {
  .blog-scope .page-layout { display: flex; flex-direction: column }
  .blog-scope .article-col { display: contents }
  /* ⚠️ Селектор НЕ дочірній, і це не стиль, а причина коментаря #32.
     У art-layout.css стоїть `.article-col > .article-card` — воно працювало,
     доки сторінка була цілою. Після розбивки на віджети (it5) герой приїжджає
     всередині обгортки включення (`div.include-host`), тож у ДЕРЕВІ він тепер
     онук, а не син. `display:contents` прибирає в обгортки лише БОКС — на
     збіг селекторів це не впливає, тому `>` перестав знаходити героя, і
     порядок не застосовувався: зміст мовчки поїхав НАД статтю. Симптом і
     помітив менеджер («зміст ставимо під цим блоком»). Заміряно на it6:
     зміст 242px, герой 675px — тобто над. Лікуємо причину, а не наслідок. */
  .blog-scope .article-col .article-card { order: -2 }
  .blog-scope .toc-col {
    order: -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .blog-scope .toc-col .toc-card { margin-bottom: 18px; min-height: 0 }
  .blog-scope .sidebar-col { display: none }
}

/* ── Локальні коментарі Serg до it7 (31.08.2026) ────────────────────────────
   L1 «коли скролимо вниз, зміст і CTA заходять під шапочку — має лишатись
   гэп зверху до меню».
   Причина: липких смуг ДВІ, а не одна. Заміряно на сторінці при скролі:
   header.site-header — sticky, 0–80px, z-index 1000;
   nav.blog-cats     — sticky, 79–134px, z-index 999.
   Колонки липнули на 88px, тобто рівно під смугу категорій. Правильний
   орієнтир — низ ДРУГОЇ смуги: 134 + 8px подиху = 142px.
   Тримаємо це одним числом: зміниться висота смуг — міняти тут. */
.blog-scope { --art-sticky-top: 142px }

@media (min-width: 1100px) {
  .blog-scope .toc-col,

  .blog-scope .sidebar-col {
    top: var(--art-sticky-top);
    /* мінус обидві липкі смуги і нижня смуга CTA (~76) + подих */
    max-height: calc(100vh - var(--art-sticky-top) - 76px - 16px);
  }
  /* якір зі змісту не має ховатись під ОБИДВІ смуги, а не лише під шапку */
  .blog-scope .article-col [id] { scroll-margin-top: calc(var(--art-sticky-top) + 8px) }
}

/* L2 «смугу категорій вирівняти по центру — зараз кривувато».
   Заміряно: рядок 1140px (150→1290), а шість пунктів займають 170→721 —
   тобто збиті вліво, і праворуч 569px порожнечі. Сама смуга симетрична
   (поля 150px з обох боків), тому центрування пунктів у рядку = центрування
   у вікні.
   ⚠️ Смуга спільна для всіх 8 сторінок, тож правка глобальна: на сторінках
   із сіткою карток пункти більше не починаються від лівого краю сітки.

   `safe center`, а не просто `center`: смуга тепер nowrap із горизонтальним
   скролом (blog-base.css), а центрування переповненого флекс-рядка виносить
   його початок у відʼємну область — перші категорії опиняються ліворуч від
   нуля скролу, і доскролити до них неможливо. Ключове слово safe вимикає
   центрування саме тоді, коли вміст не влазить. Широкі екрани, де порожнеча
   праворуч і була проблемою, поводяться як раніше.
   Перший рядок — фолбек для рушіїв без safe; вони його просто лишають. */
.blog-scope .blog-cats__row { justify-content: center; justify-content: safe center }


/* ── tooltip.css ─────────────────────────────── */
/* =====================================================================
   tooltip.css — підказка блогу.

   Навіщо: вимога LIGA-9360 — коли авторів троє й більше, показувати «+N»
   і підказку зі списком імен. У прототипі Jira підказки немає.

   Чому НЕ перефарбований компонент ДС. У liga-ds тултіп є — директива
   `src/lib/tooltip/tooltip.directive.ts`, усередині `ld-tooltip-box` зі
   стилями `.ld-tooltip`. Але він ТЕМНИЙ (`--color-neutral-solid-900`) і
   позиціюється через CDK Overlay, тобто у статичному HTML не працює.
   Правка Serg (03.08.2026): «просто tooltip біленький з легенькою тінню».
   Тому це ОКРЕМА сайтова підказка — так само, як окремою є сайтова система
   кнопок (site-buttons.css). Компонент ДС при цьому не чіпаємо: його вигляд
   — власність ДС, а перефарбувати темний тултіп у білий = змінити компонент.
   ⚠️ Для розробника: у продукті це має бути `[ldTooltip]` з ДС; якщо
   потрібен саме білий варіант — це запит на новий варіант у ДС, а не
   локальний оверрайд.

   Значення — з токенів (свого hex/px тут немає):
     фон   --white, рамка --cntnr-border-default (як у статичних поверхонь ДС),
     тінь  --ds-elevation-2 (0 0 50px 10px #A8A8A826 — нейтральна висота ДС,
           та сама «легенька»), радіус --cntnr-corner-normal,
     текст --text-default, метрика 12/15 з .ld-tooltip (не вигадана).

   Механіка: CSS-only, текст живе в атрибуті `data-tip` і виводиться через
   content: attr(). Так підказка нічого не додає в DOM — макет лишається
   розфарбовуванням оригіналу, і check-content.py не бачить нового тексту.
   Доступність у статиці тримає `aria-label` на самому тригері.
   ===================================================================== */

.blog-scope [data-tip] {
  position: relative;
}

.blog-scope [data-tip]::after,

.blog-scope [data-tip]::before {
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease-out, visibility .15s ease-out;
  pointer-events: none;
  z-index: 1600;                      /* z-index з .ld-tooltip ДС */
}

.blog-scope [data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + var(--space-100));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;                   /* як у .ld-tooltip */
  padding: var(--space-075) var(--space-100);
  border: 1px solid var(--cntnr-border-default);
  border-radius: var(--cntnr-corner-normal);
  background: var(--white);
  box-shadow: var(--ds-elevation-2);
  color: var(--text-default);
  font-family: var(--site-font);
  font-size: 12px;
  line-height: 15px;
  letter-spacing: 0.25px;
  font-weight: 400;
  text-align: left;
  white-space: normal;
}

/* Хвостик — той самий квадрат, повернутий на 45°: так рамка й тінь
   продовжуються без окремих кольорів. */
.blog-scope [data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + var(--space-100) - 4px);
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid var(--cntnr-border-default);
  border-bottom: 1px solid var(--cntnr-border-default);
  background: var(--white);
}

.blog-scope [data-tip]:hover::after,

.blog-scope [data-tip]:hover::before,

.blog-scope [data-tip]:focus-visible::after,

.blog-scope [data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

.blog-scope [data-tip]:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
  border-radius: var(--cntnr-corner-small);
}


/* ── site-surface.css ─────────────────────────────── */
/* =====================================================================
   site-surface.css — фірмова графіка ligazakon.net на сторінках блогу.

   Навіщо окремий файл, а не правки в CSS блоків: це не «стиль блоку», а
   наскрізна ознака бренду, яку треба тримати в ОДНОМУ місці й не втратити
   при перегенерації блоків (build-blocks.py переписує art-*.css, blog-*.css).
   Підключається ОСТАННІМ (див. distribute.py), тому перебиває і блоки, і ld-*.

   Джерело всіх значень — computed styles живого https://ligazakon.net/
   і https://ligazakon.net/price/, зняті 05.08.2026. Самі кольори лежать
   токенами у variables.css, тут — тільки їх застосування.

   Рішення Serg 05.08.2026 (варіант A2 «Хаб»): на головній блогу робимо
   бук-енд + один кольоровий крок усередині, а НЕ повний 11-ступеневий
   ланцюг головної сайту. Причина: під сіткою карток кольорові смуги
   заважають читати список, а біла робоча зона — ні. Сайт сам так робить:
   у нього два регістри, маркетингова головна з ланцюгом і внутрішні
   сторінки з чергуванням білого й #F8F7FF.
   ===================================================================== */

/* ── D. Бордер контейнера — те саме напівпрозоре чорнило ─────────────────
   У блозі ДВІ системи ліній, і правки лише в одній не досить:
     • --line / --site-line — токени сайту, ними тримаються блоки art- і blog-
       (виправлено у variables.css);
       ⚠️ саме тут я щойно написав дві маски через скісну риску й закрив
       коментар передчасно послідовністю «зірочка-риска» — правило нижче
       мовчки загинуло. Та сама пастка описана у variables.css; не повторювати.
     • --cntnr-border-default — токен ДС, ним тримаються .card, .sb-card і
       компоненти ld-*. Саме він малює рамку карток на головній.
   Другий у site-brand.css відображений на --color-primary-200 (#eaebfc) —
   тобто РІВНО колір лавандової плашки, та сама пастка. Показово, що в самій
   ДС цей токен нейтральний (--color-neutral-solid-300), а на брендову
   лаванду його перевів наш же мапінг site-brand.css. Тобто повертаємо
   задум ДС і водночас попадаємо в реальне значення сайту.
   ⚠️ Правимо ТІЛЬКИ роль «лінія». --cntnr-bg-primary-active лишається на
   --color-primary-200: там лаванда — це ЗАЛИВКА, і вона там доречна.
   Перевизначення тут, а не в site-brand.css, бо site-brand-tokens.css
   (генерований) підключається пізніше й перебив би правку в джерелі. */
.blog-scope {
  --cntnr-border-default: var(--site-line);
}

/* ── A. Фонова прогресія головної ────────────────────────────────────────
   Градієнт живе на <body>, а не на секціях, і це не лінь: .blog-hero, .featured,
   .filters і .grid лежать УСЕРЕДИНІ одного div.wrap (max-width 1140px), тож
   фон на них був би шириною з колонку, а не на весь екран. Повнобічність
   через `width:100vw` свідомо не беремо — 100vw включає смугу скролу й дає
   горизонтальний скрол (у нас уже є такий борг, див. HANDOFF пункт 6).
   Фон <body> повнобічний за визначенням і нічого не ламає.

   Перші 45px перекриває непрозора .crumbs-bar, тому старт градієнта під нею
   не видно; висота 420px — це крихти (45) + герой (262) + верх слайдера,
   щоб картки виїжджали з ледь помітного тону, як секції на сайті. */
.blog-scope[data-bg="hub"] {
  background-color: var(--white);
  background-image: linear-gradient(180deg, var(--site-lav) 0%, var(--white) 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 420px;
}

/* Крок кольору всередині сторінки. Повнобічної смуги тут бути не може з тієї
   ж причини (блок живе в сітці .grid), тому колір несе сама картка дайджесту:
   лаванда → м'ята, той самий перехід, що .roles → .folders на сайті.
   Без прив'язки до [data-bg]: блок дайджесту стоїть і на решті сторінок-списків,
   і виглядати він там має так само — інакше один блок має два вигляди. */
.blog-scope .grid > .nl-inline {
  background: linear-gradient(135deg, var(--site-lav) 0%, var(--site-tint-mint) 100%);
}

/* Шов перед футером. Футер починається з #C2C7F8, а .cta-final закінчувався
   білим — на стику була різка лінія, і орнамент обривався просто по ній.
   На сайті шва немає, бо .section_subscribe доводить фон до тієї ж лаванди.
   Нижнім шаром лишається горизонтальний градієнт із Figma (підкладка
   орнаменту, node 5029:107601), верхнім — вертикальний вихід у #C2C7F8.
   Прозорий до 55%, щоб не забруднити середину блока. */
.blog-scope .cta-final {
  background:
    linear-gradient(180deg, rgba(194, 199, 248, 0) 55%, var(--site-lav-2) 100%),
    linear-gradient(90deg, #ffffff 0%, #e5e2ff 50%, #ffffff 100%);
}

/* ── B. Заливка слова в заголовку ────────────────────────────────────────
   Ознака сайту: одне слово в H1/H2 залите градієнтом через background-clip.
   Не наша вигадка — так зроблені «All-in-one», «АІ-офіс», «Одна підписка».
   ⚠️ color:transparent без підтримки clip-у = невидимий текст, тому фолбек
   обов'язковий, а не «про всяк випадок». */
.blog-scope .grad-text {
  background-image: var(--site-grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .blog-scope .grad-text { background-image: none; color: var(--site-accent); }
}

/* ── C. Темні поверхні — на справжній градієнт сайту ──────────────────────
   Було: наша власна пара #091D4A → --site-accent-hover → --site-accent.
   Її ніхто не затверджував, вона просто «схожа на фіолетовий». Справжня —
   #1B1937 → #7169E6, знята з блока підписки на головній.
   Високі панелі беруть діагональ 140deg (як на сайті), низькі смуги —
   100deg, бо на висоті 60–80px діагональ показує лише темний край. */
.blog-scope .sidebar-cta,

.blog-scope .sb-banner,

.blog-scope .feat-card,

.blog-scope .product-bridge { background-image: var(--site-grad-dark); }

.blog-scope .inline-cta,

.blog-scope .checklist-hdr,

.blog-scope .deadline-box { background-image: var(--site-grad-dark-wide); }

/* Шапка картки слайдера має власний, світліший градієнт — щоб її було видно
   на тілі картки, беремо ту саму пару, але зсунуту в бік світлого кінця. */
.blog-scope .feat-card .img { background-image: linear-gradient(135deg, #3A3568 0%, #7169E6 120%); }

/* ── E. Пастельна плашка під іконку ──────────────────────────────────────
   Плашка 72×72 з діагональним пастельним градієнтом — така сама, як під
   іконками в .solution і .section_academy на сайті. Ставимо одну, у блок
   дайджесту: там є справжня іконка за змістом (дзвіночок = підписка).
   Більше плашок — це вже питання контенту (які іконки, до чого), тому їх
   тут немає навмисно. */
.blog-scope .nl-tile {
  width: 72px;
  height: 72px;
  border-radius: var(--site-radius-card);
  background-image: var(--site-grad-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--site-accent);
}
/* Розкладка явна, бо плашка стоїть у розмітці ПІСЛЯ тексту: так додавання
   не зсуває існуючі вузли (на них тримаються прив'язки коментарів канваса),
   а сітка ставить її туди, де вона потрібна оку — ліворуч. */
.blog-scope .nl-inline .nl-in > div:first-child {
  display: grid;
  grid-template-columns: 72px 1fr;
  column-gap: 18px;
  align-items: start;
}
.blog-scope .nl-inline .nl-in > div:first-child > h2 { grid-column: 2; grid-row: 1 }
.blog-scope .nl-inline .nl-in > div:first-child > .sub { grid-column: 2; grid-row: 2 }
.blog-scope .nl-inline .nl-in > div:first-child > .nl-tile { grid-column: 1; grid-row: 1 / span 2 }

@media (max-width: 640px) {
  /* Плашка на вузькому екрані з'їдає пів рядка заголовка — прибираємо колонку. */
  .blog-scope .nl-inline .nl-in > div:first-child { grid-template-columns: 1fr }
  .blog-scope .nl-inline .nl-in > div:first-child > .nl-tile { display: none }
  .blog-scope .nl-inline .nl-in > div:first-child > h2 { grid-column: 1 }
  .blog-scope .nl-inline .nl-in > div:first-child > .sub { grid-column: 1 }
}



/* ── Обкладинка категорії ─────────────────────────────────────────────────
   Властивість `cover` сторінки-категорії, яку малює blogPageHero (лише на
   1-й сторінці пагінації, як і SEO-інтро). Пропорція фіксована через
   aspect-ratio, а не висотою: смуга лишається однаковою на будь-якій
   ширині контейнера, тобто нічого не стрибає при завантаженні (CLS). */
.blog-scope .blog-hero .hero-cover {
  aspect-ratio: 8 / 3;
  overflow: hidden;
  border-radius: var(--cntnr-corner-large);
  margin-top: var(--space-250);
  background: var(--color-primary-200);   /* поки картинка вантажиться */
}
.blog-scope .blog-hero .hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Клемп рядків ─────────────────────────────────────────────────────────
   `display:-webkit-box` + `-webkit-line-clamp` — попри префікс, це НЕ
   «тільки WebKit»: так клемп розуміють усі рушії (Chromium, WebKit і Gecko),
   а CSS Overflow 4 закріплює цю форму як обов'язкову для сумісності.
   Стандартний `line-clamp` без префікса стоїть поруч — на майбутнє, коли
   його підтримають, — але сам по собі він поки працює не скрізь.
   Якщо ж браузер клемпу не знає зовсім — текст не розповзається, а
   обрізається по висоті тієї ж кількості рядків (без «…»). */
@supports not (-webkit-line-clamp: 1) {
  .blog-scope .card h3,
  .blog-scope .card .desc,
  .blog-scope .feat-card p { display: block; max-height: calc(3 * 1lh); }
  .blog-scope .feat-card h3 { display: block; max-height: calc(2 * 1lh); }
}