/* 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, no fallbacks. */

/* ── 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; }

/* ── PICTURE SHAPE (itemsShape, Shawn 2026-10-07). Blank = the rectangle.
   Square: every picture 1:1, cropped to fill. Circle: drawn as the swim view
   draws a node — a disc, the picture inset, one ring per category outside it,
   tag squares under it (accid-item.js circle()). Colours are var(--term) from
   [data-term] (the project's terms.css); sizes are our-choices.css. ── */
.accid-items-list[data-shape="square"] [data-field="picture"] { aspect-ratio: 1; object-fit: cover; }
.accid-item-circle { display: flex; flex-direction: column; align-items: center; gap: var(--item-pip-gap); }
.accid-item-ring { display: block; border-radius: 50%; border-style: solid; border-color: var(--term); width: 100%; }
.accid-item-disc { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--disc); width: 100%; overflow: hidden; }
/* A photo covers a circle 78% of the disc; the text placeholder sits whole in
   that circle's inscribed square (78% x 0.707), so its words are never cut. */
.accid-items-list .accid-item-disc [data-field="picture"] { width: 78%; aspect-ratio: 1; object-fit: cover; }
.accid-items-list .accid-item-disc [data-field="picture"]:not([data-placeholder]) { border-radius: 50%; }
.accid-items-list .accid-item-disc [data-field="picture"][data-placeholder] { width: 55%; object-fit: contain; }
.accid-item-pips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--item-pip-gap); }
.accid-item-pips > i { display: block; width: var(--item-pip-size); height: var(--item-pip-size); background: var(--term); }