/* =========================================================================
   Central Property — сравнение объектов (/sravnenie/, template/template-compare.php дочерней темы).
   Перенос таблицы .cp-table / .cp-compare из docs/preview/v2/cp-ui.css (раздел 18) и favorites.html на токены --cp-*.
   Телефон (≤ 599): первая колонка 96 px липкая, колонки объектов 124 px, горизонтальная прокрутка на всю ширину;
   ≥ 768 — колонки 200 px; ≥ 1024 — шапка таблицы липнет под шапкой сайта.
   Зависимости: style.css, cards.css (--cp-s*, --cp-fs-*, --cp-tap, .cp-plate), sections.css (--cp-gutter, .cp-btn, .cp-chip),
   favorites.css (.cp-check, .cp-empty, .cp-toast, .cp-fav__pills), header-footer.css (--cp-header-h).
   В конце — запасные правила для штатной таблицы Houzez .compare-table и плавающей панели сравнения.
   ========================================================================= */

:root{
  --cp-cmp-first:112px; --cp-cmp-col:160px; --cp-cmp-col-l:200px;   /* ширины колонок: подписи / объекты / объекты ≥ 768 */
  --cp-cmp-first-m:96px; --cp-cmp-col-m:124px; --cp-cmp-cell-m:10px; /* телефон */
  --cp-cmp-plate-h:24px; --cp-cmp-plate-fs:12px; --cp-cmp-rm-h:36px; --cp-cmp-legend-sq:12px;
  --cp-cmp-success-soft:color-mix(in srgb,var(--cp-success) 10%,var(--cp-surface));
}

/* ---------- 1. Панель над таблицей ---------- */
.cp-cmp__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--cp-s3);margin-bottom:var(--cp-s4)}
.cp-cmp__actions{display:flex;flex-wrap:wrap;gap:var(--cp-s2)}
.cp-cmp__actions .cp-btn svg{width:18px;height:18px}
.cp-cmp__diff{min-height:var(--cp-tap);padding-block:0}
.cp-cmp__diff span{font-size:var(--cp-fs-sm);font-weight:500}
.cp-cmp__intro{margin-bottom:var(--cp-s5);max-width:70ch;color:var(--cp-muted)}

/* Заметка (cp-ui §16) */
.cp-note{margin:0;padding:var(--cp-s3) var(--cp-s4);border-left:var(--cp-s1) solid var(--cp-warning);border-radius:var(--cp-r-sm);background:color-mix(in srgb,var(--cp-warning) 12%,var(--cp-surface));color:var(--cp-text);font-size:var(--cp-fs-sm);line-height:1.5}
.cp-note--info{background:var(--cp-accent-soft);border-left-color:var(--cp-accent)}
.cp-note--success{background:var(--cp-cmp-success-soft);border-left-color:var(--cp-success)}
.cp-cmp__note{margin-bottom:var(--cp-s4)}

/* ---------- 2. Таблица ---------- */
.cp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-surface);scrollbar-width:thin}
.cp-table{width:100%;max-width:none;margin:0;border-collapse:separate;border-spacing:0;font-size:var(--cp-fs-sm);line-height:1.4;color:var(--cp-text)}
.cp-table th,.cp-table td{padding:var(--cp-s3) var(--cp-s4);text-align:left;vertical-align:top;border-bottom:1px solid var(--cp-line);background:var(--cp-surface)}
.cp-table tbody tr:last-child th,.cp-table tbody tr:last-child td{border-bottom:0}
.cp-table caption.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.cp-compare{min-width:100%}
/* Первая колонка — липкая (подписи строк) */
.cp-compare th:first-child,.cp-compare td:first-child{position:sticky;left:0;z-index:2;min-width:var(--cp-cmp-first);font-family:var(--cp-font-text);font-weight:500;color:var(--cp-muted);box-shadow:1px 0 0 var(--cp-line)}
.cp-compare thead th{min-width:var(--cp-cmp-col);vertical-align:bottom;font-weight:600;color:var(--cp-text);background:var(--cp-surface)}
.cp-compare thead th:first-child{z-index:3;vertical-align:bottom;font-size:var(--cp-fs-xs);letter-spacing:.04em;text-transform:uppercase}
.cp-compare td{font-variant-numeric:tabular-nums}
.cp-compare td b{font-family:var(--cp-font-head);font-weight:600;font-size:var(--cp-fs-base)}
/* Лучшее значение в строке и различия */
.cp-compare td.is-best{color:var(--cp-success);background:var(--cp-cmp-success-soft);font-weight:600}
.cp-compare td.is-best .cp-muted{color:var(--cp-success)}
.cp-compare td.is-diff{background:var(--cp-warm-soft)}
.cp-compare.is-only-diff tr.is-same-row{display:none}

