/* =============================================================================
   CarsDirect Journal — каноничен stylesheet
   =============================================================================
   Сглобен от петте статични прототипа, които бяха ТРИ разминаващи се поколения
   на „един и същ" CSS. Базата е category файлът (най-новото поколение и
   надмножество на homepage-а), плюс стиловете за статия от article файла, плюс
   .callout--tip и .plain-list, които съществуваха САМО в двете реални статии.

   Поправено спрямо прототипите (виж коментарите на място):
     Б1  счупеният .g-* блок — 4 правила се изяждаха от боклук след затварящата скоба
     Б2  един файл вместо три поколения; махнат мъртъв код
     Б2.5 типографска йерархия: h2 24, нов h3 18, увод 19, section-title 20
     Б2.7 Inter → Manrope (единственият кандидат с БЪЛГАРСКИ букви)
     Б3  контраст до AA, TOC отместване, скролващи таблици
     Б4  светли плейсхолдъри с монограм вместо черни дупки
     Б5  inventory: aspect-ratio вместо летърбокс

   НЕ е пипано умишлено: червеното запазва всичките си роли (решение на
   собственика), регистърът, serif/sans разделението, цветовият език.
   ========================================================================== */


  :root{
    --black:#111114;
    --black-2:#1b1b1f;
    --hero-dark:#17171b;
    --paper:#FBFAF8;
    --paper-2:#F3F1EC;
    --ink:#18181A;
    --ink-2:#55555A;
    /* Б3: беше #8B8B90 = 3.1:1 върху хартията — под AA, а се ползва за ЦЕЛИЯ
       дребен текст (meta, figcaption, спекове, toc-hint). #6E6E73 дава 4.6:1. */
    --ink-3:#6E6E73;
    --line:#E6E3DD;
    --line-strong:#D4D0C8;
    /* БРАНДОВОТО червено на ПАЗАРА (--cd-red в cd-redesign.css), не журналното
       #D6423F от прототипите — решение на собственика: „нашето червено трябва
       да е в журнала". Единият бранд говори с един цвят.
       Измерено върху хартията: #E11D2A като текст = 4.56:1 (минава AA — по-добре
       от старото #D6423F, което даваше 4.27); бяло върху него = 4.76:1.
       --red-text е тъмната двойка на самия пазар (--cd-red-dark): 6.91:1. */
    --red:#E11D2A;
    --red-text:#AE1320;
    /* просветлен E11D2A за черния masthead (логото .bg): 5.79:1 върху #111114 */
    --red-bright:#FF4D57;
    --red-wash:rgba(225,29,42,0.08);
    /* Б3: --green остава за едрите елементи; --green-text за баджа „Проверена"
       (9.5px бяло върху зелено беше 4.0:1). */
    --green:#1C8F6B;
    --green-text:#157A5B;
    --amber:#B5730A;
    --amber-text:#8F5B08;
    --amber-wash:rgba(181,115,10,0.08);
    --steel:#3E6FCF;
    /* Б2.7: Inter → Manrope. Единственият кандидат с БЪЛГАРСКИ локализирани
       форми (12 от 14 букви се променят при lang="bg"); Inter няма никакви, а
       тялото на статията вече рендира български форми през Source Serif 4 —
       заглавията изоставаха с руски. Golos Text и Onest също нямат, въпреки
       че са кирилски по произход. Проверено емпирично, не по документация. */
    --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
    --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
    /* Височината на sticky masthead-а (2 реда + progress лента). Б3: TOC-ът и
       scroll-margin на заглавията бяха на 88/90px и всяко цъкане в TOC-а
       пъхаше заглавието ПОД лентата. Една променлива, за да не се разминат пак. */
    --masthead-h:120px;
    /* Изравнени с езика на ПАЗАРА (cd-redesign/cd-search: 12px едро, 8px
       стандарт, 6px дребно) — прототипът беше 14/10/7 и „балоните" на журнала
       излизаха по-заоблени от тези на сайта. Един бранд, един радиус. */
    --r-lg:12px;
    --r-md:8px;
    --r-sm:6px;
    --maxw:1180px;
  }
  *,*::before,*::after{box-sizing:border-box;}
  /* scroll-padding-top решава ГЛОБАЛНО подпъхването под sticky masthead-а: важи
     за всяка котва — h2, h3 и всичко бъдещо — вместо да се разчита всеки елемент
     поотделно да носи scroll-margin-top и някой да го забрави. */
  html{scroll-behavior:smooth;scroll-padding-top:var(--masthead-h);}
  body{
    margin:0;
    font-family:var(--sans);
    background:var(--paper);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  button{font-family:inherit;cursor:pointer;}
  input{font-family:inherit;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

  :focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:3px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important;transition-duration:0.001ms !important;}
    html{scroll-behavior:auto;}
  }

  /* ===== MASTHEAD — black, solid from the very first frame (no fade/transparency) ===== */
  .masthead{position:sticky;top:0;z-index:200;background:var(--black);box-shadow:0 1px 0 rgba(255,255,255,.06);transition:box-shadow .25s ease;}
  .masthead.is-elevated{box-shadow:0 8px 24px rgba(0,0,0,.28);}
  .mh-row1{padding:15px 0;}
  .mh-row1 .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
  .logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap;}
  .logo-word{font-size:19px;font-weight:700;letter-spacing:-.5px;color:#fff;}
  .logo-word em{font-style:normal;color:var(--red-bright);}
  .logo-tag{font-size:11px;font-weight:500;color:rgba(255,255,255,.5);border-left:1px solid rgba(255,255,255,.25);padding-left:10px;letter-spacing:.2px;}
  .mh-nav{display:flex;align-items:center;gap:26px;}
  .mh-links{display:flex;align-items:center;gap:22px;}
  .mh-links a{font-size:13.5px;color:rgba(255,255,255,.78);transition:color .15s;}
  .mh-links a:hover{color:#fff;}
  .mh-actions{display:flex;align-items:center;gap:16px;}
  .icon-btn{background:none;border:none;color:rgba(255,255,255,.8);padding:4px;display:flex;transition:color .15s;}
  .icon-btn:hover{color:#fff;}
  .btn-profile{
    display:flex;align-items:center;gap:6px;
    background:var(--red);color:#fff;font-size:12.5px;font-weight:600;
    padding:8px 15px;border-radius:8px;border:none;transition:background .15s;
  }
  .btn-profile:hover{background:var(--red-bright);}
  .hamburger{display:none;background:none;border:none;color:#fff;padding:4px;}

  .mh-row2{border-top:1px solid rgba(255,255,255,.09);}
  .cat-tabs{
    display:flex;align-items:center;gap:22px;
    overflow-x:auto;scrollbar-width:none;
  }
  .cat-tabs::-webkit-scrollbar{display:none;}
  .cat-tabs a{
    font-size:12.5px;color:rgba(255,255,255,.58);white-space:nowrap;
    padding:11px 0;border-bottom:2px solid transparent;transition:color .15s;
    flex-shrink:0;
  }
  .cat-tabs a:hover{color:rgba(255,255,255,.9);}
  .cat-tabs a.is-active{color:#fff;font-weight:600;border-bottom-color:var(--red);}
  /* Под ~760px редът се скролва настрани и дотук нищо не го казваше: табовете се
     режеха насред думата в двата края и лентата изглеждаше разбутана (кадър от
     телефона на собственика, 2026-09-12). Краищата избледняват САМО където има още
     табове — класовете ги слага скриптът в layouts/journal.blade.php по scrollLeft;
     без клас (десктоп, всичко се събира) маска няма. Същият скрипт центрира активния
     таб при зареждане, за да се вижда къде си и на рубрика, и на статия. */
  .cat-tabs.is-clipped-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);}
  .cat-tabs.is-clipped-start{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 44px),transparent);}
  .cat-tabs.is-clipped-both{-webkit-mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to right,transparent,#000 44px,#000 calc(100% - 44px),transparent);}
  .cat-more{display:flex;align-items:center;gap:3px;}

  .mobile-menu{
    display:none;
    background:var(--black-2);
    border-top:1px solid rgba(255,255,255,.09);
    padding:18px 28px 22px;
  }
  .mobile-menu.is-open{display:block;}
  .mobile-menu a{
    display:block;font-size:14.5px;color:rgba(255,255,255,.85);
    padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);
  }
  .mobile-menu .mm-profile{margin-top:14px;}

  /* ===== HERO ===== */
  .hero{
    position:relative;
    min-height:620px;
    display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;
    background-color:var(--hero-dark);
  }
  .hero.photo-porsche-hero{
    background-size:cover;background-position:center 38%;
    animation:hero-kenburns 26s ease-in-out infinite alternate;
  }
  @keyframes hero-kenburns{
    0%{background-size:100% auto;background-position:center 34%;}
    100%{background-size:112% auto;background-position:center 42%;}
  }
  /* ⚠️ ТУК ИМАШЕ .hero::before/::after — МАХНАТИ 2026-07-31, защото затъмняваха
     САМИЯ ТЕКСТ, а не само снимката.
     Те са слоеве на СЕКЦИЯТА. Текстът (.hero-inner, z-index:2) обаче живее в
     .hero-slide, което е position:relative + z-index:1 и затова СЪЗДАВА собствен
     stacking context — вътре в него z-index:2 значи „над братята ми в слайда“,
     а не „над слоя на секцията“. Резултат: .hero::after (до rgba(0,0,0,.86) на
     дъното) лягаше ВЪРХУ заглавието. Измерено: буквите се рендираха 156 от 255,
     при computed color rgb(255,255,255) — точно затова изглеждаха сиви.
     Заместниците им (.hero-slide::before/::after ~L985 и .hero-wrap вариантът
     ~L1165) са същите градиенти, но на слайда, тъй че остават ПОД .hero-inner.
     Дублирали са се: при поправката на слайдера слоевете бяха преместени върху
     слайдовете, но тези тук не бяха махнати — оттам двойното затъмняване.
     `.hero` се ползва на едно място (journal/index.blade.php:40) и винаги със
     слайдер, тъй че нищо не остава без затъмнение. */
  .hero-mark{display:none;}
  .hero-inner{position:relative;z-index:2;padding:72px 28px 54px;width:100%;}
  .kicker{
    display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
    color:#fff;background:var(--red);border-radius:5px;padding:5px 12px;
  }
  /* Сянката НЕ е украса, а четимост: корицата е произволна снимка от обявния
     поток и градиентите на .hero-slide::before/::after не спасяват текста върху
     светло небе или бял капак. Мека и широка (без втвърден контур), тъй че върху
     тъмна снимка изобщо не си личи, а върху светла държи буквите. */
  .hero h1{
    font-family:var(--sans);font-weight:700;color:#fff;
    font-size:clamp(30px,4.3vw,52px);line-height:1.09;letter-spacing:-1.2px;
    max-width:790px;margin:22px 0 17px;
    text-wrap:balance;
    text-shadow:0 1px 2px rgba(0,0,0,.42), 0 3px 18px rgba(0,0,0,.34);
  }
  .hero-dek{
    font-family:var(--serif);font-weight:400;
    font-size:clamp(16px,1.5vw,19px);line-height:1.66;
    /* Беше .74 — сивееше върху светла снимка. */
    color:rgba(255,255,255,.93);max-width:580px;margin-bottom:24px;
    text-shadow:0 1px 2px rgba(0,0,0,.44), 0 2px 12px rgba(0,0,0,.3);
  }
  .byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);}
  .avatar{width:31px;height:31px;border-radius:50%;background:linear-gradient(135deg,#71717a,#2c2c30);box-shadow:0 0 0 2px rgba(255,255,255,.18);flex-shrink:0;}
  .byline-name{font-size:13.5px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5);}
  /* .55 върху светла снимка беше практически невидимо. */
  .byline-meta{font-size:13px;color:rgba(255,255,255,.78);text-shadow:0 1px 3px rgba(0,0,0,.5);}
  .byline-dot{color:rgba(255,255,255,.5);}

  /* ---- стрелки на хероя ----
     Кръгчета със стъклен фон: върху произволна снимка плътният цвят изглежда
     залепен, а полупрозрачното + blur държи контраста и на светло, и на тъмно.
     z-index:3 ги вдига над .hero-slide::before/::after (затъмняващите слоеве). */
  /* 40%, не 50%: текстовият блок заема долната половина на хероя, тъй че
     геометричният център пада точно върху kicker-а — лявата стрелка го допираше
     в ъгъла. 40% ги държи в чистата част на снимката. */
  .hero-arrow{
    position:absolute;top:40%;transform:translateY(-50%);z-index:3;
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(18,18,20,.40);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.26);
    color:#fff;cursor:pointer;padding:0;
    transition:background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .hero-arrow:hover{
    background:rgba(18,18,20,.72);border-color:rgba(255,255,255,.5);
  }
  .hero-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px;}
  .hero-arrow-prev{left:18px;}
  .hero-arrow-next{right:18px;}
  .hero-arrow-prev:hover{transform:translateY(-50%) translateX(-2px);}
  .hero-arrow-next:hover{transform:translateY(-50%) translateX(2px);}
  /* На телефон хероят е по-нисък, а текстът заема почти цялата долна половина —
     на 40% лявата стрелка лягаше точно ВЪРХУ етикета на рубриката (видяно на
     390px). Вдигат се и се смаляват; пръстът и без това плъзга, стрелките са
     само подсказка, че има още. */
  @media (max-width:760px){
    .hero-arrow{width:36px;height:36px;top:22%;}
    .hero-arrow svg{width:16px;height:16px;}
    .hero-arrow-prev{left:10px;}
    .hero-arrow-next{right:10px;}
  }

  /* ===== SECTION shell ===== */
  .section{padding:58px 0;}
  .section-top{border-top:1px solid var(--line);}
  .section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:26px;gap:16px;}
  /* Б2.5: беше 15px — ПО-МАЛКО от картите, които заглавява (15.5px pick-title,
     21px archive-row). Заглавие на секция, по-дребно от съдържанието си, значи
     че страницата няма ред на четене: сканира се по позиция, не по големина.
     Рендира се като истински <h2> — homepage-ът нямаше нито едно heading ниво
     под <h1>, което е и SEO пропуск. */
  /* font-family е ЯВЕН, не по наследство: .section-title се рендира като <h2>, а
     light.css има правило h1..h6{font-family:var(--heading-font)} = Montserrat.
     Явното правило бие наследяването, колкото и близък да е родителят — затова
     заглавията на секциите излизаха с шрифта на борсата вътре в блога. */
  .section-title{font-family:var(--sans);font-size:20px;font-weight:700;letter-spacing:-.3px;margin:0;}
  /* Б3: --red като ТЕКСТ върху хартията е 4.3:1 — под AA за 12.5px. Оттук
     надолу всяко червено, което е текст, минава на --red-text; фоновете,
     рамките и лентата на прогреса си остават --red. */
  .section-link{font-size:12.5px;font-weight:600;color:var(--red-text);display:flex;align-items:center;gap:4px;white-space:nowrap;}
  .eyebrow{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--ink-3);text-transform:uppercase;}

  /* ===== EDITOR'S PICKS ===== */
  .picks-grid{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:repeat(2,1fr);gap:18px;}
  /* Водещата карта е flex колона, притисната надолу, а НЕ два независими
     абсолютни блока на фиксирани отстояния. Причината е дефект, хванат при
     реален рендер: етикетът стоеше на bottom:45px, а заглавието на bottom:16px —
     число, което важи само за едноредово заглавие. Реалната статия („Хибридни
     автомобили: плюсове, минуси и струва ли си…") излиза на 3 реда, качва се над
     етикета и двата текста се застъпват със 17px. В поток това не може да се
     случи при никаква дължина. */
  .pick-card:first-child{
    grid-row:span 2;position:relative;overflow:hidden;border-radius:var(--r-md);min-height:300px;
    display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
  }
  .pick-card:first-child::after{
    content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.8) 100%);
  }
  .pick-card:first-child .pick-media{position:absolute;inset:0;border-radius:0;}
  .pick-card:first-child .pick-num{z-index:2;}
  .pick-card:first-child .pick-cat{position:relative;z-index:2;color:#fff;margin:0 0 6px;}
  .pick-card:first-child .pick-title{position:relative;z-index:2;color:#fff;font-size:19px;max-width:92%;}
  .pick-card:first-child:hover .pick-title{color:#fff;}
  .pick-card:not(:first-child) .pick-media{height:118px;}
  .pick-card{display:block;}
  .pick-media{
    height:150px;border-radius:var(--r-md);overflow:hidden;position:relative;
    background:var(--grad,linear-gradient(135deg,#3a3a3f,#1a1a1d));
    transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  }
  .pick-card:hover .pick-media{transform:scale(1.025);box-shadow:0 14px 30px rgba(20,20,22,.2);}
  .pick-num{
    position:absolute;top:10px;left:12px;font-family:var(--mono);
    font-size:12px;font-weight:700;color:rgba(255,255,255,.9);
  }
  /* Б3: 11.5px рубрика в 4.3:1. Голямата карта си остава #fff върху снимката
     (правилото по-горе е по-специфично) и не е засегната. */
  .pick-cat{font-size:11.5px;font-weight:700;color:var(--red-text);margin:12px 0 6px;}
  .pick-title{font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.1px;}
  /* Б3: hover-ът е текст 15.5px върху хартия, не декорация — иска 4.5:1. */
  .pick-card:hover .pick-title{color:var(--red-text);}

  /* ===== CATEGORY CARDS =====
     Шест рубрики в 3 колони = чисти 3×2, всички еднакви. Дотогава бяха пет и
     последният ред увисваше с две карти, затова първата беше насила двойно
     широка (`grid-column:span 2` + по-едър етикет). С шест този патерица вече
     вреди: щеше да изтика шестата сама на трети ред. Ако рубриките пак станат
     нечетни, върни акцента — не оставяй ред с една карта. */
  .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  .cat-card{
    position:relative;height:172px;border-radius:var(--r-lg);overflow:hidden;
    display:block;transition:transform .3s ease, box-shadow .3s ease;
  }
  .cat-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,20,22,.22);}
  .cat-card-bg{
    position:absolute;inset:-14px;transition:transform .6s cubic-bezier(.2,.7,.2,1);
    background:var(--grad,linear-gradient(135deg,#3a3a3f,#1c1c20));
  }
  .cat-card:hover .cat-card-bg{transform:scale(1.1);}
  .cat-card-shade{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.62) 100%);
  }
  .cat-card-body{
    position:relative;z-index:2;height:100%;
    display:flex;align-items:flex-end;justify-content:space-between;
    padding:16px 18px;
  }
  .cat-card-label{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.2px;}
  .cat-card-arrow{
    width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);
    display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
    transition:transform .3s ease, background .3s ease;
  }
  .cat-card:hover .cat-card-arrow{transform:translateX(3px);background:rgba(255,255,255,.28);}

  /* ===== LATEST + TRENDING ===== */
  .lt-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;}
  .latest-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

  /* ===== ARTICLE LIST (category archive — one column, bigger type) ===== */
  .article-list{display:flex;flex-direction:column;}
  .article-row{
    display:flex;gap:22px;align-items:center;
    padding:26px 0;border-bottom:1px solid var(--line);
  }
  .article-row:first-child{padding-top:0;}
  .article-row:last-child{border-bottom:none;padding-bottom:0;}
  .article-row-media{
    flex-shrink:0;width:190px;height:118px;border-radius:var(--r-md);overflow:hidden;
    background:var(--grad,linear-gradient(135deg,#3a3a3f,#1c1c20));
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  .article-row:hover .article-row-media{transform:scale(1.04);}
  .article-row-body{flex:1;min-width:0;}
  /* Б3: 10.5px главни букви е най-дребното червено в архива — 4.3:1. */
  .article-row-cat{font-size:10.5px;font-weight:700;color:var(--red-text);text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px;}
  .article-row-title{font-size:21px;font-weight:700;line-height:1.28;letter-spacing:-.3px;margin-bottom:9px;transition:color .2s ease;}
  .article-row:hover .article-row-title{color:var(--red);}
  .article-row-dek{font-family:var(--serif);font-size:14px;line-height:1.55;color:var(--ink-2);margin-bottom:11px;max-width:540px;}
  .article-row-meta{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);}

  /* ===== FEATURED FIRST ARTICLE (echoes hero, breaks list monotony) ===== */
  @media (max-width:600px){
  }
  @media (max-width:600px){
    .article-row{flex-direction:column;align-items:stretch;gap:14px;}
    .article-row-media{width:100%;height:170px;}
    .article-row-title{font-size:18px;}
  }
  .article-card{display:block;}
  .article-media{
    height:140px;border-radius:var(--r-md);overflow:hidden;
    background:var(--grad,linear-gradient(135deg,#3a3a3f,#1c1c20));
    transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  }
  .article-card:hover .article-media{transform:scale(1.035);box-shadow:0 12px 26px rgba(20,20,22,.18);}
  /* Б3: същата 10.5px рубрика в мрежата „Последни" — 4.3:1. */
  .article-cat{font-size:10.5px;font-weight:700;color:var(--red-text);letter-spacing:.3px;text-transform:uppercase;margin:15px 0 6px;}
  .article-title{font-size:15px;font-weight:700;line-height:1.32;letter-spacing:-.15px;transition:color .2s ease;}
  /* Б3: 15px/700 hover върху хартия — 4.3:1. */
  .article-card:hover .article-title{color:var(--red-text);}
  .article-meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:7px;}

  .trend-list{display:flex;flex-direction:column;}
  .trend-item{
    display:flex;align-items:center;gap:13px;padding:13px 0;
    border-bottom:1px solid var(--line);
  }
  .trend-item:last-child{border-bottom:none;}
  .trend-num{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--line-strong);width:20px;flex-shrink:0;}
  .trend-body{flex:1;min-width:0;}
  .trend-title{font-size:13px;font-weight:600;line-height:1.35;}
  /* Б3: 13px hover в страничната колона — най-дребният hover, 4.3:1. */
  .trend-item:hover .trend-title{color:var(--red-text);}
  .trend-cat{font-size:11px;color:var(--ink-3);margin-top:3px;}
  .trend-up{color:var(--green);flex-shrink:0;}

  /* ===== MOSAIC — 4 broken-up tiles, one featured ===== */

  /* ===== INVENTORY BRIDGE ===== */
  .inv-section{background:var(--paper-2);}
  .inv-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;}
  .inv-title{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-top:6px;}
  .inv-sub{font-size:13.5px;color:var(--ink-2);margin-top:6px;max-width:440px;}
  /* .demo-tag е ИЗТРИТ: етикетът „Демо данни" го няма в нито един изглед —
     inventory блокът тегли реални обяви и етикетът би бил лъжа. */
  .inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
  .inv-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:box-shadow .2s ease, transform .2s ease;}
  .inv-card:hover{box-shadow:0 10px 26px rgba(20,20,22,.08);transform:translateY(-2px);}
  /* Б5: беше height:98px — при ~267px широка карта това е 2.7:1 летърбокс, който
     реже колата през стъклата. 4/3 НЕ е произволен избор: това е съотношението на
     същите аукционни снимки в /search (cd-search.css:962), тъй че една и съща кола
     не се кадрира различно на двете места. */
  .inv-media{aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);background:var(--grad,linear-gradient(135deg,#3a3a3f,#1c1c20));overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1);}
  .inv-card:hover .inv-media{transform:scale(1.06);}
  .inv-badge{
    position:absolute;top:8px;left:8px;font-size:9.5px;font-weight:700;color:#fff;
    /* Б3: 9.5px бяло върху --green беше 4.0:1 — под AA. Носителят на
       контраста тук е фонът, затова той минава на --green-text, а текстът
       остава #fff. */
    background:var(--green-text);border-radius:5px;padding:2px 7px;
  }
  .inv-body{padding:11px 12px 13px;}
  .inv-name{font-size:13px;font-weight:700;letter-spacing:-.1px;}
  .inv-specs{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:4px 0 7px;}
  /* Б3: цената е 15px червено върху БЯЛА карта — 4.46:1, под AA. */
  .inv-price{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--red-text);}
  .inv-cta{
    display:inline-flex;align-items:center;gap:6px;margin-top:20px;
    font-size:13px;font-weight:600;color:#fff;background:var(--black);
    padding:11px 18px;border-radius:9px;
  }

  /* ===== NEWSLETTER ===== */
  .nl-box{
    background:var(--black);border-radius:var(--r-lg);
    padding:42px 36px;text-align:center;
  }
  .nl-title{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.4px;max-width:520px;margin:0 auto 8px;}
  .nl-sub{font-size:13.5px;color:rgba(255,255,255,.55);margin-bottom:22px;}
  .nl-form{display:flex;gap:9px;max-width:400px;margin:0 auto;}
  .nl-input{
    flex:1;height:44px;border-radius:8px;border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);padding:0 14px;color:#fff;font-size:13.5px;
  }
  .nl-input::placeholder{color:rgba(255,255,255,.4);}
  .nl-btn{
    height:44px;padding:0 20px;border-radius:8px;border:none;
    background:var(--red);color:#fff;font-size:13.5px;font-weight:700;
    transition:background .15s;white-space:nowrap;
  }
  .nl-btn:hover{background:var(--red-bright);}

  /* ===== SEO INTRO ===== */
  .seo-intro{max-width:760px;}
  .seo-intro p{font-family:var(--serif);font-size:14.5px;line-height:1.75;color:var(--ink-2);margin-bottom:14px;}
  .seo-intro p:last-child{margin-bottom:0;}

  /* ===== FOOTER ===== */

  /* ===== BACK TO TOP ===== */
  .back-to-top{
    position:fixed;bottom:26px;right:26px;z-index:150;
    width:46px;height:46px;border-radius:50%;border:none;
    background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 18px rgba(225,29,42,.35);opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .back-to-top.is-visible{opacity:1;pointer-events:auto;}
  .back-to-top:hover{transform:translateY(-3px);}

  /* ===== SIGNATURE: honest numbers get their own typographic treatment ===== */
  .num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-0.01em;}

  /* ===== REAL PHOTO — actual CarsDirect listing (Porsche Macan GTS) ===== */
  /* Б3: беше вграден base64 — ~140 KB markup само за две снимки, тоест целият
     LCP бюджет отиваше в stylesheet-а, който браузърът не може да кешира
     отделно. Сега са реални файлове. */
  .photo-porsche-hero{background-image:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.42)),url('/assets/img/journal/porsche-hero.jpg');background-size:cover;background-position:center;}
  .photo-porsche-card{background-image:url('/assets/img/journal/porsche-card.jpg');background-size:cover;background-position:center;}

  /* ===== ГРАДИЕНТНИ КЛАСОВЕ ЗА КАТЕГОРИИ =====
     Б1 — ТУК БЕШЕ ГЛАВНИЯТ БЪГ. Четири правила (.g-suv, .g-electric, .g-luxury,
     .g-auction) имаха ДУБЛИРАНИ декларации СЛЕД затварящата скоба. CSS error
     recovery поглъща селектора на следващия ред в непарсваем prelude и изхвърля
     цялото правило — така .g-electric, .g-hybrid, .g-auction и .g-compare бяха
     МЪРТВИ. Оттам идваха трите празни карти в „Избрано от редакцията" и белите
     призраци на „Електрически" и „Хибридни" в категорийния ред.

     Overlay-ът вече е слят в самия --grad като слоеста стойност, за да има
     ЕДИН източник на истина за всеки клас, вместо две противоречащи си
     декларации. Снимките са локални — hotlink към Unsplash на продукция е
     чужд traffic и с неизяснен лиценз. Докато няма реален файл, класът
     пада обратно на градиента си и НИЩО не се чупи. */
  .g-import{--grad:linear-gradient(135deg,#3d2f1f,#1a140c);}
  .g-review{--grad:linear-gradient(135deg,#2b3242,#12151d);}
  .g-hybrid{--grad:linear-gradient(135deg,#20362a,#0d1611);}
  .g-compare{--grad:linear-gradient(135deg,#26303f,#0f131a);}
  .g-maint{--grad:linear-gradient(135deg,#2c2c2e,#131314);}

  /* ===== ПРАЗНОТО СЪСТОЯНИЕ (Б4) =====
     Медийните кутии заемат голяма част от страницата, а докато няма фотография,
     всички те се рендират като почти черни градиенти. Кодът казва „светла хартия",
     рендерът дава тъмно — обръща регистъра на обратното на замисленото.

     .media-ph е за кутиите с текст ПОД тях (карти, фигури): остава в хартиения
     свят и носи монограма на рубриката, тъй че празното изглежда ДИЗАЙНИРАНО, а
     не счупено. Blade подава буквата през data-mono (Category::monogram()).

     Умишлено БЕЗ втори надпис с името на рубриката: то вече стои видимо точно под
     кутията (.article-cat / .pick-cat), а псевдоелемент не може да се скрие от
     екранен четец — при списък от карти това значи всяка рубрика прочетена два пъти. */
  .media-ph{
    background:linear-gradient(160deg,var(--paper-2),#E9E5DC);
    border:1px solid var(--line);
    position:relative;overflow:hidden;
  }
  .media-ph::after{
    content:attr(data-mono);
    position:absolute;right:6px;bottom:-.28em;
    font-family:var(--serif);font-weight:600;font-size:5.2em;line-height:1;
    color:rgba(24,24,26,.07);letter-spacing:-.04em;
    pointer-events:none;
  }
  /* Иконките/номерата вътре в такава кутия са били бели за тъмния градиент. */
  .media-ph .pick-num,.media-ph svg{color:var(--ink-3);}

  /* Плочките с БЯЛ текст върху себе си (категорийни карти) задължително остават
     тъмни — иначе етикетът им изчезва. Получават същия монограм, само че светъл. */
  .tile-ph::after{
    content:attr(data-mono);
    position:absolute;right:10px;bottom:-.3em;z-index:1;
    font-family:var(--serif);font-weight:600;font-size:6em;line-height:1;
    color:rgba(255,255,255,.07);letter-spacing:-.04em;
    pointer-events:none;
  }
  /* На КАТЕГОРИЙНА карта долният десен ъгъл е зает от стрелката, тъй че водният
     знак се блъска в нея и изглежда като дефект, а не като украса (видяно на
     „Пазар, цени и тенденции", докато е без корица). Вдига се в празното горе
     вдясно. Витрината (.pick-card.tile-ph) няма стрелка и остава непокътната. */
  .cat-card.tile-ph::after{top:-.18em;bottom:auto;right:14px;}
  .g-suv{--grad:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.42)),url('/assets/img/journal/cat-suv.jpg') center/cover no-repeat,linear-gradient(135deg,#3a3226,#17140e);}
  .g-electric{--grad:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.42)),url('/assets/img/journal/cat-electric.jpg') center/cover no-repeat,linear-gradient(135deg,#173a3d,#0a1719);}
  .g-luxury{--grad:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.42)),url('/assets/img/journal/cat-luxury.jpg') center/cover no-repeat,linear-gradient(135deg,#332339,#150e18);}
  .g-auction{--grad:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.42)),url('/assets/img/journal/cat-auction.jpg') center/cover no-repeat,linear-gradient(135deg,#39301f,#17130b);}

  /* ===== RESPONSIVE ===== */
  @media (max-width:980px){
    .picks-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;}
    .pick-card:first-child{grid-column:span 2;grid-row:auto;min-height:220px;}
    .cat-grid{grid-template-columns:1fr 1fr;}   /* шест = 3 реда по 2 */
    .lt-grid{grid-template-columns:1fr;}
    .inv-grid{grid-template-columns:1fr 1fr;}
    /* На 2 колони картата става ~2× по-широка, а 4/3 би направил снимката ~300px
       висока над 13px текст — снимката изяжда картата. По-широкото съотношение я
       връща в пропорция. Същият похват като в /search (cd-search.css:1225). */
    .inv-media{aspect-ratio:16/10;}
  }
  @media (max-width:760px){
    .mh-links{display:none;}
    .hamburger{display:flex;}
    /* На 375px горният ред не събира лого + търсене + Профил + хамбургер:
       хамбургерът излизаше на 376px и изнасяше цялата страница с 10px настрани.
       Профилът се крие само ТУК — той и без това е в мобилното меню (затова
       .mm-profile изобщо съществува), тъй че нищо не се губи. Лупата остава. */
    .mh-actions .btn-profile{display:none;}
    .hero{min-height:520px;}
    .picks-grid{grid-template-columns:1fr;}
    .pick-card:first-child{grid-column:auto;min-height:230px;}
    .pick-card:not(:first-child) .pick-media{min-height:0;height:150px;}
    .cat-grid{grid-template-columns:1fr;}
    .latest-grid{grid-template-columns:1fr;}
    .inv-grid{grid-template-columns:1fr 1fr;}
    .nl-form{flex-direction:column;}
    .section{padding:44px 0;}
  }


  /* ===== BREADCRUMB ===== */
  .breadcrumb{display:flex;align-items:center;gap:7px;font-size:12px;flex-wrap:wrap;}
  .breadcrumb a:hover{color:#fff;}
  .breadcrumb svg{flex-shrink:0;}

  /* ===== CATEGORY HERO (compact — not full cinematic like article hero) ===== */
  .cat-hero{
    position:relative;min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;
    overflow:hidden;background-color:var(--hero-dark);
  }
  .cat-hero.photo-porsche-hero{background-size:cover;background-position:center 40%;}
  .cat-hero::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.82) 100%);
    pointer-events:none;
  }
  .cat-hero-top{position:relative;z-index:2;padding:20px 28px 0;max-width:var(--maxw);margin:0 auto;width:100%;}
  .cat-hero-bottom{position:relative;z-index:2;padding:20px 28px 34px;max-width:var(--maxw);margin:0 auto;width:100%;}
  .cat-hero-bottom h1{
    font-family:var(--sans);font-weight:700;color:#fff;
    font-size:clamp(26px,3.6vw,40px);line-height:1.1;letter-spacing:-.7px;margin:14px 0 12px;
  }
  .cat-hero-dek{font-family:var(--serif);font-size:15px;line-height:1.65;color:rgba(255,255,255,.75);max-width:620px;margin-bottom:14px;}
  .cat-hero-meta{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55);}

  /* ===== RELATED CATEGORIES (sibling cluster links) ===== */
  .related-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
  .related-cat-card{
    position:relative;overflow:hidden;border-radius:var(--r-md);height:132px;
    display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
    padding:16px 18px;
  }
  .related-cat-bg{
    position:absolute;inset:-12px;background:var(--grad,linear-gradient(135deg,#3a3a3f,#1c1c20));
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
  }
  .related-cat-card:hover .related-cat-bg{transform:scale(1.08);}
  .related-cat-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75) 100%);}
  .related-cat-name{position:relative;z-index:2;font-size:15.5px;font-weight:700;color:#fff;}
  .related-cat-sub{position:relative;z-index:2;font-size:12px;color:rgba(255,255,255,.62);margin-top:4px;}
  .related-cat-arrow{
    position:relative;z-index:2;width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.16);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;color:#fff;
    transition:transform .2s ease,background .2s ease;
  }
  .related-cat-card:hover .related-cat-arrow{transform:translateX(3px);background:rgba(255,255,255,.28);}

  @media (max-width:600px){
    .related-cats{grid-template-columns:1fr;}
    .cat-hero{min-height:230px;}
  }


/* =============================================================================
   СТАТИЯ — идва от carsdirect-journal-article_5.html.
   Тези стилове ЛИПСВАХА в category файла, затова статиите не можеха да се
   рендират от него.
   ========================================================================== */
  .progress-track{height:3px;background:rgba(255,255,255,.08);}
  .progress-fill{height:100%;width:0%;background:var(--red);}

  /* ===== ARTICLE HERO ===== */
  .article-hero{
    position:relative;min-height:400px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
    background:radial-gradient(ellipse 800px 500px at 75% 8%, rgba(255,255,255,.05), transparent 60%),
      linear-gradient(155deg,#232327 0%, var(--hero-dark) 45%, #0c0c0e 100%);
  }
  .article-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.64) 100%);pointer-events:none;}
  .ah-top{position:relative;z-index:2;padding:20px 28px 0;max-width:var(--maxw);margin:0 auto;width:100%;}
  .breadcrumb{display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.5);flex-wrap:wrap;}
  .breadcrumb a{color:rgba(255,255,255,.5);}
  .breadcrumb a:hover{color:#fff;}
  .breadcrumb .bc-current{color:rgba(255,255,255,.85);}
  .breadcrumb svg{flex-shrink:0;}
  .ah-bottom{position:relative;z-index:2;padding:24px 28px 38px;max-width:var(--maxw);margin:0 auto;width:100%;}
  .ah-bottom h1{font-family:var(--sans);font-weight:700;color:#fff;font-size:clamp(26px,3.6vw,40px);line-height:1.14;letter-spacing:-.8px;max-width:760px;margin:16px 0 18px;}
  .ah-byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .ah-byline .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#71717a,#2c2c30);flex-shrink:0;}
  .ah-byline-name{font-size:13.5px;font-weight:600;color:#fff;}
  .ah-byline-role,.ah-byline-meta{font-size:13px;color:rgba(255,255,255,.55);}
  .ah-dot{color:rgba(255,255,255,.3);}
  .ah-actions{margin-left:auto;display:flex;gap:14px;}
  .ah-actions button{background:none;border:none;color:rgba(255,255,255,.65);display:flex;transition:color .15s;}
  .ah-actions button:hover{color:#fff;}
  /* Обратна връзка при копиран адрес — скриптът е в journal/article.blade.php. */
  .ah-actions button.is-copied{color:#fff;}
  .ah-actions button.is-copied::after{content:'Линкът е копиран';font:600 12px/1 var(--sans);margin-left:8px;align-self:center;white-space:nowrap;}

  /* ===== BODY LAYOUT ===== */
  .article-body-wrap{padding:42px 0 56px;}
  .article-grid{display:grid;grid-template-columns:168px minmax(0,1fr);gap:44px;align-items:start;}

  /* Б3: беше top:88px, а masthead-ът е два реда + 3px лента за прогреса ≈ 108px
     — TOC-ът се залепваше ПОД него и активният линк стоеше скрит зад лентата. */
  .toc{position:sticky;top:var(--masthead-h);}
  .toc-label{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px;}
  .toc-hint{font-size:10.5px;color:var(--ink-3);margin-bottom:14px;}
  .toc-links{display:flex;flex-direction:column;border-left:1px solid var(--line);}
  .toc-links a{font-size:12.5px;color:var(--ink-2);padding:8px 0 8px 14px;border-left:2px solid transparent;margin-left:-1px;transition:color .15s;}
  .toc-links a:hover{color:var(--ink);}
  /* Б3: текстът на активния линк е 12.5px върху хартия (4.3:1); левият кант
     остава --red — той е рамка, а рамките се мерят на 3:1. */
  .toc-links a.is-active{color:var(--red-text);font-weight:600;border-left-color:var(--red);}

  .toc-mobile{display:none;}
  .toc-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;padding:13px 15px;background:var(--paper-2);border-radius:var(--r-md);border:1px solid var(--line);}
  .toc-mobile summary::-webkit-details-marker{display:none;}
  .toc-mobile[open] summary{border-radius:var(--r-md) var(--r-md) 0 0;}
  .toc-mobile-links{border:1px solid var(--line);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:4px 15px;}
  .toc-mobile-links a{display:block;font-size:13px;color:var(--ink-2);padding:9px 0;border-bottom:1px solid var(--line);}
  .toc-mobile-links a:last-child{border-bottom:none;}
  .toc-chevron{transition:transform .2s ease;flex-shrink:0;}
  .toc-mobile[open] .toc-chevron{transform:rotate(180deg);}

  /* ===== READING PROSE ===== */
  /* min-width:0 е задължително, не козметика. .prose е grid елемент, а те по
     подразбиране са min-width:auto, тоест НЕ могат да се свият под min-content на
     съдържанието си. Широка таблица (.cost-table има min-width:460px, за да не се
     смачка) така разпъваше цялата четивна колона до 460px в екран от 375px и
     изнасяше страницата настрани — вместо да скролва вътре в .cd-table-scroll.
     Хванато при реален рендер на 375px, не личи на десктоп. */
  .prose{max-width:700px;min-width:0;}
  /* Б2.5: уводът беше 17px срещу 16px тяло — 1px разлика, която окото не хваща,
     и уводът не се четеше като увод, а като пореден абзац. 19px/1.65 му връщат ранга. */
  .prose .lede{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--ink);margin:0 0 22px;}
  /* Б2.5 + Б3: h2 беше 20px — точно колкото .section-title, т.е. заглавие ВЪТРЕ в
     статията тежеше колкото етикет на секция; 38px отгоре не отделяха новата тема
     от предходния абзац. И scroll-margin беше твърд 90px при ~108-120px висок sticky
     masthead, тъй че всяко цъкане в TOC-а пъхаше заглавието ПОД лентата. */
  .prose h2{font-family:var(--sans);font-size:24px;font-weight:700;letter-spacing:-.4px;margin:52px 0 16px;scroll-margin-top:var(--masthead-h);}
  .prose > h2:first-of-type{margin-top:0;}
  /* Б2.5: h3 изобщо липсваше в системата — двете реални статии си го пишеха инлайн
     8 пъти с font-size:16px, т.е. колкото тялото, и подзаглавието нямаше никакъв
     ранг. 18px застава между h2 (24) и тялото (16). */
  .prose h3{font-family:var(--sans);font-size:18px;font-weight:700;letter-spacing:-.2px;margin:30px 0 10px;}
  .prose p{font-family:var(--serif);font-size:16px;line-height:1.75;color:var(--ink);margin:0 0 18px;}
  .prose figure{margin:26px 0;}
  .prose .fig-media{border-radius:var(--r-md);height:220px;background:var(--grad,linear-gradient(135deg,#3a3a3f,#1c1c20));}
  .prose figcaption{font-size:12px;color:var(--ink-3);margin-top:8px;}
  .prose blockquote{font-family:var(--serif);font-size:20px;font-weight:500;line-height:1.5;color:var(--ink);border-left:3px solid var(--red);padding-left:18px;margin:28px 0;}

  /* ===== CALLOUTS ===== */
  .callout{border-left:3px solid;padding:13px 16px;margin:22px 0;border-radius:0 var(--r-sm) var(--r-sm) 0;}
  .callout-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.3px;margin-bottom:6px;}
  .callout p{font-family:var(--serif);font-size:14.5px;line-height:1.6;margin:0;color:var(--ink);}
  .callout--insight{border-color:var(--red);background:var(--red-wash);}
  /* Б3: 11px етикет върху бледия --red-wash — под 4.5:1. Кантът и фонът на
     самия калаут остават --red. */
  .callout--insight .callout-label{color:var(--red-text);}
  .callout--warning{border-color:var(--amber);background:var(--amber-wash);}
  /* Б3: --amber като текст е само 3.7:1 върху хартията — най-лошият контраст
     във файла. --amber-text го вдига до 5.5:1; border-color на реда отгоре
     си остава --amber. */
  .callout--warning .callout-label{color:var(--amber-text);}

  /* ===== COST TABLE ===== */
  /* Б3: таблицата няма стратегия при препълване, а живее в 700px четивна колона.
     Реалната статия за хибриди има 4 колони с изречения в клетките, а Tucson —
     „Модел | Година | Пробег | Цена". На тесен екран auto-layout таблица стига до
     min-content и излиза извън колоната си. Блоковият partial за тип `table` я
     обвива в .cd-table-scroll, така че прелива хоризонтално ВЪТРЕ в обвивката,
     вместо да блъска цялата страница настрани. */
  .cd-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:20px 0 26px;}
  .cd-table-scroll .cost-table{margin:0;min-width:460px;}
  /* Таблица до 3 колони на телефон (2026-10-05): 460px я пращаше настрани и последната колона
     (цената във VIN статията) оставаше извън екрана. До 3 колони се събират в ширината. */
  @media (max-width:480px){
    .cd-table-scroll .cost-table:not(:has(th:nth-child(4))){min-width:0;}
    .cd-table-scroll .cost-table:not(:has(th:nth-child(4))) :is(th,td){padding-left:8px;padding-right:8px;}
  }
  .cost-table{width:100%;border-collapse:collapse;font-size:13.5px;margin:20px 0 26px;}
  .cost-table th{text-align:left;font-weight:600;color:var(--ink-2);background:var(--paper-2);padding:9px 12px;font-size:12px;}
  .cost-table th:last-child,.cost-table td:last-child{text-align:right;}
  .cost-table--text th:last-child,.cost-table--text td:last-child{text-align:left;}
  .cost-table th:first-child{border-radius:var(--r-sm) 0 0 0;}
  .cost-table th:last-child{border-radius:0 var(--r-sm) 0 0;}
  .cost-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-family:var(--sans);}
  .cost-table tr.total td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none;padding-top:13px;}
  /* Б3: сборът е единственото червено ЧИСЛО в таблицата — 13.5px, 4.3:1. */
  .cost-table tr.total td:last-child{color:var(--red-text);}

  /* ===== PROS / CONS ===== */
  .proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 26px;}
  .pc-card{border:1px solid var(--line);border-radius:var(--r-md);padding:15px;}
  .pc-head{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;margin-bottom:11px;}
  .pc-head.pros{color:var(--green);}
  .pc-head.cons{color:var(--red);}
  .pc-card ul{display:flex;flex-direction:column;gap:9px;}
  .pc-card li{display:flex;gap:7px;font-family:var(--serif);font-size:13.5px;line-height:1.4;color:var(--ink-2);}
  .pc-card li svg{flex-shrink:0;margin-top:2px;}
  .pc-card.pros li svg{color:var(--green);}
  .pc-card.cons li svg{color:var(--red);}

  /* ===== FAQ ===== */
  .faq-item{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:9px;overflow:hidden;}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:14px;font-weight:600;gap:10px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-chevron{transition:transform .2s ease;color:var(--ink-3);flex-shrink:0;}
  .faq-item[open] .faq-chevron{transform:rotate(180deg);}
  .faq-item-body{font-family:var(--serif);font-size:14px;line-height:1.65;color:var(--ink-2);padding:0 16px 16px;}

  /* ===== CTA BOX ===== */
  .cta-box{background:var(--black);border-radius:var(--r-lg);padding:22px 24px;margin:28px 0 30px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .cta-box-title{font-size:16px;font-weight:700;color:#fff;}
  .cta-box-sub{font-size:13px;color:rgba(255,255,255,.55);margin-top:4px;}
  .cta-box-btn{flex-shrink:0;background:var(--red);color:#fff;font-size:13px;font-weight:600;padding:11px 18px;border-radius:9px;transition:background .15s;}
  .cta-box-btn:hover{background:var(--red-bright);}

  /* ===== СТРАНИЦАТА НА ПАЗАРА (вътрешната мрежа, 02.10.2026) =====
     Статия → /koli-ot-*.html. Хоризонтална карта: снимка вляво, текст, стрелка. */
  .koliot-card{display:flex;align-items:center;gap:16px;margin:28px 0 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s;}
  .koliot-card:hover{border-color:var(--ink-3);box-shadow:0 6px 18px rgba(17,17,20,.08);transform:translateY(-2px);color:var(--ink);}
  .koliot-card + .cta-box{margin-top:14px;}
  .koliot-card-img{flex:0 0 132px;aspect-ratio:4/3;border-radius:calc(var(--r-lg) - 4px);overflow:hidden;background:var(--paper-2);}
  .koliot-card-img img{display:block;width:100%;height:100%;object-fit:cover;}
  .koliot-card-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;}
  .koliot-card-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text);}
  .koliot-card-title{font-size:17px;font-weight:700;line-height:1.3;}
  .koliot-card-desc{font-size:13.5px;line-height:1.45;color:var(--ink-2);}
  .koliot-card-arrow{flex-shrink:0;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--black);color:#fff;margin-right:6px;transition:background .15s;}
  .koliot-card:hover .koliot-card-arrow{background:var(--red);}

  /* ===== AUTHOR BIO ===== */
  .author-bio{display:flex;align-items:center;gap:13px;padding-top:20px;margin-top:8px;border-top:1px solid var(--line);}
  .author-bio .avatar-lg{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#71717a,#2c2c30);flex-shrink:0;}
  .author-bio-name{font-size:14px;font-weight:700;}
  .author-bio-role{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
  /* Б3: „Всички статии от автора" — 12.5px, 4.3:1. */
  .author-bio-link{font-size:12.5px;font-weight:600;color:var(--red-text);flex-shrink:0;}

  /* ===== NATIVE INVENTORY (article width) ===== */
  .article-inv-wrap{background:var(--paper-2);border-radius:var(--r-lg);padding:18px;margin:26px 0;}
  .article-inv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
  .article-inv-head-title{font-size:14px;font-weight:700;}
  .article-inv-head-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;}
  .article-inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}

  /* ===== RELATED ===== */
  .related-section{border-top:1px solid var(--line);padding-top:44px;margin-top:8px;}

  @media (max-width:980px){
    .article-grid{grid-template-columns:1fr;}
    .toc{display:none;}
    .toc-mobile{display:block;margin-bottom:26px;}
  }
  @media (max-width:600px){
    .proscons{grid-template-columns:1fr;}
    .article-inv-grid{grid-template-columns:1fr 1fr;}
    .cta-box{flex-direction:column;align-items:flex-start;}
    .koliot-card{gap:12px;padding:10px;}
    .koliot-card-img{flex-basis:92px;}
    .koliot-card-title{font-size:15.5px;}
    .koliot-card-desc{font-size:12.5px;}
    .koliot-card-arrow{width:32px;height:32px;margin-right:2px;}
    .ah-actions{margin-left:0;}
  }
  @media (max-width:420px){
    .article-inv-grid{grid-template-columns:1fr;}
  }


/* =============================================================================
   Класове, които съществуваха САМО в реалните статии и падаха навсякъде другаде.
   .callout--tip: ползван в Tucson и Хибриди, дефиниран само там.
   .plain-list:   ползван 5 пъти в Хибриди, дефиниран само там.
   ========================================================================== */
  .callout--tip{border-color:var(--steel);background:rgba(62,111,207,0.07);}
  .callout--tip .callout-label{color:var(--steel);}
  .prose ul.plain-list{margin:0 0 20px;padding:0;list-style:none;}
  /* НЕ flex: реалните редове са „<strong>термин</strong> обяснение…" и при display:flex
     <strong> и текстът след него ставаха ДВА flex елемента — термин в тясна колона,
     обяснение в друга, и запетая, откъсната от думата си („система , ако"). Точката е
     абсолютна, а редът тече като обикновен абзац. */
  .prose ul.plain-list li{
    position:relative;padding-left:15px;font-family:var(--serif);font-size:16px;line-height:1.62;color:var(--ink);
    margin-bottom:11px;
  }
  .prose ul.plain-list li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--red);}
  .prose ul.plain-list li strong{font-weight:700;}

/* =============================================================================
   V9 — Porsche-дисциплина (КАНОН от 2026-07-28, решение на собственика)
   Писан като override слой върху горното и долепен тук непроменен — така
   каскадата действа точно както в одобрения мокъп (/blog?v9=1).
   ========================================================================== */
:root{
  /* по-широка сцена; медиите дишат, прозата пак си стои на 700px */
  --maxw:1340px;
}

/* ---- 1. МАЩАБ С ЛЕКО ТЕГЛО ---------------------------------------------- */
.hero-inner h1{
  font-size:56px;font-weight:500;letter-spacing:-1.8px;line-height:1.06;
  max-width:900px;
}
.hero-dek{font-size:19px;max-width:640px;}
.section-title{font-size:32px;font-weight:500;letter-spacing:-.8px;}
.inv-title{font-size:28px;font-weight:500;letter-spacing:-.6px;}
.pick-title{font-weight:500;}
.article-title{font-weight:500;font-size:17px;line-height:1.35;}
.article-row-title{font-weight:500;}
.cat-card-label{font-weight:500;font-size:17px;}
.trend-title{font-weight:500;}
.nl-title{font-weight:500;letter-spacing:-.5px;}
.prose h2{font-weight:600;}   /* в четивото 500 е твърде леко до serif тялото */

/* ---- 2. ВЪЗДУХ ВМЕСТО КУТИИ --------------------------------------------- */
.section{padding:84px 0;}
.section-top{border-top:none;}                 /* разделя въздухът, не чертата */
.section-head{margin-bottom:34px;}

.article-card,.pick-card,.inv-card{
  border:none;border-radius:0;box-shadow:none;background:transparent;
}
.article-media,.pick-media,.inv-media,.cat-card,.cat-card-bg,.article-row-media{
  border-radius:0;
}
.article-media{aspect-ratio:3/2;height:auto;}  /* Porsche снимка: 3:2, квадратна */
.article-card:hover .article-media{box-shadow:none;transform:scale(1.02);}
.pick-card:hover .pick-media{box-shadow:none;}
.inv-card{border-bottom:1px solid var(--line);}/* търговията пази лек под — да
                                                  личи, че е модул, не статия */
.inv-body{padding-left:0;padding-right:0;}

/* ---- 3. ЦВЕТОВА ТИШИНА --------------------------------------------------- */
/* Червеното остава САМО на: .kicker, .cat-tabs a.is-active, .btn-profile,
   .progress-fill (и focus ринга). Всичко долу слиза в мастило. */
.section-link{color:var(--ink);}
.section-link:hover{color:var(--ink-2);}
.pick-cat,.article-cat,.article-row-cat,.trend-cat{color:var(--ink-2);}
.inv-price{color:var(--ink);}
.article-card:hover .article-title,
.pick-card:not(:first-child):hover .pick-title,
.trend-item:hover .trend-title{color:var(--ink-2);}
.toc-links a.is-active{color:var(--ink);border-left-color:var(--ink);}
.author-bio-link{color:var(--ink);}
.cost-table tr.total td:last-child{color:var(--ink);}

/* ---- 4. РЕДУВАН РИТЪМ: след огромния херо идва ПЛЪТНОСТ ------------------- */
/* Първи опит тук беше „витрина" — една карта на цял ред, 540px. Собственикът я
   отхвърли на мокъпа: под 700px херо тя се четеше като ВТОРИ херо — две грамади
   една върху друга. И Porsche не прави така: при тях след хероя идва стегнат ред
   ДРЕБНИ карти, а едрото се появява чак по-надолу по страницата. Затова
   „Избрано" е равен ред от 3 компактни карти с анатомията на Porsche тийзъра:
   снимка горе, чип и заглавие ПОД нея (не върху нея). */
.picks-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:26px;}
/* Базовият first-child е „кино" карта: absolute медия, градиент, бял текст върху
   снимката. Неутрализираме всичко това, за да е равен на братята си. */
.pick-card:first-child{
  grid-column:auto;grid-row:auto;min-height:0;padding:0;
  display:block;border-radius:0;
}
.pick-card:first-child::after{display:none;}
.pick-card:first-child .pick-media{position:static;inset:auto;}
.pick-card:first-child .pick-cat{position:static;color:var(--ink-2);margin:12px 0 6px;}
.pick-card:first-child .pick-title{position:static;color:var(--ink);font-size:17px;max-width:none;}
.pick-card:first-child:hover .pick-title{color:var(--ink-2);}
/* Една и съща рамка за всички снимки в реда — 3:2, като останалите в v9. */
.pick-card .pick-media{aspect-ratio:3/2;height:auto;min-height:0;}
.pick-title{font-size:17px;}
.pick-num{display:none;}                       /* номерацията е каталожен тик —
                                                  редът говори със снимки */

.latest-grid{gap:26px;}
.cat-grid{gap:22px;}
.cat-card{height:230px;}

/* ---- 5. БЕЗ KEN BURNS ----------------------------------------------------- */
.hero.photo-porsche-hero{animation:none;background-size:cover;}
.hero{min-height:700px;}                        /* по-кинематографичен отвор */

/* ---- мобилни откази ------------------------------------------------------- */
@media (max-width:980px){
  .hero-inner h1{font-size:38px;}
  .section-title{font-size:26px;}
  /* редът от 3 компактни карти става 2 — БЕЗ да възкресява витрината */
  .picks-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .picks-grid{grid-template-columns:1fr;}
  .hero{min-height:520px;}
  .hero-inner h1{font-size:31px;}
  .section{padding:52px 0;}
}

/* =============================================================================
   ВЪРТЯЩ СЕ ХЕРО (Porsche Newsroom похватът) — добавен 2026-07-29
   =============================================================================
   Няколко водещи статии се редуват с плавно избледняване. Точки за навигация +
   пауза, точно както при Porsche (слайдер с dots и pause бутон, без стрелки).
   Активният слайд е position:relative и ДАВА височината на секцията; останалите
   лежат absolute върху него. При prefers-reduced-motion се показва само първият
   слайд — без автоматично въртене (JS-ът проверява същото).
   ========================================================================== */
  .hero-slider{position:relative;}
  .hero-slide{
    position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
    display:flex;flex-direction:column;justify-content:flex-end;
    background-color:var(--hero-dark);background-size:cover;background-position:center 38%;
    transition:opacity .9s ease;
  }
  .hero-slide.is-active{position:relative;z-index:1;opacity:1;pointer-events:auto;}
  /* Заглавията на слайд 2+ са <p class="hero-title"> (една H1 на страница), но
     носят същия визуален ранг като H1 на първия. */
  .hero-inner h1,.hero-inner .hero-title{
    font-size:56px;font-weight:500;letter-spacing:-1.8px;line-height:1.06;
    max-width:900px;color:#fff;margin:14px 0 12px;
  }
  .hero-dots{
    position:absolute;right:28px;bottom:24px;z-index:2;
    display:flex;align-items:center;gap:8px;
  }
  .hero-dot{
    width:26px;height:3px;border:none;border-radius:2px;padding:0;
    background:rgba(255,255,255,.32);transition:background .2s;
  }
  .hero-dot.is-active{background:#fff;}
  .hero-pause{
    background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);
    color:#fff;width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;margin-left:6px;
  }
  @media (max-width:980px){
    .hero-inner h1,.hero-inner .hero-title{font-size:38px;}
  }
  @media (max-width:760px){
    .hero-inner h1,.hero-inner .hero-title{font-size:31px;}
    .hero-dots{right:16px;bottom:14px;}
  }

  /* Базовото .pick-card:not(:first-child) .pick-media{height:118px} е с по-висока
     специфичност (0,3,0) от общото 3:2 правило и държеше карти 2 и 3 сплескани
     до 118px, докато първата дишаше в 3:2 — редът излизаше разнокалибрен.
     Същата специфичност, по-късно във файла → печели, и трите са равни. */
  .pick-card:not(:first-child) .pick-media{height:auto;min-height:0;}

  /* ПОПРАВКА на слайдера: затъмняващите слоеве на хероя (::before радиален +
     ::after линеен към ниското) са псевдоелементи на .hero и лежат ПОД слайдовете
     (те са деца с z-index:1) — затова текстът върху светла снимка избледняваше.
     Слоевете се повтарят ВЪРХУ всеки слайд; .hero-inner е z-index:2 и остава
     отгоре. Инлайн градиентът в изгледа става излишен. */
  .hero-slide::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse 780px 620px at 8% 88%, rgba(0,0,0,.6), transparent 62%);
  }
  /* NB: този `background` е за пълнота — в реалния изглед НЕ се вижда, защото
     .hero-wrap .hero-slide::after (~L1165) го презаписва, а .hero-wrap го има
     винаги. Тук се задават content/position/inset, които онова правило НЕ
     повтаря. Тюнинг на затъмнението се прави ТАМ, не тук. */
  .hero-slide::after{
    content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.34) 46%, rgba(0,0,0,.86) 100%);
  }

  /* Активният слайд е единственото дете в потока на flex секцията — без flex:1
     той взима височината на текста си, а не на секцията (700px), и над снимката
     оставаше черна лента от фона на секцията. */
  .hero-slide.is-active{flex:1;}

