/* eResonate — explore.css · the search and browse surface.
   Sits on styles.css for the palette, nav and footer. Prefixed .xp- so it
   cannot collide with the social app or the venue directory, which share the
   same shell. */

.xp-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 30px) 24px 80px;
}

/* ---------- header + search ---------- */
.xp-head { margin-bottom: 30px; }
.xp-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: 0 0 6px;
  color: #fff;
}
.xp-sub {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 56ch;
}

.xp-searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px 6px 6px 16px;
  max-width: 720px;
  transition: border-color .18s, box-shadow .18s;
}
.xp-searchbar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.xp-mag { font-size: 1.05rem; opacity: .7; flex: none; }
.xp-searchbar input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.05rem;
  padding: 12px 0;
}
.xp-searchbar input::placeholder { color: var(--text-dim); }
.xp-searchbar input::-webkit-search-cancel-button { filter: invert(1) opacity(.4); }
.xp-go {
  appearance: none; border: 0;
  background: var(--accent); color: #fff;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: .95rem;
  padding: 12px 22px; border-radius: 10px; cursor: pointer;
  transition: background .15s;
  flex: none;
}
.xp-go:hover { background: var(--accent-hover); }

/* ---------- filters ---------- */
.xp-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; }
.xp-chip {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: .85rem;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.xp-chip:hover { color: var(--text); }
.xp-chip.on { border-color: var(--accent); color: #fff; background: rgba(46, 92, 255, .16); }
.xp-chip .n { opacity: .55; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ---------- rails ---------- */
.xp-rail { margin-bottom: 44px; }
.xp-rail[hidden] { display: none; }
.xp-rail-head { margin-bottom: 14px; }
.xp-rail-head h2 {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: 1.3rem; letter-spacing: -.015em; margin: 0 0 3px; color: #fff;
}
.xp-rail-head p { margin: 0; color: var(--text-muted); font-size: .93rem; }

.xp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}
.xp-grid-sm { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ---------- cards ---------- */
.xp-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s, transform .16s, background .16s;
  min-width: 0;
}
.xp-card:hover { border-color: var(--border-accent); transform: translateY(-1px); background: var(--bg-card); }
.xp-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
/* these are <span>s inside an <a>, so they need to be told to stack */
.xp-card-name {
  display: block;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1rem;
  color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xp-card-sub {
  display: block;
  font-size: .84rem; color: var(--text-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xp-badge {
  flex: none;
  font-family: 'Outfit', sans-serif; font-size: .64rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 5px;
  background: rgba(62, 224, 140, .16); color: var(--money);
}
.xp-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; object-fit: cover;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: .85rem; color: #fff;
}
.xp-av.sq { border-radius: 10px; }

/* show cards carry a date block instead of an avatar */
.xp-date {
  display: block;
  flex: none; width: 46px; text-align: center;
  background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: 9px; padding: 6px 0;
  font-family: 'Outfit', sans-serif;
}
.xp-date .d { display: block; font-size: 1.1rem; font-weight: 800; color: #fff; line-height: 1; }
.xp-date .m { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }

/* ---------- the directory door ---------- */
.xp-dir {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--border-accent);
  background: linear-gradient(120deg, rgba(46, 92, 255, .14), rgba(46, 92, 255, .04));
  border-radius: var(--radius-lg);
  padding: 26px 30px;
  margin-bottom: 44px;
}
.xp-dir h2 {
  font-family: 'Outfit', sans-serif; font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.02em;
  margin: 0 0 5px; color: #fff;
}
.xp-dir p { margin: 0; color: var(--text-muted); font-size: .96rem; max-width: 52ch; }
.btn-lg { font-size: 1rem; padding: 14px 26px; flex: none; }

/* ---------- results ---------- */
.xp-results[hidden] { display: none; }
.xp-group { margin-bottom: 34px; }
.xp-group h2 {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.15rem;
  margin: 0 0 12px; color: #fff;
  display: flex; align-items: baseline; gap: 9px;
}
.xp-group h2 span {
  font-size: .8rem; font-weight: 600; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.xp-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 34px 26px;
  text-align: center;
  color: var(--text-muted);
}
.xp-empty b { display: block; color: #fff; font-family: 'Outfit', sans-serif; font-size: 1.05rem; margin-bottom: 5px; }
.xp-more {
  appearance: none; border: 1px solid var(--border); background: transparent;
  color: var(--text); font-family: 'Outfit', sans-serif; font-weight: 600;
  padding: 11px 20px; border-radius: 10px; cursor: pointer; margin-top: 12px;
}
.xp-more:hover { border-color: var(--accent); }
.xp-note { color: var(--text-dim); font-size: .86rem; margin: 10px 0 0; }

.xp-skel {
  height: 68px; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg-card), #131c38, var(--bg-card));
  background-size: 200% 100%;
  animation: xpShimmer 1.3s linear infinite;
}
@keyframes xpShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .xp-skel { animation: none; } }

@media (max-width: 640px) {
  .xp-main { padding: calc(var(--nav-h) + 18px) 16px 60px; }
  .xp-searchbar { padding-left: 13px; }
  .xp-go { padding: 12px 16px; }
  .xp-dir { padding: 22px; }
}