.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;
  /* .hero-media лежит внутри .hero-inner, а не прямо в .hero — но .hero-inner
     это ещё и .container (max-width, margin:auto по центру) и сам
     position:relative (нужен для z-index текста поверх фото). Поэтому
     inset:0 растягивал бы фото только на узкий центрированный контейнер,
     а не на всю full-bleed секцию .hero — отсюда серые поля по бокам,
     которые видно на скриншотах живых сайтов на этом лейауте. Классический
     приём "вырваться из центрированного контейнера": секция .hero и
     .hero-inner центрированы на одной вертикальной оси, так что left:50% +
     width:100vw + translateX(-50%) кладёт фото ровно по границам .hero,
     независимо от ширины .hero-inner. overflow:hidden на .hero (выше)
     подчищает 100vw, если она чуть шире видимой области из-за скроллбара.
  */
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  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; }