/* ============================================================
   Страница сферы: вход по проблеме. Тиражируется на 7 сфер.
   Общая часть (токены, шапка, подвал, FAQ, кнопки) в base.css.
   ============================================================ */
.sphere-hero{padding:26px 0 var(--step)}
.hero-grid{display:grid;grid-template-columns:1fr 330px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
h1{font-size:clamp(2.3rem,4.2vw,3.3rem);line-height:1.1;margin-bottom:16px}
.definition{
  font-size:21px;line-height:1.62;color:var(--text-hi);max-width:62ch;
  padding:20px 24px;border-left:3px solid var(--gold);border-radius:0 var(--r-small) var(--r-small) 0;
  background:var(--gold-soft);margin-bottom:24px;
}
.meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.85rem;color:var(--text-low);
  padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:24px}
.meta-author{display:flex;align-items:center;gap:10px}
.meta-author img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.author-mono{width:34px;height:34px}
.meta-author b{color:var(--text-hi);font-weight:500;font-size:.9rem}
.intro{max-width:62ch;color:var(--text-mid)}
.intro p{margin-bottom:16px}
.intro p:last-child{margin-bottom:0}
/* Что есть в разделе: человек должен за пять секунд понять объём */
.inbox{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:22px 24px}
.inbox h2{font-family:var(--font-text);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-low);margin-bottom:14px}
.inbox a{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:18px;
  border-bottom:1px solid var(--line);transition:color .18s}
.inbox a:last-child{border-bottom:0;padding-bottom:0}
.inbox a:hover{color:var(--gold)}
.inbox b{color:var(--gold);font-weight:500;font-family:var(--font-display);font-size:18px}

/* ============================================================
   ВХОД ПО ВОПРОСУ - главный блок этого типа страниц.
   Человек приходит в сферу не за картой, а с конкретным вопросом,
   поэтому вопросы стоят выше подборок и выше методики.
   ============================================================ */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.q{display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:132px;
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.q:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.q span{font-size:18px;line-height:1.4;color:var(--text-hi)}
.q small{color:var(--text-low);font-size:.83rem}
.q:hover small{color:var(--gold)}

.toc{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:22px 26px;margin:0 0 var(--step)}
.toc h2{font-family:var(--font-text);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-low);margin-bottom:14px}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:34px}
.toc li{margin-bottom:9px;break-inside:avoid}
.toc a{color:var(--text-mid);font-size:.94rem;transition:color .18s;
  border-bottom:1px solid transparent;padding-bottom:1px}
.toc a:hover{color:var(--gold);border-bottom-color:var(--gold-line)}

.prose{max-width:var(--read)}
.prose p{margin-bottom:18px;color:var(--text-mid)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text-hi);font-weight:600}
.prose a{color:var(--gold);border-bottom:1px solid var(--gold-line)}
.sec-head{margin-bottom:26px;max-width:70ch}
.sec-head p{color:var(--text-mid);margin-top:9px}