/* =============================================================================
   КАЛИБРОВКА ПО ЖИВО ИЗМЕРЕН PORSCHE NEWSROOM (2026-07-29, втори оглед)
   =============================================================================
   Собственикът хвана две грешки в v9 и измерването ги потвърди:

   1. ЪГЛИТЕ: Porsche тийзърите са с border-radius 12px (div.teaser-image,
      измерено в браузър) — НЕ прави, както твърдеше одитът и както сляпо
      приложих. 12px е и радиусът на нашия пазар (--r-lg) — заоблянето връща
      и вътрешната консистентност на сайта.

   2. ТЕГЛАТА: Porsche пише 39px при weight 400 — но Porsche Next е ПЛЪТЕН
      шрифт; неговото 400 носи колкото Manrope 600. Пренесох „голямо и леко"
      буквално върху по-лека кройка → етикетите по плочките и заглавията
      излязоха тънки. Мащабът остава; теглото се вдига с една степен.
   ========================================================================== */
  .article-media,.pick-media,.inv-media,.article-row-media,.media-ph{border-radius:var(--r-lg);}
  .cat-card{border-radius:var(--r-lg);overflow:hidden;}
  .prose .fig-media,.prose img.fig-media{border-radius:var(--r-lg);}

  .hero-inner h1,.hero-inner .hero-title{font-weight:600;}
  .section-title{font-weight:600;}
  .inv-title{font-weight:600;}
  .pick-title{font-weight:600;}
  .article-title{font-weight:600;}
  .article-row-title{font-weight:600;}
  .trend-title{font-weight:600;}
  .cat-card-label{font-weight:600;font-size:18px;}
  .nl-title{font-weight:600;}
  /* редът с рубриките в masthead-а — беше 12.5px на 58% бяло: най-тънкото
     нещо на страницата, а е главната навигация */
  .cat-tabs a{font-size:13px;font-weight:500;color:rgba(255,255,255,.72);}

