/* itemlist.css — layout for the virtualized item-list engine (itemlist.js).
 *
 * The list element (.il-list) is sized to the full row count so the scrollbar
 * matches the real content length, but only one "window" of rows is ever in the
 * DOM. That window (.il-window) is absolutely positioned and slid down by
 * firstRow*rowH; the tiles inside flow with flexbox into the same 1-col (small)
 * / 2-col (medium+) grid the cards had when they were server-rendered. */

.il-list {
  position: relative;
  width: 100%;
  /* The Materialize .collection sets overflow:hidden (for its rounded corners),
     which clips the bottom border of the final row — the last tile sits exactly
     on the list's bottom edge. The virtualized window never overflows
     horizontally, so it's safe to let it show. */
  overflow: visible;
}

.il-window {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; /* both tiles in a row share the tallest height */
}

.il-list .witem {
  box-sizing: border-box;
  width: 100%;          /* small screens: one column */
  margin: 0;
}

@media (min-width: 601px) {
  .il-list .witem { width: 50%; } /* medium+: two columns (matches m6 l6) */
}

/* Empty filler cell that completes an odd final row (only rendered in 2-col
   mode). Inherits the .collection-item borders/height so the grid closes as a
   clean, complete row. */
.il-list .il-filler {
  box-sizing: border-box;
  width: 50%;
}

/* Groups layout (drops / new / top / suit_list): each .il-group is also a
   Materialize .collection (for its borders); we flow its tiles like the grid,
   override the .collection overflow:hidden so the final row's border shows, and
   use content-visibility so large opened groups stay cheap to paint. */
.il-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  overflow: visible;
}
/* Direct-child (`>`) only: suit tiles wrap their pieces in <img class="suit-dia
   witem"> diamonds, so a descendant `.il-group .witem` rule would wrongly size
   those nested diamonds. The tiles themselves are the immediate children
   (.witem grids, .sitem suits, or .il-filler). */
.il-group > .witem,
.il-group > .sitem,
.il-group > .il-filler {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
}
@media (min-width: 601px) {
  .il-group > .witem,
  .il-group > .sitem,
  .il-group > .il-filler { width: 50%; }
}
.il-group > .witem,
.il-group > .sitem {
  content-visibility: auto;
  contain-intrinsic-size: 90px;
}

.il-list.il-empty::after {
  content: "No items.";
  display: block;
  padding: 24px;
  text-align: center;
  color: #9e9e9e;
}