/* ============================================
   STANDPUNTEN PAGINA
   ============================================ */

/* ── Standpunten section ─────────────────── */
.scn-sp-section{
  background:var(--off-white);
  padding:var(--space-3xl) 0 var(--section-py)
}

/* ── Grid ─────────────────────────────────── */
.scn-sp-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-xl)
}

/* ── Card ─────────────────────────────────── */
.scn-sp-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-lg);
  padding:var(--space-2xl) var(--space-2xl) var(--space-xl);
  transition:transform var(--transition-slow),box-shadow var(--transition-slow),border-color var(--transition);
  overflow:hidden
}
.scn-sp-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent
}
.scn-sp-card-icon{
  width:56px;
  height:56px;
  border-radius:var(--radius-md);
  background:rgba(215,38,56,0.1);
  background:color-mix(in srgb,var(--sp-color) 12%,transparent);
  color:var(--sp-color);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--space-lg)
}
.scn-sp-card-title{
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:700;
  color:var(--gray-900);
  margin:0 0 var(--space-sm)
}
.scn-sp-card-desc{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  line-height:1.7;
  color:var(--gray-600);
  margin:0 0 var(--space-lg)
}

/* ── Toggle button (mobile only, hidden on desktop) ── */
.scn-sp-card-toggle{
  display:none
}

/* ── Goals wrapper (always visible on desktop) ── */
.scn-sp-card-goals{
  display:block
}

/* ── Bullet list ─────────────────────────── */
.scn-sp-card-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-sm)
}
.scn-sp-card-list li{
  position:relative;
  padding-left:28px;
  font-size:var(--text-sm);
  color:var(--gray-700);
  line-height:1.6
}
.scn-sp-card-list li::before{
  content:'\2192';
  position:absolute;
  left:0;
  top:0;
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--sp-color);
  line-height:1.6
}

/* Card number watermark */
.scn-sp-card-number{
  position:absolute;
  bottom:var(--space-md);
  right:var(--space-lg);
  font-family:var(--font-display);
  font-size:4rem;
  font-weight:800;
  color:var(--gray-100);
  line-height:1;
  pointer-events:none;
  user-select:none
}

/* ── Stats ribbon ─────────────────────────── */
.scn-sp-ribbon{
  background:var(--party-navy);
  padding:var(--space-2xl) 0
}
.scn-sp-ribbon-inner{
  display:flex;
  justify-content:center;
  gap:var(--space-3xl)
}
.scn-sp-ribbon-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center
}
.scn-sp-ribbon-number{
  font-family:var(--font-display);
  font-size:var(--text-3xl);
  font-weight:800;
  color:var(--white)
}
.scn-sp-ribbon-label{
  font-size:var(--text-sm);
  color:rgba(255,255,255,0.6);
  margin-top:var(--space-2xs)
}

/* ── CTA section ──────────────────────────── */
.scn-sp-cta-section{
  background:var(--off-white);
  padding:var(--section-py) 0
}
.scn-sp-cta-card{
  text-align:center;
  max-width:700px;
  margin:0 auto;
  padding:var(--space-3xl) var(--space-2xl);
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md)
}
.scn-sp-cta-card h2{
  font-family:var(--font-display);
  font-size:var(--text-2xl);
  font-weight:700;
  color:var(--gray-900);
  margin:0 0 var(--space-md)
}
.scn-sp-cta-card p{
  font-size:var(--text-base);
  color:var(--gray-600);
  line-height:1.7;
  margin:0 0 var(--space-xl)
}
.scn-sp-cta-btns{
  display:flex;
  gap:var(--space-md);
  justify-content:center
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Tablet */
@media(max-width:1024px){
  .scn-sp-grid{gap:var(--space-lg)}
  .scn-sp-ribbon-inner{gap:var(--space-2xl)}
}

/* Mobile */
@media(max-width:768px){
  .scn-sp-section{padding:var(--space-xl) 0 var(--space-lg)}
  .scn-sp-grid{grid-template-columns:1fr;gap:var(--space-md)}

  .scn-sp-card{padding:var(--space-lg) var(--space-md) var(--space-md)}
  .scn-sp-card-icon{width:40px;height:40px;margin-bottom:var(--space-sm)}
  .scn-sp-card-title{font-size:var(--text-lg);margin-bottom:var(--space-2xs)}
  .scn-sp-card-desc{margin-bottom:var(--space-sm);font-size:var(--text-sm)}
  .scn-sp-card-number{font-size:2.5rem;bottom:var(--space-xs);right:var(--space-sm)}

  /* Toggle button visible on mobile */
  .scn-sp-card-toggle{
    display:inline-flex;
    align-items:center;
    gap:var(--space-2xs);
    background:none;
    border:none;
    padding:0;
    font-family:var(--font-display);
    font-size:var(--text-xs);
    font-weight:600;
    color:var(--sp-color);
    cursor:pointer;
    margin-bottom:0;
    transition:color var(--transition)
  }
  .scn-sp-card-toggle .scn-icon{
    transition:transform 0.25s ease
  }
  .scn-sp-card.is-sp-open .scn-sp-card-toggle .scn-icon{
    transform:rotate(180deg)
  }

  /* Goals hidden by default on mobile */
  .scn-sp-card-goals{
    display:none;
    padding-top:var(--space-sm)
  }
  .scn-sp-card.is-sp-open .scn-sp-card-goals{
    display:block;
    animation:scnSpOpen 0.25s ease
  }

  @keyframes scnSpOpen{
    from{opacity:0;transform:translateY(-6px)}
    to{opacity:1;transform:translateY(0)}
  }

  .scn-sp-ribbon{padding:var(--space-md) 0}
  .scn-sp-ribbon-inner{gap:var(--space-lg)}
  .scn-sp-ribbon-number{font-size:var(--text-lg)}
  .scn-sp-ribbon-label{font-size:var(--text-xs)}

  .scn-sp-cta-card{padding:var(--space-2xl) var(--space-lg)}
  .scn-sp-cta-card h2{font-size:var(--text-xl)}
  .scn-sp-cta-btns{flex-direction:column;align-items:center}
}

/* Small */
@media(max-width:480px){
  .scn-sp-card{padding:var(--space-md)}
  .scn-sp-card-desc{font-size:var(--text-xs)}
  .scn-sp-card-list li{font-size:var(--text-xs)}
}