/*
 * The Gallery (Batch and Bite row J, its card #9): the site's /gallery page, the
 * few pictures beside the request form, and the baker's Products › Gallery.
 * Linked by those views only. A column is never narrower than the screen
 * allows (min(100%, …)), so a 390-pixel phone shows one picture to a row and
 * nothing scrolls sideways; every picture keeps its own shape.
 */
/* The page's width is a wide part's, as the shop's grid is (storefront-look.css). */
.gallery-intro { max-width: var(--sf-content); margin: 0 0 var(--space-4); }
.gallery-events ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gallery-events li { display: flex; align-items: center; gap: var(--space-1); }
.gallery-events a { display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--sf-line, var(--line));
  border-radius: var(--radius-pill); text-decoration: none; overflow-wrap: anywhere; }
.gallery-events a[aria-current] { background: var(--sf-ink, var(--ink)); color: var(--sf-ink-on, var(--surface)); }
.gallery-count { color: var(--sf-muted, var(--muted)); font-size: var(--sf-small, var(--text-s)); }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.gallery-grid-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: var(--space-2); }
.gallery-grid li { min-width: 0; }
.gallery-grid figure { margin: 0; }
.gallery-grid img, .gallery-edit-picture img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.gallery-grid figcaption { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.gallery-event { display: block; color: var(--sf-muted, var(--muted)); font-size: var(--sf-small, var(--text-s)); }
.gallery-beside { margin: var(--space-6) 0; }
.gallery-edit-picture { margin: 0 0 var(--space-4); max-width: 40rem; }
.gallery-list .gallery-thumb { display: block; width: 6rem; max-width: 100%; height: auto; border-radius: var(--radius-control); }