/* =========================================================
   sinonimy.css - страницы рубрики «Синонимы» раздела «Лексика».
   Разбор пары похожих слов: два глагола, два существительных и т. п.
   Подключается ПОСЛЕ /_shared/theme.css и /leksika/wordlist.css.
   Общий каркас (.sec, .rtbl, .cl, .warn, лента якорей) берётся оттуда,
   здесь - только то, чего в каркасе нет: парная подача и шкала.
   ========================================================= */

/* ---------------------------------------------------------
   1. Шпаргалка в hero: слева текст, справа компактная суть темы
   --------------------------------------------------------- */
.hero-flex { display: flex; flex-direction: column; gap: 1.1rem; }
@media (min-width: 900px) {
  .hero-flex { flex-direction: row; align-items: flex-end; gap: 1.6rem; }
  .hero-flex .hero-main { flex: 1 1 auto; min-width: 0; }
  .hero-aside { flex: 0 0 290px; }
}
.hero-aside {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-terracotta-light, #D4A08A);
  border-radius: .7rem;
  padding: .85rem .95rem;
}
.hero-aside .ha-t {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-terracotta, #C4856A); margin-bottom: .55rem;
}
.hero-aside .ha-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  padding: .3rem 0; border-top: 1px solid var(--color-cream-dark, #F5EDE6); font-size: .92rem;
}
.hero-aside .ha-row:first-of-type { border-top: none; padding-top: 0; }
.hero-aside .ha-p { color: var(--color-text-light, #5A5650); }
.hero-aside .ha-f { font-family: 'Lora', Georgia, serif; font-weight: 600; white-space: nowrap; }
.hero-aside .ha-f.f-a { color: var(--color-turquoise-dark, #147A7F); }
.hero-aside .ha-f.f-b { color: var(--color-terracotta, #C4856A); }

/* ---------------------------------------------------------
   2. Парные карточки: слово А против слова Б
   Ровно две колонки на десктопе, столбиком на телефоне.
   --------------------------------------------------------- */
.sn-pair { display: grid; grid-template-columns: 1fr; gap: .8rem; margin: .9rem 0 0; }
@media (min-width: 700px) { .sn-pair { grid-template-columns: 1fr 1fr; } }
.sn-card { border: 2px solid; border-radius: .7rem; padding: .95rem 1.05rem; min-width: 0; }
.sn-card--a { border-color: var(--color-turquoise, #1A9BA1); background: rgba(26, 155, 161, .07); }
.sn-card--b { border-color: var(--color-terracotta, #C4856A); background: rgba(196, 133, 106, .09); }
.sn-card-t { font-family: 'Lora', serif; font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.sn-card--a .sn-card-t { color: var(--color-turquoise-dark, #147A7F); }
.sn-card--b .sn-card-t { color: var(--color-terracotta, #C4856A); }
.sn-card-sub { font-size: .85rem; color: var(--color-text-light, #5A5650); margin-top: .15rem; }
.sn-card-body { font-size: .95rem; line-height: 1.6; margin-top: .6rem; }
.sn-card-body ul { margin: .35rem 0 0; padding-left: 1.05rem; }
.sn-card-body li { margin: .2rem 0; }

/* ---------------------------------------------------------
   3. Шкала «широко ↔ конкретно»
   --------------------------------------------------------- */
.sn-scale { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: .9rem 0 0; }
@media (min-width: 700px) { .sn-scale { grid-template-columns: 1fr 1fr; } }
.sn-scale-card {
  background: var(--color-white, #fff);
  border: 1px solid var(--color-cream-dark, #F5EDE6);
  border-radius: .6rem; padding: .8rem .9rem;
}
.sn-scale-lbl {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .35rem;
}
.sn-scale-lbl.l-a { color: var(--color-turquoise-dark, #147A7F); }
.sn-scale-lbl.l-b { color: var(--color-terracotta, #C4856A); }
.sn-scale-ex {
  font-family: 'Lora', serif; font-size: .95rem; color: var(--color-text-light, #5A5650);
  margin-top: .4rem; line-height: 1.5;
}

/* ---------------------------------------------------------
   4. Зона пересечения: где годятся оба слова
   --------------------------------------------------------- */
.sn-cross {
  margin: .9rem 0 0; padding: .85rem 1rem;
  border: 1px dashed var(--color-turquoise, #1A9BA1);
  border-radius: .6rem; background: rgba(26, 155, 161, .06);
}
.sn-cross-t {
  display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-turquoise-dark, #147A7F); margin-bottom: .3rem;
}
.sn-eq {
  font-family: 'Lora', serif; font-size: 1.02rem; font-weight: 600;
  color: var(--color-text, #2D2A26);
}
.sn-eq b { color: var(--color-turquoise-dark, #147A7F); font-weight: 600; }

/* ---------------------------------------------------------
   5. Итоговая формула выбора
   --------------------------------------------------------- */
.sn-formula {
  margin: 1rem 0 0; padding: .9rem 1rem; text-align: center;
  border: 2px solid var(--color-gold, #D4A853); border-radius: .6rem;
  background: var(--color-white, #fff);
  font-family: 'Lora', serif; font-size: 1.02rem; line-height: 1.6;
}
.sn-formula .hl-a { color: var(--color-turquoise-dark, #147A7F); font-weight: 700; }
.sn-formula .hl-b { color: var(--color-terracotta, #C4856A); font-weight: 700; }

/* ---------------------------------------------------------
   6. Диалоги: вопрос собеседника и ответ
   --------------------------------------------------------- */
.sn-dlg { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .7rem; }
.sn-dlg li {
  border-left: 3px solid var(--color-turquoise, #1A9BA1);
  background: var(--color-cream, #FFF9F5);
  border-radius: 0 .5rem .5rem 0; padding: .6rem .85rem;
}
.sn-dlg-q, .sn-dlg-a { font-family: 'Lora', serif; font-size: 1rem; line-height: 1.45; }
.sn-dlg-a { margin-top: .25rem; color: var(--color-turquoise-dark, #147A7F); font-weight: 600; }
.sn-dlg-ru { display: block; font-size: .88rem; color: var(--color-text-light, #5A5650); font-family: 'Nunito', sans-serif; font-weight: 400; }

/* ---------------------------------------------------------
   7. Родня слов: гнездо однокоренных
   --------------------------------------------------------- */
.sn-fam { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .45rem; }
.sn-fam li { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.sn-fam-w { font-family: 'Lora', serif; font-weight: 600; color: var(--color-turquoise-dark, #147A7F); }
.sn-card--b .sn-fam-w { color: var(--color-terracotta, #C4856A); }
.sn-fam-ru { font-size: .92rem; color: var(--color-text-light, #5A5650); }

/* ---------------------------------------------------------
   8. Таблица «верно / неверно» - доопределение к .rtbl
   --------------------------------------------------------- */
.sn-verdict td:last-child { text-align: center; white-space: nowrap; font-weight: 800; }
.sn-verdict .v-ok { color: #2E7A4A; }
.sn-verdict .v-no { color: #B52828; }
.sn-verdict .v-care { color: #8A6520; }
.sn-verdict [lang="tr"] { font-family: 'Lora', serif; font-weight: 600; }
.sn-verdict .crossed { text-decoration: line-through; text-decoration-color: rgba(181, 40, 40, .6); }
@media (max-width: 640px) {
  .sn-verdict td:last-child { text-align: left; }
}