/* ============================================================
   events.css — Our events page-specific styles.
   Shared chrome/type/buttons come from /site.css; the card grid reuses the
   journal's .post-grid/.post classes with events-scoped modifiers (centred
   text + description paragraph, 1232px grid with 40px gaps — both measured
   off the mockup, which uses a narrower grid than the journal's).
   ============================================================ */

/* page title band — compact: 224px to banner-top incl. the 96px absolute nav
   bar the padding must clear (site.css .page-hero clears it with 144px) */
.page-hero.events-head { padding: 116px 0 28px; }
.page-hero.events-head h1 { font-size: 68px; line-height: 80px; margin-bottom: 0; }

/* full-bleed fireworks banner: 640px tall in the comp */
.ev-banner { height: 640px; }
.ev-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* event listing sections (white "Upcoming", sand "Past") */
.events { padding: 136px 0 160px; }
.events-past { padding: 46px 0 92px; }
.events .serif-title { text-align: center; margin-bottom: 22px; }

.events .post-grid {
  max-width: 1232px;
  margin: 0 auto;
  gap: 48px 40px;
}
.events .post { text-align: center; }
.events .post-title { margin: 22px 0 8px; }
.events .post-desc {
  font-size: 15px; line-height: 22px; letter-spacing: -0.02em;
  color: #404040;
  max-width: 352px; margin: 0 auto 14px;
}
.events .posts-more { padding-top: 56px; }

@media (max-width: 900px) {
  .page-hero.events-head h1 { font-size: 48px; line-height: 58px; }
  .ev-banner { height: 420px; }
  .events { padding: 72px 0 70px; }
  .events-past { padding: 40px 0 70px; }
}
@media (max-width: 560px) {
  .page-hero.events-head h1 { font-size: 38px; line-height: 46px; }
  .ev-banner { height: 300px; }
  .events .post-desc { max-width: none; }
}

/* sheet-driven extras: intro line under the title, empty-state message */
.ev-intro { max-width: 900px; margin: 18px auto 0; font-size: 16px; line-height: 24px; color: var(--ink-soft); }
.ev-empty { text-align: center; color: var(--ink-soft); padding: 8px 0 26px; }