/* Public gallery (Phase 9.5): index filters, design and style pages,
   share row. Tiles reuse .catalog-grid/.catalog-tile from landing.css. */

.tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Index filters */

.gallery-filters {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.filter-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: var(--space-2);
}

.chip {
  font-size: var(--text-sm);
  line-height: 1.4;
  padding: 2px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--paper-card);
  color: var(--ink);
  text-decoration: none;
}

.chip:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

.chip.is-active {
  background: var(--ink);
  border-color: var(--line-strong);
  color: var(--paper);
}

.gallery-more {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.gallery-empty {
  color: var(--ink-soft);
  padding-block: var(--space-6);
}

/* Design and style pages */

.design-page h1,
.style-page h1 {
  font-size: var(--text-h2);
  margin: var(--space-3) 0 var(--space-5);
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  gap: var(--space-2);
}

.design-figure {
  border: var(--border-hard);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--paper-card);
  box-shadow: var(--shadow-soft);
}

.design-figure img {
  width: 100%;
  height: auto;
}

.design-figure figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.design-license {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.design-description {
  margin: var(--space-5) 0;
}


.design-cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin: var(--space-7) 0;
}

.design-cta p {
  color: var(--paper);
  opacity: 0.85;
  max-width: 34rem;
}

.design-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.design-cta .btn-ghost {
  color: var(--paper);
  border-color: var(--paper);
}

.design-cta .btn-ghost:hover {
  color: var(--ink);
  background: var(--paper-card);
  border-color: var(--paper-card);
}

.related {
  margin-top: var(--space-7);
  display: grid;
  gap: var(--space-4);
}

.related h2 {
  font-size: var(--text-xl);
}

.next-design {
  margin-top: var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Style page editorial: the sensory lede under the H1, the two prose
   sections, and the closing line that leads into the gallery grid. */

.style-lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
  max-width: 40rem;
  margin: 0 0 var(--space-5);
}

.style-editorial {
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-3);
}

.style-editorial h2 {
  font-size: var(--text-xl);
}

.style-editorial p {
  max-width: 40rem;
}

.style-close {
  max-width: 40rem;
  margin: var(--space-6) 0 var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--ink);
}