/* Шапка колонки объекта: фото 4:3 с ID-табличкой, название, «Убрать ×» */
.cp-cmp__media{position:relative;display:block;aspect-ratio:4/3;margin-bottom:var(--cp-s2);border-radius:var(--cp-r-sm);overflow:hidden;background:var(--cp-surface-2)}
.cp-cmp__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cp-cmp__media .cp-plate{position:absolute;right:var(--cp-s2);top:var(--cp-s2);height:var(--cp-cmp-plate-h);font-size:var(--cp-cmp-plate-fs)}
.cp-cmp__title{display:block;margin-bottom:var(--cp-s1);font-family:var(--cp-font-text);font-size:var(--cp-fs-sm);font-weight:600;line-height:1.3;color:var(--cp-text);text-decoration:none;overflow-wrap:anywhere}
.cp-cmp__title:hover,.cp-cmp__title:focus-visible{color:var(--cp-accent-text);text-decoration:none}
.cp-cmp__rm{display:inline-flex;align-items:center;min-height:var(--cp-cmp-rm-h);margin:0;padding:0;border:0;background:none;color:var(--cp-muted);font:400 var(--cp-fs-xs)/1 var(--cp-font-text);cursor:pointer;transition:color var(--cp-dur-fast) var(--cp-ease)}
.cp-cmp__rm:hover,.cp-cmp__rm:focus-visible{color:var(--cp-warm)}

/* Легенда */
.cp-cmp__legend{display:flex;flex-wrap:wrap;gap:var(--cp-s2) var(--cp-s4);margin:var(--cp-s3) 0 0;font-size:var(--cp-fs-xs);line-height:1.4;color:var(--cp-muted)}
.cp-cmp__legend i{display:inline-block;width:var(--cp-cmp-legend-sq);height:var(--cp-cmp-legend-sq);margin-right:6px;border-radius:3px;vertical-align:-1px}
.cp-cmp__legend .is-best{background:var(--cp-cmp-success-soft);box-shadow:inset 0 0 0 1px var(--cp-success)}
.cp-cmp__legend .is-diff{background:var(--cp-warm-soft)}

/* ---------- 3. Телефон: 2 колонки на экране + прокрутка на всю ширину ---------- */
@media (max-width:599.98px){
  .cp-table-wrap{margin-inline:calc(-1 * var(--cp-gutter));border-inline:0;border-radius:0}
  .cp-compare th:first-child,.cp-compare td:first-child{min-width:var(--cp-cmp-first-m);max-width:var(--cp-cmp-first-m);font-size:var(--cp-fs-xs)}
  .cp-compare thead th{min-width:var(--cp-cmp-col-m)}
  .cp-table th,.cp-table td{padding:var(--cp-cmp-cell-m)}
  .cp-compare td b{font-size:var(--cp-fs-sm)}
  .cp-cmp__bar .cp-cmp__actions{width:100%}
  .cp-cmp__bar .cp-cmp__actions .cp-btn{flex:1 1 auto}
}
@media (min-width:768px){.cp-compare thead th{min-width:var(--cp-cmp-col-l)}}
/* Компьютер: таблица помещается — шапка таблицы липнет под шапкой сайта */
@media (min-width:1024px){
  .cp-table-wrap{overflow:visible}
  .cp-compare thead th{position:sticky;top:var(--cp-header-h);z-index:3;box-shadow:0 1px 0 var(--cp-line)}
  .cp-compare thead th:first-child{z-index:4}
  .admin-bar .cp-compare thead th{top:calc(var(--cp-header-h) + 32px)}
}

/* ---------- 4. Запасные правила: штатная таблица Houzez (если переопределение шаблона не применено) ---------- */
.compare-table{border:1px solid var(--cp-line);border-radius:var(--cp-r-md);background:var(--cp-surface)}
.compare-table .table{margin:0;color:var(--cp-text);font-size:var(--cp-fs-sm)}
.compare-table th,.compare-table td{border-color:var(--cp-line);vertical-align:top!important}
.compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;z-index:2;text-align:left;background:var(--cp-surface);color:var(--cp-muted);font-weight:500;box-shadow:1px 0 0 var(--cp-line)}
.compare-table .table-striped > tbody > tr:nth-of-type(odd) > *{--bs-table-accent-bg:transparent;background:var(--cp-surface-2);color:inherit}
.compare-table .table-hover > tbody > tr:hover,.compare-table .table-hover > tbody > tr:hover > *{color:inherit;--bs-table-accent-bg:transparent}
.compare-table thead th{background:var(--cp-surface)}
.compare-table thead th img{border-radius:var(--cp-r-sm)}
.compare-table .text-success{color:var(--cp-success)!important}
.compare-table .text-danger{color:var(--cp-faint)!important}

/* Плавающая панель сравнения Houzez (кнопка-счётчик справа, список миниатюр) — палитра B */
.compare-property-panel{border-left-color:var(--cp-line);box-shadow:var(--cp-shadow-3);color:var(--cp-text)}
.compare-property-panel p strong{font-family:var(--cp-font-head);font-weight:600}
.compare-property-label{background-color:var(--cp-night)!important;color:var(--cp-on-night);border-radius:var(--cp-r-sm) 0 0 var(--cp-r-sm)}
.compare-property-label .compare-count{color:var(--cp-on-night)}
.compare-property-panel .compare-item img{border-radius:var(--cp-r-sm)}
.compare-property-panel .remove-icon{color:var(--cp-warm)}
.compare-property-panel .btn-grey-outlined{border-color:var(--cp-line-strong);color:var(--cp-text);border-radius:var(--cp-r-sm)!important}
.compare-property-panel .btn-grey-outlined:hover{background:var(--cp-surface-2);color:var(--cp-text)}

/* ---------- 5. Без движения по просьбе системы ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-cmp__rm{transition:none}
}