/* Marqstats industry hub pages - light theme v2 (Aug 2026)
   Palette, type and radii inherited from rd-v8.css (report detail template)
   and the homepage: Inter UI, Lora headings, brand blue #3b5de7, navy ink
   #0f1d3d, white surfaces, gray hairlines. */

:root {
  --hb-blue-50:#f0f5ff;
  --hb-blue-100:#e0eaff;
  --hb-blue-200:#c7d7fe;
  --hb-blue-400:#7c9cf9;
  --hb-blue-500:#5b7bf3;
  --hb-blue-600:#3b5de7;
  --hb-blue-700:#2d4ad4;
  --hb-navy:#0f1d3d;
  --hb-ink:#1a1a2e;
  --hb-body:#2b2b2b;
  --hb-g50:#f9fafb;
  --hb-g100:#f3f4f6;
  --hb-g200:#e5e7eb;
  --hb-g300:#d1d5db;
  --hb-g400:#9ca3af;
  --hb-g500:#6b7280;
  --hb-g600:#4b5563;
  --hb-g700:#374151;
  --hb-line:#e8ebf1;
  --hb-sh:0 1px 2px rgba(15,29,61,.04), 0 1px 3px rgba(15,29,61,.03);
  --hb-sh-lg:0 10px 28px rgba(15,29,61,.07);
  --hb-serif:'Lora', Georgia, 'Times New Roman', serif;
  --hb-sans:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Page shell ------------------------------------------------------- */
html, body { background:#fff; }
body { color:var(--hb-body); }
.hub-page { display:block; background:#fff; font-family:var(--hb-sans); -webkit-font-smoothing:antialiased; }
.hub-page *, .hub-page *::before, .hub-page *::after { box-sizing:border-box; }

/* ---- Hero band (light, matches homepage/RD accent colours) ------------ */
.hub-hero { position:relative; overflow:hidden; background:#fbfcff; border-bottom:1px solid var(--hb-g200); }
.hub-hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 95% at 88% -12%, rgba(59,93,231,.11), transparent 70%),
    radial-gradient(ellipse 60% 70% at 0% 105%, rgba(91,123,243,.07), transparent 70%);
}
.hub-hero::after {
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--hb-blue-600), var(--hb-blue-400) 45%, rgba(59,93,231,0));
}
.hub-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:26px 16px 42px; }

.hub-crumbs {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 22px;
  font-size:12px; font-weight:500; color:var(--hb-g500);
}
.hub-crumbs a { color:var(--hb-g600); text-decoration:none; }
.hub-crumbs a:hover { color:var(--hb-blue-600); text-decoration:underline; }
.hub-crumbs .sep { color:var(--hb-g300); }
.hub-crumbs span:last-child { color:var(--hb-navy); font-weight:600; }

.hub-head h1 {
  margin:0; max-width:18em; font-family:var(--hb-serif); font-weight:700;
  font-size:clamp(29px, 4.2vw, 42px); line-height:1.14; letter-spacing:-.02em;
  color:var(--hb-navy);
}
.hub-lede {
  margin:14px 0 0; max-width:660px; font-size:16.5px; line-height:1.72;
  font-weight:400; color:var(--hb-g600);
}

