/* Governance, ronde 9. Overschrijft de governance-regels uit oplossingen.css (die blijft gedeeld en ongewijzigd).
   Volgorde: opening met zonnestelsel, de lichtbundel van Copilot, de twee onderdelen, het ISMS-dashboard voor de aardrand, slot. */

/* ── Opening: banen fijn en scherp; de achterste helft van elke baan iets zachter dan de voorste ── */
.go-baan { fill: none; stroke: rgb(143, 211, 240); stroke-width: 1; }
/* het zonnestelsel iets hoger, zodat zon en planeten vrij boven het product staan */
@media (min-width: 1101px) { .go-hemel { top: -258px; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .s-open--product .s-open__beeld:has(.go-hemel) { margin-top: 120px; }
  .go-hemel { top: -215px; right: -16%; width: 92%; }
}

/* ── De lichtbundel van Copilot ── */
.go-bundel-sectie { overflow: clip; padding-block: 88px; }
.go-bundel__sfeer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.go-bundel__sfeer::before, .go-bundel__sfeer::after { content: ""; position: absolute; pointer-events: none; }
/* nevel achter het veld, nooit achter de tekst */
.go-bundel__sfeer::before { right: -6%; top: 2%; bottom: 2%; width: 56%; background: url("../../sfeer/v2/nevel-paars.webp") center / contain no-repeat; opacity: .16;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
/* zachte gloed waar de bundel vandaan komt */
.go-bundel__sfeer::after { right: 8%; bottom: 12%; width: 46%; height: 44%;
  background: radial-gradient(closest-side, rgba(94, 151, 255, .18), rgba(123, 74, 226, .06) 60%, rgba(123, 74, 226, 0)); }
.go-bundel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.go-bundel .s-kop2 { max-width: none; }
.go-bundel__tekst .s-groot { margin-top: 24px; }
.go-bundel__meer { margin-top: 16px; }
.go-bundel__meer p { font-size: 15px; line-height: 1.6; color: var(--tekst-2); max-width: 32em; }
.go-bundel__keuze { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.go-bundel__keuze .knop { min-width: 168px; background: transparent; cursor: pointer; font: inherit; font-weight: 600; }
.go-bundel__stand { font-size: 15px; line-height: 1.45; color: var(--wit); max-width: 22em; }

.go-veld { position: relative; margin: 0; }
.go-veld__vak { position: relative; height: 470px; }
/* De bundel loopt naar de zijkanten en naar boven zacht uit; hij wordt nergens recht afgesneden. */
.go-veld__bundel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.go-doc { position: absolute; left: calc(var(--x) * 100%); top: calc(10px + var(--rij) * 28px); margin: 0;
  transform: translateX(calc(var(--x) * -100%)); display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--wit); opacity: .3; transition: opacity 280ms var(--erin); }
.go-doc i { position: relative; flex: none; width: 12px; height: 15px; border-radius: 2px; box-shadow: inset 0 0 0 1.2px currentColor; }
.go-doc i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1px; background: currentColor; box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor; opacity: .7; }
.go-doc b { font-weight: 500; }
.go-doc__label { transition: background-color 200ms var(--erin), color 200ms var(--erin); font-size: 12px; line-height: 20px; letter-spacing: .02em; padding: 0 8px; border-radius: 3px; color: var(--ijs); box-shadow: inset 0 0 0 1px rgba(171, 225, 246, .45); }
.go-doc__wie { font-size: 12px; color: rgba(233, 238, 251, .75); opacity: 0; transition: opacity 200ms var(--erin); }
.go-doc.is-gezien { opacity: 1; text-shadow: 0 0 12px rgba(143, 211, 240, .55); }
.go-doc.is-gevoelig.is-gezien .go-doc__label { color: var(--wit); background: rgba(123, 74, 226, .4); box-shadow: inset 0 0 0 1px rgba(167, 128, 246, .8), 0 0 14px rgba(123, 74, 226, .45); }
/* Na het opruimen: het label blijft, de bundel slaat het bestand over en er staat bij wie het nog mag openen. */
.go-doc.is-dicht i { box-shadow: inset 0 0 0 1.2px rgba(233, 238, 251, .5); }
.go-doc.is-dicht.is-gezien { opacity: .3; text-shadow: none; }
.go-doc.is-dicht.is-gezien .go-doc__label { color: var(--ijs); background: none; box-shadow: inset 0 0 0 1px rgba(171, 225, 246, .45); }
.go-doc.is-dicht .go-doc__wie { opacity: 1; }
.go-veld__bron { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ijs); }
.go-veld__bron img { width: 26px; height: 26px; filter: drop-shadow(0 0 10px rgba(94, 151, 255, .8)); }
.go-veld__noot { margin-top: 14px; font-size: 13px; color: var(--tekst-3); text-align: center; }

