/* Discover (/discover, js/discover.js): the spotlight's slides, creator and community cards, and the
   invitation to become a creator. Rows, link tabs and the banner's dots are css/shelves.css; project cards css/projects.css. */

.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.dcard { display: grid; gap: 6px; padding: 12px; height: 100%; align-content: start; background: color-mix(in srgb, var(--panel) 76%, transparent);
  border: 1px solid var(--glass-edge, var(--line)); border-radius: calc(var(--radius) + 4px); transition: border-color .15s; }
.dcard:hover, .dcard:focus-within { border-color: var(--teal); }
.dcard-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--radius) + 2px); text-decoration: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--amber) 55%, #000), color-mix(in srgb, var(--coral) 45%, #000)); }
.dcard-space { background: linear-gradient(150deg, color-mix(in srgb, var(--lime) 50%, #000), color-mix(in srgb, var(--teal) 45%, #000)); }
.dcard-art span { font-size: 2.2rem; font-weight: 800; color: #fff; }
.dcard .ui-card-title { font-size: 1.05rem; }
.dcard .ui-card-sub { margin: 0; font-size: .88rem; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fx-lite .dcard, .fx-lite .dspot { background: var(--panel); }
.dinvite { display: grid; gap: 8px; justify-items: start; margin: 8px 0 24px; padding: 20px; }
.dinvite h2 { margin: 0; }
.dinvite p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .dcard { transition: none; } }
/* The built A-Z list under All: every creator and project as plain links. */
.discover-az { margin-top: 28px; }
.discover-az h2 { font-size: 1.1rem; }
.discover-az-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.discover-az-list li { margin: 0; }
.discover-az-list :is(h3, p) { margin: 0; font-size: 1rem; }
.discover-az-list img { display: none; }
.dcard-art { overflow: hidden; }
.dcard-art img { width: 100%; height: 100%; object-fit: cover; }