/* =============================================================================
 * Shared masonry wall chrome (Quotes + Gallery text filters / layout shell).
 * Page-specific cards stay in 50-pages/*.css.
 * ============================================================================= */

:root {
  --lupaxa-wall-max: 1680px;
  --lupaxa-wall-gap: 1rem;
  --lupaxa-wall-card-min: 280px;
}

.md-content__inner:has(#quotes-wall),
.md-content__inner:has(#gallery-wall) {
  max-width: min(100%, var(--lupaxa-wall-max));
}

#quotes-wall,
#gallery-wall {
  box-sizing: border-box;
  margin: 1.25rem 0 var(--lupaxa-spacing-lg);
  padding: 0;
  background: transparent;
}

.quotes-filters,
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.35rem 0.15rem;
  margin: 0 0 1.25rem;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.9rem;
}

.quotes-filter,
.gallery-filter {
  padding: 0.15rem 0.35rem;
  color: var(--md-default-fg-color--light);
  font: inherit;
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: color var(--lupaxa-transition-fast);
}

.quotes-filter:hover,
.quotes-filter.is-active,
.gallery-filter:hover,
.gallery-filter.is-active {
  color: var(--lupaxa-light-blue);
}

.quotes-filter-sep,
.gallery-filter-sep {
  color: var(--md-default-fg-color--lighter);
  user-select: none;
}

.quotes-masonry,
.gallery-masonry {
  position: relative;
  max-width: var(--lupaxa-wall-max);
  margin: 0 auto;
}

.quotes-masonry:not(.is-laid-out),
.gallery-masonry:not(.is-laid-out) {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--lupaxa-wall-card-min)), 1fr)
  );
  gap: var(--lupaxa-wall-gap);
  align-items: start;
}

.quotes-masonry.is-laid-out,
.gallery-masonry.is-laid-out {
  display: block;
}

@media print {
  .quotes-filters,
  .gallery-filters {
    display: none;
  }
}