/* MC-Node — /vps-hosting en /minecraft-vps (20-10-2026). Aanvulling op css/vps-v2.css (dezelfde tokens en vormtaal: tegels met
   dunne rand, accentblauw, geen kickers of bijschriften). Alles gescoped op .vp, behalve het pagina-niveau hieronder.
   Pagina-niveau: header.tpl kent deze twee templates (nog) niet, dus de body krijgt geen .mc-dark en de inhoud staat in
   .mc-main.container. Dat vangen we hier af op body[data-page], met dezelfde specificiteit als de .mc-dark-regels in custom.css,
   zodat de pagina er precies zo uitziet als de andere donkere pagina's. Bij de livegang kunnen deze regels blijven staan. */
body.mc[data-page="pages/vpshosting"],body.mc[data-page="pages/minecraftvps"]{background:var(--mc-bg);color:var(--mc-text);overflow-x:clip}
body[data-page="pages/vpshosting"] a,body[data-page="pages/minecraftvps"] a{color:var(--mc-blue);text-decoration:none}
body[data-page="pages/vpshosting"] a:hover,body[data-page="pages/minecraftvps"] a:hover{color:var(--mc-blue-l)}
body[data-page="pages/vpshosting"] .mc-nav,body[data-page="pages/minecraftvps"] .mc-nav{background:transparent;position:relative;z-index:20}
body[data-page="pages/vpshosting"] .mc-main.container,body[data-page="pages/minecraftvps"] .mc-main.container{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}

/* Links in lopende tekst (lijsten, tegels, noten) zoals in de v2-teksten */
.vp .v2-lijst a,.vp .vp-tegel-t a,.vp .vp-kies-noot a,.vp .vp-netregel a,.vp .v2-tkaart p a,.vp .v2-kader-t a{color:var(--acc3);text-decoration:underline;text-decoration-color:rgba(108,188,255,.4);text-underline-offset:3px}
.vp .v2-lijst a:hover,.vp .vp-tegel-t a:hover,.vp .vp-kies-noot a:hover,.vp .vp-netregel a:hover,.vp .v2-tkaart p a:hover,.vp .v2-kader-t a:hover{color:#fff;text-decoration-color:#fff}
.vp .v2-lijst li{align-items:flex-start}
.vp .v2-lijst li svg{margin-top:2px}
.vp .v2-checks li .v2-ster{margin-left:1px}

/* Knop in een tekstblok (status): vps-v2.css onderstreept alle links in .v2-over-t, ook de knop */
.vp .v2-over-t a.v2-btn{color:var(--text);text-decoration:none}
.vp .v2-over-t a.v2-btn:hover,.vp .v2-over-t a.v2-btn:focus-visible{color:#fff}
/* Sterretje in de onderregel van een feitentegel ("uplink per node: 1–20 Gbit/s*") blijft op de regel */
.vp .v2-feit dd span .v2-ster{display:inline;margin:0 0 0 1px}

/* Kleur per lijn (dunne bovenrand, chip) */
.vp-k-b{--lk:#9db6d4;--lkbg:rgba(157,182,212,.12)}
.vp-k-n{--lk:#6cbcff;--lkbg:rgba(108,188,255,.12)}
.vp-k-p{--lk:#2e9bff;--lkbg:rgba(46,155,255,.14)}
.vp-k-v{--lk:#41d98d;--lkbg:rgba(65,217,141,.12)}

/* ===== Hub: hero met de serverposters van de lijnen (geen 3D) ===== */
.vp-rack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:22px}
.vp-unit{position:relative;aspect-ratio:16/10;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#070a0f;isolation:isolate}
.vp-unit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:50% 78%;z-index:-1}
.vp-unit::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--lk);opacity:.85}
.vp-unit::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,.9),rgba(10,14,20,0) 46%);z-index:-1}
.vp-unit-l{position:absolute;left:14px;right:14px;top:12px;display:flex;flex-direction:column;gap:1px;line-height:1.25}
.vp-unit-l b{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em}
.vp-unit-l span{font-size:14px;color:var(--soft)}

