/* blog.css — вынесено из server/blog.ts baseHead() (Этап 4).
   Единый файл стилей публичного блога (listing/post/tag/admin).
   Подключается через <link href="/css/blog.css?v=CACHE_VERSION">. */
:root {
  --bg: #0b1220;
  --panel: #0f172a;
  --text: #e5e7eb;
  --muted: #6b7280;
  --accent: #8b5cf6;
  --accent-2: #06b6d4;
}
body { 
  background: 
    radial-gradient(ellipse 800px 600px at 10% 20%, rgba(139,92,246,.18), transparent),
    radial-gradient(ellipse 1000px 800px at 90% 0%, rgba(6,182,212,.15), transparent),
    radial-gradient(ellipse 600px 500px at 50% 100%, rgba(99,102,241,.12), transparent),
    radial-gradient(ellipse 900px 700px at 0% 100%, rgba(236,72,153,.08), transparent),
    linear-gradient(180deg, #0a0e1a 0%, #0b1220 50%, #0d1424 100%);
  background-attachment: fixed;
  position: relative;
  color: var(--text);
}
@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle 600px at var(--x, 50%) var(--y, 50%), rgba(139,92,246,.08), transparent),
    radial-gradient(circle 800px at calc(100% - var(--x, 50%)) calc(100% - var(--y, 50%)), rgba(6,182,212,.06), transparent);
  pointer-events: none;
  z-index: 0;
  animation: meshMove 20s ease-in-out infinite;
  opacity: 0.7;
}
@keyframes meshMove {
  0%, 100% { --x: 30%; --y: 20%; }
  25% { --x: 70%; --y: 40%; }
  50% { --x: 40%; --y: 80%; }
  75% { --x: 80%; --y: 30%; }
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
/* Disable fixed backgrounds and animations on mobile to prevent lag */
@media (max-width: 768px) {
  body::before,
  body::after {
    display: none;
  }
}
.blog-container { max-width: 1120px; margin: 0 auto; padding: 24px 16px; }
.page-title { font-size: clamp(32px,4vw,56px); font-weight: 800; margin: 16px 0 8px; }
.page-sub { color: #cbd5e1; margin-bottom: 16px; }
.search { display:flex; gap:10px; margin: 16px 0; }
.search input { flex:1; background: #0b1324; border: 1px solid #334155; border-radius: 14px; padding: 12px 14px; color: var(--text); }
.search button { padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg,var(--accent-2), var(--accent)); color: white; border: none; cursor: pointer; font-weight: 700; }
.tags { 
  display:flex; 
  gap:8px; 
  flex-wrap: wrap; 
  margin: 12px 0 8px;
  align-items:center;
}
.tag { 
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  padding: 8px 16px; 
  border-radius: 8px; 
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155; 
  color: #e2e8f0; 
  text-decoration:none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  white-space: nowrap;
}
.tag:hover {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  border-color: #475569;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  color: #fff;
}
.tag.active { 
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border-color: rgba(6,182,212,0.5);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(6,182,212,0.3);
}
.tag.active:hover {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  box-shadow: 0 6px 16px rgba(6,182,212,0.4);
  transform: translateY(-2px);
}
@media (max-width: 640px) {
  .tags {
    gap: 6px;
    margin: 10px 0 6px;
  }
  .tag {
    padding: 6px 12px;
    font-size: 13px;
  }
}
@media (max-width: 380px) {
  .tag {
    padding: 5px 10px;
    font-size: 12px;
  }
}
.count { color: var(--muted); margin: 8px 0 14px; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
.card { background: var(--panel); border: 1px solid #334155; border-radius: 20px; overflow:hidden; display:flex; flex-direction:column; height:100%; }
.card img { width:100%; height:160px; object-fit:cover; background:#0f172a; }
.card .body { padding: 14px; display:flex; flex-direction:column; gap:10px; }
.card .date { color:#94a3b8; font-size: 13px; }
.card .title a { font-weight:800; font-size: 18px; color: #7dd3fc; text-decoration:none; }
.card .title { line-height:1.2; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow:hidden; min-height: calc(1.2em * 2); }
.card .excerpt { color:#cbd5e1; font-size: 14px; line-height:1.45; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow:hidden; min-height: calc(1.45em * 3); }
.card .actions { 
  margin-top:auto; 
  display: flex;
  justify-content: center;
  padding: 0 8px;
}
.card .read {
  display:flex; 
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%; 
  max-width: 280px;
  padding: 10px 24px; 
  border-radius: 12px;
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
  color: white; 
  text-decoration: none; 
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 
    0 4px 16px rgba(14,165,233,.35),
    0 0 0 1px rgba(139,92,246,.3) inset,
    inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.card .read::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0;
  transition: opacity .3s ease;
}
.card .read::after {
  content: '→';
  font-size: 18px;
  font-weight: 700;
  transition: transform .3s ease;
}
.card .read:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #06b6d4 0%, #a78bfa 100%);
  box-shadow: 
    0 8px 24px rgba(14,165,233,.45),
    0 0 20px rgba(139,92,246,.3),
    0 0 0 1px rgba(139,92,246,.4) inset,
    inset 0 1px 0 rgba(255,255,255,.25);
}
.card .read:hover::before {
  opacity: 1;
}
.card .read:hover::after {
  transform: translateX(4px);
}
.card .read:active {
  transform: translateY(0);
  box-shadow: 
    0 4px 12px rgba(14,165,233,.35),
    0 0 0 1px rgba(139,92,246,.3) inset;
}
@media (max-width: 640px) {
  .card .read {
    max-width: 100%;
    padding: 9px 20px;
    font-size: 14px;
  }
}
.breadcrumbs { 
  display:flex;
  align-items:center;
  gap:8px;
  color:#94a3b8; 
  margin: 8px 0 14px;
  flex-wrap:wrap;
}
.breadcrumbs a {
  color:#7dd3fc;
  text-decoration:none;
  transition:color 0.2s;
}
.breadcrumbs a:hover {
  color:#38bdf8;
}
.back { 
  display:inline-flex; 
  align-items:center; 
  gap:6px; 
  padding:8px 14px; 
  border-radius:10px; 
  background:linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border:1px solid #334155; 
  text-decoration:none; 
  color:#e2e8f0;
  font-weight:600;
  transition:all 0.2s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
.back:hover {
  background:linear-gradient(135deg, #334155 0%, #1e293b 100%);
  border-color:#475569;
  transform:translateY(-1px);
  box-shadow:0 4px 8px rgba(0,0,0,0.15);
}
.back svg {
  width:14px;
  height:14px;
}
.post { max-width: 1160px; margin: 0 auto; }
.post h1 { font-size: clamp(26px,3vw,44px); font-weight: 800; margin: 10px 0; }
.post .meta { color:#94a3b8; font-size: 14px; margin-bottom: 14px; }
.illustration { width: min(52.5%, 675px); margin: 0 auto 14px; } 
@media (max-width: 640px) { .illustration { width: 100%; } .related .grid { max-width: 100%; } }
.illustration img { width:100%; height:auto; border-radius: 20px; border: 1px solid #334155; background:#0f172a; }
.post .content { margin-top: 16px; line-height: 1.8; }
.post .content h2 { font-size: clamp(20px,2.4vw,28px); font-weight: 800; margin: 18px 0 10px; }
.post .content h3 { font-size: clamp(18px,2vw,22px); font-weight: 700; margin: 14px 0 8px; }
.post .content p { margin: 10px 0; }
.post .content ul, .post .content ol { margin: 10px 0 10px 0; padding-left: 24px; list-style-position: outside; }
.post .content ul { list-style-type: disc; }
.post .content ol { list-style-type: decimal; }
.post .content li { margin: 6px 0; }
.post .content img { max-width: 100%; height: auto; border-radius: 12px; background:#0f172a; }
.hr { height:1px; background:#1f2937; border:0; margin: 22px 0; }
.related h2 { font-size: clamp(22px,3vw,28px); font-weight: 800; margin: 10px 0 14px; }
.related .grid { max-width: 1200px; margin: 0 auto; gap: 22px; }
.related-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .related-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .related-grid { grid-template-columns: 1fr; } }
.share-wrapper {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-top:16px;
}
.share { 
  display:contents;
}
.share span { 
  color:#94a3b8; 
  font-size:14px; 
  font-weight:600;
  letter-spacing:0.02em;
  grid-column: 1 / -1;
}
.share a { 
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 16px; 
  border-radius:12px; 
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:all 0.2s ease;
  border:1px solid transparent;
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.share a:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,0.25);
}
/* Telegram */
.share a[href*="t.me"] {
  background:linear-gradient(135deg, #229ED9 0%, #1E88C9 100%);
  color:#fff;
  border-color:rgba(34,158,217,0.3);
}
.share a[href*="t.me"]:hover {
  background:linear-gradient(135deg, #2AABEE 0%, #229ED9 100%);
  box-shadow:0 6px 20px rgba(34,158,217,0.4);
}
/* VK */
.share a[href*="vk.com"] {
  background:linear-gradient(135deg, #4A76A8 0%, #3F6A9C 100%);
  color:#fff;
  border-color:rgba(74,118,168,0.3);
}
.share a[href*="vk.com"]:hover {
  background:linear-gradient(135deg, #5B88BD 0%, #4A76A8 100%);
  box-shadow:0 6px 20px rgba(74,118,168,0.4);
}
/* X/Twitter */
.share a[href*="twitter.com"] {
  background:linear-gradient(135deg, #1DA1F2 0%, #0C85D0 100%);
  color:#fff;
  border-color:rgba(29,161,242,0.3);
}
.share a[href*="twitter.com"]:hover {
  background:linear-gradient(135deg, #33AAFF 0%, #1DA1F2 100%);
  box-shadow:0 6px 20px rgba(29,161,242,0.4);
}
/* CTA Button */
.cta-generate {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 20px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:all 0.2s ease;
  background:linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  color:#fff;
  border:1px solid rgba(6,182,212,0.3);
  box-shadow:0 2px 12px rgba(6,182,212,0.25);
  grid-column: 1 / -1;
}
.cta-generate:hover {
  transform:translateY(-2px);
  box-shadow:0 4px 20px rgba(6,182,212,0.35);
  border-color:rgba(6,182,212,0.5);
  background:linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
}
.cta-generate svg {
  width:16px;
  height:16px;
}
.cta-bottom {
  display:flex;
  justify-content:center;
  margin:32px 0 24px;
}
.cta-generate--bottom {
  padding:14px 32px;
  font-size:16px;
  border-radius:12px;
  grid-column:auto;
}
@media (max-width: 640px) {
  .share { 
    gap:8px; 
    margin-top:12px;
  }
  .share span {
    font-size:13px;
    flex-basis:100%;
    margin-bottom:-4px;
  }
  .share a { 
    padding:9px 14px; 
    font-size:13px;
    gap:5px;
  }
}
@media (max-width: 380px) {
  .share { 
    gap:6px; 
  }
  .share a { 
    padding:8px 12px; 
    font-size:12px;
    gap:4px;
  }
}


/* Пагинация листинга (Этап 6) */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin: 28px 0 8px;
}
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid #334155;
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}
.pagination a.page-link:hover {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  border-color: #475569;
  transform: translateY(-1px);
  color: #fff;
}
.pagination .page-link.active {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  border-color: rgba(6,182,212,0.5);
  color: #fff;
  cursor: default;
}
@media (max-width: 640px) {
  .pagination .page-link { min-width: 36px; padding: 7px 11px; font-size: 13px; }
}

/* Навигация к соседним статьям (Этап 7) */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 1160px;
  margin: 8px auto 24px;
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid #334155;
  text-decoration: none;
  transition: all 0.2s ease;
}
.post-nav__link:hover {
  border-color: #475569;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.post-nav__next { text-align: right; }
.post-nav__dir { color: #94a3b8; font-size: 13px; font-weight: 600; }
.post-nav__title { color: #7dd3fc; font-weight: 700; font-size: 15px; line-height: 1.3; }
@media (max-width: 640px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav__next { text-align: left; }
}


/* ============================================================
   BLOG HUB REDESIGN (bh-*) — главная страница блога /blog.
   Дизайн-язык как в models-hub: glassmorphism, градиент
   violet→magenta→cyan, eyebrow-бейджи, мягкие свечения.
   ============================================================ */
:root {
  --bh-violet:  #8b5cf6;
  --bh-violet-l: #a78bfa;
  --bh-magenta: #ec4899;
  --bh-magenta-l: #f472b6;
  --bh-cyan:    #22d3ee;
  --bh-surface: rgba(17, 24, 42, .62);
  --bh-surface-2: rgba(13, 18, 30, .78);
  --bh-border:  rgba(139, 92, 246, .20);
  --bh-border-2: rgba(148, 163, 184, .14);
  --bh-grad:    linear-gradient(115deg, #a855f7 0%, #ec4899 52%, #22d3ee 112%);
  --bh-cta:     linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  --bh-cta-h:   linear-gradient(135deg, #9d6bff 0%, #f472b6 100%);
  --bh-radius:  18px;
}

/* --- HERO --- */
.bh-hero {
  text-align: center;
  max-width: 820px;
  margin: 8px auto 28px;
  padding: 8px 0 0;
}
.bh-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bh-magenta-l);
  background: rgba(236,72,153,.08);
  border: 1px solid rgba(236,72,153,.22);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.bh-hero__eyebrow svg { width: 14px; height: 14px; }
.bh-hero__title {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  color: #f1f5f9;
}
.bh-hero__accent {
  background: var(--bh-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bh-hero__subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: #94a3b8;
  max-width: 640px;
  margin: 0 auto 18px;
}
.bh-hero__stats {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  color: #94a3b8;
  font-size: 14px;
  margin-bottom: 22px;
}
.bh-hero__stats b { color: #e2e8f0; font-weight: 800; }
.bh-dot { width: 4px; height: 4px; border-radius: 50%; background: #475569; }

/* --- SEARCH (glass) --- */
.bh-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 999px;
  padding: 7px 7px 7px 16px;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 12px 36px rgba(8,10,20,.45);
  transition: border-color .2s, box-shadow .2s;
}
.bh-search:focus-within {
  border-color: rgba(236,72,153,.5);
  box-shadow: 0 0 0 3px rgba(236,72,153,.14), 0 12px 36px rgba(8,10,20,.45);
}
.bh-search__ico { width: 20px; height: 20px; color: #94a3b8; flex-shrink: 0; }
.bh-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  color: #f1f5f9;
  font-size: 15px;
  padding: 8px 4px;
  min-width: 0;
}
.bh-search input::placeholder { color: #64748b; }
.bh-search button {
  flex-shrink: 0;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--bh-cta);
  border-radius: 999px;
  padding: 10px 22px;
  transition: background .2s, transform .15s;
}
.bh-search button:hover { background: var(--bh-cta-h); transform: translateY(-1px); }


/* --- COLLECTIONS (кураторские темы) --- */
.bh-collections {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 26px 0 0;
  /* Hero ограничен 820px, а чипам нужен более широкий ряд, чтобы все 6 тем
     помещались в одну строку и не висел одинокий чип. Симметрично выходим за
     пределы hero относительно центра контейнера. */
  width: min(1060px, 94vw);
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.bh-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border-2);
  color: #cbd5e1;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bh-chip__ico { display: inline-flex; width: 17px; height: 17px; opacity: .9; }
.bh-chip__ico svg { width: 17px; height: 17px; }
.bh-chip:hover {
  color: #fff;
  border-color: rgba(236,72,153,.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(236,72,153,.18);
}
.bh-chip.is-active {
  color: #fff;
  background: var(--bh-cta);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(139,92,246,.35);
}

/* --- "Ещё темы" (скрытый полный список тегов) --- */
.bh-moretags {
  max-width: 900px;
  margin: 16px auto 0;
  text-align: center;
}
.bh-moretags > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  color: #cbd5e1;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px dashed rgba(139,92,246,.35);
  background: rgba(139,92,246,.05);
  transition: color .2s, border-color .2s, background .2s;
}
.bh-moretags > summary::-webkit-details-marker { display: none; }
.bh-moretags > summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
  opacity: .7;
}
.bh-moretags[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.bh-moretags > summary:hover { color: #fff; border-color: var(--bh-violet); background: rgba(139,92,246,.12); }
.bh-moretags__count {
  background: var(--bh-cta);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(139,92,246,.4);
}
.bh-moretags[open] > summary { color: #fff; margin-bottom: 16px; }
.bh-moretags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}
.bh-tag {
  padding: 8px 15px;
  border-radius: 10px;
  background: rgba(30,41,59,.6);
  border: 1px solid var(--bh-border-2);
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all .18s ease;
}
.bh-tag:hover { color: #fff; border-color: var(--bh-cyan); background: rgba(6,182,212,.12); transform: translateY(-1px); }

/* --- BACK LINK / COUNT (tag & search views) --- */
.bh-back { max-width: 1120px; margin: 0 auto 10px; }
.bh-back a { color: #7dd3fc; text-decoration: none; font-weight: 600; font-size: 15px; }
.bh-back a:hover { color: #38bdf8; }
.bh-count { max-width: 1120px; margin: 0 auto 16px; color: #94a3b8; font-size: 14px; }
.bh-empty { color: #94a3b8; text-align: center; padding: 40px 0; }


/* --- BADGE (на обложках) --- */
.bh-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.bh-badge--violet { background: rgba(139,92,246,.85); }
.bh-badge--cyan   { background: rgba(6,182,212,.85); }
.bh-badge--rose   { background: rgba(236,72,153,.85); }

/* --- FEATURED (крупная карточка) --- */
.bh-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  max-width: 1120px;
  margin: 0 auto 28px;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border);
  border-radius: 22px;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px rgba(8,10,20,.5);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bh-featured:hover {
  transform: translateY(-3px);
  border-color: rgba(236,72,153,.45);
  box-shadow: 0 24px 60px rgba(236,72,153,.18);
}
.bh-featured__media {
  position: relative;
  display: block;
  min-height: 320px;      /* пол высоты левой колонки, если текст справа короткий */
  overflow: hidden;
}
.bh-featured__media img {
  position: absolute;      /* заполняет колонку целиком при любой высоте строки грида */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.bh-featured:hover .bh-featured__media img { transform: scale(1.04); }
.bh-featured__body {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}
.bh-featured__eyebrow {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bh-magenta-l);
}
.bh-featured__title { margin: 2px 0 6px; line-height: 1.2; }
.bh-featured__title a {
  color: #f1f5f9;
  text-decoration: none;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
}
.bh-featured__title a:hover { color: var(--bh-violet-l); }
.bh-featured__excerpt { color: #94a3b8; line-height: 1.6; font-size: 15px; margin: 0 0 8px; }
.bh-featured__read, .bh-card__read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  color: #fff;
  background: var(--bh-cta);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 12px;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.bh-featured__read:hover, .bh-card__read:hover {
  background: var(--bh-cta-h);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(139,92,246,.35);
}
.bh-featured__read svg, .bh-card__read svg { width: 16px; height: 16px; }

/* --- GRID + CARDS --- */
.bh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto;
}
.bh-card {
  display: flex;
  flex-direction: column;
  background: var(--bh-surface);
  border: 1px solid var(--bh-border-2);
  border-radius: var(--bh-radius);
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.bh-card:hover {
  transform: translateY(-4px);
  border-color: rgba(139,92,246,.5);
  box-shadow: 0 18px 40px rgba(139,92,246,.2);
}
.bh-card__media {
  position: relative;
  display: block;
  overflow: hidden;
}
.bh-card__media img, .bh-card__ph {
  width: 100%;
  height: auto;            /* критично: перебивает HTML-атрибут height="1024", иначе aspect-ratio игнорится */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: #0f172a;
  transition: transform .4s ease;
}
.bh-card:hover .bh-card__media img { transform: scale(1.05); }
.bh-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.bh-card__date { color: #64748b; font-size: 13px; font-weight: 600; }
.bh-card__title { margin: 0; line-height: 1.3; min-height: calc(1.3em * 2); }
.bh-card__title a {
  color: #f1f5f9;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.bh-card__title a:hover { color: var(--bh-violet-l); }
.bh-card__excerpt {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.bh-card__read { margin-top: auto; align-self: flex-start; padding: 9px 18px; font-size: 13px; }

/* планшеты: сетка 2 колонки, уже контейнеры */
@media (max-width: 920px) {
  .bh-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .bh-featured { grid-template-columns: 1fr; margin-left: 2px; margin-right: 2px; }
  .bh-featured__media { min-height: 0; aspect-ratio: 16 / 9; }
  .bh-featured__body { padding: 22px 22px 26px; }
}
/* телефоны: всё в один столбец, чипы — горизонтальный скролл */
@media (max-width: 600px) {
  .bh-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .bh-featured__media { aspect-ratio: 3 / 2; }
  .bh-featured__title a { font-size: 22px; }
  .bh-search { padding: 5px 5px 5px 14px; }
  .bh-search input { font-size: 14px; }
  .bh-search button { padding: 10px 16px; }
  /* чипы-коллекции скроллятся вбок, не ломаясь в столбик */
  .bh-collections {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 2px 4px 8px;
    margin: 20px 0 0;
    /* сброс десктопного «выхода за hero» — на телефоне лента во всю ширину hero */
    width: auto;
    left: auto;
    transform: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bh-collections::-webkit-scrollbar { display: none; }
  .bh-chip { flex-shrink: 0; padding: 10px 16px; font-size: 14px; }
  .bh-hero__stats { font-size: 13px; gap: 8px; }
  .bh-moretags__list { gap: 7px; }
}
/* совсем узкие */
@media (max-width: 380px) {
  .bh-hero__title { font-size: 30px; }
  .bh-chip { padding: 9px 14px; }
}


/* --- SEO CONTENT --- */
.bh-seo {
  max-width: 820px;
  margin: 48px auto 0;
  padding: 32px 34px;
  background: var(--bh-surface-2);
  border: 1px solid var(--bh-border-2);
  border-radius: var(--bh-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bh-seo h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.25;
  margin: 0 0 16px;
}
.bh-seo h3 {
  font-size: 18px;
  font-weight: 700;
  color: #e2e8f0;
  margin: 22px 0 10px;
}
.bh-seo p { color: #cbd5e1; line-height: 1.7; margin: 0 0 14px; font-size: 15px; }
.bh-seo ul { margin: 0 0 14px; padding-left: 4px; list-style: none; display: grid; gap: 10px; }
.bh-seo li {
  color: #cbd5e1;
  line-height: 1.6;
  font-size: 15px;
  padding-left: 26px;
  position: relative;
}
.bh-seo li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  border-radius: 4px;
  background: var(--bh-cta);
}
.bh-seo strong { color: #f1f5f9; }
.bh-seo a { color: var(--bh-violet-l); text-decoration: none; border-bottom: 1px solid rgba(167,139,250,.3); transition: color .2s, border-color .2s; }
.bh-seo a:hover { color: var(--bh-magenta-l); border-color: var(--bh-magenta-l); }

/* --- FAQ --- */
.bh-faq {
  max-width: 820px;
  margin: 28px auto 8px;
}
.bh-faq h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  color: #f1f5f9;
  text-align: center;
  margin: 0 0 22px;
}
.bh-faq__list { display: flex; flex-direction: column; gap: 12px; }
.bh-faq__item {
  background: var(--bh-surface);
  border: 1px solid var(--bh-border-2);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.bh-faq__item[open] { border-color: var(--bh-border); }
.bh-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 18px 20px;
  color: #f1f5f9;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
}
.bh-faq__q::-webkit-details-marker { display: none; }
.bh-faq__ico {
  position: relative;
  flex-shrink: 0;
  width: 20px; height: 20px;
}
.bh-faq__ico::before, .bh-faq__ico::after {
  content: '';
  position: absolute;
  background: var(--bh-violet-l);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.bh-faq__ico::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.bh-faq__ico::after  { top: 2px; left: 9px; width: 2px; height: 16px; }
.bh-faq__item[open] .bh-faq__ico::after { transform: rotate(90deg); opacity: 0; }
.bh-faq__a { padding: 0 20px 20px; }
.bh-faq__a p { margin: 0; color: #94a3b8; line-height: 1.7; font-size: 15px; }

@media (max-width: 640px) {
  .bh-seo { padding: 24px 20px; margin-top: 36px; }
  .bh-faq__q { padding: 15px 16px; font-size: 15px; }
  .bh-faq__a { padding: 0 16px 16px; }
}