/* ==========================================================================
   Раздел сайта для агентств недвижимости (views/realty/show.ejs): раскладка поверх site.css.
   Компоненты — общие компоненты сайта v13 (sv-hero, sv-feature, sv-tasks, sv-compare, sv-block, lp-btn, lp-faq),
   плитки .sv-tile по смыслу. Здесь только то, чего нет в site.css, и только токены fc-tokens.css.
   Числа вне токенов — границы @media (960px, 760px): переменные в них не работают.
   ========================================================================== */

/* ─── Коротко: 3–4 плитки «что меняется» ─── */
.rl-stats-section { padding-top: 0; }
.rl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-kpi-min), 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.rl-stat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: center; padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-1); }
.rl-stat .sv-tile { grid-row: span 2; align-self: start; }
.rl-stat b { font-size: var(--fs-3xl); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: -.03em; }
.rl-stat > span:last-child { color: var(--ink-2); font-size: var(--fs-md); line-height: var(--lh-text); }

/* ─── Как это работает: рельс шагов ─── */
.rl-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--w-control), 1fr)); gap: var(--sp-3); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.rl-rail-step { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-1); }
.rl-rail-n { justify-self: start; display: inline-grid; place-items: center; min-width: var(--h-sm); height: var(--h-xs); padding: 0 var(--sp-2); border-radius: var(--r-xs); background: var(--blue-soft); color: var(--blue-ink); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.rl-rail-step b { font-size: var(--fs-lg); font-weight: var(--fw-strong); line-height: var(--lh-tight); }
.rl-rail-step > span:last-child { color: var(--ink-2); font-size: var(--fs-md); line-height: var(--lh-text); }

/* ─── Возможности: заголовок раздела и список-подпорка справа, если нет анимации ─── */
.rl-section-head { margin-bottom: var(--sp-2); }
.rl-points { display: grid; gap: var(--sp-3); margin: 0; padding: var(--sp-6); border-radius: var(--r-2xl); background: var(--surface-2); list-style: none; }
.rl-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.rl-points b { display: block; font-size: var(--fs-md); font-weight: var(--fw-strong); line-height: var(--lh-text); }
.rl-points em { display: block; color: var(--ink-2); font-size: var(--fs-sm); font-style: normal; line-height: var(--lh-text); }

/* ─── Кто что видит: таблица ролей; на телефоне — карточки «подпись — значение» ─── */
.rl-table-wrap { margin-top: var(--sp-6); overflow-x: auto; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--sh-1); }
.rl-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); line-height: var(--lh-text); }
.rl-table th, .rl-table td { padding: var(--sp-3) var(--sp-4); border-bottom: var(--divider); text-align: left; vertical-align: top; }
.rl-table thead th { color: var(--ink-3); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.rl-table tbody th { font-weight: var(--fw-strong); white-space: nowrap; }
.rl-table tbody tr:last-child > * { border-bottom: 0; }

/* ─── Подробно: колонка текста ─── */
.rl-prose { display: grid; gap: var(--sp-8); max-width: var(--w-prose); }
.rl-prose .sv-block h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: -.02em; }
.sv-block .rl-note { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--amber-soft); color: var(--ink); font-size: var(--fs-md); }
.rl-hub-link { margin-top: var(--sp-5); }

@media (max-width: 760px) {
    .rl-stat { padding: var(--sp-4); }
    .rl-stat b { font-size: var(--fs-2xl); }
    .rl-points { padding: var(--sp-4); }
    .rl-table-wrap { background: transparent; box-shadow: none; overflow: visible; }
    .rl-table thead { display: none; }
    .rl-table, .rl-table tbody, .rl-table tr, .rl-table th, .rl-table td { display: block; }
    .rl-table tr { margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
    .rl-table th, .rl-table td { padding: var(--sp-1) 0; border: 0; white-space: normal; }
    .rl-table tbody th { font-size: var(--fs-lg); }
    .rl-table td::before { content: attr(data-label); display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-strong); }
}