/* =============================================================================
   ХЕРО — уплътняване (2026-07-29, след оглед на 1920px)
   =============================================================================
   Измерено на широк екран: 1905×700 кутия за снимка 1200×900 значи, че се вижда
   само 49% от кадъра, а над заглавието зее 317px празно. Текстът плуваше по
   средата — това чете като „снимка с надпис отгоре", не като корица.

   Porsche държи текста ДОЛЕПЕН до дъното, с плътно затъмняване под него, и
   кадърът диша отгоре. Три поправки в тази посока:
   ========================================================================== */

  /* 1. По-нисък херо на широк екран: 700px при 1900 широчина е билборд, който
        показва половин кадър. 58vh (мин. 520, макс. 660) държи пропорцията
        по-близо до 3:1 и оставя съдържанието да се вижда без скрол. */
  .hero{min-height:clamp(520px, 58vh, 660px);}

  /* 2. Текстът се лепи за дъното и се стяга: без празното небе над него. */
  .hero-inner{padding:0 28px 44px;}
  .hero-inner h1,.hero-inner .hero-title{margin:14px 0 10px;}
  .hero-dek{margin-bottom:18px;}
  .hero .byline{padding-top:16px;}

  /* 3. По-плътно затъмняване, тръгващо по-високо: дъното на кадъра става
        носител на текста, вместо да се бори с него. Заменя по-мекия слой
        от .hero-slide::after по-горе. */
  .hero-slide::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.10) 0%,
      rgba(0,0,0,.22) 38%,
      rgba(0,0,0,.62) 72%,
      rgba(0,0,0,.92) 100%);
  }
  /* Лек винетен ъгъл — прикрива меките ръбове на едро увеличена снимка. */
  .hero-slide::before{
    background:
      radial-gradient(ellipse 900px 700px at 10% 92%, rgba(0,0,0,.55), transparent 60%),
      radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,.35) 100%);
  }

