/* Gallery Expression page.
   Layers on top of the shared warm-gallery system (styles.css). Reuses the
   design tokens (--bg, --surface, --accent, --border, --shadow), the card
   surface treatment, button styles, section rhythm, and the shared primary
   navigation + footer. No new fonts and no dark-mode override. */

/* The Gallery hero is a single copy column (no aside). The outer hero surface
   spans the full content width (no 60ch cap and no companion column); the copy
   keeps its own readable measure inside the card. */
.gallery-hero-content {
  grid-template-columns: 1fr;
}

.gallery-hero-content .hero-text {
  max-width: 66ch;
}

/* The complete catalogue is dense, so a deliberate editorial rhythm paces it:
   a steady 3/2/1 column grid with generous row gaps, and each card sits on the
   shared surface. Natural artwork aspect ratios are preserved by the shared
   .painting-image rule (no forced square, no crop). */
.gallery-grid {
  align-items: start;
}

/* Load more hides through the hidden attribute alone (the Featured filter and
   the final pagination batch both set loadMoreButton.hidden = true), but the
   shared .button rule in styles.css declares display: inline-flex, which
   overrides the UA's [hidden] { display: none }. The ID + attribute selector
   wins that contest here in the scoped sheet; with the attribute absent the
   shared flex button is untouched. */
#gallery-load-more[hidden] {
  display: none;
}

/* Mobile reading layout (mobile-layout-v2). This sheet loads after
   styles.css, whose own appended <=760px block already collapses the grid;
   the guard here keeps the single artwork column authoritative even if the
   shared sheet's breakpoint blocks are edited, and widens the load-more
   action to the full column. Desktop (>=761px) is untouched. */
@media (max-width: 760px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-load-more-row .button {
    width: 100%;
  }
}