/* Мини-карточка при наведении и нижняя карточка на телефоне (static/js/hovercard.js).
   Цвета, радиусы и шрифт — из app.css (:root и [data-theme="dark"]). */

.hc{position:fixed;z-index:1000;top:0;left:0;display:none;width:300px;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 14px 36px rgba(14,24,23,.16);overflow:hidden;font-size:14px;line-height:1.4;text-align:left}
.hc.on{display:block}

/* фото 16:10, мини-слайдер */
.hc-ph{position:relative;aspect-ratio:16/10;background:var(--tile);overflow:hidden}
.hc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s var(--ease)}
.hc-ph img.on{opacity:1}
.hc-noph{background:var(--tile)}
.hc-arr{position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:#0E1817;font-size:20px;line-height:1;display:grid;place-items:center;z-index:2}
.hc-arr.p{left:8px}
.hc-arr.n{right:8px}
.hc-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;z-index:2}
.hc-dot{width:7px;height:7px;padding:0;border-radius:50%;background:rgba(255,255,255,.55)}
.hc-dot.on{background:#fff}
.hc-x{position:absolute;top:8px;right:8px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.94);color:#0E1817;font-size:24px;line-height:1;display:grid;place-items:center}

/* текст */
.hc-body{padding:14px 16px 16px}
.hc-k{font-size:12px;color:var(--muted-2);margin-bottom:2px}
.hc-t{display:block;font-size:17px;line-height:1.25;font-weight:600;color:var(--ink)}
.hc-t:hover{color:var(--link)}
.hc-pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:8px;font-size:13px;color:var(--muted)}
.hc-p{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.hc-w{margin-top:4px;font-size:13px;color:var(--muted)}
.hc-c{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.hc-c li{font-size:12px;padding:3px 9px;border-radius:12px;background:var(--chip);color:var(--ink-2)}
.hc-go{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;margin-top:14px;border-radius:20px;background:#0E1817;color:#fff;font-size:14px;font-weight:600;white-space:nowrap}
.hc-go:hover{background:#284646}
[data-theme="dark"] .hc-go{background:var(--tint);color:#0E1817}
[data-theme="dark"] .hc-go:hover{background:var(--tint-h)}

/* нижняя карточка: на телефоне (узкий экран) и при касании на любом экране */
.hc.hc-sheet{left:0;right:0;top:auto;bottom:0;width:auto;max-height:80vh;overflow-y:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 30px rgba(14,24,23,.22);padding-bottom:env(safe-area-inset-bottom)}
@media (max-width:700px){
  .hc{left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;width:auto !important;max-height:80vh;overflow-y:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 30px rgba(14,24,23,.22);padding-bottom:env(safe-area-inset-bottom)}
}
/* логотип застройщика или отельера в карточке */
.hc-lg{display:grid;place-items:center;width:104px;height:52px;margin-bottom:8px;border-radius:10px;background:#fff;border:1px solid var(--line)}
.hc-lg img{max-width:88px;max-height:34px;object-fit:contain}
/* застройщик или отельер: плитка его проектов */
.hc-co{width:380px;padding:14px}
.hc-co-h{display:flex;gap:12px;align-items:center}
.hc-co-h .hc-lg{margin:0;flex:none;width:76px;height:42px}
.hc-co-h .hc-lg img{max-width:62px;max-height:28px}
.hc-co-t{min-width:0}
.hc-co-t .hc-w{margin-top:2px}
.hc-pj{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.hc-pj-i{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:12px;line-height:1.25}
.hc-pj-i img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;background:var(--tile)}
.hc-pj-i b{font-weight:600;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-pj-i span{color:var(--muted-2)}
.hc-pj-i:hover b{color:var(--link)}
.hc-co .hc-go{margin-top:12px}
@media (max-width:700px){.hc-co{width:auto}}
.hc-lg.dk{background:#1d2b2a;border-color:#1d2b2a}