/* ============================================================================
   DagM8 · views/whatsgood.css — WhatsGood (events + parties feed)
   Screen-specific styles only; tokens + shared components come from dagm8.css.
   Prefix: .wg-*  (plus the shared .filterbar / .filter-pill from dagm8.css).
   ========================================================================= */

.wg-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s4);
}
.wg-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.wg-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.wg-create { flex: none; }

.wg-filterbar { margin-bottom: var(--s5); }

.wg-list { display: flex; flex-direction: column; gap: var(--s5); }

/* event card -------------------------------------------------------------- */
.wg-card { overflow: hidden; }
.wg-card[hidden] { display: none; }

.wg-cover {
  position: relative;
  aspect-ratio: 21 / 9;
}
/* kind + today chips floating on the cover */
.wg-kind {
  position: absolute; top: var(--s3); left: var(--s3);
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: rgba(20,25,40,.55);
  backdrop-filter: blur(2px);
}
.wg-kind--party { background: rgba(245,54,92,.82); }
.wg-kind--event { background: rgba(40,194,213,.86); }
.wg-tonight {
  position: absolute; top: var(--s3); right: var(--s3);
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); background: var(--yellow);
}

.wg-card__body { padding: var(--s4) var(--s5) var(--s5); }
.wg-card__head { display: flex; align-items: flex-start; gap: var(--s3); }
.wg-card__id { min-width: 0; flex: 1; }
.wg-card__title { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.wg-card__host { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.wg-card__host strong { color: var(--ink-2); font-weight: 700; }
.wg-card__tag { flex: none; margin-top: 2px; }

.wg-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  margin: var(--s3) 0 0;
}
.wg-meta { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.wg-meta .ico { color: var(--cyan); flex: none; }
.wg-meta dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.wg-card__blurb { margin: var(--s3) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.wg-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.wg-count { font-size: 13px; color: var(--muted); }
.wg-count__going { color: var(--ink); font-weight: 700; }
.wg-count__dot { color: var(--muted-2); margin: 0 2px; }
.wg-rsvp { display: flex; gap: var(--s2); flex: none; }
.wg-go.is-on { background: var(--green); }
.wg-go.is-on:hover { background: #34a868; }
.wg-int.is-on { background: rgba(40,194,213,.12); }

.wg-empty {
  margin: var(--s6) 0; text-align: center;
  color: var(--muted); font-size: 14px; font-weight: 500;
}

/* right rail: this-week agenda ------------------------------------------- */
.wg-agenda { display: flex; flex-direction: column; }
.wg-agenda__row { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0; }
.wg-agenda__row + .wg-agenda__row { border-top: 1px solid var(--line-2); }
.wg-agenda__when {
  flex: none; width: 52px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--muted); text-transform: uppercase; padding-top: 2px;
}
.wg-agenda__when--today { color: var(--coral); }
.wg-agenda__body { min-width: 0; }
.wg-agenda__title {
  display: block; font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wg-agenda__where { display: block; font-size: 11.5px; color: var(--muted); }

/* cover gradients — self-contained "photographs" (no external assets) ----- */
.wg-cover--arcade {
  background:
    radial-gradient(90% 120% at 22% 18%, rgba(40,194,213,.55) 0%, transparent 55%),
    radial-gradient(90% 120% at 82% 86%, rgba(245,54,92,.7) 0%, transparent 55%),
    linear-gradient(120deg, #3a1450 0%, #1a1030 60%, #0c0a1c 100%);
}
.wg-cover--rooftop {
  background:
    radial-gradient(120% 120% at 50% 110%, rgba(20,12,28,.85) 20%, transparent 70%),
    linear-gradient(180deg, #ffd07a 0%, #ff8aa6 32%, #d64d6e 60%, #6a3b86 100%);
}
.wg-cover--trail {
  background:
    radial-gradient(110% 120% at 30% 6%, rgba(255,233,160,.5) 0%, transparent 50%),
    linear-gradient(165deg, #b6e08a 0%, #4faa5e 42%, #1f5a32 100%);
}
.wg-cover--lab {
  background:
    radial-gradient(90% 120% at 70% 20%, rgba(118,106,255,.6) 0%, transparent 55%),
    linear-gradient(150deg, #6f64e0 0%, #3a2f86 55%, #161433 100%);
}
.wg-cover--golden {
  background:
    radial-gradient(120% 130% at 78% 22%, #ffd27a 0%, #ff9d4d 38%, #d6633a 70%, #5a2418 100%);
}
.wg-cover--bonfire {
  background:
    radial-gradient(60% 90% at 50% 100%, #ffb24d 0%, #ff6a2a 28%, #b3361a 52%, #1a0c0c 90%),
    linear-gradient(180deg, #2a1830 0%, #120a14 100%);
}

/* responsive ------------------------------------------------------------- */
@media (max-width: 560px) {
  .wg-title { font-size: 22px; }
  .wg-create span { display: none; }
  .wg-card__foot { gap: var(--s2); }
}
@media (max-width: 400px) {
  .wg-rsvp { width: 100%; }
  .wg-rsvp .btn { flex: 1; }
}