/* mitre-hero.css — visual signal nodes. Load AFTER mitre.css / mitre-hero-glow.css / ai-esi.css.
   Self-contained: does not depend on a `.hero` class. Nodes are sized/positioned as % of the field. */

.mitre-hero .signal-field {
  position: relative;
  width: min(560px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin: auto;
  overflow: visible;
}

/* Glass panel + glowing border */
.mitre-hero .signal-field .signal-node.has-viz {
  position: absolute;
  display: block;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 6px;
  border-radius: 6px;
  letter-spacing: 0;
  border: 1px solid rgba(95, 212, 255, .5);
  background: linear-gradient(145deg, rgba(144, 235, 255, .09), rgba(179, 140, 255, .06));
  backdrop-filter: blur(6px);
  box-shadow:
    0 0 0 1px rgba(18, 192, 255, .08),
    0 0 26px rgba(18, 192, 255, .22),
    inset 0 0 20px rgba(18, 192, 255, .07);
  transform: translate(-50%, -50%);
}
.mitre-hero .signal-field .signal-node.has-viz img,
.mitre-hero .signal-field .signal-node.has-viz svg { display: block; width: 100%; height: 100%; object-fit: contain; }

/* size (width = % of field, height from aspect-ratio) + centre position */
.mitre-hero .signal-field .signal-node.has-viz.n-10    { width: 56%; aspect-ratio: 260 / 173; top: 7%; left: 15%; }  /* research */
.mitre-hero .signal-field .signal-node.has-viz.n-2     { width: 51%; aspect-ratio: 200 / 270; top: 6%; left: 104%; }  /* service  */
.mitre-hero .signal-field .signal-node.has-viz.n-4     { width: 52%; aspect-ratio: 300 / 150; top: 87%; left: 91%; }  /* process  */
.mitre-hero .signal-field .signal-node.has-viz.n-8     { width: 30%; aspect-ratio: 120 / 230; top: 87%; left: 16%;  }  /* data     */
.mitre-hero .signal-field .signal-node.has-viz.n-sub-4 { width: 84%; aspect-ratio: 180 / 120; top: 50%; left: 50%; opacity: 1; } /* agents */

/* remaining label squares: keep them clear of the visual cards */
.mitre-hero .signal-field .signal-node.is-square.n-sub-1 { top: 42%; left: -3%; }
.mitre-hero .signal-field .signal-node.is-square.n-sub-2 { top: 9%;  left: 61%; }
.mitre-hero .signal-field .signal-node.is-square.n-sub-3 { top: 59%; left: 103%; }

.evidence-grid > article:last-child > span { margin-left: 110px;} 

@media (max-width: 640px) {
  .mitre-hero .signal-field { width: 100%; scale: .85; left: -5%;}
  .mitre-hero .signal-field .signal-node.is-square { width: 144px; height: 36px; }
  .mitre-hero-grid > div:first-child {  margin-bottom: 50px;}
    .evidence-grid > article:last-child > span {
    /*margin-left: 110px;*/
    width: 65%;
  }
}