/* =============================================================================
   The gallery (gallery.html, js/gallery.js): big pictures of finished designs, two to a row on a wide screen and one on
   a phone. The page's one primary button is "Design your weapon" at the top; each picture's "Design one like this" is the
   quiet secondary button. Tokens from theme.css only.
   ============================================================================= */

.gal { width: 100%; max-width: 1180px; margin-inline: auto; padding: clamp(36px, 6vw, 64px) 24px clamp(56px, 8vw, 96px); }

.gal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.gal-head-text { max-width: 62ch; }
.gal-head h1 {
  font-family: var(--font-display); font-size: clamp(32px, 5vw, 44px); font-weight: 700; line-height: 1.3;
  letter-spacing: var(--track-display); color: var(--text);
}
.gal-lede { margin-top: 12px; font-size: 18px; line-height: 1.75; color: var(--text-dim); }
.gal-note { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-faint); }
.gal-cta { flex: none; }

.gal-state { margin-top: 40px; font-size: 16px; color: var(--text-dim); }
.gal-state[hidden], .gal-retry[hidden] { display: none; }
.gal-retry { margin-top: 12px; }

.gal-grid {
  list-style: none; margin: 36px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 28px;
}
.gal-grid:empty { display: none; }
.gal-item {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--panel); border: 0.8px solid var(--border); border-radius: var(--r-card); overflow: hidden;
}
.gal-pic { margin: 0; background: var(--well); border-bottom: 0.8px solid var(--border-soft); }
.gal-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gal-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; }
.gal-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.gal-by { font-size: 15px; color: var(--text-faint); }
.gal-by bdi { color: var(--text-dim); }
.gal-remix { margin-top: 10px; }

.gal-more { margin-top: 28px; text-align: center; }
.gal-more .btn[hidden] { display: none; }

.gal-how { margin-top: clamp(48px, 7vw, 72px); padding-top: 28px; border-top: 0.8px solid var(--border-soft); max-width: 62ch; }
.gal-how h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--text); }
.gal-how p { margin-top: 8px; font-size: 16px; line-height: 1.75; color: var(--text-dim); }

@media (max-width: 560px) {
  .gal { padding-inline: 16px; }
  .gal-lede { font-size: 17px; }
  .gal-cta { width: 100%; }
  .gal-grid { gap: 20px; }
  .gal-remix { width: 100%; }
}

/* ---- admin.html, the Gallery tab: one row per item, the picture beside its text (stacked on a phone). ---- */
.adm-gal-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 8px; }
.adm-gal-count { color: var(--text-faint); }
.adm-gal { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.adm-gal-item {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 16px; padding: 12px;
  background: var(--panel); border: 0.8px solid var(--border); border-radius: var(--r-card);
}
.adm-gal-pic { display: block; border-radius: var(--r-control); overflow: hidden; background: var(--well); }
.adm-gal-pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.adm-gal-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.adm-gal-meta { font-size: 14px; color: var(--text-faint); }
.adm-gal-meta b { color: var(--text); }
.adm-gal-title { display: flex; gap: 8px; }
.adm-gal-title .input { flex: 1; min-width: 0; }
.adm-gal-prompt { font-size: 15px; line-height: 1.7; color: var(--text-dim); overflow-wrap: anywhere; }
.adm-gal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
@media (max-width: 640px) {
  .adm-gal-item { grid-template-columns: minmax(0, 1fr); }
}