/* promos-lite overrides, loaded after item.css */

/* item.css sets .lists { width: 100%; padding: 0 5% }, which overrides
   Bootstrap's fixed .container width, so the grid stretched across 4K screens
   while the 256x256 thumbnails stayed small. Cap the width, and the padding
   (5% of the viewport) at 5% of that cap, so on any screen >= 2000px a col-lg-2
   thumbnail is ~265px, a small (~3%) upscale of the 256px file. Below 2000px
   both caps are inactive and the original layout applies. */
.lists {
  max-width: 2000px;
  padding-left: min(5%, 100px);
  padding-right: min(5%, 100px);
  margin-left: auto;
  margin-right: auto;
}

/* .oldlists keeps its full-width background band; its content lines up with
   the capped .lists content (1800px) above it. */
.oldlists {
  padding-left: max(5%, calc((100% - 1800px) / 2));
  padding-right: max(5%, calc((100% - 1800px) / 2));
}

/* Highlights grid: thumbnails fill their cell as uniform squares (incl. the
   "next" tile), so the price/title overlays, which span the cell, sit on the
   image. Listing thumbnails (.portfolio-item) are sized below instead. */
.row-eq-height .img-thumbnail:not(.portfolio-item) {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #fff;
}

/* Listings (search, item and date pages): one thumbnail size in every section,
   whatever the container width. 300px is a ~13% upscale of the 256px files. */
:root {
  --listing-thumb: 300px;
}

/* Item page current/upcoming (max 4 each, larger RELATED_RESIZE images): keep
   Bootstrap's 4 columns and fill them, but never smaller than other listings. */
.row-related .portfolio-item {
  width: 100%;
}

@media (min-width: 768px) {
  .row-related > [class*="col-"] {
    width: max(25%, calc(var(--listing-thumb) + 30px));
  }
}

.row-thumbs .portfolio-item,
.row-related .portfolio-item {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background-color: #fff;
}

@media (min-width: 768px) {
  .row-thumbs > [class*="col-"] {
    width: calc(var(--listing-thumb) + 30px);
  }

  .row-thumbs .portfolio-item {
    width: 100%;
  }

  /* Rows (and their headings) are a whole number of cells wide and centred,
     so the leftover space is split on both sides. Browsers without round()
     keep the left-aligned rows. */
  .row-thumbs,
  .row-thumbs-title {
    width: round(down, 100% + 30px, calc(var(--listing-thumb) + 30px));
    margin-left: auto;
    margin-right: auto;
  }
}