.hero {
  position: relative;
  padding: 130px 0 80px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,15,12,0.45), rgba(10,15,12,0.9) 85%);
  z-index: 1;
}
.hero-media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  border: none;
  /* Тёмный фон-подложка на случай, если картинка шапки не сгенерирована —
     иначе белый текст ниже становится нечитаемым на светлом фоне. */
  background-color: var(--dark-bg);
}
.hero-media-badge { display: none; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: block;
}

/* Текст теперь лежит прямо на фото, а не в светлой карточке — карточку убираем.
   position+z-index обязательны: иначе абсолютно спозиционированный hero-media
   (даже с z-index:0) рисуется поверх статичного hero-content. */
.hero-content {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 0;
  max-width: 720px;
}
.hero-content .eyebrow { color: #fff; opacity: 0.85; }
.hero-content h1 { color: #fff; font-size: clamp(36px, 6vw, 60px); }
.hero-sub { color: rgba(255,255,255,0.85); }
.hero-author-name { color: #fff; }
.hero-author-role { color: rgba(255,255,255,0.7); }
.hero-author-avatar { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.35); }
.hero-nav button {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.hero-nav button:hover { background: rgba(255,255,255,0.25); border-color: #fff; color: #fff; }
.hero-stat-value { color: #fff; }
.hero-stat-label { color: rgba(255,255,255,0.7); }

.listing-sidebar { display: none; }
.listing-layout { display: block; }

/* Блок рубрик: горизонтальные "таблетки" вместо сетки карточек */
.rubric-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rubric-card {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  width: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 11px 20px 11px 15px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rubric-card:hover { border-color: var(--accent); background: var(--bg-panel-2); transform: none; }
.rubric-card-icon { font-size: 16px; }
.rubric-card > div { display: flex; align-items: baseline; gap: 7px; }
.rubric-card h3 { font-size: 13.5px; margin: 0; }
.rubric-count { font-size: 11px; }