/* ============================================================
   Страница расклада. Тиражируется на ~40 схем: меняются число
   позиций, сетка схемы и тексты.

   Перенесено из согласованного прототипа design/spread.html:
   общая часть (токены, шапка, подвал, кнопки, FAQ) живёт в base.css.
   ============================================================ */
.sec-center{margin-left:auto;margin-right:auto;text-align:center}

/* ============================================================
   ШАПКА СТРАНИЦЫ РАСКЛАДА
   В отличие от карты здесь нет одного изображения: главный визуал -
   схема раскладки, и она вынесена в отдельную секцию во всю ширину.
   ============================================================ */
.spread-hero{padding:26px 0 var(--step)}
.hero-grid{display:grid;grid-template-columns:1fr 390px;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
h1{font-size:clamp(2.3rem,4.2vw,3.3rem);line-height:1.1}
.count-badge{
  font-family:var(--font-display);font-size:1.05rem;color:var(--gold);
  border:1px solid var(--gold-line);border-radius:var(--r-pill);padding:4px 14px;white-space:nowrap;
}
/* Определение первым абзацем: этот фрагмент забирает нейроответ */
.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}
/* Карточка фактов: то, что человек хочет знать до чтения текста */
.facts{display:grid;gap:10px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--surface);padding:22px 24px}
.facts h2{font-family:var(--font-text);font-size:.76rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-low);margin-bottom:6px}
.fact{display:flex;justify-content:space-between;gap:14px;font-size:18px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0;padding-bottom:0}
.fact span{color:var(--text-low)}
.fact b{font-weight:500;text-align:right;color:var(--text-hi)}

/* ============================================================
   СХЕМА РАСКЛАДА - главный элемент этого типа страниц.
   Запрос «расклад таро на отношения схема» - 2 137 показов в месяц,
   поэтому схема стоит выше текста и видна без прокрутки на десктопе.

   Рисуется сеткой, а не картинкой: ноль веса, читается в обеих темах,
   каждая позиция - ссылка на свой разбор ниже. Соединительных линий нет
   намеренно: они ломаются при любом изменении сетки, а смысл несут
   расположение и номера.
   ============================================================ */
.scheme-board{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:
    "s1 s3 s2"
    "s4 s6 s5"
    ".  s7 . ";
  gap:clamp(10px,1.8vw,22px);max-width:470px;margin:0 auto;
}
.slot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.slot-1{grid-area:s1} .slot-2{grid-area:s2} .slot-3{grid-area:s3}
.slot-4{grid-area:s4} .slot-5{grid-area:s5} .slot-6{grid-area:s6} .slot-7{grid-area:s7}
/* Позиции 8-12 нужны только большим схемам: «Кельтский крест» на десять
   карт и круг на год на двенадцать. Без этих правил слот не видит своей
   области в grid-template-areas, уезжает в автопоток и ломает раскладку,
   заданную в JSON. Доска под такие схемы шире: пять колонок в 470 px
   дают карту в 76 px, под которой не помещается подпись. */
.slot-8{grid-area:s8} .slot-9{grid-area:s9} .slot-10{grid-area:s10}
.slot-11{grid-area:s11} .slot-12{grid-area:s12}
.scheme-board:has(.slot-8){max-width:640px}
.slot-face{
  width:100%;aspect-ratio:100/171;border-radius:var(--r-small);
  border:1px solid var(--gold-line);
  background:
    radial-gradient(120% 80% at 50% 0%,var(--gold-soft),transparent 62%),
    repeating-linear-gradient(45deg,var(--gold-soft) 0 5px,transparent 5px 11px),
    var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:clamp(1.4rem,3.6vw,2.1rem);color:var(--gold);
  transition:border-color .22s,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s;
}
.slot:hover .slot-face,.slot:focus-visible .slot-face{
  transform:translateY(-4px);border-color:var(--gold);box-shadow:0 14px 30px rgba(0,0,0,.28)}
.slot-cap{font-size:.87rem;line-height:1.3;color:var(--text-mid);transition:color .2s}
.slot:hover .slot-cap{color:var(--gold)}
.scheme-note{max-width:60ch;margin:34px auto 0;text-align:center;color:var(--text-low);font-size:18px}

/* Позиции расклада, разобранные текстом, а не только схемой.
   Это основное содержание страницы, оно должно индексироваться и читаться без JS. */
.poslist{display:grid;gap:14px}
.pos{display:grid;grid-template-columns:auto 1fr;gap:22px;
  border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);
  padding:26px 30px;scroll-margin-top:100px}
