/* ============================================================
   BOTOVOD / CODE - лента блога («Записки ботовода»)
   Только главная блога. Навбар, промо и футер - в chrome.css.
   Требует base.css + chrome.css.
   ============================================================ */

body{line-height:1.55;min-height:100vh}
a{color:inherit;text-decoration:none}

/* Фон вынесен на фиксированный слой вместо background-attachment:fixed.
   Тот заставлял браузер перерисовывать фон на каждом кадре скролла -
   самая частая причина рывков. Отдельный fixed-слой композитор кэширует
   и просто держит на месте. Выглядит идентично. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(255,0,60,.10), transparent 60%),
    radial-gradient(800px 480px at 92% 4%, rgba(5,217,232,.08), transparent 60%),
    linear-gradient(rgba(255,42,109,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,42,109,.035) 1px, transparent 1px);
  background-size:auto, auto, 44px 44px, 44px 44px;
}

/* ============ ШАПКА РАЗДЕЛА ============ */
header.head{padding-top:46px;padding-bottom:30px}
.head .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.head .eyebrow .jp{color:var(--red-2);font-size:16px}
.head h1{font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.05;letter-spacing:.5px;margin:0}
.head h1 .neon{color:var(--red-2);text-shadow:0 0 22px rgba(255,42,109,.5)}
.head p{color:var(--muted);max-width:620px;margin:16px 0 0;font-size:16px}

/* ============ КАРТОЧКА СТАТЬИ ============ */
.card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .18s,border-color .2s,box-shadow .25s;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 0 28px rgba(255,42,109,.22)}
.card .thumb{position:relative;overflow:hidden;background:#120b1e}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;filter:saturate(1.05) contrast(1.03)}
.card:hover .thumb img{transform:scale(1.05)}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,6,12,.65))}
.card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.card h3{font-family:'Russo One',sans-serif;font-weight:400;line-height:1.12;letter-spacing:.3px;margin:0}
.card p.excerpt{color:var(--muted);font-size:14.5px;flex:1;margin:0}

/* мета-строка (бейджи категорий - .badge-case / .badge-razbor в base.css) */
.meta{display:flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);flex-wrap:wrap}
.meta .sep{color:var(--red-2)}

.readmore{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.readmore::after{content:"";width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--chevron-right) center/contain no-repeat;mask:var(--chevron-right) center/contain no-repeat}
.card:hover .readmore{gap:12px;color:var(--red-2)}

/* ============ ГЛАВНАЯ КАРТОЧКА (featured) ============ */
.feat{margin-bottom:6px}
.feat-main .thumb{aspect-ratio:16/7;max-height:440px}
.feat-main h3{font-size:clamp(24px,3vw,32px)}
.badge-fresh{position:absolute;top:12px;right:12px;z-index:2}

/* ============ СЕТКА ЛЕНТЫ ============ */
.feed-lbl{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin:38px 0 18px;display:flex;align-items:center;gap:12px}
.feed-lbl::before{content:"";width:1em;height:1em;flex:0 0 auto;background:var(--red-2);-webkit-mask:var(--diamond) center/contain no-repeat;mask:var(--diamond) center/contain no-repeat}
.feed-lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.feed{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feed .thumb{aspect-ratio:16/9}
.feed h3{font-size:18px}

/* ============ КАРТОЧКА-ЗАГЛУШКА «СКОРО» ============ */
.card.soon{opacity:.72;pointer-events:none}
.card.soon .thumb img{filter:grayscale(.55) saturate(.6) brightness(.7)}
.badge-soon{position:absolute;top:12px;left:12px;z-index:2}

/* ============ АДАПТИВ ============ */
@media (max-width:900px){.feed{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .feed{grid-template-columns:1fr}
  .feat-main h3{font-size:23px}
}