/* STUDIO ASX: Discord Emojis (catalogue + pack pages). Loaded only on /emojis pages,
   after templates.css, whose card, chip, search and detail layout it reuses. */

/* Catalogue card thumbnails: up to 8 real images */
.emo-thumbs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; margin: 0 0 4px; padding: 12px;
  background: var(--color-surface-alt); border: 1px solid var(--color-border); border-radius: 12px;
}
.emo-thumbs li { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-width: 0; }
.emo-thumbs img { width: 100%; max-width: 48px; height: auto; max-height: 48px; object-fit: contain; }

/* Pack page grid */
.emo-grid-wrap { margin-top: 18px; }
.emo-grid-title { font-size: 19px; color: var(--color-heading); }
.emo-sub { font-size: 15px; font-weight: 500; color: var(--color-text-muted); }
.emo-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 520px) { .emo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .emo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.emo-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; min-width: 0; text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
}
.emo-art {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 10px;
  background: var(--color-surface-alt);
}
.emo-art img { width: 64px; height: 64px; object-fit: contain; }
.emo-name { margin: 6px 0 0; font-size: 13.5px; max-width: 100%; overflow-wrap: anywhere; }
.emo-name code { background: none; padding: 0; color: var(--color-text-body); }
.emo-meta { margin: 0; font-size: 12px; color: var(--color-text-muted); }
.emo-anim {
  display: inline-block; margin-left: 2px; padding: 0 7px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.emo-dl-form { margin: 6px 0 0; width: 100%; }
.emo-dl-btn { width: 100%; padding: 7px 10px; font-size: 13.5px; }
.emo-count { margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); }
.emo-custom { margin: 0 0 10px; font-size: 14.5px; }
.emo-custom a { color: var(--color-secondary); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .emo-item, .emo-thumbs { transition: none; } }
/* Phones and tablets: a compact Download Pack block sits right under the title,
   and the sidebar copy of the button is hidden, so only one is ever shown
   (display:none also keeps it away from screen readers). */
.emo-dl-top { display: none; margin: 4px 0 6px; }
.emo-dl-top .tpl-use-note { margin: 8px 0 0; }
@media (max-width: 959px) {
  .emo-dl-top { display: block; }
  .emo-detail .tpl-detail-side .emo-side-dl { display: none; }
}