/* ═══ Блогът: индексът, статията, съдържанието до нея, картите и поканата накрая.
   Разметка: home.php, single.php и inc/blog.php. Зарежда се само на страниците на блога
   (inc/blog.php), след landing.css и app.css, затова токените (--ink, --yellow…) идват оттам.
   Езикът е като на началната: черен контур, жълто, твърда сянка отдолу при ховър. ═══ */

.nn-blog,.nn-post{--nn-ease:var(--ease-out,cubic-bezier(.22,1,.36,1))}

/* ── Индексът ─────────────────────────────────────────────────────────────── */
main.page.nn-blog{padding:56px 0 110px}
.nn-blog__head{max-width:760px;margin-bottom:44px}
.nn-blog__head h1{margin-bottom:16px;font-size:clamp(52px,6.4vw,92px);line-height:.92}
.nn-blog__head .lead{max-width:640px;margin:0}
.nn-blog__empty{font-size:17px}

/* ── Картата на статия ────────────────────────────────────────────────────
   Заглавието е истински линк, а неговият ::after покрива картата: цялата карта се
   натиска, а в DOM има един линк. */
.nn-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px}
/* Шест колони, картата заема две. Редовете винаги са пълни: при брой с остатък 2 първите две
   карти са по-широки (по три колони), при остатък 1 първите четири, така на първата страница
   (най-новата статия отгоре плюс 11) няма празно място в последния ред. */
