/* --- Hoofdstuk zeven: help mee --------------------------------------------- */
.so-vrijwilligers {
  /* Eindigt in een goudtint, zodat de overgang naar de sponsors (met vlaggenlijn) zichtbaar is,
     net als van hoofdstuk drie naar vier. */
  background: linear-gradient(180deg, rgba(193, 33, 47, 0.05), rgba(214, 162, 58, 0.08));
}
.so-vrijwilligers__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}
.so-vrijwilligers__widget,
.so-vrijwilligers__copy { min-width: 0; }

/* Stand van de GoFundMe-actie: nachtblauwe kaart, de boot vaart naar het doel */
.so-gfm {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: clamp(24px, 4vw, 36px);
  background: linear-gradient(165deg, var(--navy-700), var(--navy-900) 72%);
  color: var(--paper);
  box-shadow: 0 30px 60px -30px rgba(11, 21, 49, 0.75);
}
.so-gfm__inner { position: relative; z-index: 1; }
.so-gfm__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-300);
}
.so-gfm__title {
  margin: 12px 0 22px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  line-height: 1.15;
  color: var(--paper);
}
.so-gfm__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  margin: 0;
}
.so-gfm__raised {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 3.3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--gold-300);
  font-variant-numeric: tabular-nums;
}
.so-gfm__goal { font-size: 1rem; color: var(--paper-soft); }

/* Vaarlijn: links ruimte voor de halve boot, rechts voor de finishvlag */
.so-gfm__track { position: relative; padding: 0 46px 0 28px; margin: 4px 0 6px; }
.so-gfm__lane { position: relative; height: 84px; }
.so-gfm__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 56px;
  height: 4px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(246, 231, 188, 0.35) 0 8px, transparent 8px 16px);
}
.so-gfm__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--gold-300);
  box-shadow: 0 0 12px rgba(246, 231, 188, 0.6);
}
.so-gfm__boat {
  position: absolute;
  top: 20px; /* onderkant van de boot (38px hoog) rust op de lijn */
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.so-gfm__boat svg { display: block; transform: scaleX(-1); animation: soGfmBob 2.6s ease-in-out infinite; }
@keyframes soGfmBob {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -3px; rotate: -2deg; }
}
.so-gfm__finish {
  position: absolute;
  right: 6px;
  top: 30px;
  font-size: 1.7rem;
  line-height: 1;
}

.so-gfm__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0 0 24px;
  color: var(--paper-soft);
}
.so-gfm__meta strong { color: var(--paper); }
.so-gfm__note { margin: 16px 0 0; font-size: 0.78rem; color: var(--paper-faint); }

@media (prefers-reduced-motion: reduce) {
  .so-gfm__boat svg { animation: none; }
}

/* Terugval: de gewone GoFundMe-widget (hoogte volgt de widget, zie vrijwilligers.js) */
.so-vrijwilligers__frame { border-radius: 18px; overflow: hidden; background: #fff; }
.so-vrijwilligers__iframe { display: block; width: 100%; height: 500px; border: 0; }

/* Knoppen */
.so-vrijwilligers__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
/* In React heeft "Doe een gift" een volle rode rand (i.p.v. de zachtere .so-btn--outline) */
.so-vrijwilligers__gift { border-color: var(--red); }

/* Zonder GoFundMe-actie alleen de tekst */
.so-vrijwilligers__grid--solo { grid-template-columns: 1fr; max-width: 760px; }

@media (max-width: 900px) {
  .so-vrijwilligers__grid { grid-template-columns: 1fr; }
}