/* ============================================================================
   blog-hub.css — /blog и /blog/kategoriya/{slug} във визията на Sauto (10.11.2026)

   Дотогава блогът беше пренесеният дизайн на megacar (плочки с иконки, оранжево
   пламъче, тъмна лента с робота). Сега говори езика на началната:
     - тъмен банер със снимката вдясно и зелена втора половина на заглавието (.h-hero);
     - заглавия на секциите със зелената наклонена черта (.h-sec__title);
     - светлозеленото каре с частите вдясно (.h-catfind) — за AI и за темата;
     - бели карти със сянка върху общия фон (lift.css).
   Снимките: банерът е в public/img/bloghub/ (в git), темите — в качванията
   (img/blog/cats/, полето „Лого" на категорията в админа).
   Картата на статията е отделно — blog-card.css (ползва се и под статията).
   Бекъп на стария вид: ~/tools/backup-sauto-bloghub-2026-11-10.
   ========================================================================== */

.bh{ padding:22px 0 64px; }
.bh-sec{ margin-top:52px; }
.bh-sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.bh-title{
  position:relative; margin:0; padding-left:26px;
  font-size:clamp(24px,2.4vw,32px); font-weight:900; letter-spacing:-.6px; line-height:1.1;
  color:#0f1b26; text-wrap:balance;
}
.bh-title::before{ content:''; position:absolute; left:4px; top:2px; bottom:-2px; width:7px; border-radius:2px; background:linear-gradient(180deg,#6fb31a,#3f6e00); transform:skewX(-14deg); }
.bh-title span{ color:var(--accent); }
.bh-sec__note{ font-size:13.5px; font-weight:600; color:var(--muted); white-space:nowrap; }
.bh-sec__all{ font-size:14px; font-weight:700; color:var(--accent); white-space:nowrap; text-decoration:none; }
.bh-sec__all:hover{ color:var(--accent-dark); text-decoration:underline; }
/* котви за страниците и бутоните на банера — да не се лепват под хедъра */
#posledni, #temi{ scroll-margin-top:20px; }

/* ── Банерът ─────────────────────────────────────────────────────────────── */
.bh-hero{
  position:relative; overflow:hidden; isolation:isolate; border-radius:20px;
  background:#0c0d0f; color:#fff; display:flex; align-items:center; min-height:380px;
}
/* снимката: по-висока от банера (горе и долу е само дим), закачена вдясно; лявото ѝ
   е тъмно като фона и потъва под градиента */
.bh-hero__pic{ position:absolute; inset:0; z-index:-2; }
.bh-hero__pic img{ position:absolute; right:0; top:-6%; height:112%; width:auto; max-width:none; }
.bh-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, #0c0d0f 0%, #0c0d0f 42%, rgba(12,13,15,.6) 55%, rgba(12,13,15,0) 68%);
}
.bh-hero__inner{ padding:34px 48px; max-width:780px; }
.bh-hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#cfe9ad; padding:6px 12px; border-radius:99px; border:1px solid rgba(143,209,58,.35); background:rgba(143,209,58,.08); }
.bh-hero__eyebrow svg{ width:16px; height:16px; color:#8fd13a; }
.bh-hero__title{ margin:14px 0 12px; font-size:clamp(34px,3.8vw,52px); line-height:1.02; font-weight:900; letter-spacing:-1.4px; text-wrap:balance; }
.bh-hero__title span{ color:#8fd13a; }
.bh-hero__sub{ max-width:46ch; margin:0 0 22px; font-size:17px; line-height:1.5; color:rgba(255,255,255,.86); }
.bh-hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.bh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:50px; padding:0 24px;
  border-radius:12px; border:0; font-family:inherit; font-size:15.5px; font-weight:800; text-decoration:none; cursor:pointer;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s var(--ease), box-shadow .2s;
}
.bh-btn svg{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bh-btn--lime{ background:#8fd13a; color:#0f1b26; }
.bh-btn--lime:hover{ background:#a3e04f; transform:translateY(-1px); }
.bh-btn--ghost{ background:rgba(255,255,255,.04); color:#fff; border:1.5px solid rgba(255,255,255,.7); }
.bh-btn--ghost:hover{ background:#fff; color:#0f1b26; border-color:#fff; }
.bh-btn--green{ background:var(--accent-grad); color:#fff; box-shadow:0 10px 22px -12px rgba(63,110,0,.9); }
.bh-btn--green:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(63,110,0,.7); }
.bh-btn:focus-visible{ outline:3px solid #8fd13a; outline-offset:2px; }
.bh-hero__usp{ display:flex; flex-wrap:wrap; margin:24px 0 0; padding:0; list-style:none; }
.bh-hero__usp li{ display:flex; align-items:center; gap:10px; font-size:13px; line-height:1.25; color:rgba(255,255,255,.78); padding:0 16px; white-space:nowrap; }
.bh-hero__usp li:first-child{ padding-left:0; }
.bh-hero__usp li + li{ border-left:1px solid rgba(255,255,255,.2); }
.bh-hero__usp svg{ width:26px; height:26px; flex:none; color:#8fd13a; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bh-hero__usp b{ display:block; color:#fff; font-weight:800; font-size:13.5px; }

/* ── Етикетът на темата (върху снимка) ── */
.bh-tag{
  display:inline-block; padding:4px 9px; border-radius:6px; background:var(--accent); color:#fff;
  font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; line-height:1.3;
}
.bh-tag--hot{ background:#8fd13a; color:#0f1b26; }
.bh-kicker{ font-size:11.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); }

/* ── Най-четени: голямата статия вляво, другите вдясно ── */
.bh-feat{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; }
.bh-feat--solo{ grid-template-columns:minmax(0,1fr); }
.bh-big{
  position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:460px;
  border-radius:20px; overflow:hidden; background:#0b1219; color:#fff; text-decoration:none;
  box-shadow:var(--lift-1);
}
.bh-big__img{ position:absolute; inset:0; z-index:-2; }
.bh-big__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease); }
.bh-big:hover .bh-big__img img{ transform:scale(1.04); }
.bh-big::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,14,20,0) 25%, rgba(8,14,20,.55) 52%, rgba(8,14,20,.94) 100%);
}
.bh-big__body{ width:100%; padding:28px 30px 26px; }
.bh-big__tags{ display:flex; flex-wrap:wrap; gap:8px; }
.bh-big__title{ margin:12px 0 8px; max-width:24ch; font-size:clamp(24px,2.3vw,32px); font-weight:900; line-height:1.12; letter-spacing:-.6px; text-wrap:balance; }
.bh-big__ex{ margin:0 0 16px; max-width:60ch; font-size:15px; line-height:1.55; color:rgba(255,255,255,.84); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bh-big__foot{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:rgba(255,255,255,.72); }
.bh-big__foot > span{ display:inline-flex; align-items:center; gap:6px; }
.bh-big__foot svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; }
.bh-big__go{
  margin-left:auto; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:11px;
  background:#8fd13a; color:#0f1b26; font-size:14.5px; font-weight:800; transition:background-color .18s;
}
.bh-big__go svg{ width:18px; height:18px; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s var(--ease); }
.bh-big:hover .bh-big__go{ background:#a3e04f; }
.bh-big:hover .bh-big__go svg{ transform:translateX(3px); }

.bh-side{ display:grid; grid-auto-rows:1fr; gap:18px; }
.bh-mini{
  display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); min-height:130px;
  background:#fff; border:1px solid var(--surface-line,#d8dde2); border-radius:18px; overflow:hidden;
  box-shadow:var(--lift-1); color:var(--dark); text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .2s, border-color .2s;
}
.bh-mini:hover{ transform:translateY(-3px); border-color:#bcd7a0; box-shadow:0 18px 34px -18px rgba(15,27,38,.35); }
.bh-mini__img{ position:relative; background:#e6eae3; overflow:hidden; }
.bh-mini__img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.bh-mini:hover .bh-mini__img img{ transform:scale(1.05); }
.bh-mini__body{ display:flex; flex-direction:column; gap:7px; padding:16px 18px; min-width:0; }
.bh-mini__title{ font-size:17px; font-weight:800; line-height:1.28; color:#0f1b26; text-wrap:balance; }
.bh-mini:hover .bh-mini__title{ color:var(--accent); }
.bh-mini__ex{ font-size:13.5px; line-height:1.5; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bh-side--many .bh-mini__ex{ display:none; }
.bh-mini__meta{ margin-top:auto; display:flex; align-items:center; gap:14px; font-size:12.5px; color:#8a9096; }
.bh-mini__meta span{ display:inline-flex; align-items:center; gap:5px; }
.bh-mini__meta svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }

/* ── Темите: снимката на светлозелено, отдолу името и колко статии има ── */
/* четири в ред; една-две карти ("Други теми") не се разтягат на цялата ширина */
.bh-topics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.bh-topic{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--surface-line,#d8dde2);
  border-radius:18px; overflow:hidden; box-shadow:var(--lift-1); color:var(--dark); text-decoration:none;
  transition:transform .18s var(--ease), box-shadow .2s, border-color .2s;
}
.bh-topic:hover{ transform:translateY(-3px); border-color:#bcd7a0; box-shadow:0 18px 34px -18px rgba(15,27,38,.35); }
.bh-topic__pic{
  position:relative; height:156px; display:grid; place-items:center; border-bottom:1px solid #e3ecd8;
  background:
    radial-gradient(52% 62% at 50% 58%, rgba(166,227,82,.5) 0%, rgba(166,227,82,.16) 50%, rgba(166,227,82,0) 76%),
    linear-gradient(135deg, #fbfdf8 0%, #eef7e2 100%);
}
.bh-topic__pic img{ width:136px; height:136px; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(53,92,0,.2)); transition:transform .35s var(--ease); }
.bh-topic:hover .bh-topic__pic img{ transform:scale(1.07) rotate(-2deg); }
.bh-topic__pic svg{ width:72px; height:72px; }
.bh-topic__body{ display:flex; flex-direction:column; gap:6px; flex:1; padding:16px 18px 16px; }
.bh-topic__name{ font-size:19px; font-weight:900; letter-spacing:-.3px; color:#0f1b26; }
.bh-topic:hover .bh-topic__name{ color:var(--accent); }
.bh-topic__sub{ flex:1; font-size:13.5px; line-height:1.5; color:var(--muted); }
.bh-topic__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.bh-topic__count{ font-size:12.5px; font-weight:800; color:var(--accent); background:#ecf4e7; border-radius:99px; padding:5px 11px; }
.bh-topic__count--soon{ color:#6b7280; background:#f1f3f0; }
.bh-topic__count{ white-space:nowrap; }
.bh-mob{ display:none; }
.bh-topic__go{ flex:none; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--accent-grad); color:#fff; transition:transform .18s var(--ease); }
.bh-topic__go svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.bh-topic:hover .bh-topic__go{ transform:translateX(3px); }

/* ── Светлозеленото каре (като „Намери категория части") — AI и главата на темата ── */
.bh-glow{
  position:relative; isolation:isolate; border-radius:20px; border:1px solid #e3ecd8;
  background:linear-gradient(100deg, #fbfdf8 0%, #f3f9eb 55%, #e6f3d4 100%);
  box-shadow:0 18px 40px -28px rgba(15,27,38,.3);
}
.bh-glow::before{
  content:''; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(circle at 88% 135%, transparent 255px, rgba(143,209,58,.45) 256px, rgba(143,209,58,.45) 258px, transparent 259px),
    radial-gradient(circle at 88% 135%, transparent 295px, rgba(143,209,58,.25) 296px, rgba(143,209,58,.25) 297px, transparent 298px),
    radial-gradient(34% 75% at 86% 52%, rgba(166,227,82,.5) 0%, rgba(166,227,82,.18) 45%, rgba(166,227,82,0) 75%),
    linear-gradient(118deg, transparent 62%, rgba(143,209,58,.14) 72%, rgba(143,209,58,0) 82%);
}

/* AI: роботът стърчи над карето вляво */
.bh-ai{ display:flex; align-items:center; gap:24px; margin-top:56px; padding:22px 30px 22px 200px; min-height:124px; }
.bh-ai__bot{ position:absolute; left:26px; bottom:0; width:156px; pointer-events:none; }
.bh-ai__bot img{ display:block; width:100%; height:auto; filter:drop-shadow(0 10px 14px rgba(15,27,38,.22)); }
.bh-ai__bot--ph{ left:46px; bottom:50%; transform:translateY(50%); width:72px; height:72px; border-radius:18px; display:grid; place-items:center; background:var(--accent-grad); }
.bh-ai__bot--ph svg{ width:42px; height:42px; }
.bh-ai__txt{ flex:1; min-width:0; }
.bh-ai__txt b{ display:block; font-size:clamp(20px,1.8vw,24px); font-weight:900; letter-spacing:-.4px; line-height:1.15; color:#0f1b26; }
.bh-ai__txt b span{ color:var(--accent); }
.bh-ai__txt > span{ display:block; margin-top:5px; font-size:15px; color:#4b5560; }

/* Главата на темата (/blog/kategoriya/…) */
.bh-cathead{ display:flex; align-items:center; min-height:200px; padding:30px 36px; overflow:hidden; }
.bh-cathead__txt{ max-width:calc(100% - 260px); }
.bh-cathead h1{ margin:10px 0 8px; font-size:clamp(30px,3.2vw,44px); font-weight:900; letter-spacing:-1px; line-height:1.05; color:#0f1b26; }
.bh-cathead p{ margin:0; max-width:62ch; font-size:16px; line-height:1.55; color:#4b5560; }
.bh-cathead__count{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; padding:7px 13px; border-radius:99px; background:#fff; border:1px solid #d6e6c4; font-size:13px; font-weight:800; color:var(--accent); }
.bh-cathead__count svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; }
.bh-cathead__img{ position:absolute; right:48px; top:50%; transform:translateY(-50%); width:200px; height:200px; display:grid; place-items:center; }
.bh-cathead__img img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 16px rgba(53,92,0,.22)); }
.bh-cathead__img svg{ width:110px; height:110px; }

/* ── Решетката със статиите ── */
.bh-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.bh-after-head{ margin-top:28px; }
.bh-empty{ padding:36px; text-align:center; font-size:15px; color:var(--muted); background:#fff; border:1px solid var(--surface-line,#d8dde2); border-radius:18px; box-shadow:var(--lift-1); }

/* ============================ ТАБЛЕТ ============================ */
@media (max-width:1100px){
  .bh-hero__inner{ padding:30px 34px; max-width:620px; }
  .bh-hero::after{ background:linear-gradient(90deg, #0c0d0f 0%, #0c0d0f 46%, rgba(12,13,15,.7) 60%, rgba(12,13,15,.1) 80%); }
  /* трите предимства — по равно място, текстът се пречупва в колоната си */
  .bh-hero__usp{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .bh-hero__usp li{ padding:0; border:0 !important; white-space:normal; }
  .bh-feat{ grid-template-columns:minmax(0,1fr); }
  .bh-side{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); grid-auto-rows:auto; }
  .bh-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bh-topics{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================ ТЕЛЕФОН ============================ */
@media (max-width:767px){
  .bh{ padding:12px 0 44px; }
  .bh-sec{ margin-top:36px; }
  .bh-sec__head{ margin-bottom:14px; }
  .bh-title{ padding-left:20px; font-size:22px; }

  /* банерът: снимката е фон, текстът — отгоре върху тъмния преход (като началната) */
  .bh-hero{ min-height:0; border-radius:16px; }
  .bh-hero__pic img{ top:0; right:-30%; height:100%; opacity:.9; }
  .bh-hero::after{ background:linear-gradient(180deg, rgba(12,13,15,.35) 0%, rgba(12,13,15,.86) 52%, rgba(12,13,15,.97) 100%); }
  .bh-hero__inner{ padding:22px 18px 22px; }
  .bh-hero__eyebrow{ font-size:11.5px; padding:5px 10px; }
  .bh-hero__title{ margin:12px 0 10px; font-size:32px; letter-spacing:-1px; }
  .bh-hero__sub{ font-size:15px; margin-bottom:18px; }
  .bh-hero__cta .bh-btn{ flex:1 1 100%; }
  .bh-hero__usp{ display:grid; gap:12px; margin-top:20px; }
  .bh-hero__usp li{ padding:0; border:0 !important; }

  .bh-big{ min-height:400px; border-radius:16px; }
  .bh-big__body{ padding:20px 18px 18px; }
  .bh-big__title{ font-size:24px; }
  .bh-big__ex{ font-size:14px; }
  .bh-big__go{ margin-left:0; width:100%; justify-content:center; height:46px; }
  .bh-side{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .bh-mini{ grid-template-columns:112px minmax(0,1fr); min-height:112px; border-radius:16px; }
  .bh-mini__body{ padding:12px 14px; gap:5px; }
  .bh-mini__title{ font-size:15px; }
  .bh-mini__ex{ display:none; }

  /* темите — две по две, само снимка, име и брой */
  .bh-topics{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .bh-topic{ border-radius:16px; }
  .bh-topic__pic{ height:112px; }
  .bh-topic__pic img{ width:96px; height:96px; }
  .bh-topic__body{ padding:12px 12px 12px; gap:4px; }
  .bh-topic__name{ font-size:16px; }
  .bh-topic__sub{ display:none; }
  .bh-topic__foot{ margin-top:6px; padding-top:10px; }
  .bh-topic__count{ font-size:11.5px; padding:4px 9px; }
  .bh-desk{ display:none; } .bh-mob{ display:inline; }   /* „Очаквайте скоро" → „Скоро" — не се събира до стрелката */
  .bh-topic__go{ width:30px; height:30px; border-radius:9px; }

  .bh-ai{ flex-direction:column; align-items:stretch; text-align:center; gap:14px; margin-top:64px; padding:62px 18px 18px; }
  .bh-ai__bot{ left:50%; bottom:auto; top:-56px; width:130px; transform:translateX(-50%); }
  .bh-ai__bot--ph{ top:-36px; transform:translateX(-50%); }
  .bh-ai .bh-btn{ width:100%; }

  .bh-cathead{ min-height:0; padding:22px 18px; }
  .bh-cathead__txt{ max-width:calc(100% - 92px); }
  .bh-cathead h1{ font-size:28px; }
  .bh-cathead p{ font-size:14.5px; }
  .bh-cathead__img{ right:10px; top:18px; transform:none; width:96px; height:96px; }
  .bh-cathead__img svg{ width:64px; height:64px; }

  .bh-grid{ grid-template-columns:minmax(0,1fr); gap:14px; }
}

@media (prefers-reduced-motion:reduce){
  .bh-big__img img, .bh-mini__img img, .bh-topic__pic img, .bh-topic, .bh-mini, .bh-btn, .bh-topic__go, .bh-big__go svg{ transition:none; }
}