/* ==========================================================================
   /insights/ hero — the title beside the Insights map card (design-compare
   "window" a, slimmed by imp-pages, 17 Oct 2026).
   The card is at most half the screen tall at every width. Its first paint is
   a still (the constellation's own atlas + "Think globally."), drawn in CSS;
   on wide screens php-assets/insights-map.js mounts the live map
   (/constellation/?embed=1) inside it once the page has loaded and the card is
   on screen, and fades it in when the map says it is ready. Phones keep the
   still: the card is a plain link to /constellation/. Tokens only (clay.css).
   ========================================================================== */
.ins-hero { padding-bottom: clamp(24px, 3vw, 44px); }
.ins-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.ins-hero__copy h1 { margin-top: 22px; max-width: 12ch; }
.ins-hero__copy .body { margin-top: 22px; max-width: 40ch; }

.ins-map {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  height: clamp(220px, 42vh, 400px);
  border-radius: var(--r-xl);
  background: var(--sand-952b);
  box-shadow: var(--clay-lg), inset 0 0 0 1px rgba(var(--shade), .14);
  color: var(--ink); text-decoration: none;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.ins-map:hover { box-shadow: var(--clay-hover, var(--clay-lg)), inset 0 0 0 1px rgba(var(--shade), .18); }
.ins-map:focus { outline: none; }
.ins-map:focus-visible { box-shadow: var(--clay-lg), inset 0 0 0 3px rgba(var(--bronze-rgb), .9); }

.ins-map__stage { position: absolute; inset: 0; z-index: 0; }
/* the still: the same atlas (at the map's own 26% strength) and words as the map's cover */
.ins-map__still {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 18% 8%, var(--sand-985) 0%, var(--sand-952b) 48%, var(--sand-926) 100%);
  transition: opacity .6s var(--ease);
}
.ins-map__still::before {
  content: ""; position: absolute; inset: 0; opacity: .26;
  background: url(/assets/v2img/worldmap.svg) 58% 62% / 150% auto no-repeat, rgba(var(--ink-rgb), .45);
}
html[data-theme="blue"] .ins-map__still::before { background-image: url(/assets/v2img/worldmap-blue.svg); }
.ins-map__still::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(78% 68% at 42% 44%, rgba(255, 255, 255, 0) 42%, rgba(var(--shade), .13) 100%);
}
.ins-map__words {
  position: relative; z-index: 1; margin-top: -12%;
  font: 200 clamp(2.25rem, 4.6vw, 4.25rem)/.94 Newsreader, Georgia, serif; letter-spacing: -.015em;
  color: var(--ink); white-space: nowrap;
  text-shadow: -1px -1px 2px rgba(255, 255, 255, .9), 1px 1px 0 rgba(var(--ink-rgb), .55), 3px 4px 9px rgba(var(--ink-rgb), .22);
}
/* the live map, laid out at its stage size and scaled to cover the card (JS writes --k, --x, --y) */
.ins-map__live {
  position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0;
  transform-origin: 0 0; transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--k, .4));
  pointer-events: none; opacity: 0; transition: opacity .7s var(--ease);
  background: var(--sand-952b);
}
.ins-map.is-live .ins-map__live { opacity: 1; }
.ins-map.is-live .ins-map__still { opacity: 0; }

.ins-map__cap {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 18px;
  padding: 14px 18px; border-radius: calc(var(--r-xl) - 14px);
  background: rgba(var(--cream-rgb), .82);
  -webkit-backdrop-filter: blur(10px) saturate(1.05); backdrop-filter: blur(10px) saturate(1.05);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 6px 18px rgba(var(--shade), .14);
}
.ins-map__k { grid-column: 1 / -1; font: 500 12px/1.4 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-deep); }
.ins-map__t { font: 400 14px/1.5 Inter, sans-serif; color: var(--ink-muted); }
.ins-map__go { font-size: 14px; white-space: nowrap; }

/* the list under it: no glide target to clear any more */
body:has(.ins-hero) .posts-section { padding-top: clamp(48px, 6vw, 88px); }

@media (max-width: 940px) {
  .ins-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ins-map { height: clamp(200px, 34vh, 280px); border-radius: var(--r-lg, 26px); }
  .ins-map__cap { border-radius: calc(var(--r-lg, 26px) - 12px); left: 12px; right: 12px; bottom: 12px; padding: 12px 14px; }
}
@media (max-width: 560px) {
  .ins-map__cap { grid-template-columns: minmax(0, 1fr); }
  .ins-map__t { display: none; }
  .ins-map__words { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-map, .ins-map__still, .ins-map__live { transition: none; }
}