/* ============================================================
   Разрез карты: одна карта в одной сфере, около 220 страниц.
   Изображение мельче, чем на странице карты: здесь оно
   опознавательный знак, а не главный объект.
   ============================================================ */
.aspect-grid{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.8rem,3.5vw,3rem);align-items:start}
.aspect-visual img{width:100%;border-radius:var(--r-card);border:1px solid var(--line);
  box-shadow:0 20px 46px rgba(0,0,0,.4)}
.aspect-visual .back{display:block;margin-top:14px;text-align:center;font-size:.86rem;color:var(--gold);
  border-bottom:1px solid var(--gold-line);padding-bottom:2px;width:fit-content;margin-inline:auto}

/* Быстрый ответ: три ситуации, в которых карта читается по-разному.
   Человек получает свой ответ за пять секунд, не читая страницу. */
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qa{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:18px 20px}
.qa h2{font-family:var(--font-text);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.qa p{color:var(--text-mid);font-size:18px}

.positions{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.position{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:26px 28px}
.position-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.position-mark{width:36px;height:36px;border-radius:var(--r-small);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--gold-soft);border:1px solid var(--gold-line);color:var(--gold)}
.position-mark.rev svg{transform:rotate(180deg)}
.position p{color:var(--text-mid);font-size:18px;margin-bottom:12px}
.position p:last-child{margin-bottom:0}
.keywords{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

.cases{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.case{border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-card) var(--r-card) 0;background:var(--surface);padding:24px 28px}
.case h3{margin-bottom:8px}
.case p{color:var(--text-mid);font-size:18px}

.combos{width:100%;border-collapse:collapse;font-size:18px}
.combos caption{text-align:left;color:var(--text-low);font-size:.86rem;padding-bottom:12px}
.combos th{text-align:left;font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-low);padding:0 16px 12px 0;border-bottom:1px solid var(--line)}
.combos td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);color:var(--text-mid);vertical-align:top}
.combos tr:last-child td{border-bottom:0}
.combos td:first-child{width:210px}
.combo-card{display:flex;align-items:center;gap:11px}
.combo-card img{width:36px;border-radius:4px;flex:none;border:1px solid var(--line)}
.combo-card b{color:var(--text-hi);font-weight:500}

/* Навигация по разрезам: текущий помечен и ссылкой не является */
.aspects{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.asp{display:block;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:20px 22px;transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.asp:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.asp h3{margin-bottom:6px}
.asp p{color:var(--text-mid);font-size:18px}
.asp[aria-current]{background:var(--gold-soft);border-color:var(--gold-line);cursor:default;transform:none}
.asp[aria-current] h3{color:var(--gold)}

.siblings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sib{display:block;text-align:center;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.sib img{border-radius:6px;border:1px solid var(--line);transition:border-color .25s}
.sib:hover{transform:translateY(-5px)}
.sib:hover img{border-color:var(--gold-line)}
.sib b{display:block;margin-top:9px;font-size:18px;font-weight:500;color:var(--text-hi)}
.sib:hover b{color:var(--gold)}

@media (max-width:1100px){
  .aspects{grid-template-columns:repeat(2,1fr)}
  .siblings{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .aspect-grid{grid-template-columns:1fr;gap:24px}
  .aspect-visual{max-width:190px;margin:0 auto}
  .positions,.cases,.quick{grid-template-columns:1fr}
  .slots td:first-child{width:auto}
  .slots,.slots tbody,.slots tr,.slots td,
  .combos,.combos tbody,.combos tr,.combos td{display:block;width:100%}
  .slots thead,.combos thead{display:none}
  .slots tr,.combos tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .slots td,.combos td{border:0;padding:0 0 8px}
  .slots td:first-child{color:var(--gold);font-weight:500}
}
@media (max-width:560px){
  .siblings{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aspects{grid-template-columns:1fr}
}