/* dark-carousel («ИИ-дизайн») — лучше всего смотрится с тёмным фоном сайта.
   Настоящий hero сайта остаётся компактным (только картинка шапки + имя сайта,
   без статей — это принципиально после инцидента с фото статей в hero).
   Акцент карусели статей ниже — там крупное фото с затемнением и заголовком. */

/* Логотип — жирный */
.logo-name { font-size: 20px; font-weight: 900; letter-spacing: 0.3px; line-height: 1.05; }

/* Настоящий hero сайта — компактный, без картинки на всю ширину */
.hero { padding: 20px 0 0; }
.hero-inner { min-height: 0; }
.hero-content { padding: 20px 28px; }
.hero-content h1 { font-size: clamp(18px, 2vw, 22px); margin-bottom: 4px; }
.hero-sub { font-size: 13px; margin-bottom: 0; }
.hero-media { min-height: 0; max-height: 120px; }
@media (max-width: 900px) { .hero-media { display: none; } }

/* Карусель последних статей — 1 крупная плитка + 2 стопкой справа.
   Базовая раскладка уже задана в style.css, тут только подгонка размеров
   и оформление стрелок под тёмный фон. */
.latest-carousel-main { min-height: 460px; }
.latest-carousel-main-text { padding: 36px; }
.latest-carousel-side-item { min-height: 214px; }

.latest-carousel-arrow {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.latest-carousel-arrow:hover { background: rgba(255,255,255,0.18); border-color: var(--accent); color: var(--accent); }

@media (max-width: 700px) {
  .latest-carousel-main { min-height: 320px; }
  .latest-carousel-main-text { padding: 22px; }
}

/* Рубрики — горизонтальная лента иконок, скроллится если не помещается */
.rubric-grid {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  scrollbar-width: thin;
}
.rubric-card {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  min-width: 92px;
  text-align: center;
}
.rubric-card:hover { background: var(--bg-panel-2); transform: none; border-color: transparent; }
.rubric-card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-panel-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.rubric-card h3 { font-size: 12.5px; font-weight: 600; }
.rubric-count { display: none; }

/* Последние публикации + Популярное на всю высоту ленты */
.listing-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: stretch;
}
.listing-sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
}
.listing-main .articles-grid { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
  .listing-layout { display: block; }
  .listing-sidebar { margin-top: 24px; }
  .listing-main .articles-grid { grid-template-columns: 1fr; }
}