/* ============================================================
   OE GCI Archetype Opportunities & Challenges — block styles
   Rebuilt from the Global Cities Index 2026 microsite
   (pages.css ".opp-table" rules + styles.css ".panel" and
   ".table-scroll" rules + the @media max-width:920px release).

   Everything is prefixed oe-block-gci-opportunities__* 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 .panel surface and thead use literal
   #fff, as on the microsite.
   ============================================================ */

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

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

  /* --- elevation --- */
  --shadow-sm:0 2px 8px rgba(9,25,57,0.06);

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

  /* --- spacing --- */
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;

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

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

/* screen-reader-only utility (for the <caption>) */
.oe-block-gci-opportunities__sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* panel surface + scroll region (was .panel + .table-scroll) */
.oe-block-gci-opportunities__scroll{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm);
  overflow:auto;
  max-height:clamp(340px,calc(100vh - 270px),560px);
  overscroll-behavior:contain;
}

/* opportunities / challenges table */
.oe-block-gci-opportunities__table{
  width:100%;border-collapse:collapse;min-width:760px;
}
.oe-block-gci-opportunities__table th,
.oe-block-gci-opportunities__table td{
  text-align:left;vertical-align:top;padding:var(--sp-5) var(--sp-5);
  border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1.62;
}
.oe-block-gci-opportunities__table thead th{
  background:var(--oe-heritage-blue);color:#fff;font-weight:600;
  font-size:var(--fs-xs);letter-spacing:0.04em;text-transform:uppercase;
  padding-top:var(--sp-4);padding-bottom:var(--sp-4);
}
.oe-block-gci-opportunities__table tbody th{
  width:180px;font-weight:600;color:var(--oe-heritage-blue);font-size:var(--fs-sm);
}
.oe-block-gci-opportunities__table tbody tr:nth-child(even){background:var(--bg-subtle);}
.oe-block-gci-opportunities__table tbody tr:last-child th,
.oe-block-gci-opportunities__table tbody tr:last-child td{border-bottom:none;}

/* narrow screens — release the vertical cap (microsite @media max-width:920px);
   min-width:760px still forces horizontal scroll inside the region */
@media (max-width:920px){
  .oe-block-gci-opportunities__scroll{max-height:none;}
}