/* accid-items.css — the STRUCTURE of everything that shows a list of items
   (SPI-631): search results now; the one item (accid-item.js) and its views
   — cards, list, compact, masonry, slideshow — as gallery, catalogue and the
   view pages move onto it. Structure only: what makes a strip scroll or a
   title clamp. The starting LOOK of all of it is in our-choices.css, where
   anything a person sets beats it. No !important, no fallbacks. */

/* ── search results (search-module.js) — moved out of the <style> block the
   module injected on every render (once per search module on the page). ── */
.accid-search-module { margin: 0 auto; width: 100%; }
.asm-strip { display: flex; overflow-x: auto; scroll-snap-type: x proximity; }
.asm-strip:empty { display: none; }
.asm-card { flex-grow: 0; flex-shrink: 0; scroll-snap-align: start; overflow: hidden;
  text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.asm-thumb { background-position: center; background-size: cover; background-repeat: no-repeat; }
.asm-title { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.asm-foot { text-align: right; }

/* ── THE ITEMS MODULE (items-module.js): the list and its views. The list is
   a grid when no view is stored; data-view picks another. Columns and Gap are
   the module's `list` part (galleryColumns -> --grid-columns, gap -> gap and
   --item-gap); the starting values are our-choices.css. ── */
.accid-items-list { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
.accid-items-list .accid-item { min-width: 0; }
.accid-items-list .accid-item a[data-field="link"] { display: block; text-decoration: none; color: inherit; }
.accid-items-list [data-field="picture"] { display: block; width: 100%; height: auto; }
.accid-items-list[data-view="masonry"] { display: block; columns: var(--grid-columns); }
.accid-items-list[data-view="masonry"] > .accid-item { break-inside: avoid; margin-bottom: var(--item-gap); }
.accid-items-list[data-view="slideshow"] { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.accid-items-list[data-view="slideshow"] > .accid-item { flex: 0 0 100%; scroll-snap-align: start; }

/* ── Items slideshow: the row with its arrows and counter laid over it, and
   the thumbnail strip under it. Thumbnails take --thumb-size (the module's
   strip part; 80px from our-choices.css). ── */
.accid-items-slides { position: relative; }
.accid-items-list[data-view="slideshow"] { scrollbar-width: none; }
.accid-items-list[data-view="slideshow"]::-webkit-scrollbar { display: none; }
.accid-items-prev, .accid-items-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; cursor: pointer; }
.accid-items-prev { left: 0; }
.accid-items-next { right: 0; }
.accid-items-count { position: absolute; top: 0; right: 0; z-index: 1; }
.accid-items-strip { display: flex; flex-wrap: wrap; justify-content: center; }
.accid-items-thumb { width: var(--thumb-size); height: var(--thumb-size); padding: 0; overflow: hidden; cursor: pointer; }
.accid-items-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Items list and compact views. The item's `address` (a page's link, a
   picture's address) shows in compact only. ── */
.accid-items-list:not([data-view="compact"]) [data-field="address"] { display: none; }
/* list: one item per row, the picture in its own column on the left */
.accid-items-list[data-view="list"] > .accid-item { display: grid; grid-template-columns: var(--items-list-picture) minmax(0, 1fr); align-items: start; column-gap: var(--item-gap); }
.accid-items-list[data-view="list"] > .accid-item a[data-field="link"] { display: contents; }
.accid-items-list[data-view="list"] > .accid-item [data-field] { grid-column: 2; }
.accid-items-list[data-view="list"] > .accid-item [data-field="picture"] { grid-column: 1; grid-row: 1 / span 20; }
/* compact: one line per item — title, date and address; nothing else */
.accid-items-list[data-view="compact"] > .accid-item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--item-gap); }
.accid-items-list[data-view="compact"] > .accid-item a[data-field="link"] { display: contents; }
.accid-items-list[data-view="compact"] :is([data-field="picture"], [data-field="blurb"], [data-field="tags"], [data-field="categories"], [data-field="povs"]) { display: none; }
.accid-items-list[data-view="compact"] [data-field="address"] { overflow-wrap: anywhere; }

/* ── THE MODULE TAKES THE WIDTH IT IS GIVEN, NEVER ITS CONTENT'S. A slideshow
   row is many full-width slides side by side; without these its width came
   from its widest picture (19,735px measured on style-guide-b2, 156 slides),
   every "100%" slide followed, and the module pulled its container — and
   the catalogues beside it — that wide (Shawn, 2026-10-06). The page sizes
   its column from its content's narrowest width, and a scrolling row reports
   all its slides end to end; contain: inline-size makes the row's width
   never depend on its content, so the slides take the row's width. ── */
.accid-items-list[data-view="slideshow"] { contain: inline-size; }

/* ── Per page: the page buttons under the list; an item past the current
   page is hidden (itemsPage). Last in the file so it beats each view's own
   display. ── */
.accid-items-list > .accid-item[hidden] { display: none; }
.accid-items-pager { display: flex; flex-wrap: wrap; justify-content: center; }
.accid-items-pager button { cursor: pointer; }

/* An item that is not a link opens the lightbox (itemsLightbox): say so. */
.accid-items-list:not([data-view="slideshow"]) .accid-item:not(:has(a[data-field="link"])) [data-field="picture"] { cursor: zoom-in; }