/*
  trh.css - /trh-nemovitosti: page hero and the Přehled tab
  (templates/trh.html, templates/partials/trh/grafy.html).

  Every class is tr-* and defined here, so nothing depends on the pre-built
  tailwind.css. Tokens (--housi-*) come from theme.css; chart series colours
  are the validated categorical slots below (blue, orange, aqua, violet -
  passes the all-pairs CVD check, aqua needs its text label, which every
  legend chip carries).

  1. Tokens          series + status colours
  2. Hero            KPI tiles, sparkline, fact strip, summary
  3. Cards           card shell, headings, footnotes, selects
  4. Trend           compare chips
  5. Pulse           market temperature + KPI grid
  6. Bar lists       ranked HTML bars (server-rendered, crawlable)
  7. Premiums        diverging bars around 0 %
  8. CTA             inline calls to action
*/

/* ── 1. Tokens ─────────────────────────────────────────────────────── */

.tr-root {
  --tr-s1: #2a78d6;  /* blue   */
  --tr-s2: #eb6834;  /* orange */
  --tr-s3: #1baf7a;  /* aqua   */
  --tr-s4: #4a3aa7;  /* violet */
  --tr-neg: #d03b3b;
  --tr-track: #f1f1ee;
  --tr-hot: #c2410c;  --tr-hot-bg: #fff4ed;
  --tr-ok: #047857;   --tr-ok-bg: #ecfdf5;
  --tr-cool: #1d4ed8; --tr-cool-bg: #eff6ff;
}

.tr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tr-num { font-variant-numeric: tabular-nums; }

/* ── 2. Hero ───────────────────────────────────────────────────────── */

.tr-kpis-hero {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 12px;
}
@media (min-width: 900px) {
  .tr-kpis-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
.tr-kpi {
  position: relative;
  background: var(--housi-surface); border: 1px solid var(--housi-line);
  border-radius: 16px; padding: 16px 16px 14px;
  min-width: 0;
}
.tr-kpi__label {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--housi-ink-mute); margin: 0 0 6px;
}
.tr-kpi__value {
  font-size: 26px; line-height: 1.1; font-weight: 800; color: var(--housi-ink);
  letter-spacing: -.02em; margin: 0;
  font-variant-numeric: tabular-nums;
}
.tr-kpi__value small { font-size: 13px; font-weight: 600; color: var(--housi-ink-soft); letter-spacing: 0; }
.tr-kpi__sub { font-size: 12px; color: var(--housi-ink-soft); margin: 6px 0 0; line-height: 1.45; }
.tr-kpi__spark { display: block; width: 100%; height: 34px; margin-top: 8px; }
@media (max-width: 480px) {
  .tr-kpi { padding: 14px 12px 12px; }
  .tr-kpi__value { font-size: 21px; }
}

.tr-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 2px 7px; border-radius: 999px;
  background: #f3f4f6; color: #374151;
}
.tr-delta--up::before   { content: "\25B2"; font-size: 8px; }
.tr-delta--down::before { content: "\25BC"; font-size: 8px; }

.tr-temp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 700; line-height: 1.25;
  padding: 4px 10px 4px 8px; border-radius: 999px;
}
.tr-temp-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.tr-temp--hot      { background: var(--tr-hot-bg);  color: var(--tr-hot); }
.tr-temp--balanced { background: var(--tr-ok-bg);   color: var(--tr-ok); }
.tr-temp--cool     { background: var(--tr-cool-bg); color: var(--tr-cool); }

.tr-facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px; padding: 0; list-style: none;
}
.tr-fact {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 13px; color: var(--housi-ink-soft);
  background: var(--housi-surface); border: 1px solid var(--housi-line);
  border-radius: 999px; padding: 6px 12px;
}
.tr-fact strong { color: var(--housi-ink); font-weight: 600; }
a.tr-fact:hover { border-color: var(--housi-accent); color: var(--housi-accent-2); }

.tr-summary {
  background: var(--housi-surface); border: 1px solid var(--housi-line);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 24px;
}
.tr-summary h2 { font-size: 15px; font-weight: 700; color: var(--housi-ink); margin: 0 0 8px; }
.tr-summary p { font-size: 14px; line-height: 1.7; color: var(--housi-ink-soft); margin: 0; }
.tr-summary strong { color: var(--housi-ink); }

/* ── 3. Cards ──────────────────────────────────────────────────────── */

.tr-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; }
@media (min-width: 1024px) {
  .tr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.tr-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--housi-ink-mute); margin: 36px 0 12px;
}
.tr-section-title:first-child { margin-top: 0; }

