/* ============================================================
   Блогът — ДОБАВКА върху styles_min.css, не заместител.
   Шапката, футърът, цветовете, шрифтът и бутоните идват от
   сайта; тук стои само това, което статия има, а лендинг няма.

   Реорганизация 2026-09-01: първата версия беше самостоятелен
   дизайн със свой хедър и серифен шрифт. Изглеждаше като друг
   сайт, затова е сведена до добавка.
   ============================================================ */

/* Шапката на сайта е position:fixed и е висока 73–100px според ширината,
   а под 768px изчезва съвсем. Без този отстъп трошките влизат под нея. */
.blog-section { padding: 8.5rem 5% 4rem; }
.blog-container { max-width: 1200px; margin: 0 auto; }
.blog-narrow { max-width: 760px; }

/* ---------- заглавна част на списъка ---------- */
.blog-top { margin-bottom: 2.2rem; }
.blog-top h1 {
    margin: .9rem 0 .6rem;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.12;
    color: var(--text-primary, #2a1a4a);
}
.blog-top > p {
    max-width: 62ch;
    margin: 0;
    color: var(--text-secondary, #5b5175);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ---------- филтри ---------- */
.bfilters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem; }
.bfilter {
    appearance: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: 0 1rem;
    border: 1px solid #e7dffb;
    border-radius: 999px;
    background: #fff;
    color: #5b5175;
    font: inherit;
    font-size: .87rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.bfilter:hover { border-color: #c3a9ff; color: #6300ff; }
.bfilter.is-here { background: #2a1a4a; border-color: #2a1a4a; color: #fff; }
.bfilter.is-here .dot { background: #fff; }
.bfilter:focus-visible { outline: 2px solid #6300ff; outline-offset: 2px; }

/* Цветът на точката носи темата — това е информация, не украса. */
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #6300ff; }
.dot.t-portali { background: #1acc8d; }
.dot.t-prodazhbi { background: #6300ff; }
.dot.t-ai { background: #e08a1e; }

/* ---------- редът със спецификации (граматиката на обява) ---------- */
.specs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    color: #6b6088;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.specs .sep { width: 3px; height: 3px; border-radius: 50%; background: #cfc6e4; }
.specs .theme { display: inline-flex; align-items: center; gap: .38rem; color: #2a1a4a; }

/* ---------- най-новото ---------- */
.feature {
    display: block;
    margin-top: 2rem;
    padding: 1.9rem 2rem 1.7rem;
    border: 1px solid #ece5ff;
    border-radius: 22px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(26, 204, 141, .10) 0%, rgba(26, 204, 141, 0) 55%),
        #fff;
    box-shadow: 0 6px 22px rgba(60, 26, 120, .05);
    text-decoration: none;
    color: inherit;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.feature:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(60, 26, 120, .10); border-color: #d9c9ff; }
.feature .flag {
    display: inline-block;
    margin-bottom: .85rem;
    padding: .22rem .6rem;
    border-radius: 7px;
    background: rgba(26, 204, 141, .14);
    color: #0a6a49;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.feature h2 {
    margin: 0 0 .55rem;
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.22;
    color: #2a1a4a;
}
.feature > p {
    max-width: 66ch;
    margin: 0 0 1.1rem;
    color: #453b63;
    font-size: 1.01rem;
    line-height: 1.7;
}

/* ---------- списъкът ---------- */
.blist { margin: 2.2rem 0 0; padding: 0; list-style: none; border-top: 1px solid #ece5ff; }
.blist li { border-bottom: 1px solid #ece5ff; }
.bitem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.45rem .35rem;
    text-decoration: none;
    color: inherit;
    transition: padding-left .18s;
}
.bitem:hover { padding-left: .8rem; }
.bitem h3 {
    margin: .5rem 0 .35rem;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.3px;
    line-height: 1.3;
    color: #2a1a4a;
}
.bitem:hover h3 { color: #6300ff; }
.bitem p { margin: 0; max-width: 64ch; color: #5b5175; font-size: .95rem; line-height: 1.6; }
.barrow {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid #ece5ff;
    border-radius: 50%;
    color: #6300ff;
    transition: background .18s, border-color .18s, transform .18s;
}
.bitem:hover .barrow { background: #6300ff; border-color: #6300ff; color: #fff; transform: translateX(3px); }
.bempty { padding: 2.5rem 0; color: #6b6088; text-align: center; }

/* ---------- страница на статия ---------- */
/* Всичко в лявата колона на един и същи ляв ръб: заглавието, „Накратко"
   и текстът. Първата версия слагаше заглавието в отделен тесен контейнер
   и то започваше 190px по-навътре от текста под него. */
.alayout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 236px;
    gap: 3.4rem;
    align-items: start;
}
.acol { min-width: 0; max-width: 760px; }

.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; color: #6b6088; font-size: .85rem; }
.crumbs a { color: #6b6088; text-decoration: none; }
.crumbs a:hover { color: #6300ff; text-decoration: underline; }
.crumbs span[aria-current] { color: #2a1a4a; font-weight: 700; }

.ahead { margin-top: 1.3rem; }
.ahead h1 {
    margin: .75rem 0 0;
    font-size: clamp(1.8rem, 3.6vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.9px;
    line-height: 1.16;
    color: #2a1a4a;
}

/* Прекият отговор преди дългия — служи и на брокера, който бърза,
   и на търсачките, които цитират кратък пасаж. */
.tldr {
    margin: 1.7rem 0 0;
    padding: 1.2rem 1.35rem 1.25rem;
    border: 1px solid rgba(26, 204, 141, .3);
    border-left: 4px solid #1acc8d;
    border-radius: 6px 16px 16px 6px;
    background: linear-gradient(135deg, rgba(26, 204, 141, .09), rgba(99, 0, 255, .05));
}
.tldr b {
    display: block;
    margin-bottom: .4rem;
    color: #0a6a49;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.tldr p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: #2a1a4a; font-weight: 600; }

/* ---------- тялото ---------- */
.prose { margin-top: 2.2rem; font-size: 1.04rem; line-height: 1.78; color: #453b63; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.2rem; }
.prose h2 {
    margin: 2.5rem 0 .8rem;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.4px;
    line-height: 1.3;
    color: #2a1a4a;
    scroll-margin-top: 130px;
}
.prose h3 {
    margin: 1.8rem 0 .55rem;
    font-size: 1.08rem;
    font-weight: 800;
    color: #2a1a4a;
    scroll-margin-top: 130px;
}
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: #6300ff; }
.prose strong { color: #2a1a4a; font-weight: 700; }
.prose a { color: #6300ff; text-underline-offset: 2px; }
.prose em { font-style: italic; }

.keybox {
    margin: 1.7rem 0;
    padding: 1.15rem 1.3rem;
    border: 1px solid #ece5ff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(60, 26, 120, .05);
}
.keybox b {
    display: block;
    margin-bottom: .5rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6300ff;
}
.keybox ul { margin: 0; padding-left: 1.1rem; }
.keybox li { font-size: .99rem; }

.tablewrap { overflow-x: auto; margin: 1.6rem 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { padding: .7rem .8rem; border-bottom: 1px solid #ece5ff; text-align: left; vertical-align: top; }
.prose th { color: #6b6088; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.prose tbody tr:hover { background: #fbf9ff; }

/* ---------- съдържание отстрани ---------- */
.toc { position: sticky; top: 130px; }
.toc b {
    display: block;
    margin-bottom: .7rem;
    color: #6b6088;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid #ece5ff; }
.toc a {
    display: block;
    padding: .38rem 0 .38rem .85rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: #6b6088;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: none;
}
.toc a:hover { color: #6300ff; }
.toc a.on { color: #2a1a4a; font-weight: 800; border-left-color: #6300ff; }

/* ---------- подпис, призив, свързани ---------- */
.bauthor {
    display: flex;
    align-items: center;
    gap: .95rem;
    margin-top: 2.6rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid #ece5ff;
    border-radius: 16px;
    background: #fff;
}
.bauthor img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.bauthor p { margin: 0; font-size: .92rem; color: #5b5175; line-height: 1.55; }
.bauthor p b { display: block; color: #2a1a4a; font-size: 1rem; }

.acta {
    margin-top: 1.8rem;
    padding: 1.8rem 1.9rem;
    border: 1px solid #ece5ff;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(99, 0, 255, .09), rgba(26, 204, 141, .10));
}
.acta h2 { margin: 0 0 .4rem; font-size: 1.26rem; font-weight: 800; letter-spacing: -.3px; color: #2a1a4a; }
.acta p { margin: 0 0 1.1rem; max-width: 58ch; color: #453b63; font-size: .98rem; line-height: 1.65; }

.related { margin-top: 3rem; }
.related > b {
    display: block;
    margin-bottom: 1rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6b6088;
}
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.rcard {
    display: block;
    padding: 1.15rem 1.25rem;
    border: 1px solid #ece5ff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(60, 26, 120, .05);
    text-decoration: none;
    color: inherit;
    transition: transform .18s, border-color .18s;
}
.rcard:hover { transform: translateY(-2px); border-color: #d9c9ff; }
.rcard h3 { margin: .55rem 0 0; font-size: 1.01rem; font-weight: 800; line-height: 1.35; color: #2a1a4a; }

/* ---------- по-тесни екрани ---------- */
@media (max-width: 1000px) {
    .alayout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .acol { max-width: none; }
    .toc { position: static; order: -1; margin-top: 1.6rem; padding-bottom: 1.4rem; border-bottom: 1px solid #ece5ff; }
    .toc ol { display: flex; flex-wrap: wrap; gap: .3rem; border-left: 0; }
    .toc a { padding: .34rem .75rem; margin-left: 0; border: 1px solid #ece5ff; border-radius: 999px; }
    .toc a.on { border-color: #6300ff; }
}

@media (max-width: 768px) {
    .blog-section { padding: 1.6rem 1.1rem 3rem; }
    .feature { padding: 1.35rem 1.2rem; border-radius: 18px; }
    .bitem { grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1.2rem .1rem; }
    .bitem:hover { padding-left: .1rem; }
    .barrow { display: none; }
    .related-grid { grid-template-columns: minmax(0, 1fr); }
    .acta { padding: 1.35rem 1.2rem; }
    .keybox { padding: 1rem 1.05rem; }
    .prose { font-size: 1.02rem; }
    .bfilter { font-size: .82rem; padding: 0 .8rem; }
}


/* ---------- страници ---------- */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 2.4rem;
    padding-top: 1.8rem;
    border-top: 1px solid #ece5ff;
}
.pager a, .pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 .9rem;
    border: 1px solid #ece5ff;
    border-radius: 999px;
    background: #fff;
    color: #5b5175;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}
.pager a:hover { border-color: #c3a9ff; color: #6300ff; }
.pager .pg-nums { display: inline-flex; gap: .35rem; border: 0; background: none; padding: 0; min-height: 0; }
.pg-num { min-width: 40px; padding: 0 .55rem; }
.pg-num.is-here { background: #2a1a4a; border-color: #2a1a4a; color: #fff; }
.pager .is-off { opacity: .38; }
.pager a:focus-visible { outline: 2px solid #6300ff; outline-offset: 2px; }

/* Уводът на тематична страница съдържа връзка обратно към целия блог. */
.blog-top > p a { color: #6300ff; font-weight: 700; }

@media (max-width: 700px) {
    .pager { gap: .35rem; }
    .pager a, .pager span { min-height: 38px; padding: 0 .7rem; font-size: .83rem; }
    .pg-num { min-width: 36px; }
    .pg-prev, .pg-next { order: 1; }
    .pager .pg-nums { order: 0; width: 100%; justify-content: center; margin-bottom: .4rem; }
}