/* The homepage collection wall's grid, shared by the site and the admin's wall editors so
   the editors are an exact preview rather than an approximation. Change it in one place.

   The row unit is a fraction of the wall's own width (`cqw`), which is what lets a tile
   keep its photo's proportions and still be able to span two columns: every length is a
   share of the width, so `shop/wall.py` can settle each tile's row count once on the
   server and it holds at every screen size, with no layout script.

   `cqw` resolves against the nearest ancestor with `container-type`, and an element can't
   query itself, so the grid needs the wrapper around it.

   **Two arrangements, one set of markup.** A phone is given two or three columns against
   the desktop's three or four, so its tiles are about twice the size and the desktop
   placement squashed down is not the same layout. Each is chosen by hand in its own admin
   editor, and both ride on the same tile as custom properties: the phone's are the plain
   rule below and the desktop's are in the media query, so a photo is in the page once,
   with one `<img>`, rather than the wall being rendered twice. `order` is part of it:
   which tile comes first *within* a column is the order the grid places them in, and that
   can't be document order for both layouts at once. */

.wall-container {
    container-type: inline-size;
}

.wall-grid {
    display: grid;
    grid-template-columns: repeat(var(--wall-phone-columns), 1fr);
    /* Must equal `ROW_UNIT` in shop/wall.py, which counts a tile's rows in these units.
       Not finer than this: the browser's used track size drifts from the declared one by a
       little per track, and over a span of hundreds it added up to most of a gap. The note
       on ROW_UNIT has the measurements. */
    grid-auto-rows: 0.5cqw;
    row-gap: 0;
    column-gap: var(--wall-gap);
    /* Placement is by hand: every tile names its column, and `dense` drops it into the
       earliest row of that column where it fits. */
    grid-auto-flow: row dense;
}

.wall-tile {
    grid-column: var(--phone-tile-column);
    grid-row: span var(--phone-tile-rows);
    order: var(--phone-tile-order);
    /* The tile is as tall as the grid area it was given, less one gap, and sits at the top
       of it. That is what makes the gap under a tile exactly the gap beside it: the server
       sized the area as the photo's height plus one gap, so whatever rounding the area
       picked up lands on the height (at most half a row) instead of on the gap. Setting
       the height from `aspect-ratio` instead is what left the vertical gaps visibly
       tighter than the horizontal ones, since every bit of track drift came off them. */
    align-self: start;
    height: calc(100% - var(--wall-gap));
    overflow: hidden;
    border-radius: 0.75rem;
    background: #EFE6D9;
}

/* Tailwind's `md`. Above it the wall switches to the desktop arrangement; document order
   is already the desktop reading order, so `order` goes back to doing nothing. */
@media (min-width: 768px) {
    .wall-grid {
        grid-template-columns: repeat(var(--wall-columns), 1fr);
    }

    .wall-tile {
        grid-column: var(--tile-column);
        grid-row: span var(--tile-rows);
        order: 0;
    }
}

.wall-tile > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}