.hub-stats { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.hub-stat {
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  border-radius:999px; background:#fff; border:1px solid var(--hb-g200);
  box-shadow:var(--hb-sh); font-size:12.5px; color:var(--hb-g600); white-space:nowrap;
}
.hub-stat::before { content:''; flex:none; width:6px; height:6px; border-radius:50%; background:var(--hb-blue-500); }
.hub-stat b { color:var(--hb-navy); font-weight:700; font-size:13px; }

/* ---- Buttons ---------------------------------------------------------- */
.hub-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hub-cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:8px; border:1px solid transparent;
  font-family:var(--hb-sans); font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.hub-cta-primary { background:var(--hb-blue-600); color:#fff; box-shadow:0 1px 2px rgba(15,29,61,.08), 0 6px 16px rgba(59,93,231,.20); }
.hub-cta-primary:hover { background:var(--hb-blue-700); color:#fff; transform:translateY(-1px); }
.hub-cta-ghost { background:#fff; color:var(--hb-g700); border-color:var(--hb-g300); }
.hub-cta-ghost:hover { background:var(--hb-blue-50); color:var(--hb-blue-700); border-color:var(--hb-blue-600); }

/* ---- Layout ----------------------------------------------------------- */
.hub-shell { max-width:1200px; margin:0 auto; padding:32px 16px 76px; background:#fff; }
.hub-body { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:26px; align-items:start; }
.hub-main { min-width:0; }

.hub-card {
  background:#fff; border:1px solid var(--hb-line); border-radius:14px;
  padding:26px 28px; margin-bottom:20px; box-shadow:var(--hb-sh);
}
.hub-card:last-child { margin-bottom:0; }
#reports { scroll-margin-top:96px; }

.hub-main .hub-card > h2 {
  position:relative; margin:0 0 20px; padding-bottom:14px;
  border-bottom:1px solid var(--hb-g200);
  font-family:var(--hb-serif); font-size:23px; font-weight:700;
  line-height:1.28; letter-spacing:-.02em; color:var(--hb-ink);
}
.hub-main .hub-card > h2::after {
  content:''; position:absolute; left:0; bottom:-1px; width:56px; height:2px;
  background:var(--hb-blue-600);
}

/* ---- Editorial copy --------------------------------------------------- */
.hub-prose p { margin:0 0 14px; font-size:15px; line-height:1.85; color:var(--hb-body); }
.hub-prose p:last-child { margin-bottom:0; }
.hub-prose strong { color:var(--hb-ink); font-weight:600; }
.hub-prose ul { margin:0 0 14px; padding-left:20px; }
.hub-prose li { font-size:15px; line-height:1.8; color:var(--hb-body); margin-bottom:6px; }

/* ---- What we cover ---------------------------------------------------- */
.hub-cov { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.hub-cov > li {
  position:relative; overflow:hidden; padding:16px 18px;
  border:1px solid var(--hb-g200); border-radius:12px; background:var(--hb-g50);
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.hub-cov > li::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--hb-blue-600); opacity:0; transition:opacity .18s;
}
.hub-cov > li:hover { background:#fff; border-color:var(--hb-blue-200); box-shadow:var(--hb-sh-lg); }
.hub-cov > li:hover::before { opacity:1; }
.cv-h { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:7px; }
.cv-h a, .cv-t {
  font-size:15px; font-weight:700; line-height:1.4; letter-spacing:-.01em;
  color:var(--hb-navy); text-decoration:none;
}
.cv-h a:hover { color:var(--hb-blue-600); }
.cv-n {
  flex:none; margin-top:2px; padding:2px 10px; border-radius:999px;
  font-size:11px; font-weight:700; line-height:1.6; white-space:nowrap;
  color:var(--hb-blue-700); background:var(--hb-blue-50); border:1px solid var(--hb-blue-100);
}
.hub-cov > li:has(.cv-t) { background:#fff; border-style:dashed; }
.hub-cov > li:has(.cv-t) .cv-n { color:var(--hb-g500); background:var(--hb-g100); border-color:var(--hb-g200); }
.hub-cov p { margin:0; font-size:13.5px; line-height:1.7; color:var(--hb-g600); }

/* ---- Report list, grouped by subvertical ------------------------------ */
.hub-group { margin-bottom:30px; scroll-margin-top:96px; }
.hub-group:last-child { margin-bottom:0; }
.hub-group > h3 {
  display:flex; align-items:center; gap:10px; margin:0 0 4px; padding:0 0 10px 14px;
  border-bottom:1px solid var(--hb-g200);
  font-family:var(--hb-sans); font-size:11.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--hb-navy);
}
.gn {
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
  letter-spacing:0; text-transform:none;
  color:var(--hb-blue-700); background:var(--hb-blue-50); border:1px solid var(--hb-blue-100);
}
.hub-list { list-style:none; margin:0; padding:0; }
.hub-list > li {
  padding:14px 0 14px 14px; border-bottom:1px solid var(--hb-g100);
  border-radius:0 8px 8px 0; box-shadow:inset 2px 0 0 transparent;
  transition:background .16s, box-shadow .16s;
}
.hub-list > li:hover { background:var(--hb-g50); box-shadow:inset 2px 0 0 var(--hb-blue-600); }
.hub-list > li:last-child { border-bottom:none; }
.rt {
  display:block; font-size:15px; font-weight:600; line-height:1.5;
  letter-spacing:-.01em; color:var(--hb-navy); text-decoration:none;
}
.rt:hover { color:var(--hb-blue-600); }
.rmeta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:6px; font-size:12px; color:var(--hb-g500); }
.rmeta .dot { color:var(--hb-g300); }

/* ---- Sidebar ---------------------------------------------------------- */
.hub-side { position:sticky; top:92px; align-self:start; min-width:0; }
.hub-side .hub-card { padding:20px; }
.hub-side .hub-card > h2 {
  margin:0 0 12px; padding-bottom:12px; border-bottom:1px solid var(--hb-g200);
  font-family:var(--hb-sans); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--hb-blue-700);
}
.hub-side ul { list-style:none; margin:0; padding:0; }
.hub-side li { border-bottom:1px solid var(--hb-g100); }
.hub-side li:last-child { border-bottom:none; }
.hub-side li > a {
  display:block; padding:11px 10px; margin:0 -10px; border-radius:8px;
  font-size:13.5px; font-weight:600; line-height:1.45;
  color:var(--hb-navy); text-decoration:none;
  transition:background .16s, color .16s;
}
.hub-side li > a:hover { background:var(--hb-blue-50); color:var(--hb-blue-700); }
.hub-side .sn { display:block; margin-top:4px; font-size:12px; font-weight:400; line-height:1.6; color:var(--hb-g500); }
.hub-side p { margin:0 0 14px; font-size:13px; line-height:1.75; color:var(--hb-g600); }
.hub-side .hub-cta { width:100%; }

/* Markets-covered card: report counts sit inline on the right */
.hub-side .hub-card:has(a[rel="nofollow"]) li > a { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hub-side .hub-card:has(a[rel="nofollow"]) .sn {
  display:inline-block; flex:none; margin:0; font-size:11px; font-weight:600; color:var(--hb-g400);
}
/* Enquiry card gets a soft brand wash */
.hub-side .hub-card:has(.hub-cta) { background:linear-gradient(180deg, var(--hb-blue-50), #fff 70%); border-color:var(--hb-blue-100); }
.hub-side .hub-card:has(.hub-cta) > h2 { border-bottom-color:var(--hb-blue-100); }

/* ---- Empty state ------------------------------------------------------ */
.hub-empty {
  margin:0; padding:20px 22px; border:1px dashed var(--hb-g300); border-radius:12px;
  background:var(--hb-g50); font-size:14px; line-height:1.8; color:var(--hb-g600);
}
.hub-empty strong { display:block; margin-bottom:4px; color:var(--hb-navy); font-weight:700; }

/* ---- Focus ------------------------------------------------------------ */
.hub-page a:focus-visible { outline:2px solid var(--hb-blue-600); outline-offset:2px; border-radius:4px; }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 1060px) {
  .hub-body { grid-template-columns:1fr; }
  .hub-side { position:static; }
}
@media (max-width: 760px) {
  .hub-cov { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .hub-hero-inner { padding:20px 16px 32px; }
  .hub-crumbs { margin-bottom:16px; font-size:11.5px; }
  .hub-lede { font-size:15px; }
  .hub-stats { gap:8px; margin-top:20px; }
  .hub-stat { padding:7px 12px; font-size:12px; }
  .hub-shell { padding:22px 16px 56px; }
  .hub-card { padding:20px 18px; border-radius:12px; }
  .hub-main .hub-card > h2 { font-size:20px; }
  .hub-cta { width:100%; }
  .cv-h { flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hub-page * { transition:none !important; }
  .hub-cta-primary:hover { transform:none; }
}
