/* SocraNext Intenties Widget
   Huisstijl: cyan #06B6D4, violet #6D28D9, midnight #000040, white  [oai_citation:1‡SocraNext huisstijlhandboek.pdf](file-service://file-HNSK8G1XvREr7E4ALs9L1z)
*/

:root {
    --sn-cyan: #06B6D4;
    --sn-violet: #6D28D9;
    --sn-midnight: #000040;
    --sn-white: #ffffff;
  
    --sn-bg: #ffffff;
    --sn-text: rgba(0,0,64,0.9);
    --sn-muted: rgba(0,0,64,0.62);
  
    --sn-radius: 18px;
    --sn-shadow: 0 18px 45px rgba(0,0,64,0.10);
    --sn-shadow-soft: 0 14px 35px rgba(0,0,64,0.08);
  
    --sn-stage-w: min(var(--sn-maxw, 980px), 100%);
    --sn-stage-h: 620px;
  
    --sn-glow: rgba(109,40,217,0.22);
  }
  
  .sn-intenties-wrap {
    width: 100%;
    display: flex;
    margin: 10px 0 30px;
  }
  .sn-align-center { justify-content: center; }
  .sn-align-left { justify-content: flex-start; }
  .sn-align-right { justify-content: flex-end; }
  
  .sn-intenties {
    width: var(--sn-stage-w);
    color: var(--sn-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  
  .sn-example {
    width: min(720px, 92%);
    margin: 0 auto -22px;
    background: var(--sn-white);
    border: 1px solid rgba(0,0,64,0.08);
    border-radius: 20px;
    box-shadow: var(--sn-shadow-soft);
    padding: 16px 18px;
    text-align: center;
  }
  
  .sn-example-label {
    font-size: 14px;
    color: var(--sn-muted);
    margin-bottom: 6px;
  }
  
  .sn-example-text {
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.2px;
    font-weight: 700;
    color: rgba(0,0,64,0.92);
  }
  
  /* ======= STAGE (infographic look) ======= */
  .sn-stage {
    position: relative;
    width: 100%;
    height: 700px;
    border-radius: 32px;
    background: transparent;
    overflow: visible;
  }

  /* dashed lines */
  .sn-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  .sn-lines line {
    stroke: rgba(0,0,64,0.18);
    stroke-width: 2;
    stroke-dasharray: 6 8;
  }

  /* ======= CENTER CIRCLE ======= */
  .sn-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: #F6F2FF !important;
    box-shadow: 0 0 0 3px rgba(109,40,217,0.28);
    z-index: 2;
  }

  .sn-center-ring {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .sn-center-number {
    font-size: 44px;
    font-weight: 800;
    color: var(--sn-violet);
    line-height: 1;
    margin-bottom: 6px;
  }
  .sn-center-sub {
    font-size: 15px;
    color: rgba(0,0,64,0.62);
  }

  /* ======= CARDS (zoals in screenshot: compact, symmetrisch, gecentreerd) ======= */
  .sn-card {
    position: absolute;
    width: 230px;
    height: 150px;
    border-radius: 18px;
    border: 2px solid transparent;
    background: #fff;
    backdrop-filter: none !important;
    box-shadow: 0 18px 60px rgba(0,0,64,0.10);
    padding: 18px 18px 14px;
    text-align: center;
    cursor: pointer;
    transform: translateZ(0);
    will-change: box-shadow;
    transition: box-shadow 160ms ease, border-color 160ms ease;
    z-index: 3;
  }

  .sn-card:focus {
    outline: none;
  }

  .sn-card:focus-visible {
    outline: 3px solid rgba(6,182,212,0.35);
    outline-offset: 3px;
  }

  .sn-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    color: #fff;
  }
  .sn-icon svg {
    width: 24px;
    height: 24px;
  }

  .sn-card-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.2px;
    margin: 0 0 4px;
    color: rgba(0,0,64,0.92);
  }
  .sn-card-sub {
    font-size: 14px;
    margin: 0;
    color: rgba(0,0,64,0.62);
  }

  /* ======= POSITIES (radial, compacter dichter bij center) ======= */
  .sn-pos-top {
    left: 50%;
    top: 80px;             /* dichterbij center (was 30px) */
    transform: translateX(-50%);
  }

  .sn-pos-topright {
    left: 68%;
    top: 200px;            /* dichterbij center (was 72%, 160px) */
    transform: translateX(-10%);
  }

  .sn-pos-right {
    left: 68%;
    top: 400px;            /* dichterbij center (was 72%, 430px) */
    transform: translateX(-10%);
  }

  .sn-pos-bottom {
    left: 50%;
    top: 495px;            /* dichterbij center (was 545px) */
    transform: translateX(-50%);
  }

  .sn-pos-left {
    left: 32%;
    top: 400px;            /* dichterbij center (was 28%, 430px) */
    transform: translateX(-90%);
  }

  .sn-pos-topleft {
    left: 32%;
    top: 200px;            /* dichterbij center (was 28%, 160px) */
    transform: translateX(-90%);
  }

  /* ======= KLEUR-TINTS + BORDER (zoals jouw blocks) ======= */
  .sn-card[data-intent="informatief"] {
    background: #F3FBFE !important;
    border-color: rgba(6,182,212,0.35);
  }
  .sn-card[data-intent="commercieel"] {
    background: #F6F2FF !important;
    border-color: rgba(109,40,217,0.30);
  }
  .sn-card[data-intent="transactioneel"] {
    background: #F2FBF7 !important;
    border-color: rgba(6,182,212,0.28);
  }
  .sn-card[data-intent="navigatie"] {
    background: #FFF7EF !important;
    border-color: rgba(255,140,0,0.30);
  }
  .sn-card[data-intent="instructief"] {
    background: #F2FBFE !important;
    border-color: rgba(6,182,212,0.25);
  }
  .sn-card[data-intent="contextueel"] {
    background: #FFF1F7 !important;
    border-color: rgba(255,0,128,0.25);
  }

  /* icon gradients (clean, niet te schreeuwerig) */
  .sn-card[data-intent="informatief"] .sn-icon { background: linear-gradient(135deg, var(--sn-cyan), var(--sn-violet)); }
  .sn-card[data-intent="commercieel"] .sn-icon { background: linear-gradient(135deg, var(--sn-violet), var(--sn-cyan)); }
  .sn-card[data-intent="transactioneel"] .sn-icon { background: linear-gradient(135deg, var(--sn-cyan), rgba(0,0,64,0.75)); }
  .sn-card[data-intent="navigatie"] .sn-icon { background: linear-gradient(135deg, #ff8c00, rgba(109,40,217,0.8)); }
  .sn-card[data-intent="instructief"] .sn-icon { background: linear-gradient(135deg, var(--sn-cyan), rgba(109,40,217,0.75)); }
  .sn-card[data-intent="contextueel"] .sn-icon { background: linear-gradient(135deg, #ff0080, rgba(109,40,217,0.75)); }

  /* HOVER/ACTIVE: alleen schaduw, NOOIT transform */
  .sn-card:hover,
  .sn-card.is-active {
    /* geen transform hier, anders schiet top/bottom weg */
    border-color: rgba(109,40,217,0.28);
    box-shadow:
      0 26px 70px rgba(0,0,64,0.14),
      0 10px 26px rgba(0,0,64,0.10),
      0 18px 50px var(--sn-glow);
  }

  /* per intent glow blijft, maar gebruikt als BLUR schaduw */
  .sn-intenties[data-active="informatief"]    { --sn-glow: rgba(6,182,212,0.18); }
  .sn-intenties[data-active="commercieel"]    { --sn-glow: rgba(109,40,217,0.18); }
  .sn-intenties[data-active="transactioneel"] { --sn-glow: rgba(6,182,212,0.16); }
  .sn-intenties[data-active="navigatie"]      { --sn-glow: rgba(109,40,217,0.16); }
  .sn-intenties[data-active="instructief"]    { --sn-glow: rgba(6,182,212,0.16); }
  .sn-intenties[data-active="contextueel"]    { --sn-glow: rgba(109,40,217,0.16); }
  
  /* ======= RESPONSIVE: onder elkaar ======= */
  @media (max-width: 980px) {
    .sn-stage {
      height: auto;
      padding: 18px 14px 24px;
    }
    .sn-lines {
      display: none;
    }
    .sn-center {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      margin: 16px auto;
    }
    .sn-card {
      position: relative;
      left: auto !important;
      top: auto !important;
      transform: none !important;
      width: min(520px, 100%);
      margin: 12px auto;
    }
    .sn-example-text { font-size: 22px; }
  }