.tr-card {
  background: var(--housi-surface); border: 1px solid var(--housi-line);
  border-radius: 16px; padding: 20px;
  min-width: 0;
}
@media (min-width: 640px) { .tr-card { padding: 24px; } }
.tr-card + .tr-card { margin-top: 20px; }
.tr-grid > .tr-card + .tr-card { margin-top: 0; }

.tr-card__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.tr-card__head > div { min-width: 0; flex: 1 1 260px; }
.tr-h2 { font-size: 17px; font-weight: 700; color: var(--housi-ink); margin: 0; line-height: 1.3; }
.tr-sub { font-size: 13px; color: var(--housi-ink-soft); margin: 4px 0 0; line-height: 1.5; }
.tr-insight {
  font-size: 14px; color: var(--housi-ink); line-height: 1.55;
  margin: 0 0 16px; padding: 10px 14px;
  background: #f8fafc; border-left: 3px solid var(--housi-accent); border-radius: 0 10px 10px 0;
}
.tr-foot { font-size: 12px; color: var(--housi-ink-mute); margin: 14px 0 0; line-height: 1.5; }
.tr-empty { font-size: 14px; color: var(--housi-ink-soft); padding: 24px 0; text-align: center; }

.tr-select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 14px; color: var(--housi-ink);
  background: var(--housi-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--housi-line); border-radius: 10px;
  padding: 9px 34px 9px 12px; min-height: 40px; max-width: 100%;
  cursor: pointer;
}
.tr-select:hover { border-color: var(--housi-ink-mute); }
.tr-select:focus-visible { outline: 2px solid var(--housi-accent); outline-offset: 2px; }

.tr-chart { position: relative; height: 300px; }
@media (min-width: 640px) { .tr-chart { height: 340px; } }
.tr-chart--short { height: 240px; }
@media (min-width: 640px) { .tr-chart--short { height: 260px; } }

.tr-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; padding: 0; list-style: none; }
.tr-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--housi-ink-soft); }
.tr-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ── 4. Trend ──────────────────────────────────────────────────────── */

