/* ============================================================
   SHARED EVENT CARD SYSTEM  (.reg-card)
   ============================================================
   The canonical event-card design, used by BOTH:
     - /events/  "Featured registrations" grid
     - /         homepage "Upcoming events" (Featured + Coming up)

   WHY THIS FILE EXISTS
   These rules used to live inline in _source-pages/events.html only. When the
   homepage was asked to match the events page exactly (Andrew, 2026-07-18),
   copy-pasting the block into homepage.html would have created two copies that
   drift apart the moment one is edited -- the same silent-divergence failure
   class as the megamenu/mobile-drawer split. One stylesheet, both pages, no
   drift. Anything that styles .reg-card belongs HERE, not in a page.

   Cache-busting is automatic: registered in build-pages.py CACHEBUST_ASSETS as
   {{event-cards-v}}, so editing this file re-hashes the ?v= on both pages. Do
   not hand-bump a version anywhere.

   Card anatomy (keep markup in sync across the THREE generators that emit it:
   build-pages.py compute_homepage_events(), the homepage inline renderer's
   eventCardHtml(), and the events-page build):
     a.reg-card > .reg-card__photo > img
                > .reg-card__body  > .reg-card__audience   (ministry kicker)
                                   > .reg-card__title
                                   > .reg-card__purpose
                                   > ul.reg-card__meta     (date/time, place)
                                   > .reg-card__chips
                                   > .reg-card__cta        (button)
   ============================================================ */

/* Photo wrapper needs position:relative so an absolutely-positioned image
   fallback fills the slot. */
.reg-card__photo { position: relative; }

.reg-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--fg);
}
.reg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* 16:9 matches Planning Center's native event-graphic export, so the whole
   poster is visible rather than cropped. Do not change this ratio. */
.reg-card__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--nh-ink); }
.reg-card__photo img { width: 100%; height: 100%; object-fit: cover; }

.reg-card__body { padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12); flex: 1; }
.reg-card__audience { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--nh-red); margin: 0; }
.reg-card__title { font-size: 22px; line-height: 1.2; margin: 0; }
.reg-card__purpose { font-size: 15px; color: var(--fg-mute); margin: 0; }
.reg-card__meta { list-style: none; padding: 0; margin: 0; font-size: 14px; color: var(--fg); display: grid; gap: 4px; }
.reg-card__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-card__deadline { background: var(--nh-cream-warm); color: var(--nh-red); border-color: var(--nh-red-soft); }
.reg-card__cta { margin-top: auto; align-self: stretch; }

/* Chips ride along with the card system (a chip only ever appears inside
   .reg-card__chips). */
.chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--nh-stone); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg); border: 1px solid var(--line); cursor: pointer; }
.chip--childcare { background: var(--nh-teal-soft); border-color: transparent; color: var(--nh-ink); }
.chip--active { background: var(--nh-red); color: var(--on-deep); border-color: transparent; }

/* Text-only fallback: an event with no Planning Center graphic still needs a
   card. Drop the photo slot entirely rather than showing an empty black box. */
.reg-card--text .reg-card__photo { display: none; }