/* =============================================================================
   PORSCHE МОДЕЛЪТ (2026-07-29, одобрен от собственика след жив оглед на
   newsroom.porsche.com) — контейниран херо + светъл masthead
   =============================================================================
   Измерено при тях на 1920px: херо 1440px С ПОЛЕТА (не цял екран), текстът на
   55px от ръба на САМАТА снимка, съотношение 2:1, заглавие 1-2 реда, точките
   ПОД снимката. Съдържанието след хероя е още по-тясно (1270) — ритъмът
   „широко → по-тясно" прави хероя корица, а останалото — страници.

   Бонус: 1400px кутия вместо 1905 значи 1.12× вместо 1.59× увеличение на
   същата снимка — осезаемо по-остра, без нито един сменен файл.

   Кинематографичният от-ръб-до-ръб херо остава за НАЧАЛНАТА на сайта — там
   има истинско видео. Блогът е списание, не киноафиш.
   ========================================================================== */

  /* ---- контейнерът на хероя ---- */
  .hero-wrap{
    width:min(1400px, calc(100% - 56px));
    margin:18px auto 0;
  }
  .hero-wrap .hero{
    aspect-ratio:2/1;
    min-height:0;
    border-radius:var(--r-lg);
  }
  /* ---- ЛЕНТА, а не слайдове с класове ----
     Първият опит местеше всеки слайд поотделно през .is-active + inline
     transform. Оказа се чупливо: transition-ите се застъпват и прекъснато
     плъзгане оставя слайдовете заклещени встрани — измерено, и четирите
     висяха на translateX(100%), включително активният.
     Тук всички слайдове седят в редица (flex) и се движи САМО лентата, с
     една стойност. Няма състояние за поддържане, няма как да заседне. */
  .hero-wrap .hero{overflow:hidden;}
  .hero-track{
    display:flex;height:100%;
    transition:transform .62s cubic-bezier(.3,.7,.25,1);
    will-change:transform;
  }
  .hero-wrap .hero-slide,
  .hero-wrap .hero-slide.is-active{
    position:relative;inset:auto;
    flex:0 0 100%;width:100%;min-width:0;
    opacity:1;transform:none;pointer-events:auto;
    display:flex;flex-direction:column;justify-content:flex-end;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-track{transition:none;}
  }

  /* ---- текстът ляга на ръба на СНИМКАТА, не на невидим контейнер ---- */
  .hero-wrap .hero-inner{
    max-width:none;margin:0;padding:0 56px 40px;
  }
  /* Заглавието: максимум 2 реда, по Porsche. По-дълго се отрязва с … —
     а редакционното правило е: заглавие над 2 реда в херо е твърде дълго.
     Клампът стои на ВЪТРЕШНИЯ <a>, не на самия h1: върху h1 браузърът
     блокифицира -webkit-box обратно до flow-root (проверено — computed
     display излизаше flow-root и клампът мълчеше). Линкът няма такъв конфликт. */
  .hero-inner h1 > a,.hero-inner .hero-title > a{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  .hero-wrap .hero-dek{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* ---- точките: ПОД снимката, центрирани ---- */
  .hero-wrap .hero-dots{
    position:static;
    justify-content:center;
    padding:14px 0 0;
  }
  .hero-wrap .hero-dot{background:var(--line-strong);}
  .hero-wrap .hero-dot.is-active{background:var(--ink);}
  .hero-wrap .hero-pause{
    background:transparent;border:1px solid var(--line-strong);color:var(--ink-3);
  }

  /* Затъмняването беше калибрирано за от-ръб-до-ръб херо. В контейнирания
     кутията е с 500px по-тясна, тъй че същите слоеве покриваха почти цялата
     снимка и долният ляв ъгъл ставаше кален. По-плитък градиент + по-лека
     винетка: текстът пак е четим, но колата се вижда. */
  .hero-wrap .hero-slide::before{
    background:radial-gradient(ellipse 620px 460px at 12% 96%, rgba(0,0,0,.42), transparent 66%);
  }
  .hero-wrap .hero-slide::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,0) 34%,
      rgba(0,0,0,.30) 62%,
      rgba(0,0,0,.72) 84%,
      rgba(0,0,0,.88) 100%);
  }

  /* ---- рубрика и статия: същото контейниране, същият език ---- */
  .cat-hero,.article-hero{
    width:min(1400px, calc(100% - 56px));
    margin:18px auto 0;
    border-radius:var(--r-lg);
    overflow:hidden;
  }

  /* ---- съдържанието: една стъпка по-тясно от хероя (Porsche: 1440→1270) ---- */
  :root{--maxw:1270px;}

  /* =============================================================================
     СВЕТЪЛ MASTHEAD — черната лента беше продължение на тъмния от-ръб-до-ръб
     херо; с контейнирания херо върху хартия тя остана сирак („манджа с грозде"
     по думите на собственика) и караше блога да изглежда като чужд сайт.
     Светлата лента е и изборът на Porsche Newsroom, и езикът на самия
     carsdirect.bg (светъл header). „Друг раздел" вече го казва съдържанието.
     ========================================================================== */
  .masthead{
    background:#fff;
    box-shadow:0 1px 0 var(--line);
  }
  .masthead.is-elevated{box-shadow:0 8px 24px rgba(20,20,22,.08);}
  .logo-word{color:var(--ink);}
  .logo-word em{color:var(--red);}
  .logo-tag{color:var(--ink-3);border-left-color:var(--line-strong);}
  .mh-links a{color:var(--ink-2);}
  .mh-links a:hover{color:var(--ink);}
  .icon-btn{color:var(--ink-2);}
  .icon-btn:hover{color:var(--ink);}
  .hamburger{color:var(--ink);}
  .mh-row2{border-top:1px solid var(--line);}
  .cat-tabs a{color:var(--ink-3);}
  .cat-tabs a:hover{color:var(--ink-2);}
  .cat-tabs a.is-active{color:var(--ink);border-bottom-color:var(--red);}
  .mobile-menu{background:#fff;border-top:1px solid var(--line);}
  .mobile-menu a{color:var(--ink);border-bottom:1px solid var(--line);}
  .progress-track{background:var(--paper-2);}

  /* ---- мобилни откази ---- */
  @media (max-width:980px){
    .hero-wrap{width:calc(100% - 32px);}
    .hero-wrap .hero-inner{padding:0 24px 24px;}
    .cat-hero,.article-hero{width:calc(100% - 32px);}
  }
  @media (max-width:760px){
    /* На мобилно се отказваме от 2:1 (твърде нисък кадър за тесен екран) и минаваме
       на min-height. Но с aspect-ratio:auto височината на .hero става „auto“, а
       .hero-track е с height:100% — процент спрямо auto родител се изчислява като
       auto, тоест лентата се свива до съдържанието (300px) и над снимката зее
       черна ивица до 440-те. Затова .hero става flex контейнер: лентата е негово
       дете и се разтяга по подразбиране (align-items:stretch). */
    .hero-wrap .hero{aspect-ratio:auto;min-height:440px;display:flex;}
    .hero-wrap .hero-track{flex:1;height:auto;min-height:0;}
  }

/* =============================================================================
   СПОДЕЛЕНА ГЛАВА (2026-07-30)
   =============================================================================
   Блогът вече не рисува своя навигация — ред 1 идва от layouts/header.blade.php,
   същата глава като на борсата. Собственото копие се беше разминало за седмица:
   логото не беше линк, лупата не търсеше, липсваха Любими, Запазени търсения,
   Администрация и балансът. Общата глава не може да се разсинхронизира.

   Тук остава само това, което онази глава не знае за блога.
   ========================================================================== */

  /* Редът с рубриките вече не е част от тъмна глава, а началото на самата
     страница. Хартиеният фон го отделя от бялата навигация над него — иначе
     двете бели ленти се сливат в едно безлично поле. */
  .masthead--rubrics{
    background:var(--paper);
    box-shadow:inset 0 -1px 0 var(--line);
  }
  .masthead--rubrics.is-elevated{box-shadow:0 8px 24px rgba(20,20,22,.08);}
  .masthead--rubrics .mh-row2{border-top:none;}

  /* „Всички“ е ПЪРВИЯТ ТАБ, не заглавие. Дотук беше получерно бяло с вертикална
     черта след себе си — наследство от етикета „Блог“, който беше просто надпис.
     Заради това изглеждаше избрано на всяка страница и се биеше с истинския
     активен таб. Сега се държи като останалите: приглушено, светва само когато
     наистина си на хъба, и получава същата червена лента отдолу. */
  .cat-tabs a.cat-brand{margin-right:6px;}

  /* ХРОМЪТ ОСТАВА НА MONTSERRAT — решение на собственика 2026-07-30.
     cd-journal.css слага Manrope на body и той се стичаше в споделената глава и
     футър, тоест едни и същи две части се изписваха с различен шрифт според това
     дали си на борсата или в блога. Тук им се връща шрифтът на сайта; Manrope
     остава за самия блог — реда с рубриките и всичко под него.
     Смяната на ЦЕЛИЯ сайт на Manrope е отделна задача, не се прави мимоходом.

     БЕЗ звездичка в селектора: универсалният подбор удря и <i class="fa …">, чийто
     шрифт Е иконският набор — при пренаписването му иконките се изродиха в
     празни квадратчета (проверено на рендер). Наследяването върши работата само:
     всичко вътре взима шрифта на контейнера, освен елементите със собствено
     правило, а точно те са иконките.

     НЕ САМО ШРИФТЪТ. cd-journal.css пипа и голи елементи — body{line-height:1.5;
     color:var(--ink)}, ul{list-style:none}, img{display:block} — и всичко това се
     стичаше в споделените глава и футър. Оттам идваше по-широкото междуредие във
     футъра. Сравних изчислените стилове на двете страници елемент по елемент
     (38 разлики) и връщам точно тези, които не са нарочни:
       line-height 1.5 → 1.8 (стойността на темата)
       color #141416   → #757F95
       list-style none → disc
       img display block → inline
     Нарочни и ЗАПАЗЕНИ остават: тъмният фон на лентата и светлият цвят на менюто. */
  .cd-blog header.header,
  .cd-blog .footer-area{
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    line-height:1.8;
    color:#757F95;
  }
  /* .navbar-nav е изключен: bootstrap му слага list-style:none и на борсата, а
     общото правило тук (специфичност 0,2,1) го надвиваше и го връщаше на disc. */
  .cd-blog header.header ul:not(.navbar-nav),
  .cd-blog .footer-area ul{list-style:disc;}
  .cd-blog header.header img,
  .cd-blog .footer-area img{display:inline;}
  /* Изключение: червената дума „Блог“ до логото е част от блога, не от хрома. */
  .cd-blog .navbar-brand::after{font-family:var(--sans);}

  /* „CARSDIRECT.bg | Блог“ — чертичка и червена дума до логото, както беше в
     собствената глава на блога. Прави се от CSS, а не в header.blade.php, по две
     причини: споделеният файл не се пипа заради блога, и текстът е УКРАСА —
     истинският линк към хъба стои в реда с рубриките отдолу, така че дублирането
     му в DOM-а само би го прочело два пъти на екранен четец. */
  /* БЕЗ flex на .navbar-brand: flex контейнерът блокифицира децата си, тоест
     логото щеше да стане display:block, а на борсата е inline — и главата вече
     нямаше да е 1:1. Затова етикетът е inline-block, подравнен вертикално. */
  .cd-blog .navbar-brand::after{
    content:"Блог";
    display:inline-block;vertical-align:middle;
    font-family:var(--sans);
    font-size:14px;font-weight:600;letter-spacing:-.1px;line-height:1;
    color:var(--red);
    border-left:1px solid var(--line-strong);
    margin-left:12px;padding-left:12px;
  }

  /* ---------------------------------------------------------------------------
     ТЪМНА ГЛАВА — решение на собственика 2026-07-30.
     Структурата и шрифтът на главата са същите като на борсата; сменя се САМО
     цветът. Това е класическият похват за редакционна секция: читателят вижда
     от първия кадър, че е в друга част на сайта, без нищо да се мести и без
     борсата да се пипа. Контактната лента отгоре и без друго е тъмна, така че
     навигацията се слива с нея и цялата глава чете като един блок.
     Логото минава на logo3.svg — светлата му версия, същата, която dark.css
     слага в тъмен режим на сайта.
     ------------------------------------------------------------------------ */
  /* Боядисва се .navbar, НЕ само .main-navigation: темата слага на самата лента
     rgba(255,255,255,.6) — матово стъкло. Оставена така, тя избелва тъмното под
     себе си до сиво (проверено: изчисленият цвят излиза сив, не черен). */
  .cd-blog .main-navigation,
  .cd-blog .main-navigation .navbar{background:var(--black);}
  .cd-blog #logo{content:url("/public/assets/img/logo/logo3.svg");}
  .cd-blog .navbar-nav .nav-link{color:rgba(255,255,255,.74);}
  .cd-blog .navbar-nav .nav-link:hover,
  .cd-blog .navbar-nav .nav-link.active{color:#fff;}
  .cd-blog .navbar-brand::after{
    color:var(--red-bright,#FF4A4A);
    border-left-color:rgba(255,255,255,.28);
  }
  .cd-blog .nav-right-link{color:rgba(255,255,255,.8);}

  /* Блогът НЯМА тъмен режим (dark.css не се инжектира в layouts/journal.blade.php),
     а бутонът вика toggle_theme() от main.js, който блогът не зарежда — вижте
     бележката при скриптовете в layout-а. Скрит и в горната лента, и в сгънатото меню. */
  .cd-blog a[href="javascript:toggle_theme()"],
  .cd-blog button[onclick*="toggle_theme"]{display:none;}

  /* Редът с рубриките се сгъва В тъмния блок, вместо да стои като трета ограда
     между него и страницата. Така главата е ЕДИН блок с два реда — точно както
     беше в собствения masthead на блога — и над хероя има два фона, не три. */
  .cd-blog .masthead--rubrics{
    background:var(--black);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  }
  .cd-blog .masthead--rubrics.is-elevated{box-shadow:0 8px 24px rgba(0,0,0,.34);}
  .cd-blog .cat-tabs a{color:rgba(255,255,255,.58);}
  .cd-blog .cat-tabs a:hover{color:rgba(255,255,255,.9);}
  .cd-blog .cat-tabs a.is-active{color:#fff;border-bottom-color:var(--red-bright);}
  /* „Всички“ НЕ се оцветява отделно — взима цвета на обикновен таб отгоре и
     светва само през .is-active. Дотук тук стоеше color:#fff и то изглеждаше
     избрано и на рубрика, и на статия, редом с истинския активен таб. */

  /* ЛЕПНЕЩАТА ЛЕНТА — поправка на по-стар дефект, не на днешната промяна.
     light.css слага overflow-x:hidden на html и body. „hidden“ прави елемента
     СКРОЛ КОНТЕЙНЕР (overflow-y се изчислява като auto), а position:sticky на
     негово дете се мери спрямо този контейнер — който сам не се скролва, тъй
     като страницата се движи от viewport-а. Резултат: лентата не се залепва
     никога. Това е било така от първия ден — темата се зарежда още отпреди.
     „clip“ реже точно същото по хоризонтала, но НЕ създава скрол контейнер.
     Важи само в блога: cd-journal.css не се зарежда никъде другаде. */
  html{overflow-x:clip;}
  body.cd-blog{overflow-x:clip;}

  /* Лепне се само редът с рубриките (44px), не цялата глава — котвите в текста
     трябва да спират под него, не под старите 120px от двуредовия masthead. */
  :root{--masthead-h:56px;}

  /* МОБИЛНО. Под 992px темата прави .navbar position:fixed (top:35px, за да мине
     под черната лента .mobile-top). Фиксираният елемент излиза от потока, затова
     .main-navigation остава с височина 0 и редът с рубриките ляга на y=0 —
     ПОД логото, тоест над него на екрана. На борсата това не личи, защото там
     <main class="main"> носи margin-top, който пази мястото; блогът има свой
     <main> без този марджин.
     Връщаме лентата в потока вместо да гадаем отстъп в пиксели: така рубриките
     ляг­ат под нея сами, а лепне пак само лентата с рубриките — както на десктоп. */
  @media (max-width:991px){
    .cd-blog .main-navigation .navbar{position:static;}

    /* .mobile-top (соцмрежи + телефон) е position:fixed, top:0, 35px, z-index 99999
       — стои пред всичко и не се маха при скрол. Темата се разминаваше с нея, като
       държеше навигацията fixed на top:35px. Щом я върнахме в потока, мястото ѝ
       трябва да се запази явно, иначе лентата ляга върху логото и то изчезва. */
    .cd-blog .main-navigation{padding-top:35px;}

    /* Под 991px темата слага .navbar:before — празен абсолютен слой върху цялата
       лента с плътно БЯЛ фон (light.css:1286). Той рисува над background-а ѝ,
       затова тъмната глава излизаше бяла само на телефон, а логото — бяло върху
       бяло — изчезваше. Открива се трудно: getComputedStyle на самата .navbar
       връща тъмното, а elementsFromPoint не вижда псевдоелементи изобщо.
       Хванато чрез пикселна проба, която противоречеше на изчисления цвят. */
    .cd-blog .main-navigation .navbar::before{background-color:var(--black);}

    /* Сгънатото меню (#main_nav) под 991px е с БЯЛ фон от темата (light.css:1305),
       а линковете в блога са бели — бяло върху бяло, отвореното меню изглеждаше
       празно. Панелът минава на тъмното на главата. Хамбургерът беше тъмен върху
       тъмно (light.css:1352, var(--color-dark)) и не се виждаше изобщо. */
    .cd-blog .navbar-collapse{background-color:var(--black);}
    .cd-blog .navbar-toggler-mobile-icon{color:#fff;}

    /* По същата причина лепнещата лента с рубриките спира на 35px, а не на 0 —
       иначе се залепва ПОД фиксираната лента и не се вижда при скрол. */
    .cd-blog .masthead--rubrics{top:35px;}

    /* Котвите в текста трябва да спрат под двете заедно: 35 + 44 + въздух. */
    :root{--masthead-h:90px;}
  }

/* =============================================================================
   СТЕПЕНУВАНА ТЪМНА ГЛАВА — избор на собственика 2026-07-30
   =============================================================================
   Трите тъмни ленти не са три еднакви черни: редът с рубриките е с един тон
   по-светъл и носи косъм светлина отгоре. Главата чете като ЕДИН блок със
   структура, вместо като плътна плоча. Опитът с бяла лента тук беше отхвърлен —
   тя правеше сандвич точно там, където току-що сме направили тъмен блок.
   Повърхността на страницата остава топлата хартия (--paper), не студеното сиво
   на борсата: тя е единственото, което казва „това е четиво, не витрина".
   ========================================================================== */
  .cd-blog .masthead--rubrics{
    background:var(--black-2);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  }
  .cd-blog .cat-tabs a{color:rgba(255,255,255,.62);border-bottom-width:3px;}

  /* Червената лента важи и за „Начало" — то е първи таб, не заглавие. 3px, защото
     на тъмен фон 2px се губят под 13px текст. */
  .cd-blog .cat-tabs a.cat-brand.is-active{border-bottom-color:var(--red-bright);}

/* =============================================================================
   V10 — ПО-ОСТЪР, НО CARSDIRECT (решение на собственика 2026-09-12)
   =============================================================================
   Одобрено от борда „Блогът с остри ръбове" с ЕДНА поправка: ъглите остават
   заоблени (--r-lg / --r-md), както навсякъде в сайта. Остротата идва от
   тежестта на буквите (Manrope 500 → 800), от плътното черно с червен ръб и от
   моно данните — не от прави ръбове. Слой ВЪРХУ V9 (по-горе нищо не е пипано),
   затова всяко правило тук е поне толкова специфично, колкото това, което бие.
   Четирите хода: херо-лента с лот номер · числата под заглавието (блок facts) ·
   рубриките като плочи от букви · „Най-четено" като аукционен лист.
   ========================================================================== */

/* ---- 1. МАЩАБ С ТЕЖЕСТ: 500 → 800 ---------------------------------------- */
.section-title{font-weight:800;font-size:30px;letter-spacing:-.035em;line-height:1.02;}
.inv-title{font-weight:800;letter-spacing:-.03em;}
.nl-title{font-weight:800;letter-spacing:-.02em;}
.pick-title,.article-title,.article-row-title{font-weight:700;letter-spacing:-.015em;}
.prose h2{font-weight:800;letter-spacing:-.025em;}
.prose h3{font-weight:700;}

/* ---- 2. ЛОТ: рубриката + номер на статията, набрани в моно --------------- */
.lot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.kicker{
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  border-radius:4px;padding:6px 9px;
}
.lot-num{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;color:rgba(255,255,255,.55);}

/* ---- 3. ХЕРОТО: черна лента с червен ръб, снимката отделно вдясно -------- */
.hero-wrap .hero{
  aspect-ratio:auto;min-height:0;
  background:var(--black);
  border-bottom:8px solid var(--red);     /* червеният ръб, ВЪТРЕ в заоблената кутия */
}
.hero-wrap .hero-track{height:auto;}
.hero-wrap .hero-slide,
.hero-wrap .hero-slide.is-active{
  display:grid;grid-template-columns:1.05fr 1fr;
  min-height:500px;height:auto;
}
/* Текстът вече не лежи върху снимката — затъмняващите слоеве нямат какво да пазят. */
.hero-wrap .hero-slide::before,.hero-wrap .hero-slide::after{display:none;}
.hero-media{
  position:relative;order:2;min-height:100%;
  background:var(--black-2) center/cover no-repeat;
  filter:grayscale(.35) contrast(1.06);
}
.hero-media.photo-porsche-hero{background-image:url('/assets/img/journal/porsche-hero.jpg');}
/* Шев: снимката влиза в черното, вместо да е залепена до него. */
.hero-media::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--black) 0%,rgba(17,17,20,0) 22%);}
.hero-wrap .hero-inner{
  order:1;padding:44px 40px 36px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:16px;
}
.hero-inner h1,.hero-inner .hero-title{
  font-weight:800;font-size:clamp(34px,3.7vw,54px);letter-spacing:-.04em;line-height:.98;
  max-width:none;margin:0;text-shadow:none;
}
.hero-inner h1 > a,.hero-inner .hero-title > a{-webkit-line-clamp:3;}   /* колоната е по-тясна: 3 реда */
.hero-wrap .hero-dek{font-size:17px;line-height:1.5;color:rgba(255,255,255,.78);margin:0;max-width:46ch;text-shadow:none;}
.hero-wrap .byline{gap:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);}
.hero-wrap .byline-meta,.hero-wrap .byline-name{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.62);text-shadow:none;
}
.hero-wrap .byline-meta b{color:#fff;font-weight:700;}
.hero-wrap .byline-name{color:#fff;}
/* Стрелките: и двете върху снимката, долу вдясно — вляво сега е текст. */
.hero-arrow,.hero-arrow-next,.hero-arrow-prev{top:auto;bottom:22px;transform:none;}
.hero-arrow-next{right:20px;}
.hero-arrow-prev{left:auto;right:74px;}
/* До 980px, не 760: при 800px колоната за текст е ~400px и 4 реда не стигат. */
@media (max-width:980px){
  .hero-wrap .hero{min-height:0;display:block;}
  .hero-wrap .hero-slide,.hero-wrap .hero-slide.is-active{grid-template-columns:1fr;grid-template-rows:210px auto;min-height:0;}
  .hero-media{order:1;min-height:210px;}
  .hero-media::before{background:linear-gradient(180deg,rgba(17,17,20,0) 60%,var(--black) 100%);}
  .hero-wrap .hero-inner{order:2;padding:18px 22px 24px;}
  .hero-inner h1,.hero-inner .hero-title{font-size:30px;}
  .hero-arrow,.hero-arrow-next,.hero-arrow-prev{top:160px;bottom:auto;width:36px;height:36px;}
  .hero-arrow-next{right:14px;}
  .hero-arrow-prev{right:58px;}
}

/* ---- 4. РУБРИКИТЕ: плочи от букви ---------------------------------------- */
.cat-card{height:176px;background:var(--black);border-radius:var(--r-lg);}
.cat-card:hover{transform:none;box-shadow:none;}
/* Червеният ръб отгоре при задържане. Същият ::before е и на .tile-ph (плоча без
   корица), който в базата рисува монограм — тук името носи плочата, монограмът отпада. */
.cat-card::before,.cat-card.tile-ph::before{
  content:'';position:absolute;inset:0 0 auto 0;width:auto;height:4px;font-size:0;line-height:0;
  display:block;background:var(--red);z-index:3;
  transform:scaleY(0);transform-origin:top;transition:transform .2s ease;
}
.cat-card:hover::before,.cat-card.tile-ph:hover::before{transform:none;}
.cat-card-bg{inset:0;opacity:.16;filter:grayscale(1) contrast(1.15);transition:opacity .3s ease;}
.cat-card:hover .cat-card-bg{transform:none;opacity:.26;}
.cat-card-shade{display:none;}
.cat-card-body{flex-direction:column;align-items:stretch;justify-content:space-between;padding:18px 18px 16px;}
.cat-card-label{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;max-width:11ch;text-wrap:balance;}
.cat-card-foot{display:flex;align-items:center;justify-content:space-between;}
.cat-card-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);}
.cat-card-count i{font-style:normal;font-weight:700;color:var(--red-bright);}
.cat-card-arrow{background:rgba(255,255,255,.12);}