/* ===== Hub: de vier lijnen ===== */
.vp-lijnen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vp-lijn{position:relative;display:flex;flex-direction:column;padding:26px 22px 22px;border:1px solid var(--line);border-radius:18px;background:var(--tile);overflow:hidden}
.vp-lijn::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--lk)}
.vp-lijn-onder{margin-top:6px!important;font-size:15px;line-height:1.4;color:var(--muted)}
.vp-lijn-prijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;margin-top:20px!important;font-size:15px;color:var(--muted)}
.vp-lijn-prijs b{font-size:30px;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.vp-lijn-prijs b + span{margin-left:-5px;color:var(--soft)}
.vp-lijn-pk{margin-top:6px!important;font-size:14.5px;color:var(--muted)}
.vp-lijn-cpu{display:flex;align-items:center;gap:9px;margin-top:18px!important;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025);font-size:15.5px;font-weight:600;line-height:1.3;color:var(--text)}
.vp-lijn-cpu svg{width:17px;height:17px;color:var(--lk)}
.vp .vp-lijn-f{margin-top:10px!important}
.vp .vp-lijn-f li{font-size:15px;padding:8px 0}
.vp-lijn-fit{margin:12px 0 20px!important;font-size:15px;line-height:1.55;color:var(--soft)}
.vp a.vp-lijn-knop{margin-top:auto;width:100%;min-height:48px;padding:0 14px;font-size:15px;text-align:center;line-height:1.25}
.vp a.vp-lijn-knop svg{width:16px;height:16px}
.vp-netregel{margin-top:24px!important;font-size:16px;line-height:1.6;color:var(--soft)}
.vp-noten{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.vp-noten .v2-pk-noot{margin:0!important}

/* ===== Hub: kiezen op toepassing ===== */
.vp-sec-kies{background:var(--bg2)}
.vp-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vp-tegel{display:flex;flex-direction:column;padding:22px 22px 18px;border:1px solid var(--line);border-radius:18px;background:var(--tile)}
.vp-tegel-t{margin:10px 0 18px!important;font-size:16px;line-height:1.65;color:var(--soft);text-wrap:pretty}
.vp a.vp-tegel-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);color:var(--text)}
.vp-chip{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:var(--lkbg);color:var(--lk);font-size:13.5px;font-weight:700;white-space:nowrap}
.vp-tegel-gb{font-size:14.5px;color:var(--soft);white-space:nowrap}
.vp-tegel-pr{margin-left:auto;font-size:14.5px;color:var(--muted);white-space:nowrap}
.vp-tegel-pr b{margin-right:1px;font-size:17px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.vp a.vp-tegel-a svg{width:16px;height:16px;color:var(--acc3);transition:transform .2s ease}
.vp a.vp-tegel-a:hover svg,.vp a.vp-tegel-a:focus-visible svg{transform:translateX(3px)}
.vp a.vp-tegel-a:hover .vp-tegel-pr b{color:var(--acc3)}
.vp-kies-noot{display:flex;align-items:flex-start;gap:11px;margin-top:22px!important;padding:15px 18px;border:1px solid rgba(46,155,255,.35);border-radius:14px;
  background:linear-gradient(90deg,rgba(46,155,255,.09),rgba(46,155,255,.02) 70%),var(--tile);font-size:16px;line-height:1.55;color:var(--soft)}
.vp-kies-noot svg{width:18px;height:18px;margin-top:3px;color:var(--acc3)}

/* ===== Zes (hub: waar let je op) en drie stappen (Minecraft) ===== */
.vp-zes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vp .vp-stappen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.vp .v2-tkaart .v2-h3{display:flex;align-items:center;gap:12px}
.vp-nr{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border:1px solid rgba(46,155,255,.45);border-radius:50%;
  background:rgba(46,155,255,.1);font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;color:var(--acc3)}

/* ===== Handleidingen: max. 6 kaarten ===== */
.vp-gidsen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.vp a.vp-gids{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-areas:"i h" "i p" "i l";column-gap:14px;row-gap:4px;height:100%;padding:18px 18px 16px;
  border:1px solid var(--line);border-radius:16px;background:var(--tile);color:var(--text);transition:border-color .2s ease,background-color .2s ease}
.vp a.vp-gids:hover,.vp a.vp-gids:focus-visible{border-color:rgba(46,155,255,.5);background:#0f1620}
.vp-gids-i{grid-area:i;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:rgba(46,155,255,.1);color:var(--acc3)}
.vp-gids-i svg{width:19px;height:19px}
.vp-gids-h{grid-area:h;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.vp-gids-p{grid-area:p;font-size:15px;line-height:1.5;color:var(--soft)}
.vp-gids-l{grid-area:l;display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:14.5px;font-weight:600;color:var(--acc3)}
.vp-gids-l svg{width:15px;height:15px;transition:transform .2s ease}
.vp a.vp-gids:hover .vp-gids-l svg{transform:translateX(3px)}

/* ===== Minecraft: geheugentabel met drie kolommen ===== */
.vp .vp-gbtabel td{white-space:nowrap}
.vp .vp-gbtabel td a{color:var(--acc3);text-decoration:underline;text-decoration-color:rgba(108,188,255,.4);text-underline-offset:3px}
.vp .vp-gbtabel td a:hover{color:#fff}
.vp .vp-gbtabel thead th + th + th{padding-left:14px}
.vp-gb-geen{font-weight:500;color:var(--muted)}

/* ===== Smallere schermen ===== */
@media (max-width:1180px){
  .vp-lijnen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp-tegels,.vp-zes,.vp-gidsen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vp .vp-stappen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:980px){
  .vp-rack{max-width:620px;margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  .vp-rack{gap:8px;margin-bottom:16px}
  .vp-unit{border-radius:12px;aspect-ratio:4/3}
  .vp-unit img{transform:scale(1.3);transform-origin:50% 80%}
  .vp-unit-l{left:10px;right:10px;top:8px}
  .vp-unit-l b{font-size:14.5px}
  .vp-unit-l span{font-size:12.5px}
  .vp-lijnen,.vp-tegels,.vp-zes,.vp-gidsen{grid-template-columns:minmax(0,1fr)}
  .vp-lijn{padding:22px 18px 18px}
  .vp-tegel{padding:20px 18px 16px}
  .vp-kies-noot{padding:13px 14px;font-size:15.5px}
  .vp .vp-gbtabel{font-size:15px}
  .vp .vp-gbtabel tbody th{padding-right:10px}
  .vp .vp-gbtabel td{white-space:normal}
  .vp .vp-gbtabel thead th + th + th{padding-left:8px}
  .vp .v2-pk-noot-i{white-space:normal}
  .vp a.vp-tegel-a{gap:8px}
  .vp a.vp-tegel-a svg{display:none}
}