.nn-grid>.nn-card{grid-column:span 2}
@media(min-width:1001px){
.nn-grid>.nn-card:first-child:nth-last-child(3n+2),.nn-grid>.nn-card:first-child:nth-last-child(3n+2)+.nn-card,
.nn-grid>.nn-card:first-child:nth-last-child(3n+4),.nn-grid>.nn-card:first-child:nth-last-child(3n+4)+.nn-card,
.nn-grid>.nn-card:first-child:nth-last-child(3n+4)+.nn-card+.nn-card,.nn-grid>.nn-card:first-child:nth-last-child(3n+4)+.nn-card+.nn-card+.nn-card,
.nn-grid>.nn-card:only-child{grid-column:span 3}
}
.nn-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;transition:transform .45s var(--nn-ease),box-shadow .45s var(--nn-ease)}
.nn-card:hover,.nn-card:focus-within{transform:translateY(-5px);box-shadow:0 7px 0 var(--ink),0 22px 40px rgba(18,18,15,.10)}
.nn-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--paper)}
.nn-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--nn-ease)}
.nn-card:hover .nn-card__media img{transform:scale(1.045)}
.nn-card__ph{position:absolute;inset:0;background:linear-gradient(135deg,var(--yellow) 0 56%,#ffe579 56% 72%,var(--ink) 72%)}
.nn-card__ph i{position:absolute;left:20px;bottom:16px;font-size:21px;font-style:normal;font-weight:900;letter-spacing:-.05em}
.nn-card__body{display:flex;flex:1;flex-direction:column;gap:10px;padding:22px 24px 24px}
.nn-card__meta{display:flex;flex-wrap:wrap;align-items:center;margin:0;color:var(--grey);font-size:11.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.nn-sep{margin-inline:8px;color:#b9b9af}
.nn-card__title{margin:0;font-size:20px;line-height:1.25;font-weight:850;letter-spacing:-.03em}
.nn-card__link{color:var(--ink)}
.nn-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.nn-card__link:focus-visible{outline:none}
.nn-card:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.nn-card__excerpt{display:-webkit-box;margin:0;overflow:hidden;color:#565650;font-size:14.5px;line-height:1.6;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.nn-card__more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:850}
.nn-card__more b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--yellow);font-size:13px;transition:transform .45s var(--nn-ease)}
.nn-card:hover .nn-card__more b{transform:translateX(5px)}

/* Най-новата статия: широка карта, картината вляво. */
.nn-card--feature{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);margin-bottom:26px;border-radius:26px}
.nn-card--feature .nn-card__media{aspect-ratio:auto;min-height:380px;border-bottom:0;border-right:1px solid var(--ink)}
.nn-card--feature .nn-card__media img{position:absolute;inset:0}
.nn-card--feature .nn-card__body{justify-content:center;gap:16px;padding:44px 46px}
.nn-card--feature .nn-card__title{font-size:clamp(28px,2.9vw,40px);line-height:1.08;letter-spacing:-.045em}
.nn-card--feature .nn-card__excerpt{font-size:16.5px;-webkit-line-clamp:4}
.nn-card--feature .nn-card__more{margin-top:8px;font-size:15px}
.nn-card--feature .nn-card__more b{width:32px;height:32px;font-size:15px}

/* ── Страниците ───────────────────────────────────────────────────────────── */
.nn-pages{margin-top:48px}
.nn-pages .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.nn-pages .page-numbers{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 12px;border:1px solid var(--ink);border-radius:13px;background:#fff;font-size:15px;font-weight:850;transition:transform .3s var(--nn-ease),box-shadow .3s var(--nn-ease),background .2s ease}
.nn-pages a.page-numbers:hover{transform:translateY(-3px);box-shadow:0 4px 0 var(--ink)}
.nn-pages .page-numbers.current{background:var(--yellow);box-shadow:0 4px 0 var(--ink)}
.nn-pages .page-numbers.dots{border-color:transparent;background:none}

/* ── Поканата накрая (индексът и статията) ─────────────────────────────── */
.nn-blog-cta{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;margin-top:80px;padding:46px 50px;border:2px solid var(--ink);border-radius:28px;background:var(--yellow);box-shadow:0 8px 0 var(--ink);overflow:hidden;isolation:isolate}
.nn-blog-cta::after{content:"";position:absolute;z-index:-1;right:40px;bottom:-150px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.28)}
.nn-blog-cta h2{max-width:640px;margin:0 0 12px;font-size:clamp(28px,3.3vw,44px);line-height:1.04}
.nn-blog-cta p{max-width:600px;margin:0;color:#2a2a24;font-size:17px;line-height:1.55}
.nn-blog-cta .btn{white-space:nowrap}
/* Същата покана и в средата: между двете части на списъка и в средата на статията. Там няма
   заглавие H2 (структурата на статията остава нейната), затова заглавието е абзац със същия вид. */
.nn-blog-cta p.nn-blog-cta__title{max-width:640px;margin:0 0 12px;color:var(--ink);font-size:clamp(28px,3.3vw,44px);font-weight:850;line-height:1.04;letter-spacing:-.045em}
.nn-blog-cta--mid{margin:26px 0}
.nn-article .nn-blog-cta{grid-template-columns:1fr;gap:22px;margin:2.2em 0;padding:34px 36px;border-radius:24px;box-shadow:0 6px 0 var(--ink);font-size:16px;line-height:1.55}
.nn-article .nn-blog-cta p.nn-blog-cta__title{margin:0 0 10px;color:var(--ink);font-size:clamp(25px,2.6vw,31px)}
.nn-article .nn-blog-cta p{margin:0;font-size:16px}
.nn-article .nn-blog-cta .btn{justify-self:start;font-weight:900;text-decoration:none}
.nn-article .nn-blog-cta .btn:hover{background:var(--ink)}

/* ── Статията: глава ──────────────────────────────────────────────────────── */
main.page.nn-post{padding:44px 0 0}
.nn-post__head{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:56px;margin-bottom:64px}
.nn-post__head.no-media{grid-template-columns:minmax(0,860px)}
.nn-post__back{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--grey);font-size:13px;font-weight:850;transition:border-color .2s ease,color .2s ease}
.nn-post__back:hover{border-color:var(--ink);color:var(--ink)}
.nn-post__back span{transition:transform .35s var(--nn-ease)}
.nn-post__back:hover span{transform:translateX(-3px)}
.nn-post__head h1{max-width:none;margin-bottom:22px;font-size:clamp(34px,4.1vw,58px);line-height:1.02;text-wrap:balance}
.nn-post__meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;margin:0;color:var(--grey);font-size:14px;font-weight:750}
.nn-post__media{margin:0;padding:12px;border:1px solid #ebd663;border-radius:30px;background:var(--cream);box-shadow:var(--shadow)}
.nn-post__media img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--ink);border-radius:20px}