/* Расклады сферы */
.spreads{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sp{display:block;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:26px 28px;transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.sp:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.sp-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.sp-cards{font-family:var(--font-display);font-size:18px;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:var(--r-pill);padding:2px 12px;flex:none}
.sp p{color:var(--text-mid);font-size:18px}

/* Масти в вопросах любви: четыре блока с одинаковой логикой */
.suits{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.suit{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:26px 28px;
  border-top:3px solid var(--gold);transition:border-color .22s}
.suit:hover{border-color:var(--gold-line);border-top-color:var(--gold)}
.suit h3{margin-bottom:8px}
.suit .el{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.suit p{color:var(--text-mid);font-size:18px;margin-bottom:14px}
.suit .go{color:var(--gold);font-size:.89rem;border-bottom:1px solid var(--gold-line);padding-bottom:1px}

/* Карты, которые чаще всего выпадают на отношения */
.cardrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:14px}
.cd{display:block;text-align:center;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.cd img{border-radius:6px;border:1px solid var(--line);transition:border-color .25s}
.cd:hover{transform:translateY(-5px)}
.cd:hover img{border-color:var(--gold-line)}
.cd b{display:block;margin-top:9px;font-size:18px;font-weight:500;color:var(--text-hi)}
.cd small{display:block;margin-top:2px;font-size:.79rem;color:var(--text-low);line-height:1.3}
.cd:hover b{color:var(--gold)}

/* Частые ошибки */
.mistakes{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mistake{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}
.mistake h3{margin-bottom:8px}
.mistake p{color:var(--text-mid);font-size:18px}

/* Партнёрский блок */
.offer{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:28px 32px}
.offer h3{font-size:22px;margin-bottom:7px}
.offer p{color:var(--text-mid);font-size:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);font-size:17px;font-weight:500;
  white-space:nowrap;cursor:pointer;border:1px solid transparent;font-family:inherit;
  transition:transform .16s cubic-bezier(.16,1,.3,1),background .2s,border-color .2s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:linear-gradient(170deg,#b8862f,#9c6a1a);color:#fff;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{background:linear-gradient(170deg,#c99537,#a97620)}

/* FAQ */
.faq{max-width:var(--read)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 44px 20px 0;cursor:pointer;list-style:none;position:relative;
  font-size:20px;font-weight:500;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{padding:0 0 20px;color:var(--text-mid)}

/* Статьи и смежные материалы */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.related{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.related{grid-template-columns:1fr}}
.rel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);font-size:18px;transition:border-color .2s,transform .2s}
.rel:hover{border-color:var(--gold-line);transform:translateX(3px)}
.rel svg{flex:none;color:var(--gold)}

/* Другие сферы */
.others{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.other{display:block;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:24px 26px;transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1)}
.other:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.other h3{margin-bottom:7px}
.other p{color:var(--text-mid);font-size:18px}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr 300px}
  .qgrid,.spreads,.suits{grid-template-columns:repeat(2,1fr)}
  .cardrow{grid-template-columns:repeat(4,minmax(0,1fr))}
  .others{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .mistakes{grid-template-columns:1fr}
}
@media (max-width:560px){
  .qgrid,.spreads,.suits,.others{grid-template-columns:1fr}
  .cardrow{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Иллюстрация в шапке сферы. Задаётся переменной из шаблона: пока файла
   нет, свойство не определено и шапка выглядит как раньше. Текст лежит
   поверх затемнения, поэтому картинка не мешает читать. */
.sphere-hero{position:relative;overflow:hidden}
.sphere-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-img, none);background-size:cover;background-position:center}
.sphere-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,var(--bg-base) 52%,var(--hero-veil-1) 78%,var(--hero-veil-2))}
.sphere-hero > *{position:relative;z-index:2}

/* Сетка карт Ленормана на хабе раздела. Номер вынесен отдельной строкой:
   карты этой системы называют по номеру не реже, чем по имени. */
.lenorman-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.len-card{display:block;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);transition:border-color .2s,transform .2s}
.len-card:hover{border-color:var(--gold-line);transform:translateY(-3px)}
/* Плитка с картой: изображение сверху, подпись под ним. Карты этой
   колоды квадратные - 591x591, а не вертикальные, как в Таро. */
.len-card.has-pic{padding:0;overflow:hidden}
.len-card.has-pic img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  background:#fff;border-bottom:1px solid var(--line)}
.len-card.has-pic .len-num,
.len-card.has-pic .len-title,
.len-card.has-pic .len-hint,
.len-card.has-pic .len-alt{padding-left:16px;padding-right:16px}
.len-card.has-pic .len-num{padding-top:12px}
.len-card.has-pic .len-alt,
.len-card.has-pic .len-hint:last-child{padding-bottom:14px}
/* Подпись под картой. Правлено 24.08.2026: до этого номер, название,
   подсказка и второе имя шли тремя-четырьмя строками почти одного размера
   и все золотым - плитка читалась как список ссылок, а не как карта.

   Теперь иерархия видна: номер мелкий и приглушённый, название крупное,
   подсказка обычным текстом, второе имя отделено линией. */
.len-num{display:block;font-family:var(--font-text);font-size:12px;font-weight:600;
  letter-spacing:.12em;color:var(--text-low)}
.len-title{display:block;font-family:var(--font-display);font-size:21px;
  color:var(--text-hi);margin:1px 0 5px;line-height:1.2}
.len-hint{display:block;color:var(--text-mid);font-size:15px;line-height:1.45}
.len-alt{display:block;color:var(--text-low);font-size:13px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line)}
.len-card:hover .len-title{color:var(--gold)}

/* Заглушка пустого раздела на хабе Ленормана. Тот же вид, что на странице
   карты, но правило нужно и здесь: хаб подключает свой файл стилей. */
.note{border-left:2px solid var(--gold-line);padding:2px 0 2px 16px;color:var(--text-mid)}

/* Список разобранных пар на хабе сочетаний. Лежит в стиле хаба, а не страницы
   пары: класс должен быть описан там, где он выводится, иначе блок
   идёт голым текстом. Поймано check-classes 27.08.2026. */
.para-spisok {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: .7rem;
}

.para-punkt {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
}

.para-punkt:hover, .para-punkt:focus-visible { border-color: var(--gold-line); }
.para-punkt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.para-punkt b { font-size: 17px; line-height: 1.3; color: var(--text-hi); }
.para-punkt span { font-size: 15px; line-height: 1.45; color: var(--text-mid); }