/* ---- 5. НАЙ-ЧЕТЕНО: аукционен лист ---------------------------------------- */
.trend-list{border-top:2px solid var(--ink);}
.trend-item{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:13px 10px 13px 0;border-bottom:1px solid var(--line-strong);border-radius:0 var(--r-md) var(--r-md) 0;
  border-left:4px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease,padding .15s ease;
}
.trend-item:last-child{border-bottom:1px solid var(--line-strong);}
.trend-item:hover{background:var(--black);color:#fff;border-left-color:var(--red);padding-left:10px;}
.trend-num{font-size:16px;font-weight:700;color:var(--red);text-align:center;width:auto;}
.trend-item:hover .trend-num{color:var(--red-bright);}
.trend-title{font-size:16px;font-weight:700;line-height:1.22;letter-spacing:-.015em;}
.trend-item:hover .trend-title{color:#fff;}
.trend-cat,.trend-min{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.trend-cat{margin-top:4px;}
.trend-min{white-space:nowrap;}
.trend-item:hover .trend-cat,.trend-item:hover .trend-min{color:rgba(255,255,255,.68);}

/* ---- 6. КАРТИТЕ: рубриката като моно етикет ------------------------------- */
.article-cat,.pick-cat,.article-row-cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--red-text);}
.article-title{font-size:17px;line-height:1.28;}

/* ---- 7. ГЛАВАТА НА СТАТИЯТА И НА РУБРИКАТА -------------------------------- */
.article-hero,.cat-hero{border-bottom:8px solid var(--red);}
.ah-bottom h1,.cat-hero-bottom h1{font-weight:800;letter-spacing:-.035em;line-height:1.04;font-size:clamp(30px,3.9vw,46px);max-width:22ch;text-wrap:balance;}
.ah-byline{gap:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);}
.ah-byline-meta,.ah-byline-name{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.ah-byline-meta b{color:#fff;font-weight:700;}
.ah-byline-name{color:#fff;}
.cat-hero-meta{letter-spacing:.08em;text-transform:uppercase;font-size:11px;}

/* ---- 8. ЧИСЛАТА ПОД ЗАГЛАВИЕТО (блок facts, journal/blocks/facts.blade.php) -- */
.facts{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md);overflow:hidden;
  margin:22px 0 0;max-width:820px;
}
.facts--3{grid-template-columns:repeat(3,1fr);}
.facts--2{grid-template-columns:repeat(2,1fr);}
.facts--1{grid-template-columns:1fr;}
.fact{background:var(--black);padding:14px 16px 12px;min-width:0;}
.fact-num{
  display:block;font-family:var(--sans);font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1;
  color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fact-num small{font-size:13px;font-weight:700;letter-spacing:0;color:rgba(255,255,255,.7);margin-left:3px;}
.fact:first-child .fact-num{color:var(--red-bright);}   /* първото число е това, което се помни */
.fact-label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:8px;line-height:1.35;}
@media (max-width:600px){
  .facts,.facts--3{grid-template-columns:1fr 1fr;}
  .fact-num{font-size:24px;}
  .cat-card-label{font-size:20px;}
}

/* Плоча без корица (.tile-ph) в базата рисува монограм през ::after — в V10 името
   носи плочата и буквата е излишна (виждаше се като бледо „П" на „Пазар"). */
.cat-card.tile-ph::after{display:none;}

/* ---- 9. ПРЕЛИВАНЕ вместо плъзгане (собственикът, 2026-09-12) ----------------
   С черния текстов панел плъзгането показваше как ръбът му минава през кадъра
   насред прехода. Слайдовете лежат един върху друг в една клетка на решетката
   и си сменят прозрачността; лентата вече не се мести (скриптът в index.blade.php
   не слага transform). Състоянието е пак едно число — няма какво да заседне. */
.hero-wrap .hero-track{display:grid;transform:none;transition:none;height:auto;}
.hero-wrap .hero-slide,.hero-wrap .hero-slide.is-active{
  grid-area:1/1;opacity:0;pointer-events:none;
  transition:opacity .7s ease;
}
.hero-wrap .hero-slide.is-active{opacity:1;pointer-events:auto;z-index:1;}
@media (prefers-reduced-motion: reduce){
  .hero-wrap .hero-slide,.hero-wrap .hero-slide.is-active{transition:none;}
}

/* ---- 10. ЗАГЛАВИЕТО ПО-МАЛКО, БЕЗ ОТРЯЗВАНЕ; редът отдолу — с думи ----------
   Собственикът (кадър от 2026-09-12): „струв…" — заглавието не бива да се реже.
   54px в тясната колона побираше 3 реда; 44px и 4 реда побират всяко реално
   заглавие (най-дългото е 82 знака). Редът отдолу е „Екипът на CarsDirect ·
   9 мин четене · 28.06.2026", не главни моно съкращения. */
.hero-inner h1,.hero-inner .hero-title{font-size:clamp(28px,3vw,44px);line-height:1.02;}
.hero-inner h1 > a,.hero-inner .hero-title > a{-webkit-line-clamp:4;}
.hero-wrap .hero-dek{-webkit-line-clamp:3;font-size:16px;}
.hero-wrap .byline{gap:10px;}
.hero-wrap .byline-meta,.hero-wrap .byline-name{text-transform:none;letter-spacing:.02em;font-size:12px;}
.hero-wrap .byline-dot{color:rgba(255,255,255,.35);text-shadow:none;}
.ah-byline{gap:10px;}
.ah-byline-meta,.ah-byline-name{text-transform:none;letter-spacing:.02em;font-size:12px;}
@media (max-width:760px){
  .hero-inner h1,.hero-inner .hero-title{font-size:26px;}
}

/* ---- 11. ХЕРОТО: ЧЕРНОТО ПРЕЛИВА В СНИМКАТА (собственикът, 2026-09-12, трети и
   четвърти кръг). Нито черен панел, залепен до снимката (ръб), нито снимка на
   цял кадър с текста отгоре („не ми харесва да седи горе текста"). Снимката е под
   целия кадър, но лявата третина е плътно черно, което ПРЕЛИВА надясно в нея;
   текстът е долу вляво, в черното. Заглавието е между първия (54) и втория (42)
   вариант: 48px. Снимката е цветна, без grayscale. Стрелките — долу вдясно. */
.hero-wrap .hero{aspect-ratio:2/1;min-height:0;display:flex;flex-direction:column;}
.hero-wrap .hero-track{height:100%;flex:1;min-height:0;grid-template-rows:minmax(0,1fr);}
.hero-wrap .hero-slide,.hero-wrap .hero-slide.is-active{display:block;min-height:0;height:100%;}
.hero-media{position:absolute;inset:0;order:0;min-height:0;filter:none;background-position:center;}
/* Преливането: плътно черно до ~28%, после снимката се появява постепенно до ~70%.
   Отдолу лек втори градиент, за да носи реда с автора и върху светла снимка. */
.hero-media::before{
  background:
    linear-gradient(90deg,var(--black) 0%,var(--black) 28%,rgba(17,17,20,.86) 42%,rgba(17,17,20,.45) 56%,rgba(17,17,20,0) 70%),
    linear-gradient(180deg,rgba(17,17,20,0) 55%,rgba(17,17,20,.55) 100%);
}
.hero-wrap .hero-inner{
  position:relative;z-index:2;order:0;height:100%;
  justify-content:flex-end;padding:40px 44px 40px;max-width:780px;
}
.hero-inner h1,.hero-inner .hero-title{font-size:clamp(30px,3.35vw,48px);line-height:1.06;text-shadow:0 1px 2px rgba(0,0,0,.3);}
/* Клампът е overflow:hidden върху <a> и при line-height 1 режеше опашките на „р“, „у“,
   „д“ на последния ред (кадър на собственика). Малко въздух отдолу, компенсиран с
   отрицателен margin, за да не мърда редът под заглавието. */
.hero-inner h1 > a,.hero-inner .hero-title > a{-webkit-line-clamp:4;padding-bottom:.12em;margin-bottom:-.12em;}
.hero-wrap .hero-dek{color:rgba(255,255,255,.86);max-width:52ch;text-shadow:0 1px 2px rgba(0,0,0,.35);}
.hero-wrap .byline{border-top:1px solid rgba(255,255,255,.14);padding-top:14px;}
.hero-wrap .byline-meta,.hero-wrap .byline-name{text-shadow:0 1px 2px rgba(0,0,0,.35);}
/* Стрелките: долу вдясно, върху снимката. БЕЗ translateY при hover — базовият
   :hover (ред ~248) носи translateY(-50%) от старото позициониране по средата и
   подскачаше стрелката с 23px нагоре (кадър на собственика: двете на различна
   височина). */
.hero-arrow,.hero-arrow-next,.hero-arrow-prev{top:auto;bottom:22px;transform:none;}
.hero-arrow-prev{left:auto;right:74px;}
.hero-arrow-next{right:20px;left:auto;}
.hero-arrow-prev:hover{transform:translateX(-2px);}
.hero-arrow-next:hover{transform:translateX(2px);}
@media (max-width:980px){
  /* Едноколонно: снимката отгоре прелива надолу в черно, текстът е долу. */
  .hero-wrap .hero{aspect-ratio:auto;min-height:520px;}
  .hero-wrap .hero-slide,.hero-wrap .hero-slide.is-active{min-height:520px;}
  .hero-media{background-position:center top;}
  .hero-media::before{background:linear-gradient(180deg,rgba(17,17,20,0) 18%,rgba(17,17,20,.55) 42%,var(--black) 64%);}
  .hero-wrap .hero-inner{padding:22px 22px 26px;max-width:none;}
  .hero-inner h1,.hero-inner .hero-title{font-size:30px;}
  /* Текстът е долу, затова стрелките отиват горе вдясно, върху снимката. */
  .hero-arrow,.hero-arrow-next,.hero-arrow-prev{top:16px;bottom:auto;transform:none;width:36px;height:36px;}
  .hero-arrow-prev{left:auto;right:62px;}
  .hero-arrow-next{right:16px;}
  .hero-arrow-prev:hover,.hero-arrow-next:hover{transform:none;}
}
@media (max-width:600px){
  .hero-inner h1,.hero-inner .hero-title{font-size:26px;}
  .hero-inner h1 > a,.hero-inner .hero-title > a{-webkit-line-clamp:5;}
}

/* ---- 12. РУБРИКИТЕ: снимката се вижда (собственикът: „много затъмнени") --------
   16% върху черно беше кал. Снимката е цветна и почти цяла; тъмнее само там,
   където има текст — отгоре под името и отдолу под брояча. Плочата без корица
   („Пазар") остава черна. */
/* Втори път „затъмнени ли са": снимката е СВЕТЛА и пълна (без филтър, малко по-ярка),
   тъмнее само тясна лента горе зад името и долу зад брояча. Средата е чиста. */
.cat-card-bg{opacity:1;filter:brightness(.99) saturate(1.02);transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.cat-card:hover .cat-card-bg{opacity:1;transform:scale(1.04);}
.cat-card-shade{display:block;background:linear-gradient(180deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.26) 38%,rgba(0,0,0,.06) 56%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.50) 100%);}
.cat-card-label{text-shadow:0 1px 3px rgba(0,0,0,.55);}


/* ---- 13. СНИМКА В ГЛАВАТА НА СТАТИЯТА (собственикът, 2026-09-12: „нос в нос да е
   първата в статията, но леко затъмнена"). Главата носи hero_image, а без такава —
   корицата; без нито едно остава досегашният черен градиент. Снимката е леко
   затъмнена, повече към дъното, където са подписът и числата. */
.article-hero--photo{background-size:cover;background-position:center;}
.article-hero--photo::after{
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.50) 40%,rgba(0,0,0,.78) 100%);
}
.article-hero--photo .ah-bottom h1{text-shadow:0 1px 2px rgba(0,0,0,.35);}
.article-hero--photo .breadcrumb a,.article-hero--photo .breadcrumb .bc-current{text-shadow:0 1px 2px rgba(0,0,0,.4);}
.article-hero--photo .facts{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.22);}
.article-hero--photo .fact{background:rgba(17,17,20,.86);}