/* Лентата горе: колко от статията е прочетено (blog.js задава --p от 0 до 1). */
.nn-progress{position:fixed;z-index:120;top:0;left:0;right:0;height:4px;pointer-events:none}
.nn-progress span{display:block;height:100%;background:var(--yellow);box-shadow:0 1px 0 rgba(18,18,15,.18);transform:scaleX(var(--p,0));transform-origin:left center}

/* ── Статията: колоната за четене и съдържанието до нея ──────────────────
   Около 70 знака на ред. От 1100px съдържанието стои вдясно и следва читателя;
   под това е каре над текста, където човек на телефон го среща първо. */
.nn-post__grid{display:grid;grid-template-columns:minmax(0,720px);justify-content:center}
.nn-post__aside{min-width:0;margin-bottom:36px}
@media(min-width:1100px){
  .nn-post__grid.has-toc{grid-template-columns:minmax(0,720px) minmax(0,280px);column-gap:64px}
  .nn-post__grid.has-toc .nn-article{grid-column:1;grid-row:1}
  .nn-post__grid.has-toc .nn-post__aside{grid-column:2;grid-row:1;align-self:start;position:sticky;top:104px;margin:0}
}
.nn-toc{padding:22px 22px 18px;border:1px solid var(--line);border-radius:20px;background:#fff}
@media(min-width:1100px){.nn-toc{max-height:calc(100vh - 136px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}}
/* <details>: landing.css дава на всеки details и summary вида на въпросите (линия отдолу, „+“ вдясно),
   тук той е пренаписан за карето. На телефон „+“ отваря списъка, на широк екран е винаги отворен. */
details.nn-toc{border:1px solid var(--line)}
.nn-toc>summary.nn-toc__title{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:0;font-size:11.5px;font-weight:900;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;overflow-wrap:normal}
.nn-toc>summary.nn-toc__title::before{content:"";flex:0 0 22px;height:4px;border-radius:2px;background:var(--yellow)}
.nn-toc>summary.nn-toc__title::after{content:"+";position:static;flex:0 0 32px;width:32px;height:32px;margin-left:auto;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:20px;font-weight:400;letter-spacing:0;transition:background .25s ease,border-color .25s ease}
details.nn-toc[open]>summary.nn-toc__title{margin-bottom:14px}
details.nn-toc[open]>summary.nn-toc__title::after{content:"−";border-color:var(--yellow);background:var(--yellow)}
details.nn-toc:not([open]){padding-block:14px}
@media(min-width:1100px){
  .nn-toc>summary.nn-toc__title{pointer-events:none}
  .nn-toc>summary.nn-toc__title::after{display:none}
  details.nn-toc:not([open]){padding-block:22px 18px}
}
.nn-toc ul{margin:0;padding:0;list-style:none}
.nn-toc li{margin:0}
.nn-toc li ul{margin:2px 0 4px 12px}
.nn-toc a{position:relative;display:block;padding:7px 0 7px 14px;border-left:2px solid #ecebe3;color:#6c6c64;font-size:14px;font-weight:650;line-height:1.38;transition:color .25s ease,border-color .25s ease}
.nn-toc li ul a{font-size:13px}
.nn-toc a:hover{color:var(--ink)}
.nn-toc a.is-current{border-left-color:var(--yellow);color:var(--ink);font-weight:850}

/* ── Статията: текстът ────────────────────────────────────────────────────
   Дългото четене иска по-силен контраст от късия маркетингов текст: почти черно. */
.nn-article{min-width:0;color:#24241e;font-size:18px;line-height:1.75}
.nn-article>p:first-child:has(>script:only-child){display:none}
.nn-article p{margin:0 0 1.15em}
.nn-article h2{margin:1.9em 0 .55em;font-size:clamp(26px,2.5vw,34px);line-height:1.12;font-weight:850;scroll-margin-top:100px}
.nn-article h3{margin:1.6em 0 .45em;font-size:21px;line-height:1.3;font-weight:850;letter-spacing:-.02em;scroll-margin-top:100px}
.nn-article h4{margin:1.4em 0 .4em;font-size:18px;font-weight:850}
.nn-article>h2:first-child,.nn-article>.tldr+h2{margin-top:1.2em}
.nn-article b,.nn-article strong{color:var(--ink);font-weight:800}
.nn-article a{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700;transition:background .2s ease}
.nn-article a:hover{background:rgba(255,201,0,.22)}
.nn-article ul,.nn-article ol{margin:0 0 1.2em;padding:0;list-style:none}
.nn-article li{position:relative;margin:0 0 .55em;padding-left:1.65em}
.nn-article ul>li::before{content:"";position:absolute;left:.25em;top:.68em;width:.45em;height:.45em;border-radius:2px;background:var(--yellow);box-shadow:0 0 0 1px rgba(18,18,15,.25)}
.nn-article ol{counter-reset:nn-ol}
.nn-article ol>li{counter-increment:nn-ol}
.nn-article ol>li::before{content:counter(nn-ol);position:absolute;left:0;top:.18em;display:grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:var(--ink);color:var(--yellow);font-size:.72em;font-weight:900}
.nn-article li ul,.nn-article li ol{margin:.5em 0 0}
.nn-article blockquote{margin:1.6em 0;padding:22px 26px;border-left:4px solid var(--yellow);border-radius:0 18px 18px 0;background:var(--cream);color:var(--ink);font-size:19px;font-weight:650;line-height:1.55}
.nn-article blockquote p:last-child{margin:0}
.nn-article figure{margin:2em 0}
.nn-article img{display:block;max-width:100%;height:auto;border-radius:18px}
.nn-article figure img{width:100%;border:1px solid var(--line)}
.nn-article figcaption{margin-top:10px;color:var(--grey);font-size:13.5px;line-height:1.5;text-align:center}
.nn-article hr{margin:2.2em 0;border:0;border-top:1px solid var(--line)}
/* Таблиците се превъртат в собствената си рамка на телефон, вместо да разширяват страницата. */
.nn-article .ninorai-table-wrap,.nn-article .wp-block-table{margin:1.6em 0;overflow-x:auto;border:1px solid var(--ink);border-radius:16px;-webkit-overflow-scrolling:touch}
.nn-article table{width:100%;min-width:520px;margin:0;border-collapse:collapse;font-size:15px;line-height:1.5}
.nn-article :not(.ninorai-table-wrap):not(.wp-block-table)>table{border:1px solid var(--ink)}
.nn-article th{padding:13px 16px;background:var(--ink);color:var(--yellow);font-size:12px;font-weight:900;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.nn-article td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.nn-article tr:nth-child(even) td{background:var(--paper)}

/* „Накратко“ в началото на статията: кремаво каре, точките са отметки като в хирото. */
.nn-article .tldr{margin:0 0 2em;padding:24px 28px 20px;border:1px solid #ebd663;border-radius:22px;background:var(--cream)}
.nn-article .tldr>p:first-child{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nn-article .tldr>p:first-child::before{content:"";width:22px;height:4px;border-radius:2px;background:var(--yellow)}
.nn-article .tldr>p:first-child strong{font-weight:900}
.nn-article .tldr ul{margin:0}
.nn-article .tldr li{padding-left:2em;font-size:16.5px;line-height:1.6}
.nn-article .tldr ul>li::before{content:"✓";left:0;top:.2em;display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:var(--yellow);box-shadow:none;color:var(--ink);font-size:.72em;font-weight:900}
/* Платформата понякога слага и собственото си каре „Свързани статии“ в края. */
.nn-article .ninorai-pillar-clusters{margin:2em 0 0;padding:22px 26px;border:1px solid var(--line);border-radius:20px;background:var(--paper)}

/* ── След статията ────────────────────────────────────────────────────────── */
.nn-post__after{max-width:1064px;margin-top:64px}
.nn-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.nn-pager__link{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border:1px solid var(--ink);border-radius:18px;background:#fff;transition:transform .4s var(--nn-ease),box-shadow .4s var(--nn-ease)}
.nn-pager__link:hover{transform:translateY(-4px);box-shadow:0 6px 0 var(--ink)}
.nn-pager__link small{color:var(--grey);font-size:11.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.nn-pager__link>span{font-size:16.5px;font-weight:850;line-height:1.35;letter-spacing:-.02em}
.nn-pager__link.next{grid-column:2;text-align:right}
.nn-post__after .nn-blog-cta{margin-top:40px}

.nn-related{margin-top:96px;padding:88px 0 104px;border-top:1px solid var(--line);background:var(--paper)}
.nn-related__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.nn-related__head h2{margin:0;font-size:clamp(32px,3.8vw,50px)}
.nn-related__all{flex:0 0 auto;font-size:15px;font-weight:850;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:4px}

/* ── Таблет и телефон ─────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .nn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .nn-grid>.nn-card{grid-column:auto}
  /* при нечетен брой последната карта е на цял ред, с картината вляво */
  .nn-grid>.nn-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nn-grid>.nn-card:last-child:nth-child(odd) .nn-card__media{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--ink)}
  .nn-grid>.nn-card:last-child:nth-child(odd) .nn-card__media img{position:absolute;inset:0}
  .nn-card--feature{grid-template-columns:1fr}
  .nn-card--feature .nn-card__media{aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--ink)}
  .nn-card--feature .nn-card__body{padding:30px 30px 32px}
  .nn-post__head{grid-template-columns:1fr;gap:34px;margin-bottom:48px}
  .nn-post__media{max-width:760px}
  .nn-blog-cta{grid-template-columns:1fr;gap:26px;padding:38px 34px}
  .nn-blog-cta .btn{justify-self:start}
}
@media(max-width:680px){
  main.page.nn-blog{padding:36px 0 84px}
  .nn-blog__head{margin-bottom:30px}
  .nn-blog__head h1{font-size:clamp(46px,14vw,64px)}
  .nn-grid{grid-template-columns:1fr;gap:18px}
  .nn-grid>.nn-card:last-child:nth-child(odd){display:flex}
  .nn-grid>.nn-card:last-child:nth-child(odd) .nn-card__media{aspect-ratio:16/9;min-height:0;border-right:0;border-bottom:1px solid var(--ink)}
  .nn-grid>.nn-card:last-child:nth-child(odd) .nn-card__media img{position:static}
  .nn-card__body{padding:20px 20px 22px}
  .nn-card--feature{margin-bottom:18px;border-radius:22px}
  .nn-card--feature .nn-card__body{gap:12px;padding:22px 20px 24px}
  .nn-card--feature .nn-card__title{font-size:clamp(25px,7.4vw,31px)}
  .nn-card--feature .nn-card__excerpt{font-size:15px;-webkit-line-clamp:3}
  main.page.nn-post{padding-top:26px}
  .nn-post__back{margin-bottom:20px}
  .nn-post__head h1{font-size:clamp(30px,8.6vw,40px);line-height:1.08}
  .nn-post__meta{font-size:13px}
  .nn-post__media{padding:8px;border-radius:22px}
  .nn-post__media img{border-radius:15px}
  .nn-article{font-size:17px;line-height:1.72}
  .nn-article h2{font-size:clamp(24px,7vw,29px)}
  .nn-article h3{font-size:19.5px}
  .nn-article blockquote{padding:18px 20px;font-size:17.5px}
  .nn-article .tldr{padding:20px 20px 16px}
  .nn-article .tldr li{font-size:16px}
  .nn-pager{grid-template-columns:1fr}
  .nn-pager__link.next{grid-column:auto;text-align:left}
  .nn-blog-cta{margin-top:56px;padding:30px 22px 28px;border-radius:22px;box-shadow:0 6px 0 var(--ink)}
  .nn-blog-cta .btn{justify-self:stretch;white-space:normal}
  .nn-blog-cta--mid{margin:18px 0}
  .nn-article .nn-blog-cta{margin:1.8em 0;padding:26px 20px 24px}
  .nn-article .nn-blog-cta .btn{justify-self:stretch}
  .nn-related{margin-top:72px;padding:60px 0 76px}
  .nn-related__head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:24px}
}

@media(prefers-reduced-motion:reduce){
  .nn-card,.nn-card__media img,.nn-card__more b,.nn-pages .page-numbers,.nn-pager__link,.nn-post__back span{transition:none}
  .nn-card:hover,.nn-card:focus-within,.nn-pager__link:hover{transform:none}
  .nn-card:hover .nn-card__media img{transform:none}
}