/* Websjekk Data & Infrastruktur method visual v2
   Purpose: remove dead whitespace and give the systemlaget method section a distinct
   editorial/system identity without changing its information contract. */

.source-graph-page[data-source-territory="systemlaget"] .source-graph-method.ws-data-method-v2 {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(34rem, 1.06fr);
  gap: clamp(2.2rem, 4vw, 5rem);
  align-items: stretch;
  min-height: 44rem;
  margin-top: 1rem;
  padding: clamp(2rem, 3.6vw, 4rem);
  overflow: hidden;
  border: 1px solid #d5dfe3;
  border-radius: clamp(1.2rem, 2vw, 1.8rem);
  color: #263039;
  background:
    radial-gradient(circle at 76% 40%, rgba(188, 208, 205, .22), transparent 26rem),
    linear-gradient(135deg, #f4f7f8 0%, #eef3f3 46%, #f7f8f7 100%);
  box-shadow: 0 1.3rem 4rem rgba(43, 58, 67, .05);
}

.ws-data-method-v2__left {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(2.5rem, 4vw, 5rem);
  min-width: 0;
}

.source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__copy h2 {
  max-width: 11ch;
  margin: 0;
  color: #243038;
  font-size: clamp(2.75rem, 4.6vw, 5rem);
  font-weight: 750;
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__copy > p:not(.source-graph-kicker) {
  max-width: 44ch;
  margin: 1.35rem 0 0;
  color: #6b7780;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.72;
}

.ws-data-method-v2__rail {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1.3rem;
  color: #536c64;
  font-size: .8rem;
  font-weight: 730;
  letter-spacing: .01em;
}

.ws-data-method-v2__rail i {
  color: #94a9a3;
  font-style: normal;
  font-weight: 500;
}

.source-graph-page[data-source-territory="systemlaget"] .source-graph-method__flow.ws-data-method-v2__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  align-items: stretch;
}

.source-graph-page[data-source-territory="systemlaget"] .source-graph-method__step.ws-data-method-v2__step {
  position: relative;
  min-height: 18rem;
  padding: 1.2rem 1.05rem 1.3rem;
  border: 1px solid rgba(106, 131, 139, .2);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 .75rem 2rem rgba(49, 67, 74, .035);
}

.source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__step .source-graph-method__index {
  display: block;
  padding-right: 2.6rem;
  color: #55778e;
  font-size: .78rem;
  font-weight: 760;
}

.ws-data-method-v2__step-icon {
  position: absolute;
  top: .95rem;
  right: .9rem;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid rgba(66, 104, 95, .1);
  border-radius: 999px;
  color: #315d53;
  background: #e3f0eb;
}

.ws-data-method-v2__step-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__step strong {
  display: block;
  max-width: 10ch;
  margin-top: 2rem;
  color: #273139;
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.28;
  letter-spacing: -.018em;
}

.source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__step p {
  margin: .65rem 0 0;
  color: #748087;
  font-size: .86rem;
  line-height: 1.55;
}

.ws-data-orbit {
  position: relative;
  min-height: 38rem;
  isolation: isolate;
}

.ws-data-orbit::before,
.ws-data-orbit::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.ws-data-orbit::before {
  width: 18rem;
  height: 18rem;
  right: -5rem;
  top: 3rem;
  border: 1px solid rgba(100, 126, 137, .08);
  background: rgba(255,255,255,.13);
}

.ws-data-orbit::after {
  width: 23rem;
  height: 23rem;
  left: 8rem;
  bottom: 2rem;
  border: 1px solid rgba(81, 116, 108, .06);
}

.ws-data-orbit__map {
  position: absolute;
  inset: 2rem 0 0;
  width: 100%;
  height: calc(100% - 2rem);
  overflow: visible;
}

.ws-data-orbit__ring,
.ws-data-orbit__path,
.ws-data-orbit__dash {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ws-data-orbit__ring {
  stroke: #aabcc3;
  stroke-width: 1;
  opacity: .42;
}

.ws-data-orbit__ring--b {
  stroke-dasharray: 5 7;
  opacity: .34;
}

.ws-data-orbit__ring--c {
  opacity: .22;
}

.ws-data-orbit__halo {
  fill: rgba(211, 224, 226, .45);
  stroke: rgba(140, 165, 171, .18);
  stroke-width: 1;
}

.ws-data-orbit__path {
  stroke: #8ca5aa;
  stroke-width: 1.1;
  opacity: .55;
}

.ws-data-orbit__path--soft {
  stroke-dasharray: 4 8;
  opacity: .34;
}

.ws-data-orbit__dash {
  stroke: #95adb2;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1 10;
  opacity: .45;
}

.ws-data-orbit__dot {
  fill: #607d87;
  opacity: .82;
}

.ws-data-orbit__core {
  position: absolute;
  left: 50%;
  top: 51%;
  z-index: 3;
  display: grid;
  width: 7.5rem;
  height: 7.5rem;
  place-items: center;
  border: 1px solid rgba(111, 137, 143, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  box-shadow:
    0 0 0 2rem rgba(201, 216, 218, .16),
    0 0 0 4.8rem rgba(201, 216, 218, .08),
    0 1.2rem 3rem rgba(65, 86, 92, .08);
  transform: translate(-50%, -50%);
}

.ws-data-orbit__core span {
  position: absolute;
  inset: -.75rem;
  border: 1px solid rgba(85, 119, 142, .12);
  border-radius: 50%;
}

.ws-data-orbit__core img {
  width: 3.2rem;
  height: 3.2rem;
}

.ws-data-orbit__node {
  position: absolute;
  z-index: 4;
  display: flex;
  gap: .75rem;
  align-items: center;
  width: 13rem;
  color: #2d3b40;
}

.ws-data-orbit__glyph {
  display: grid;
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  place-items: center;
  border: 1px solid rgba(77, 111, 105, .14);
  border-radius: 50%;
  color: #315d53;
  background: rgba(220, 235, 229, .9);
  box-shadow: 0 .65rem 1.9rem rgba(56, 79, 74, .055);
}

.ws-data-orbit__glyph svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ws-data-orbit__node strong,
.ws-data-orbit__node small {
  display: block;
}

.ws-data-orbit__node strong {
  margin-bottom: .35rem;
  color: #2b383d;
  font-size: .78rem;
  letter-spacing: .01em;
}

.ws-data-orbit__node small {
  max-width: 12ch;
  color: #66757a;
  font-size: .7rem;
  line-height: 1.42;
}

.ws-data-orbit__node--see { left: 1%; top: 5%; }
.ws-data-orbit__node--check { right: -1%; top: 8%; }
.ws-data-orbit__node--understand { left: -2%; bottom: 5%; }
.ws-data-orbit__node--assess { right: -2%; bottom: 7%; }

.ws-data-orbit__dots {
  position: absolute;
  z-index: 1;
  width: 4.3rem;
  height: 3rem;
  opacity: .5;
  background-image: radial-gradient(circle, rgba(78, 119, 109, .45) 1.4px, transparent 1.5px);
  background-size: .75rem .75rem;
}

.ws-data-orbit__dots--top { right: 16%; top: 14%; }
.ws-data-orbit__dots--bottom { right: 18%; bottom: 4%; }

@media (hover:hover) and (pointer:fine) {
  .ws-data-method-v2__step,
  .ws-data-orbit__node,
  .ws-data-orbit__core {
    transition: transform 260ms cubic-bezier(.2,.72,.22,1), box-shadow 260ms cubic-bezier(.2,.72,.22,1);
  }

  .ws-data-method-v2__step:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.2rem 2.5rem rgba(49,67,74,.065);
  }

  .ws-data-method-v2[data-ws-seen="true"] .ws-data-orbit__core {
    animation: ws-data-core-arrive 680ms cubic-bezier(.16,1,.3,1) both;
  }

  .ws-data-method-v2[data-ws-seen="true"] .ws-data-orbit__node {
    animation: ws-data-node-arrive 620ms cubic-bezier(.16,1,.3,1) both;
  }

  .ws-data-method-v2[data-ws-seen="true"] .ws-data-orbit__node--check { animation-delay: 80ms; }
  .ws-data-method-v2[data-ws-seen="true"] .ws-data-orbit__node--understand { animation-delay: 150ms; }
  .ws-data-method-v2[data-ws-seen="true"] .ws-data-orbit__node--assess { animation-delay: 220ms; }
}

@keyframes ws-data-core-arrive {
  from { opacity: .2; transform: translate(-50%, -50%) scale(.88); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes ws-data-node-arrive {
  from { opacity: .45; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 76rem) {
  .source-graph-page[data-source-territory="systemlaget"] .source-graph-method.ws-data-method-v2 {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ws-data-orbit {
    min-height: 35rem;
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 56rem) {
  .source-graph-page[data-source-territory="systemlaget"] .source-graph-method__flow.ws-data-method-v2__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__step {
    min-height: 13rem;
  }
}

@media (max-width: 42rem) {
  .source-graph-page[data-source-territory="systemlaget"] .source-graph-method.ws-data-method-v2 {
    padding: 1.15rem;
  }

  .source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__copy h2 {
    font-size: clamp(2.25rem, 12vw, 3.45rem);
  }

  .source-graph-page[data-source-territory="systemlaget"] .source-graph-method__flow.ws-data-method-v2__steps {
    grid-template-columns: 1fr;
  }

  .source-graph-page[data-source-territory="systemlaget"] .ws-data-method-v2__step {
    min-height: 0;
  }

  .ws-data-orbit {
    min-height: 36rem;
    overflow: hidden;
  }

  .ws-data-orbit__map {
    inset: 4rem -7rem 0;
    width: calc(100% + 14rem);
  }

  .ws-data-orbit__core {
    top: 50%;
    width: 6rem;
    height: 6rem;
  }

  .ws-data-orbit__glyph {
    width: 4.2rem;
    height: 4.2rem;
  }

  .ws-data-orbit__glyph svg {
    width: 2rem;
    height: 2rem;
  }

  .ws-data-orbit__node {
    width: 10.4rem;
    gap: .5rem;
  }

  .ws-data-orbit__node small {
    font-size: .65rem;
  }

  .ws-data-orbit__node--see { left: 0; top: 2%; }
  .ws-data-orbit__node--check { right: -1rem; top: 9%; }
  .ws-data-orbit__node--understand { left: -1rem; bottom: 8%; }
  .ws-data-orbit__node--assess { right: -1.2rem; bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-data-method-v2__step,
  .ws-data-orbit__node,
  .ws-data-orbit__core {
    animation: none !important;
    transition: none !important;
  }
}