/* ── art-base.css ─────────────────────────────── */ /* art-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; padding-top: var(--site-header-h); } .blog-scope { font-family:var(--font-b);color:var(--ink);background:var(--lav);line-height:1.6;font-size:16px } .blog-scope .wrap { max-width:1160px;margin:0 auto;padding:0 22px } .blog-scope h1, .blog-scope h2, .blog-scope h3 { font-family:var(--font-h);line-height:1.2 } .blog-scope a { color:var(--primary);text-decoration:none } .blog-scope a:hover { text-decoration:underline } .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 .reading-progress { position:fixed;top:0;left:0;height:3px;background:var(--primary);z-index:200;transition:width .1s;width:0 } .blog-scope .page-layout { display:grid;grid-template-columns:1fr 308px;gap:28px;align-items:start;padding:28px 0 64px } .blog-scope .article-meta { display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap } .blog-scope .meta-date { font-size:12px;color:var(--muted) } .blog-scope .meta-sep { color:var(--line) } .blog-scope h1.atitle { font-size:28px;font-weight:800;letter-spacing:-.4px;margin-bottom:14px;line-height:1.22 } .blog-scope .author-box { display:flex;gap:13px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line);margin-top:6px } /* Картка секції (.section*) переїхала в blog-base.css: блок «FAQ статті» тепер дозволений і в секціях листингів, а вони article.css не підключають. */ .blog-scope .change-blocks { display:flex;flex-direction:column;gap:18px;margin:18px 0 } .blog-scope .salary-row { display:flex;gap:10px;flex-wrap:wrap;margin:9px 0 } .blog-scope .salary-badge { display:inline-flex;align-items:baseline;gap:6px;background:var(--lav-2);border:1px solid var(--line);border-radius: var(--site-radius-sm);padding:7px 12px } .blog-scope .salary-badge .sl { font-size:11px;color:var(--muted) } .blog-scope .salary-badge .sv { font-size:16px;font-weight:800;color:var(--primary);font-family:var(--font-h) } .blog-scope .salary-badge .ss { font-size:11px;color:var(--muted) } .blog-scope .mistakes-list { display:flex;flex-direction:column;gap:12px;margin:16px 0;counter-reset:mistake } .blog-scope .checklist-card { background:var(--white);border:2px solid var(--primary);border-radius: var(--radius-lg);overflow:hidden;margin:22px 0 } .blog-scope .risk-list { display:flex;flex-direction:column;gap:7px;margin:14px 0 } .blog-scope .product-bridge { background:linear-gradient(145deg,#091D4A 0%,var(--site-accent-hover) 50%,var(--site-accent) 100%);border-radius: var(--radius-lg);padding:calc(30px - var(--art-pad-cut) * .7) calc(30px - var(--art-pad-cut));margin:22px 0;color:#fff } .blog-scope .step-list { display:flex;flex-direction:column;gap:11px;margin:14px 0;counter-reset:step } .blog-scope .field { margin-bottom:12px } .blog-scope .field label { display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:4px } .blog-scope .field input { width:100%;padding:11px 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 .field input::placeholder { color:#a8a4be } .blog-scope .form-note { font-size:12px;color:var(--muted);margin-top:8px;text-align:center } .blog-scope .ok { text-align:center;padding:16px 0 } .blog-scope .ok .check { width:60px;height:60px;border-radius: 50%;background:var(--lav-2);color:var(--primary);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px } @media(max-width:900px) { .blog-scope .page-layout { grid-template-columns:1fr } .blog-scope h1.atitle { font-size:23px } /* .section тут більше немає — правило переїхало в blog-base.css разом із самою карткою секції. */ .blog-scope { padding-bottom:72px } /* Тут стояв список блоків із `margin: 10px 0 !important` — «на мобільному тісніше». Прибрано: тепер вертикальний ритм статті тримає одне число (--art-block-gap, див. кінець файлу), і воно саме стискається до 10px на вузькому екрані. !important тут лише заважав би тому правилу. */ } /* ── art-content.css ─────────────────────────────── */ /* art-content.css — блок макета блогу. Стилі виділені з прототипу Jira (LIGA-9364) і переведені на токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter. Згенеровано shared/build-blocks.py — правити тут, не в index.html. */ .blog-scope .callout { border-radius: var(--site-radius-sm);padding:14px 18px;margin:14px 0;display:flex;gap:11px;align-items:flex-start; width: 100%;} .blog-scope .callout .ico { font-size:18px;flex-shrink:0;margin-top:1px } /* Заголовок виноски — по класу, а НЕ по тегу strong: текст виноски тепер rich text (міграція v50), і правило на тезі робило блоком кожне жирне слово всередині абзацу. */ .blog-scope .callout .callout-title { display:block;font-size:13.5px;font-weight:700;margin-bottom:3px } .blog-scope .callout p { font-size:13.5px;margin:0;line-height:1.6;color:inherit } /* Той самий rich text дозволив кілька абзаців і списки — без цих правил абзаци злипались би (margin:0 вище), а список лишався б без розміру й відступів. Зроблено так само, як для .pb-header (міграція v47). */ .blog-scope .callout p + p { margin-top:6px } .blog-scope .callout ul, .blog-scope .callout ol { font-size:13.5px;line-height:1.6;margin:6px 0 0 18px } .blog-scope .callout li { margin-bottom:3px } .blog-scope .callout.warning { background:var(--yellow-bg);border-left:4px solid var(--yellow);color:#5D4037 } .blog-scope .callout.danger { background:var(--red-bg);border-left:4px solid var(--red);color:#7B1212 } .blog-scope .callout.success { background:var(--green-bg);border-left:4px solid var(--green);color:#1A4731 } .blog-scope .callout.info { background:var(--lav-2);border-left:4px solid var(--primary);color:#2D1B6E } .blog-scope .roles-grid { display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:18px 0 } .blog-scope .role-card { border-radius: var(--site-radius-sm);padding:16px;border:1px solid var(--line);background:var(--lav) } .blog-scope .role-card.ceo { border-left:4px solid #E65100;background:#FFF3E0 } .blog-scope .role-card.hr { border-left:4px solid var(--green);background:var(--green-bg) } .blog-scope .role-card.lawyer { border-left:4px solid #1565C0;background:#EBF4FF } .blog-scope .role-card.accountant { border-left:4px solid #7B1FA2;background:#F3E5F5 } .blog-scope .role-card.military { border-left:4px solid #455A64;background:#F5F5F5;grid-column:span 2 } .blog-scope .role-hdr { display:flex;align-items:center;gap:9px;margin-bottom:9px } .blog-scope .role-ico { font-size:20px } .blog-scope .role-title { font-size:13.5px;font-weight:700 } .blog-scope .role-card.ceo .role-title { color:#E65100 } .blog-scope .role-card.hr .role-title { color:var(--green) } .blog-scope .role-card.lawyer .role-title { color:#1565C0 } .blog-scope .role-card.accountant .role-title { color:#7B1FA2 } .blog-scope .role-card.military .role-title { color:#455A64 } .blog-scope .role-card p { font-size:13px;color:var(--site-muted);margin:0;line-height:1.6 } .blog-scope .change-block { border:1px solid var(--line);border-radius: var(--site-radius-sm);padding:20px 22px;background:var(--white);display:flex;gap:16px } .blog-scope .change-num { font-size:30px;font-weight:800;color:var(--primary);opacity:.18;flex-shrink:0;line-height:1;min-width:38px;font-family:var(--font-h) } .blog-scope .change-body h3 { font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 7px } .blog-scope .change-body p { font-size:13.5px;color:var(--site-muted);margin:0 0 9px;line-height:1.65 } .blog-scope .change-body p:last-child { margin:0 } .blog-scope .mistake-item { display:flex;gap:13px;align-items:flex-start;padding:14px 16px;background:var(--lav);border:1px solid var(--line);border-radius: var(--site-radius-sm);border-left:4px solid var(--primary);counter-increment:mistake } .blog-scope .mistake-num { font-size:11px;font-weight:800;color:#fff;background:var(--primary);width:22px;height:22px;border-radius: 50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-family:var(--font-h) } .blog-scope .mistake-num::after { content:counter(mistake) } .blog-scope .mistake-body strong { font-size:14.5px;font-weight:700;color:var(--ink);display:block;margin-bottom:4px } .blog-scope .mistake-body p { font-size:13.5px;color:var(--site-muted);margin:0;line-height:1.6 } .blog-scope .checklist-hdr { background:linear-gradient(135deg,var(--site-accent-hover),var(--site-accent));padding:calc(20px - var(--art-pad-cut) * .5) calc(26px - var(--art-pad-cut) * .7);color:#fff } .blog-scope .checklist-hdr h3 { font-size:17px;font-weight:800;font-family:var(--font-h);margin-bottom:4px } .blog-scope .checklist-hdr p { font-size:12.5px;color: #ffffff;margin:0 } .blog-scope .checklist-body { padding:calc(18px - var(--art-pad-cut) * .4) calc(26px - var(--art-pad-cut) * .7) } .blog-scope .checklist-items { display:flex;flex-direction:column;gap:8px } .blog-scope .cl-item { display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--lav) } .blog-scope .cl-item:last-child { border-bottom:none } .blog-scope .cl-box { width:20px;height:20px;border:2px solid var(--line);border-radius: 5px;flex-shrink:0;margin-top:2px } .blog-scope .cl-item span { font-size:13.5px;color:var(--site-muted);line-height:1.55;font-weight:500 } .blog-scope .checklist-cta { display:flex;flex-direction:column;gap:16px;background:var(--lav);border-top:1px solid var(--line);padding:calc(22px - var(--art-pad-cut) * .4) calc(28px - var(--art-pad-cut) * .7) calc(24px - var(--art-pad-cut) * .4) } .blog-scope .checklist-cta p { font-size:13.5px;color:var(--site-muted);margin-bottom:13px;line-height:1.6 } .blog-scope .checklist-cta__text > :first-child { margin-top:0 !important } .blog-scope .checklist-cta__text > :last-child { margin-bottom:0 !important } .blog-scope .checklist-cta__actions { display:flex;flex-direction:column;gap:8px } .blog-scope .checklist-cta strong { color:var(--ink) } .blog-scope .risk-item { display:flex;gap:9px;align-items:flex-start;padding:9px 13px;background:var(--red-bg);border-radius: 8px;border-left:3px solid var(--red) } .blog-scope .risk-item .ri { font-size:14px;flex-shrink:0;margin-top:2px } .blog-scope .risk-item span { font-size:13.5px;color:var(--site-muted);line-height:1.5 } .blog-scope .step-item { display:flex;gap:13px;align-items:flex-start;counter-increment:step } .blog-scope .step-n { min-width:28px;height:28px;background:var(--primary);color:#fff;border-radius: 50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;margin-top:2px;font-family:var(--font-h) } .blog-scope .step-n::after { content:counter(step) } .blog-scope .step-body { font-size:14px;color:var(--site-muted);line-height:1.6;padding-top:4px } .blog-scope .step-body strong { color:var(--ink) } .blog-scope .sources-card { background:var(--white);border:1px solid var(--line);border-radius: var(--site-radius-sm);padding:18px 22px;margin-bottom:18px } .blog-scope .sources-card h4 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px } .blog-scope .sources-card ol { padding-left:18px;display:flex;flex-direction:column;gap:6px } .blog-scope .sources-card li { font-size:12.5px;color:var(--muted);line-height:1.5 } .blog-scope .seg-toggle { display:flex;gap:6px;background:var(--lav);border-radius: var(--site-radius-sm);padding:5px;margin-bottom:16px } .blog-scope .seg-toggle button { flex:1;border:none;background:transparent;padding:8px 6px;border-radius: var(--site-radius-sm);cursor:pointer;font-weight:600;font-size:12.5px;color:var(--muted);font-family:var(--font-b);transition:.15s } .blog-scope .seg-toggle button.active { background:#fff;color:var(--primary);box-shadow:var(--shadow-s) } @media(max-width:900px) { .blog-scope .roles-grid { grid-template-columns:1fr } .blog-scope .role-card.military { grid-column:span 1 } .blog-scope .page-layout { gap: 20px; } } /* ── art-cta.css ─────────────────────────────── */ /* art-cta.css — блок макета блогу. Стилі виділені з прототипу Jira (LIGA-9364) і переведені на токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter. Згенеровано shared/build-blocks.py — правити тут, не в index.html. */ .blog-scope .inline-cta { background:linear-gradient(135deg,var(--site-accent-hover) 0%,var(--site-accent) 55%,var(--site-accent-soft) 120%);border-radius: var(--radius-lg);padding:calc(26px - var(--art-pad-cut) * .6) calc(30px - var(--art-pad-cut));margin:24px 0;color:#fff;display:flex;gap:22px;align-items:center } .blog-scope .inline-cta-text h3 { font-size:18px;font-weight:800;font-family:var(--font-h);margin-bottom:6px } .blog-scope .inline-cta-text p { font-size:13px;color: #ffffff;margin:0;line-height:1.6 } /* Текст CTA — rich text (міграція v50): абзаци, посилання й списки. На градієнті штатний колір посилання нечитабельний, тому біле з підкресленням — як у .pb-header (v47). */ .blog-scope .inline-cta-text p + p { margin-top:6px } .blog-scope .inline-cta-text a { color:#fff;text-decoration:underline } .blog-scope .inline-cta-text ul, .blog-scope .inline-cta-text ol { font-size:13px;color:#fff;line-height:1.6;margin:6px 0 0 18px } .blog-scope .inline-cta-text li { margin-bottom:3px } .blog-scope .inline-cta-text { flex:1 } .blog-scope .inline-cta-btns { display:flex;flex-direction:column;gap:8px;flex-shrink:0 } .blog-scope .pb-badge { display:inline-block;background:rgba(255,255,255,.12);color:#ffffff;font-size:10px;font-weight:700;padding:4px 11px;border-radius: var(--site-radius-card);letter-spacing:.7px;text-transform:uppercase;margin-bottom:10px;font-family:var(--font-h) } .blog-scope .pb-header h3 { font-size:21px;font-weight:800;font-family:var(--font-h);margin-bottom:7px } .blog-scope .pb-header p { font-size:13.5px;color: #ffffff;margin-bottom:22px;line-height:1.6 } /* Текст блока — rich text (міграція v47), тож редактор може поставити посилання чи список. На темному градієнті штатні кольори були б нечитані, а списку без цих правил бракувало б розміру й відступів. */ .blog-scope .pb-header a { color:#fff;text-decoration:underline } .blog-scope .pb-header ul, .blog-scope .pb-header ol { font-size:13.5px;color:#fff;line-height:1.6;margin:0 0 22px 18px } .blog-scope .pb-header li { margin-bottom:4px } .blog-scope .pb-features { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px } .blog-scope .pb-feat { background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius: var(--site-radius-sm);padding:14px 16px } .blog-scope .pb-feat-icon { font-size:20px;display:block;margin-bottom:7px } .blog-scope .pb-feat-title { font-size:13.5px;font-weight:700;color:#fff;margin-bottom:4px;font-family:var(--font-h) } .blog-scope .pb-feat-desc { font-size:12.5px;color: #ffffff;line-height:1.5 } .blog-scope .pb-cta { display:flex;gap:10px;flex-wrap:wrap } .blog-scope .sidebar-cta { background:linear-gradient(160deg,var(--site-accent-hover) 0%,var(--site-accent) 100%);border-radius: var(--radius-lg);padding:24px;color:#fff;margin-bottom:14px;box-shadow:var(--shadow) } /* Рев'ю #18: на темному фоні текст лише білий. Прозорість лишаємо як ієрархію, але піднімаємо найблідніші рівні (.5/.4) до читабельних. */ .blog-scope .sb-badge { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color: #ffffff;margin-bottom:8px;font-family:var(--font-h) } .blog-scope .sidebar-cta h3 { font-size:16px;font-weight:800;font-family:var(--font-h);margin-bottom:10px;line-height:1.35 } .blog-scope .sidebar-cta p { font-size:13px;color:#ffffff;margin-bottom:16px;line-height:1.6 } .blog-scope .sidebar-cta ul { list-style:none;margin-bottom:18px } .blog-scope .sidebar-cta ul li { font-size:13px;color:#ffffff;padding:4px 0 4px 20px;position:relative } .blog-scope .sidebar-cta ul li::before { content:"✓";position:absolute;left:0;color:#fff;font-weight:700 } .blog-scope .sb-trust { font-size:11.5px;color:#ffffff;text-align:center;margin-top:11px;line-height:1.5 } .blog-scope .sidebar-links-card { background:var(--white);border:1px solid var(--line);border-radius: var(--site-radius-sm);padding:16px 18px } .blog-scope .sidebar-links-card h4 { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:10px } .blog-scope .sb-link { display:block;color:var(--primary);text-decoration:none;font-size:13px;padding:7px 0;border-bottom:1px solid var(--line);line-height:1.45 } .blog-scope .sb-link:last-child { border-bottom:none } .blog-scope .sb-link:hover { color:var(--ink) } @media(max-width:900px) { .blog-scope .pb-features { grid-template-columns:1fr } .blog-scope .inline-cta { flex-direction:column } } /* ── art-faq.css ─────────────────────────────── */ /* art-faq.css — блок макета блогу. Стилі виділені з прототипу Jira (LIGA-9364) і переведені на токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter. Згенеровано shared/build-blocks.py — правити тут, не в index.html. */ /* Акордеон FAQ (.faq-*) переїхав у blog-base.css — блок дозволений і на листингах, а вони цей файл не підключають. */ /* ── art-hero.css ─────────────────────────────── */ /* art-hero.css — блок макета блогу. Стилі виділені з прототипу Jira (LIGA-9364) і переведені на токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter. Згенеровано shared/build-blocks.py — правити тут, не в index.html. */ .blog-scope .alead { font-size:17px;color:#4a4760;line-height:1.65;margin-bottom:22px } /* Цифри тягнуться по всій смузі, скільки б їх не було. Було grid-template-columns:repeat(3,1fr) — рівно три колонки: одна цифра займала третину смуги, а дві третини лишались порожнім градієнтом; четверта цифра падала в другий ряд і висла ліворуч. Тепер flex із базою 0 (flex:1 1 0): скільки цифр — стільки й рівних часток рядка. База саме 0, а не 180px: із ненульовою базою три цифри в смузі 610px уже не вміщались за розрахунком переносу й ставали 2+1 — тобто ламався той випадок, який раніше працював (заміряно на статті про бронювання). min-width:0 — щоб частка справді ділилась порівну, а не впиралась у найдовше слово підпису. */ .blog-scope .deadline-box { background:linear-gradient(135deg,var(--site-accent-hover) 0%,var(--site-accent) 55%,var(--site-accent-soft) 120%);border-radius: 12px;padding:calc(22px - var(--art-pad-cut) * .5) calc(26px - var(--art-pad-cut) * .8);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:18px;position:relative;overflow:hidden } .blog-scope .deadline-box > * { flex:1 1 0;min-width:0 } .blog-scope .deadline-box::before { content:'';position:absolute;top:-30px;right:-30px;width:130px;height:130px;background:rgba(255,255,255,.06);border-radius: 50% } .blog-scope .dl-label { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color: #ffffff;margin-bottom:5px } .blog-scope .dl-value { font-size:17px;font-weight:800;color:#fff;line-height:1.2;font-family:var(--font-h) } /* Рев'ю #18: на темному фоні текст лише білий. Акцент числа тримає насиченість (font-weight:800 успадкований), а не жовтий колір. */ .blog-scope .dl-value span { color:#fff } .blog-scope .dl-sub { font-size:11px;color: #ffffff;margin-top:2px } .blog-scope .author-av { width:42px;height:42px;background:var(--lav-2);border-radius: 50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:800;font-size:15px;flex-shrink:0;font-family:var(--font-h) } .blog-scope .author-info strong { font-size:14px;font-weight:700;color:var(--ink);display:block;margin-bottom:2px } .blog-scope .author-info span { font-size:12px;color:var(--muted);display:block;margin-bottom:3px } .blog-scope .author-info p { font-size:13px;color:var(--site-muted);margin:0;line-height:1.5 } .blog-scope .hero-cta { display:flex;gap:12px;flex-wrap:wrap;margin-bottom:0;padding-top:18px } @media(max-width:900px) { .blog-scope .deadline-box { flex-direction:column } } @media(max-width:600px) { .blog-scope .hero-cta { flex-direction:column } } /* ── art-layout.css ─────────────────────────────── */ /* art-layout.css — блок макета блогу. Стилі виділені з прототипу Jira (LIGA-9364) і переведені на токени UI сайту: кольори/радіуси через var(--site-*), шрифт Inter. Згенеровано shared/build-blocks.py — правити тут, не в index.html. */ .blog-scope .article-col { min-width:0 } /* ⚠️ Правка Serg 04.08.2026: «зверху зайвий відступ, треба щоб було притиснуто догори». Причина була не у відступі: після переїзду змісту (#14) сайдбар став ВИЩИМ за вікно, а `position:sticky` для задовгого елемента не чіпляє верх — він їде разом зі сторінкою, доки не покажеться його низ. Звідси й «пливучий» проміжок над CTA. Лікуємо причину: тримаємо колонку в межах вікна (max-height) і робимо її флекс-колонкою — тоді sticky справді фіксує верх, а зміст унизу отримує власний скрол (art-toc.css) замість того, щоб вилазити за екран. */ .blog-scope .sidebar-col { position:sticky; top:88px; /* 80px липкої шапки + 8px подих */ display:flex; flex-direction:column; gap:14px; /* мінус липка шапка (88) і нижня смуга CTA (~76) + подих */ max-height:calc(100vh - 88px - 76px - 16px); } /* проміжки віддані flex-gap, щоб не складались із власними margin карток */ .blog-scope .sidebar-col > * { margin-bottom:0 } .blog-scope .sidebar-col .sidebar-cta { flex:0 0 auto } /* картка змісту може стискатись і віддавати свою висоту під внутрішній скрол */ .blog-scope .sidebar-col .toc-card { flex:0 1 auto;min-height:0;display:flex;flex-direction:column } /* Рев'ю #14: зміст переїхав у сайдбар під CTA — стікі він отримує від .sidebar-col вище. Висоту обмежує сам список (art-toc.css: 5 рядків згорнуто, розгортання на ховер), тому картку тут не ріжемо. */ /* Рев'ю #14: «Пов'язані матеріали» тепер у кінці статті, на всю ширину колонки — розкладаємо лінки у дві колонки, щоб блок не був вузькою смугою. */ /* margin-top:22px звідси прибрано — відступ над «Пов'язаними матеріалами» тепер такий самий, як між рештою блоків (--art-block-gap, кінець файлу). Правило мало специфічність (0,3,0) і перебивало б спільний ритм. */ .blog-scope .article-col > .sidebar-links-card h4 { margin-bottom:4px } @media(min-width:640px) { .blog-scope .article-col > .sidebar-links-card { display:grid;grid-template-columns:1fr 1fr;column-gap:26px } .blog-scope .article-col > .sidebar-links-card h4 { grid-column:1 / -1 } } @media(max-width:900px) { /* Планшет і мобільний. Сайдбарний CTA сховано (його дублює нижня смуга), а зміст лишається — інакше правка #14 забирає навігацію по статті. ⚠️ Правка Serg 04.08.2026: зміст має бути ПІД першим блоком (обкладинка, заголовок, лід, ключові цифри, CTA), а не над усією статтею. Самим `order` на