/**
 * hub-layouts.css — 7 вариантов лейаута хаба цифра.рф
 * Работает с разметкой: .cifra-hub--* > ul > li > article.cifra-card
 *
 * A: cifra-hub--list     | базовый список
 * B: cifra-hub--chess    | шахматка
 * C: cifra-hub--grid     | равная сетка
 * D: cifra-hub--tape     | горизонтальная лента
 * E: cifra-hub--magazine | журнал (featured + half + small)
 * F: cifra-hub--hero     | герой с большим первым
 * G: cifra-hub--compact  | компакт без фото
 */

/* ── ОБЩИЙ СБРОС ────────────────────────────────────── */
.cifra-hub ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cifra-hub ul > li {
  display: block;
}

/* ════════════════════════════════════════════════════════
   A — cifra-hub--list
   Одна колонка, карточки через разделитель.
   ════════════════════════════════════════════════════════ */

.cifra-hub--list ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cifra-hub--list ul > li {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cifra-hub--list ul > li:last-child {
  border-bottom: none;
}

/* ════════════════════════════════════════════════════════
   B — cifra-hub--chess
   Чётные карточки: cover слева, нечётные — справа.
   ════════════════════════════════════════════════════════ */

.cifra-hub--chess ul {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .cifra-hub--chess ul > li:nth-child(even) .cifra-card {
    flex-direction: row-reverse;
  }
}

/* ════════════════════════════════════════════════════════
   C — cifra-hub--grid
   3-колоночная равная сетка.
   ════════════════════════════════════════════════════════ */

.cifra-hub--grid ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 576px) {
  .cifra-hub--grid ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .cifra-hub--grid ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

.cifra-hub--grid ul > li .cifra-card__cover-link {
  aspect-ratio: 16/9;
  display: block;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════
   D — cifra-hub--tape
   Горизонтальная прокрутка.
   ════════════════════════════════════════════════════════ */

.cifra-hub--tape {
  overflow: hidden;
}

.cifra-hub--tape ul {
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.cifra-hub--tape ul > li {
  scroll-snap-align: start;
  flex: 0 0 280px;
  min-width: 280px;
}

@media (min-width: 768px) {
  .cifra-hub--tape ul > li {
    flex: 0 0 320px;
    min-width: 320px;
  }
}

/* ════════════════════════════════════════════════════════
   E — cifra-hub--magazine
   Лейаут журнала:
   • 1-я карточка  — полная ширина (hero, большое фото)
   • 2-3-я карточки — по половине ширины
   • 4+ — компактный список без фото
   ════════════════════════════════════════════════════════ */

.cifra-hub--magazine ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* Первая — на всю ширину */
.cifra-hub--magazine ul > li:nth-child(1) {
  grid-column: 1 / -1;
  border-bottom: 2px solid var(--bs-border-color, #dee2e6);
  padding-bottom: 20px;
  margin-bottom: 4px;
}

.cifra-hub--magazine ul > li:nth-child(1) .cifra-card__cover-link {
  aspect-ratio: 16/6;
  display: block;
  overflow: hidden;
}

.cifra-hub--magazine ul > li:nth-child(1) .cifra-card__title {
  font-size: 1.5rem;
  font-weight: 800;
}

@media (min-width: 768px) {
  .cifra-hub--magazine ul > li:nth-child(1) .cifra-card__cover-link {
    aspect-ratio: 16/5;
  }

  .cifra-hub--magazine ul > li:nth-child(1) .cifra-card__title {
    font-size: 2rem;
  }
}

/* 2-3-я — по половине, с разделителем */
.cifra-hub--magazine ul > li:nth-child(2),
.cifra-hub--magazine ul > li:nth-child(3) {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.cifra-hub--magazine ul > li:nth-child(2) {
  border-right: 1px solid var(--bs-border-color, #dee2e6);
  padding-right: 12px;
}

.cifra-hub--magazine ul > li:nth-child(3) {
  padding-left: 12px;
}

/* 4+ — полная ширина, компактный стиль без обложки */
.cifra-hub--magazine ul > li:nth-child(n+4) {
  grid-column: 1 / -1;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  padding: 10px 0;
}

.cifra-hub--magazine ul > li:nth-child(n+4) .cifra-card__cover-link {
  display: none;
}

.cifra-hub--magazine ul > li:nth-child(n+4) .cifra-card__body {
  padding-top: 0;
}

.cifra-hub--magazine ul > li:nth-child(n+4) .cifra-card__title {
  font-size: 0.95rem;
  font-weight: 600;
}

.cifra-hub--magazine ul > li:nth-child(n+4) .cifra-card__excerpt {
  display: none;
}

.cifra-hub--magazine ul > li:last-child {
  border-bottom: none;
}

/* ════════════════════════════════════════════════════════
   F — cifra-hub--hero
   Первая карточка — большой герой на полный экран.
   Остальные — 3 в ряд.
   ════════════════════════════════════════════════════════ */

.cifra-hub--hero ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.cifra-hub--hero ul > li:nth-child(1) {
  grid-column: 1 / -1;
}

.cifra-hub--hero ul > li:nth-child(1) .cifra-card__cover-link {
  aspect-ratio: 21/9;
  display: block;
  overflow: hidden;
}

.cifra-hub--hero ul > li:nth-child(1) .cifra-card__title {
  font-size: 1.75rem;
  font-weight: 800;
}

.cifra-hub--hero ul > li:nth-child(n+2) .cifra-card__cover-link {
  aspect-ratio: 16/9;
  display: block;
  overflow: hidden;
}

@media (max-width: 767px) {
  .cifra-hub--hero ul {
    grid-template-columns: 1fr;
  }

  .cifra-hub--hero ul > li:nth-child(1) .cifra-card__cover-link {
    aspect-ratio: 16/9;
  }
}

/* ════════════════════════════════════════════════════════
   G — cifra-hub--compact
   Список без фото, только заголовок + метаданные.
   ════════════════════════════════════════════════════════ */

.cifra-hub--compact ul {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cifra-hub--compact ul > li {
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  padding: 10px 0;
}

.cifra-hub--compact ul > li:last-child {
  border-bottom: none;
}

.cifra-hub--compact .cifra-card__cover-link {
  display: none;
}

.cifra-hub--compact .cifra-card__body {
  padding-top: 0;
}

.cifra-hub--compact .cifra-card__title {
  font-size: 0.95rem;
  font-weight: 600;
}

.cifra-hub--compact .cifra-card__excerpt {
  display: none;
}