/* ============================================================
   LEONIDAS v2 — «Наша история в Москве» на главной (ТЗ 23.09.2026, п. 2).
   Чанк v2-reviews. Перенесено из макета без изменений
   (макеты/сайт/доверие-история.css), строится поверх .reviews-section
   из main-page.css на токенах сайта (tokens.css).
   ============================================================ */


.th .th-lead { max-width: 640px; margin-left: auto; margin-right: auto; }

/* ---------- Таймлайн (десктоп) ---------- */
.th-line { list-style: none; margin: 40px 0 56px; padding: 0; position: relative; height: 320px; display: grid; grid-template-columns: repeat(7, 1fr); }
.th-line::before { content: ""; position: absolute; left: 0; right: 0; top: 160px; height: 1px; background: #a08a5c; }
.th-pt { position: relative; }
.th-dot { position: absolute; left: 16px; top: 155px; width: 11px; height: 11px; border-radius: 50%; background: #8a7449; }
.th-pt.is-now .th-dot { background: var(--color-gold); box-shadow: 0 0 0 5px rgba(197, 163, 78, 0.22); }
.th-y { position: absolute; left: 4px; font: italic 400 30px/1 var(--font-heading); color: var(--color-navy); }
.th-card { position: absolute; left: 4px; right: 10px; display: flex; flex-direction: column; gap: 10px; }
.th-pt.down .th-y { bottom: 178px; }
.th-pt.down .th-card { top: 184px; }
.th-pt.up .th-y { top: 180px; }
.th-pt.up .th-card { bottom: 184px; }
.th-ph { width: 84px; height: 84px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-cream-dark); flex: none; }
.th-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-ph--now { background: var(--color-navy); display: flex; align-items: center; justify-content: center; }
.th-ph--now img { width: 52px; height: 52px; object-fit: contain; }
.th-t { font-size: 14px; line-height: 1.45; color: var(--color-text-light); }
.th-t b { display: block; font-weight: 500; color: var(--color-navy); }

/* ---------- CTA: тёмная панель в стиле блока «Наследие» ---------- */
.th-cta { margin-top: 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 48px;
  background: var(--color-navy); border-radius: var(--radius-xl); position: relative; overflow: hidden; text-align: left; }
.th-cta::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  border: 1px solid rgba(212, 185, 106, 0.25); pointer-events: none; }
.th-cta__eb { margin: 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--color-gold-light); }
.th-cta__title { margin: 10px 0 0; font: 400 30px/1.25 var(--font-heading); color: #fff; max-width: 560px; }
.th-cta__sub { margin: 10px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.72); }
.th-cta__act { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: none; position: relative; z-index: 1; }
.th-cta__act .btn { min-width: 260px; }
.th-cta__tel { font-size: 13px; color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.th-cta__tel b { color: var(--color-gold-light); font-weight: 500; white-space: nowrap; }

/* ---------- Мобилка: вертикальный таймлайн ---------- */
@media (max-width: 768px) {
  .th-line { display: block; height: auto; margin: 28px 0 36px; padding-left: 26px; }
  .th-line::before { left: 5px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .th-pt { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 8px 0; }
  .th-dot { left: -26px; top: 50%; margin-top: -5px; }
  .th-y, .th-pt.up .th-y, .th-pt.down .th-y { position: static; grid-column: 2; grid-row: 1; font-size: 22px; align-self: end; }
  .th-card, .th-pt.up .th-card, .th-pt.down .th-card { display: contents; }
  .th-ph { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; }
  .th-ph--now img { width: 40px; height: 40px; }
  .th-t { grid-column: 2; grid-row: 2; font-size: 13px; align-self: start; }
  .th-t b { display: inline; }
  .th-cta { margin-top: 32px; flex-direction: column; align-items: stretch; gap: 22px; padding: 28px 22px; }
  .th-cta__title { font-size: 23px; }
  .th-cta__sub { font-size: 14px; }
  .th-cta__act .btn { min-width: 0; width: 100%; }
  .th-cta__tel { text-align: center; }
}