/* ── ISMS-dashboard voor de aardrand ── */
.go-dash-sectie { overflow: clip; }
.go-dash { position: relative; z-index: 1; }
/* De aarde loopt 160 px het slot in en dooft daar uit, zodat de sectie niet met een rechte rand ophoudt.
   Het masker knipt de laag op zijn eigen vak; het vak schuift tot ~36 px mee (data-diepte .04). */
.go-dash-sectie { overflow-x: clip; overflow-y: visible; }
.go-aarde { position: absolute; inset: 0 0 -160px; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 330px), rgba(0, 0, 0, .5) calc(100% - 200px), transparent calc(100% - 60px));
  mask-image: linear-gradient(180deg, #000 calc(100% - 330px), rgba(0, 0, 0, .5) calc(100% - 200px), transparent calc(100% - 60px)); }
.go-aarde__bol, .go-aarde__poollicht { position: absolute; display: block; background: center / 100% 100% no-repeat; }
.go-aarde__bol { background-image: url("../../aarde-nacht.webp"); aspect-ratio: 1536 / 1024; }
.go-aarde__poollicht { background-image: url("../../poollicht.webp"); aspect-ratio: 2172 / 724; }
/* aardrand schuin door het beeld, stijgend naar rechts; boven de rand alleen nacht, dus geen tekst op licht */
.go-aarde__bol { width: 1760px; left: 50%; bottom: -10px; transform: translateX(-44%) rotate(-6deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 62%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 50%, #000 62%), linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.go-aarde__poollicht { width: 1240px; right: -14%; bottom: 580px; opacity: .62;
  -webkit-mask-image: radial-gradient(52% 62% at 66% 64%, #000 28%, transparent 78%); mask-image: radial-gradient(52% 62% at 66% 64%, #000 28%, transparent 78%); }
/* de warme rand waar de zon net achter de aarde opkomt */
.go-aarde__dageraad { position: absolute; right: -180px; bottom: 630px; width: 620px; height: 220px; transform: rotate(-6deg);
  background: radial-gradient(closest-side, rgba(255, 196, 128, .32), rgba(255, 150, 96, .12) 45%, rgba(255, 150, 96, 0) 100%); }
.go-dash__beeld .go-isms { box-shadow: 0 40px 80px -30px rgba(2, 6, 18, .9); }

@media (max-width: 1100px) {
  .go-bundel { gap: 32px 48px; }
  .go-aarde__bol { width: 1400px; bottom: 40px; }
  .go-aarde__poollicht { width: 1000px; bottom: 420px; }
}
@media (max-width: 900px) {
  .go-bundel { grid-template-columns: minmax(0, 1fr); }
  .go-bundel .s-kop2 { max-width: 18ch; }
  .go-bundel__sfeer::before { top: auto; bottom: 0; height: 50%; width: 100%; right: -20%; }
  .go-veld { max-width: 560px; }
  .go-aarde__bol { width: 1100px; bottom: 40px; transform: translateX(-50%) rotate(-6deg); }
  .go-aarde__poollicht { width: 900px; right: -40%; bottom: 360px; }
  .go-aarde__dageraad { right: -260px; bottom: 400px; }
}
@media (max-width: 560px) {
  .go-veld__vak { height: 490px; }
  .go-doc { font-size: 13px; top: calc(12px + var(--rij) * 30px); }
  .go-bundel__keuze .knop { width: 100%; }
  .go-aarde__bol { width: 820px; bottom: 60px; }
  .go-aarde__dageraad { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .go-doc, .go-doc__wie, .go-doc__label { transition: none; }
}