/* /gallery -- public route browsing. Loaded via marketing_header()'s
   $extraStylesheet param, alongside css/marketing.css (already public-facing
   via /examples), so .mk-card/.mk-card-thumb/.mk-card-stats are reused as-is
   here rather than redefined -- only what's actually new to this page lives
   in this file. */

/* .mk-cards defaults to a fixed 3-column grid, fine for a small curated
   /examples set but wrong here: the gallery can hold anywhere from 0 to
   hundreds of cards and needs to reflow like .routes-grid already does. */
.mk-cards-gallery {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.gallery-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease;
}

.gallery-card:hover {
  border-color: var(--mk-ink-3);
}

.gallery-card-thumb-empty {
  display: grid;
  place-items: center;
  min-height: 100px;
  color: var(--mk-ink-3);
  font-size: 12px;
}

.gallery-card-name {
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Same visual language as .chip-tag/.chip-folder elsewhere in the app --
   soft accent, not a warning -- since a masked start is the runner's own
   deliberate, safer choice, not something wrong with the route. */
.gallery-card-masked {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mk-accent-soft);
  border: 1px solid var(--mk-accent-border);
  color: var(--mk-accent);
  font-size: 11px;
}

.gallery-status {
  text-align: center;
  color: var(--mk-ink-3);
  font-size: 14px;
  padding: 40px 20px;
}

.gallery-status:empty {
  padding: 0;
}

.gallery-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 0;
}

/* .mk-btn sets its own display:inline-flex (css/tokens.css) at the same
   specificity as the UA stylesheet's [hidden] { display: none }, and author
   styles win a specificity tie against UA styles -- so plain [hidden] alone
   silently fails to hide an .mk-btn. Belt-and-suspenders since JS also
   flips the hidden PROPERTY (not just the attribute) on load/error. */
#galleryLoadMore[hidden] {
  display: none;
}