/* ============================================================
   Хаб каталога карт. Главный распределитель веса: отсюда уходят
   ссылки на все 78 карт.
   ============================================================ */
.hub-hero{padding:26px 0 34px}
.hub-hero h1{margin-bottom:18px}
.hub-intro{max-width:62ch;color:var(--text-mid)}

/* Липкая якорная навигация под шапкой */
.anchors{position:sticky;top:74px;z-index:30;background:var(--bg-base);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.anchors-in{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px;
  scrollbar-width:none}
.anchors-in::-webkit-scrollbar{display:none}
.anchors a{padding:8px 14px;border-radius:var(--r-pill);font-size:.9rem;color:var(--text-mid);
  white-space:nowrap;transition:color .2s,background .2s}
.anchors a:hover{color:var(--gold);background:var(--gold-soft)}

/* Старшие арканы: крупная плитка с изображением и подсказкой значения */
.majors{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.mc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);overflow:hidden;position:relative;
  transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.mc:hover{border-color:var(--gold-line);transform:translateY(-4px)}
.mc img{width:100%}
.mc-no{position:absolute;top:8px;left:8px;padding:2px 9px;border-radius:var(--r-pill);
  background:rgba(8,10,16,.72);color:var(--gold);font-family:var(--font-display);font-size:.85rem}
.mc-name{padding:12px 14px 0;font-weight:500;font-size:18px}
.mc-hint{padding:4px 14px 14px;color:var(--text-low);font-size:.82rem;line-height:1.35}
.mc:hover .mc-name{color:var(--gold)}

/* Младшие арканы: четыре блока по мастям.
   Показаны изображениями, а не тегами: списком состав виден, но карты
   не узнаются, а узнавание по картинке в этой теме и есть основной способ
   ориентироваться. */
.suits{display:grid;gap:20px}
.suit{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:26px 28px}
.suit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.suit-head h3{font-family:var(--font-display);font-weight:500;font-size:28px;margin-bottom:4px}
.suit-head h3 a{transition:color .2s}
.suit-head h3 a:hover{color:var(--gold)}
.suit-head p{color:var(--text-mid);font-size:18px}
.suit-count{flex:none;font-size:.82rem;color:var(--gold);border:1px solid var(--gold-line);
  border-radius:var(--r-pill);padding:3px 12px}
.minors{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:8px}
.minor{display:block;text-align:center;transition:transform .22s cubic-bezier(.16,1,.3,1)}
.minor img{border-radius:5px;border:1px solid var(--line);transition:border-color .22s}
.minor:hover{transform:translateY(-4px)}
.minor:hover img{border-color:var(--gold-line)}
.minor span{display:block;margin-top:6px;font-size:.74rem;color:var(--text-low);line-height:1.25}
.minor:hover span{color:var(--gold)}

/* Популярные карты */
.popular{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.pop{display:block;text-align:center;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.pop img{border-radius:var(--r-small);border:1px solid var(--line);transition:border-color .25s}
.pop:hover{transform:translateY(-5px)}
.pop:hover img{border-color:var(--gold-line)}
.pop b{display:block;margin-top:10px;font-weight:500;font-size:18px}
.pop small{display:block;margin-top:3px;color:var(--text-low);font-size:.8rem;line-height:1.3}
.pop:hover b{color:var(--gold)}

@media (max-width:1100px){
  .majors{grid-template-columns:repeat(4,1fr)}
  .popular{grid-template-columns:repeat(3,1fr)}
  .minors{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media (max-width:820px){
  .anchors{top:74px}
  .suit{padding:22px}
  .suit-head{flex-direction:column;gap:10px}
}
@media (max-width:560px){
  .majors{grid-template-columns:repeat(2,1fr)}
  .popular{grid-template-columns:repeat(2,1fr)}
  .minors{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* Карта, для которой страница ещё не написана: видна в колоде,
   но не ссылка. Раздел честно показывает, что готово. */
.mc-soon{opacity:.42;cursor:default}
.mc-soon:hover{transform:none;border-color:var(--line)}

/* Подпись под приглушёнными картами: объясняет, что это план,
   а не сбой вёрстки. */
.soon-note{margin:-8px 0 26px;color:var(--text-low);font-size:14px;line-height:1.5}

/* Пары одного ранга на хабе ранга. Заведено 28.08.2026: весь топ спроса
   на сочетания - это «две двойки», «два туза», и шесть пар ранга ложатся
   сюда разделом вместо шестидесяти отдельных адресов. */
.rang-pary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: .8rem;
}

.rang-para {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.rang-para-karty { display: flex; flex: 0 0 auto; gap: .3rem; }

.rang-para-karty img {
  width: 44px;
  height: auto;
  border-radius: var(--r-small);
  border: 1px solid var(--gold-line);
}

.rang-para-text { display: flex; flex-direction: column; gap: .35rem; }
.rang-para-text h3 { margin: 0; font-size: 17px; line-height: 1.3; color: var(--text-hi); }
.rang-para-text p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-mid); }