/* ============================================================
   pages/beleving.css
   ============================================================ */

/* ── Page spine ──────────────────────────────────────────── */
.page-trail { position: relative; overflow: hidden; margin-bottom: -300px; padding-bottom: 300px; }
.page-spine {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 5000px;
  z-index: 0; pointer-events: none;
}
.page-spine svg { width: 100%; height: 100%; }
.spine-path {
  fill: none;
  stroke: url(#spineGrad);
  stroke-width: 36;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.92;
  stroke-dasharray: 99999;
  stroke-dashoffset: 99999;
}
.page-trail > section { position: relative; z-index: 1; }
@media (max-width: 580px) { .spine-path { stroke-width: 14; } }

.has-halo {
  -webkit-text-stroke: 4px var(--color-cream);
  paint-order: stroke fill;
}

/* ── Duo layout ──────────────────────────────────────────── */
.beleving-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px) {
  .beleving-duo {
    grid-template-columns: 1fr;
    max-width: 650px;
    margin-inline: auto;
  }
}

/* ── Mobile (480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* Hide spine */
  .page-spine { display: none; }

  /* Thinner halo */
  .has-halo { -webkit-text-stroke: 2px var(--color-cream); }

  /* Duo items: stack cover + text vertically */
  .beleving-item > div {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center;
  }
  .beleving-item img { max-width: 160px; margin-inline: auto; }
  .beleving-item .section-label { justify-content: center; }
  .beleving-item .section-title { text-align: center; }
  .beleving-item .btn { align-self: center; }

  /* Video: tighter radius */
  .section { padding-block: 40px; }
}