/* ============================================================
   OE GCI Score by Archetype — block styles
   Rebuilt from the Global Cities Index 2026 microsite
   (pages.css "score-by-archetype small multiples" + the
   .chart-source rule + the max-width:760px responsive tweak).

   Everything is prefixed oe-block-gci-archetypes__* and the
   microsite design tokens are inlined onto the block root (scoped
   custom properties), so the block is fully self-contained and never
   inherits or leaks site variables. Fonts are intentionally NOT set —
   they inherit from the site.

   The per-panel accent colour is passed down from index.php via the
   scoped --oe-block-gci-archetypes-panel-colour custom property set on
   each .oe-block-gci-archetypes__panel (was --panel-colour on the
   microsite).
   ============================================================ */

.oe-block-gci-archetypes{
  /* --- brand --- */
  --oe-heritage-blue:#003466;

  /* --- category colours (panel accents: dot + bars) --- */
  --oe-block-gci-archetypes-cat-overall:#003466;
  --oe-block-gci-archetypes-cat-economics:#008AC8;
  --oe-block-gci-archetypes-cat-human:#B3107A;
  --oe-block-gci-archetypes-cat-qol:#B38D2F;
  --oe-block-gci-archetypes-cat-environment:#8BA612;
  --oe-block-gci-archetypes-cat-governance:#30B5AE;

  /* --- surfaces / lines --- */
  --bg-page:#FFFFFF;
  --line:rgba(0,52,102,0.10);

  /* --- text --- */
  --text-body:#455055;
  --text-muted:#7C8891;

  /* --- radii --- */
  --r-lg:20px;
  --r-pill:999px;

  /* --- spacing --- */
  --sp-3:12px;
  --sp-5:20px;
  --sp-6:24px;

  /* --- type sizes --- */
  --fs-xs:0.775rem;
  --fs-sm:0.85rem;
}

.oe-block-gci-archetypes *{ box-sizing:border-box; }

/* small-multiples grid */
.oe-block-gci-archetypes__chart{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-6);
}
.oe-block-gci-archetypes__panel{
  margin:0;background:var(--bg-page);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--sp-6);
}
.oe-block-gci-archetypes__caption{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-sm);font-weight:600;color:var(--oe-heritage-blue);
  margin-bottom:var(--sp-5);
}
.oe-block-gci-archetypes__dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--oe-block-gci-archetypes-panel-colour);flex-shrink:0;
}
.oe-block-gci-archetypes__list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
}
.oe-block-gci-archetypes__row{
  display:grid;grid-template-columns:126px 1fr 38px;align-items:center;gap:var(--sp-3);
}
.oe-block-gci-archetypes__name{font-size:11px;color:var(--text-body);line-height:1.25;}
.oe-block-gci-archetypes__track{
  height:9px;border-radius:var(--r-pill);background:rgba(0,52,102,0.07);overflow:hidden;
}
.oe-block-gci-archetypes__bar{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--oe-block-gci-archetypes-panel-colour);opacity:0.88;
}
.oe-block-gci-archetypes__val{
  font-size:11px;font-weight:600;color:var(--oe-heritage-blue);
  text-align:right;font-variant-numeric:tabular-nums;
}

/* source / attribution line (was .chart-source on the microsite) */
.oe-block-gci-archetypes__source{
  margin:var(--sp-5) 0 0;font-size:var(--fs-xs);color:var(--text-muted);
}

/* narrow screens — tighten the row columns (microsite @media max-width:760px) */
@media (max-width:760px){
  .oe-block-gci-archetypes__row{grid-template-columns:110px 1fr 34px;}
}