.pos-no{
  width:46px;height:46px;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);
  font-family:var(--font-display);font-size:1.35rem;
}
.pos h3{margin-bottom:7px}
.pos .ask{color:var(--gold);font-size:18px;margin-bottom:12px}
.pos p{color:var(--text-mid);font-size:18px;margin-bottom:12px}
.pos p:last-child{margin-bottom:0}
.pos-hint{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* Пошаговая инструкция */
.steps{display:grid;gap:18px;max-width:var(--read)}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.step-no{
  width:40px;height:40px;border-radius:var(--r-pill);flex:none;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold);
  font-family:var(--font-display);font-size:1.2rem;
}
.step h3{margin-bottom:6px}
.step p{color:var(--text-mid);font-size:18px}

/* Пример разбора: семь реальных карт в позициях схемы */
.ex-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-bottom:34px}
/* Схемы длиннее семи карт в семь колонок ложатся с обрывом: десять как
   7 + 3, двенадцать как 7 + 5. Пять и шесть колонок дают два ровных ряда.
   Правила заперты в min-width: :has поднимает вес селектора выше, чем у
   мобильных правил ниже по файлу, и без рамки они перебили бы их. */
@media (min-width:901px){
  .ex-grid:has(.ex:nth-child(10)):not(:has(.ex:nth-child(11))){grid-template-columns:repeat(5,minmax(0,1fr))}
  .ex-grid:has(.ex:nth-child(12)){grid-template-columns:repeat(6,minmax(0,1fr))}
}
.ex{display:block;text-align:center;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.ex img{border-radius:6px;border:1px solid var(--line);transition:border-color .25s}
.ex:hover{transform:translateY(-4px)}
.ex:hover img{border-color:var(--gold-line)}
.ex small{display:block;margin-top:9px;font-size:.75rem;color:var(--text-low);line-height:1.3}
.ex b{display:block;margin-top:3px;font-size:18px;font-weight:500;color:var(--text-hi)}
.ex: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}

/* Когда расклад не даёт ответа */
.limits{list-style:none;margin:0;padding:0;max-width:var(--read);display:grid;gap:14px}
.limits li{display:grid;grid-template-columns:auto 1fr;gap:14px;color:var(--text-mid);font-size:18px}
.limits svg{color:var(--gold);flex:none;margin-top:5px}

/* Партнёрский блок */
.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}

/* Другие расклады */
.spreads{display:grid;grid-template-columns:repeat(3,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}

@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr 330px}
  .spreads{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ex-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .mistakes{grid-template-columns:1fr}
  .pos{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  .spreads{grid-template-columns:1fr}
  .ex-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scheme-board{gap:9px}
  .slot-cap{font-size:.78rem}
}

/* Обложка в шапке расклада. Переменную ставит шаблон; пока файла нет,
   свойство не определено и шапка выглядит как раньше. */
.spread-hero{position:relative;overflow:hidden}
.spread-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--hero-img, none);background-size:cover;background-position:center}
/* Затемнение поверх обложки. Рассчитано на любую картинку, а не только
   на тёмную: до 21.08.2026 правый край был закрыт на 45 %, и светлая
   обложка («на сегодня», яркость 71 %) торчала из-под врезки размытым
   пятном - фотография спорила с текстом вместо того, чтобы держать фон.
   21.08.2026, второй заход: затемнение было поднято до 78-90 % и съело кадр
   целиком - на странице не осталось видно ничего. Обложки третьей партии
   лежат в коридоре 42-44 % яркости, и такой плотности им не нужно.
   Держим 40-72 %: слева, под текстом, плотно, справа кадр читается.
   **Правку затемнения проверять глазами на самой светлой обложке раздела** -
   на тёмной любая настройка выглядит хорошо. */
.spread-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))}
.spread-hero > *{position:relative;z-index:2}

/* --- Ленорман: сочетания и кольцо соседей ---------------------------------
   Пары - ключевой блок типа: карты этой системы читаются по две, и таблица
   пар отвечает на половину вопросов страницы. Кольцо повторяет раскладку
   карточек каталога, но с номером карты: в Ленормане номер - часть имени. */
.pairs{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:18px}
.pair{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface)}
.pair h3{font-family:var(--font-display);font-size:19px;margin:0 0 8px;color:var(--text-hi)}
.pair p{color:var(--text-mid);font-size:17px;margin:0}

.ring{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.ring-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}
.ring-card:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.ring-num{display:block;font-family:var(--font-display);font-size:15px;color:var(--gold)}
.ring-title{display:block;font-family:var(--font-display);font-size:20px;margin:2px 0 4px}
.ring-hint{display:block;color:var(--text-mid);font-size:15px}

/* Врезка-примечание: другое название карты, оговорка о границе метода.
   Отбивается слева золотой линией, а не рамкой - это не карточка. */
.note{border-left:2px solid var(--gold-line);padding:2px 0 2px 16px;color:var(--text-mid)}

/* Изображение карты на её странице: в колонке фактов, над номером. */
.len-full{display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-small);margin-bottom:16px}