/* The grid of card thumbnails.

   Shared by the deck dialog's suit tabs (decks/deck/templates/detail_modal.html)
   and the reading editor's card step, which is why it is its own file rather
   than part of either. The cells differ — decks renders anchors, the editor
   renders buttons — but the grid and the 7:12 picture box are one definition. */

.card-grid {
    display: grid;
    grid-template-columns: repeat(var(--card-grid-cols, 5), minmax(0, 1fr));
    gap: .5rem;
}

/* The deck dialog's suit tabs: a whole suit at a glance, seven across.

   The count lives here rather than in a style attribute on the grid, because an
   inline declaration beats every stylesheet rule and the whole point is that
   these steps can override it. The reading editor's grid is unaffected: it
   computes its own count from the suit's size and sets the property from JS
   (renderCards), which is also why it does its own narrow-viewport clamp.

   The steps are Bootstrap's modal breakpoints, because what the cells have to
   fit in is the dialog, not the window: modal-xl is 1140px wide from 1200px up,
   800px from 992px, 500px from 576px, and the viewport below that. Seven across
   is a 151px card in the widest and a 36px one on a phone — this keeps it
   between roughly 100px and 150px the whole way down. */
.card-grid-suit {
    --card-grid-cols: 7;
}

@media (max-width: 1199.98px) {
    .card-grid-suit {
        --card-grid-cols: 6;
    }
}

@media (max-width: 991.98px) {
    .card-grid-suit {
        --card-grid-cols: 4;
    }
}

@media (max-width: 575.98px) {
    .card-grid-suit {
        --card-grid-cols: 3;
    }
}

.card-grid button {
    background: none;
    border: 0;
    padding: .25rem;
}

.card-grid img {
    width: 100%;
    aspect-ratio: 7 / 12;
    object-fit: contain;
}

/* Already placed in another slot. The database enforces this with
   UNIQUE (suit_code, card_code, reading_id); dimming it here only saves
   the user a pointless round trip. */
.card-grid button.is-used {
    cursor: not-allowed;
}

/* The image and the name fade, not the cell: the cell is what holds the
   overlay's surface, and fading that would let the board show through it. */
.card-grid button.is-used img,
.card-grid button.is-used div {
    opacity: .3;
}