.tr-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-card__head > .tr-controls { flex: 0 1 auto; }
.tr-seg { display: inline-flex; border: 1px solid var(--housi-line); border-radius: 10px; padding: 3px; background: #f9fafb; }
.tr-seg__btn {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--housi-ink-soft);
  border: 0; background: transparent; border-radius: 7px; padding: 0 12px; min-height: 32px; cursor: pointer;
}
.tr-seg__btn[aria-pressed="true"] { background: var(--housi-surface); color: var(--housi-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.tr-seg__btn:focus-visible { outline: 2px solid var(--housi-accent); outline-offset: 1px; }

.tr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.tr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--housi-line); border-radius: 12px;
  padding: 6px 6px 6px 10px; background: var(--housi-surface);
  font-size: 13px; line-height: 1.3; max-width: 100%;
}
.tr-chip__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tr-chip__name { font-weight: 600; color: var(--housi-ink); white-space: nowrap; flex-shrink: 0; }
.tr-chip__val { color: var(--housi-ink-soft); font-variant-numeric: tabular-nums; min-width: 0; }
@media (max-width: 480px) {
  .tr-chip { width: 100%; }
  .tr-chip__val { flex: 1 1 auto; font-size: 12px; }
}
.tr-chip__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: var(--housi-ink-mute); cursor: pointer; font-size: 16px;
}
.tr-chip__x:hover { background: #f3f4f6; color: var(--housi-ink); }
.tr-chip__x:focus-visible { outline: 2px solid var(--housi-accent); outline-offset: 1px; }

/* ── 5. Pulse ──────────────────────────────────────────────────────── */

.tr-pulse { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .tr-pulse { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.tr-temp-box { border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.tr-temp-box p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--housi-ink-soft); }
.tr-temp-box .tr-temp-box__label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 17px; font-weight: 800; color: inherit; letter-spacing: -.01em;
}
.tr-temp-box__label svg { width: 18px; height: 18px; display: block; }
.tr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.tr-stat { border: 1px solid var(--housi-line-soft); border-radius: 12px; padding: 12px 14px; background: #fcfcfb; }
.tr-stat dt { font-size: 12px; color: var(--housi-ink-soft); margin: 0; }
.tr-stat dd { margin: 4px 0 0; font-size: 20px; font-weight: 800; color: var(--housi-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tr-stat small { display: block; font-size: 11px; color: var(--housi-ink-mute); margin-top: 2px; line-height: 1.4; font-weight: 400; letter-spacing: 0; }

/* ── 6. Bar lists ──────────────────────────────────────────────────── */

.tr-bars { list-style: none; margin: 0; padding: 0; }
.tr-bar {
  display: grid; align-items: center; gap: 4px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 7px 0; border-bottom: 1px solid var(--housi-line-soft);
}
.tr-bar:last-child { border-bottom: 0; }
.tr-bar__name {
  font-size: 14px; font-weight: 500; color: var(--housi-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-bar__rank { display: inline-block; width: 20px; color: var(--housi-ink-mute); font-size: 12px; font-weight: 500; }
.tr-bar__val { font-size: 14px; font-weight: 700; color: var(--housi-ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-bar__val small { display: block; font-size: 11px; font-weight: 400; color: var(--housi-ink-mute); }
.tr-bar__track {
  grid-column: 1 / -1; position: relative;
  height: 6px; border-radius: 999px; background: var(--tr-track); overflow: visible;
}
.tr-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--tr-s1); }
.tr-bar__ref {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--housi-ink-soft); border-radius: 1px;
}
a.tr-bar { text-decoration: none; }
a.tr-bar:hover .tr-bar__name { color: var(--housi-accent-2); }
a.tr-bar:hover .tr-bar__fill { background: #1c5cab; }
a.tr-bar:focus-visible { outline: 2px solid var(--housi-accent); outline-offset: 2px; border-radius: 6px; }
@media (min-width: 900px) {
  .tr-bars--cols { columns: 2; column-gap: 40px; }
  .tr-bars--cols li { break-inside: avoid; }
  .tr-bars--cols .tr-bar { border-bottom: 1px solid var(--housi-line-soft); }
}
.tr-bars--warm .tr-bar__fill { background: var(--tr-s2); }
.tr-bars--warm a.tr-bar:hover .tr-bar__fill { background: #c2410c; }
.tr-reflegend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--housi-ink-soft); }
.tr-reflegend i { display: inline-block; width: 2px; height: 12px; background: var(--housi-ink-soft); }

/* ── 7. Premiums ───────────────────────────────────────────────────── */

.tr-prem-grid { display: grid; gap: 20px 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .tr-prem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tr-prem h4 { font-size: 13px; font-weight: 700; color: var(--housi-ink); margin: 0 0 8px; }
.tr-prem ul { list-style: none; margin: 0; padding: 0; }
.tr-prem li {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: minmax(96px, 9fr) minmax(0, 10fr) 58px;
  padding: 5px 0; font-size: 13px; color: var(--housi-ink-soft);
}
.tr-prem__track { position: relative; height: 14px; }
.tr-prem__track::before {
  content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--housi-ink-mute);
}
.tr-prem__fill { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.tr-prem__fill--pos { left: 50%; background: var(--tr-s1); }
.tr-prem__fill--neg { right: 50%; background: var(--tr-neg); }
.tr-prem__val { text-align: right; font-weight: 700; color: var(--housi-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── 8. CTA ────────────────────────────────────────────────────────── */

.tr-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  background: #f8fafc; border: 1px solid var(--housi-line-soft);
}
.tr-cta p { margin: 0; font-size: 14px; color: var(--housi-ink-soft); line-height: 1.5; flex: 1 1 240px; }
.tr-cta strong { color: var(--housi-ink); }
.tr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  background: var(--housi-accent); color: #fff; border: 1px solid var(--housi-accent);
}
.tr-btn:hover { background: var(--housi-accent-2); border-color: var(--housi-accent-2); }
.tr-btn:focus-visible { outline: 2px solid var(--housi-accent); outline-offset: 2px; }
.tr-btn--ghost { background: var(--housi-surface); color: var(--housi-ink); border-color: var(--housi-line); }
.tr-btn--ghost:hover { background: #f9fafb; border-color: var(--housi-ink-mute); color: var(--housi-ink); }

.tr-band {
  margin-top: 28px; border-radius: 20px; padding: 28px 24px;
  background: var(--housi-ink); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.tr-band h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.tr-band p { margin: 6px 0 0; font-size: 14px; color: #cbd5e1; line-height: 1.55; max-width: 560px; }
.tr-band .tr-btn { background: #fff; color: var(--housi-ink); border-color: #fff; }
.tr-band .tr-btn:hover { background: #e5e7eb; border-color: #e5e7eb; }
.tr-band .tr-btn--ghost { background: transparent; color: #fff; border-color: #475569; }
.tr-band .tr-btn--ghost:hover { border-color: #fff; background: transparent; }
.tr-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .tr-root * { transition: none !important; animation: none !important; }
}