/* ============================================================
   pages/edities.css — spine + halo + cream overrides
   ============================================================ */

/* ── Page spine ──────────────────────────────────────────── */
.page-trail { position: relative; overflow: hidden; margin-bottom: -300px; padding-bottom: 300px; }
.page-spine {
  position: absolute;
  top: 400px; 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;
}
.page-trail > section { position: relative; z-index: 1; }
@media (max-width: 580px) { .spine-path { stroke-width: 14; } }

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

/* ── Live dot ────────────────────────────────────────────── */
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  animation: pulse-dot 1.5s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

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

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

  /* Upcoming card: stack */
  .upcoming-event-card {
    grid-template-columns: 1fr !important;
    padding: var(--space-6) !important;
    gap: var(--space-6) !important;
  }
  .upcoming-event__visual {
    aspect-ratio: 16/9;
    border-radius: var(--radius-lg);
  }
  .upcoming-event__badge {
    font-size: 11px;
    padding: var(--space-1) var(--space-2);
  }

  /* Timeline: tighter left padding */
  .timeline { padding-left: var(--space-6); }
  .timeline::before { left: var(--space-2); }
  .timeline-item__dot {
    left: calc(-1 * var(--space-6) + var(--space-2) - 8px);
  }

  /* Timeline cards: compact */
  .timeline-card__header { padding: var(--space-3) var(--space-4); }
  .timeline-card__title { font-size: var(--text-lg); }
  .timeline-card__year { font-size: var(--text-2xl); }
  .timeline-card__body { padding: var(--space-3); gap: var(--space-3); }
  .timeline-card__stat { padding: var(--space-3); }
  .timeline-card__stat-value { font-size: var(--text-xl); }

  /* Gallery: 3 cols still but smaller gap */
  .gallery-grid { gap: var(--space-2); margin-top: var(--space-3); }

  /* Section spacing */
  .section { padding-block: 40px; }

  /* CTA full-width buttons */
  .section div[style*="display:flex"][style*="gap:14px"] {
    flex-direction: column;
    align-items: stretch;
  }
}