/* --- Hoofdstuk twee: Pietennieuws (accordeon) ----------------------------- */
.so-nieuws { background: var(--cream); }

.so-nieuws__list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.so-nieuws__item { overflow: hidden; }

.so-nieuws__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 18px 22px;
  text-align: left;
  color: var(--ink);
  font-weight: 400;
}
.so-nieuws__toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius); }

.so-nieuws__icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(193, 33, 47, 0.1);
  border: 1px solid rgba(214, 162, 58, 0.3);
}

.so-nieuws__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.so-nieuws__tag {
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.so-nieuws__title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
}

.so-nieuws__sign {
  flex: none;
  font-family: var(--sans);
  font-size: 1.4rem;
  color: var(--red);
  line-height: 1;
}

.so-nieuws__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* Ruim genoeg voor een foto en een paar korte alinea's, ook op een smalle telefoon */
.so-nieuws__item.is-open .so-nieuws__panel { max-height: 1400px; }
.so-nieuws__action { margin: -6px 0 0; padding: 0 22px 30px 80px; }

.so-nieuws__body {
  margin: 0;
  padding: 0 22px 32px 80px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.6;
}
.so-nieuws__body p { margin: 0; }
.so-nieuws__body p + p { margin-top: 0.75em; }
.so-nieuws__body::after { content: ""; display: table; clear: both; }

/* Eén foto: op de telefoon boven de tekst, op grotere schermen rechts ernaast. Klik = groter. */
.so-nieuws__photo { margin: 0 0 16px; }
.so-nieuws__zoom { display: inline-block; border-radius: 12px; cursor: zoom-in; }
.so-nieuws__zoom:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.so-nieuws__photo img { width: auto; max-width: 100%; max-height: 260px; border-radius: 12px; box-shadow: var(--shadow-soft); transition: transform 0.2s ease; }
.so-nieuws__zoom:hover img { transform: scale(1.02); }
.so-nieuws__photo figcaption { margin-top: 6px; color: var(--ink-faint); font-size: 0.82rem; line-height: 1.4; }
@media (min-width: 700px) {
  .so-nieuws__photo { float: right; max-width: 38%; margin: 4px 0 12px 24px; }
  .so-nieuws__photo img { max-height: 300px; }
}

@media (max-width: 520px) {
  .so-nieuws__toggle { padding: 16px 18px; gap: 12px; }
  .so-nieuws__body { padding: 0 18px 26px 18px; }
  .so-nieuws__action { padding: 0 18px 26px; }
  .so-nieuws__title { font-size: 1.1rem; }
}

/* Foto groter bekijken */
html:has(.so-foto[open]) { overflow: hidden; }
.so-foto {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.so-foto::backdrop { background: rgba(11, 21, 49, 0.88); }
.so-foto__figure { margin: 0; }
.so-foto__img {
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 90px);
  width: auto;
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.so-foto__caption { margin-top: 10px; color: var(--paper-soft); font-size: 0.92rem; text-align: center; }
.so-foto__close { position: absolute; z-index: 1; top: 12px; right: 12px; }