/* „следва скрола" под „Съдържание" отпадна (собственикът, 2026-09-12) — етикетът поема
   отстъпа му към списъка. */
.toc-label{margin-bottom:14px;}

/* SEO (2026-09-12): кориците в картите и редовете са вече <img> с alt/lazy, не фон. */
img.article-media,img.article-row-media{display:block;object-fit:cover;background:var(--paper-2);}
img.article-media{width:100%;}

/* ---- 14. БЛОКЪТ С ОБЯВИ: витрина (собственикът, 2026-09-12: „по-премиум", после „не знам дали да е черна") --
   Досега беше бели карти на сиво — езикът на борсата. В блога блокът е витрина на
   светло (черният вариант е опитан и отложен), снимката носи картата, името е Manrope 700, данните са
   моно, „Проверена" е тих моно етикет върху снимката, не зелен бадж. Вариантът
   вътре в статия (.article-inv-wrap, на хартия) взема само картата и етикета. */
/* Фонът е самата страница (--paper #FBFAF8), не бежовата лента --paper-2 (#F3F1EC) —
   собственикът я постави под въпрос. Разделя тънка линия отгоре, не цвят. Отстъпът
   отгоре е по-малък от общия за секциите (84px), за да почва заглавието по-нагоре. */
.inv-section{background:#F4F3F0;color:var(--ink);border-top:none;padding:36px 0 76px;}
/* Повече въздух между подзаглавието и картите (собственикът: „малко повече отдолу"). */
.inv-section .inv-head-row{margin-bottom:28px;}
.inv-section .inv-title{color:var(--black);font-size:42px;font-weight:800;letter-spacing:-.035em;line-height:1;}
/* Подзаглавието беше сив serif и „олекваше" под тежкото заглавие (собственикът):
   сега е Manrope 500 в мастило, същото семейство като заглавието. */
.inv-section .inv-sub{color:var(--ink-2);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.5;max-width:64ch;margin-top:8px;}
.inv-section .inv-card{border-bottom:none;}
.inv-section .inv-name{color:var(--ink);}
.inv-section .inv-specs{color:var(--ink-3);}
.inv-section .inv-price{color:var(--ink);}
.inv-section .inv-cta{
  background:var(--black);color:#fff;border:1px solid var(--black);border-radius:999px;
  padding:12px 20px;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.inv-section .inv-cta:hover{background:#fff;color:var(--black);border-color:var(--black);}

/* Картата — и в секцията, и в статията. */
.inv-media{border-radius:var(--r-lg);}
.inv-media img{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.inv-card:hover .inv-media{transform:none;}          /* мащабира се снимката, не кутията с етикета */
.inv-card:hover .inv-media img{transform:scale(1.05);}
.inv-name{font-size:15px;font-weight:700;letter-spacing:-.015em;line-height:1.25;}
.inv-specs{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin:6px 0 8px;}
.inv-price{font-family:var(--mono);font-size:17px;font-weight:700;}
.inv-badge{
  top:auto;bottom:10px;left:10px;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(17,17,20,.72);color:#fff;border-radius:4px;padding:5px 8px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.inv-badge::before{content:'\2713  ';}
@media (max-width:600px){
  .inv-section .inv-title{font-size:30px;}
}

/* Картите в редица: имената от eCarsTrade/AAA са от 1 до 3 реда (списък с екстри) и
   цените излизаха на четири различни височини. Името е точно 2 реда (клампнато с
   многоточие, с пазено място), тъй че година/км и цената лягат на една линия. */
.inv-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.25em);}

/* Снимките в текста (2026-09-12): базовият .fig-media е с твърда height:220px (правен за
   сива кутия-плейсхолдър) и режеше интериорите на тясна лента. 16:9 на ширината на
   колоната (~394px при 700px) държи почти целия 3:2 кадър. */
.prose .fig-media{height:auto;aspect-ratio:16/9;object-fit:cover;}

/* Линковете в текста на статията (2026-09-23): light.css слага на ВСЕКИ <a>
   display:inline-block, а неделим дълъг линк пада цял на нов ред и оставя дупка
   в абзаца („В“ висеше само на реда). В текста линкът тече като думите около него.
   Само за линкове БЕЗ клас: бутонът .inv-cta („Виж всички обяви“) също е <a> в .prose
   и губеше inline-flex (специфичност 0,1,1 бие 0,1,0). */
.prose a:not([class]){display:inline;}

/* Линковете в текста не се различаваха от думите около тях (2026-10-05): cd-journal.css
   нулира цвета и подчертаването на всеки <a>. Тъмен текст с тънка червена черта отдолу. */
.prose a:not([class]){color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s,text-decoration-thickness .2s;}
.prose a:not([class]):hover{color:var(--red-text);text-decoration-thickness:2px;}