/* EvNet.az — Biznes hub pages (/donerxana-satilir, /10000-manata-biznes, …).
 *
 * Only the blocks a hub adds: the stat line and figures panel in the hero,
 * the live card grid, the labelled "nearest" cards, the budget and lease
 * tables, the checklist cards, the chips to other hubs. Everything else is the
 * shared kit (evnet-ui.css) and the landing-page sheet (ui-seo.css).
 * Pages: generate_biznes_seo_pages.py from biznes-hubs.json; the live content
 * is written into the slots by functions/_biz_hub_ssr.js.
 */

/* ── Hero: stat line + figures panel ─────────────────────────────────── */

.hub-statline { margin: -8px 0 26px; max-width: 36em; color: var(--ev-ink-2); font-size: 1rem; line-height: 1.55; }
.hub-statline b { color: var(--ev-lagoon); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.hub-panel { justify-self: end; width: 100%; max-width: 440px; }
.hub-panel > .ev-mono { color: var(--ev-tif-text); }
.hub-figs { display: grid; margin: 12px 0 0; }
.hub-fig { display: grid; gap: 4px; padding: 16px 0; border-top: 1px dashed var(--ev-line); }
.hub-fig:first-child { padding-top: 4px; border-top: 0; }
.hub-fig dt { order: 2; color: var(--ev-ink-3); font-size: .88rem; }
.hub-fig dd { order: 1; margin: 0; color: var(--ev-lagoon); font: 700 clamp(1.4rem, 1.05rem + 1.2vw, 1.9rem)/1.1 var(--ev-f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hub-fig:first-child dd { font-size: clamp(2.6rem, 1.8rem + 2.6vw, 3.8rem); }
.hub-fig small { order: 3; color: var(--ev-ink-3); font-size: .8rem; }
.hub-panel-note { margin: 12px 0 0; color: var(--ev-ink-3); font-size: .82rem; line-height: 1.45; }

/* ── Live listings ───────────────────────────────────────────────────── */

.hub-n { display: inline-flex; align-items: center; min-height: 32px; margin-left: 12px; padding: 0 13px; border-radius: 999px; background: var(--ev-lagoon); color: #fff; font: 700 .95rem/1 var(--ev-f-display); letter-spacing: 0; font-variant-numeric: tabular-nums; vertical-align: middle; transform: translateY(-2px); }
.hub-n[hidden] { display: none; }
.hub-grid { gap: 20px; }
.hub-grid > .hub-empty, .hub-grid > .hub-static { grid-column: 1 / -1; }
.hub-static { margin: 0; padding: 28px 24px; border-radius: var(--ev-r-md); background: var(--ev-mist); box-shadow: inset 0 0 0 1px var(--ev-line); color: var(--ev-ink-2); line-height: 1.55; }
.hub-static a { color: var(--ev-tif-text); font-weight: 600; }
.hub-card { animation: hub-rise .7s var(--ev-e-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes hub-rise { from { opacity: 0; transform: translateY(18px); } }
.hub-card-note { align-self: flex-start; padding: 4px 9px; border-radius: 8px; background: var(--ev-amber-soft); color: #5c4300; font-size: .76rem; font-weight: 600; line-height: 1.2; }
.hub-card .sx-foot { align-items: flex-end; flex-wrap: wrap; }
.hub-tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.hub-tags .ev-tag { padding: 5px 9px; font-size: .8rem; white-space: nowrap; }
.hub-empty h3 { max-width: 24em; }

.hub-near { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px dashed var(--ev-line); }
.hub-near[hidden] { display: none; }
.hub-near-head { max-width: 46em; margin-bottom: 24px; }
.hub-near-head .ev-mono { display: inline-flex; padding: 6px 10px; border-radius: 8px; background: var(--ev-amber-soft); color: #5c4300; }
.hub-near-head p { margin: 12px 0 0; color: var(--ev-ink-2); line-height: 1.55; }

/* ── Tables: what the budget buys, rent or buy ───────────────────────── */

.hub-table-wrap { overflow-x: auto; border-radius: var(--ev-r-md); background: #fff; box-shadow: 0 0 0 1px var(--ev-line); }
.hub-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .96rem; }
.hub-table th, .hub-table td { padding: 14px 18px; border-bottom: 1px solid var(--ev-line); text-align: left; vertical-align: top; line-height: 1.45; }
.hub-table thead th { background: var(--ev-mist); color: var(--ev-tif-text); font: 500 .75rem/1.3 var(--ev-f-mono); letter-spacing: .06em; text-transform: uppercase; }
.hub-table tbody th { color: var(--ev-ink); font-weight: 650; }
.hub-table td { color: var(--ev-ink-2); font-variant-numeric: tabular-nums; }
.hub-table tbody tr:last-child th, .hub-table tbody tr:last-child td { border-bottom: 0; }
.hub-table-note { margin: 14px 0 0; color: var(--ev-ink-3); font-size: .86rem; }
.hub-types[hidden] { display: none; }

/* ── Checklist cards ─────────────────────────────────────────────────── */

.hub-inc { padding: 24px 24px 26px; }
.hub-inc .sx-num { position: static; display: block; margin-bottom: 14px; opacity: 1; }
.hub-inc .ev-h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; }
.hub-inc p { max-width: 34em; }
/* A tenth point would stand alone in the three-column grid: it takes the row. */
.hub-grid > .hub-inc:nth-child(3n+1):last-child { grid-column: 1 / -1; }

/* ── FAQ, guides, other hubs ─────────────────────────────────────────── */

.hub-faq .ev-faq { max-width: 860px; }
.hub-guides a.ev-card { padding: 24px; }
.hub-others[hidden] { display: none; }
.hub-others .ev-chips { gap: 10px; }
.hub-others .ev-chip { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ev-line); }
.hub-chip-n { margin-left: 8px; padding: 2px 7px; border-radius: 999px; background: var(--ev-mist-2); color: var(--ev-lagoon); font: 600 .74rem/1.4 var(--ev-f-mono); }

/* the catalogue's hub lists carry the live count beside each link */
.bz-hub-n { flex: none; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--ev-mist-2); color: var(--ev-lagoon); font: 600 .74rem/1.5 var(--ev-f-mono); }

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  /* one column: the stat line under the lead already says what the panel says */
  .hub-panel { display: none; }
}
@media (max-width: 760px) {
  .hub-statline { margin-bottom: 22px; }
  .hub-inc { padding: 20px; }
  .hub-table th, .hub-table td { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card { animation: none; }
}