/* The decks page: the list card's covers and the two dialogs it opens. */

/* --- decks (decks/templates/deck_list.html + the two dialogs) ------ */

/* The list card's header, and the button that opens the deck dialog. The
   layouts page's .spread-preview-frame is the model: one height for every
   card in the grid so the row lines up, and the anchor's own colour and
   underline undone because the picture is the control. */
.deck-cover-frame {
    display: block;
    height: 16rem;
    padding: .75rem;
    border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .12s ease-in-out;
}

.deck-cover-frame:hover,
.deck-cover-frame:focus {
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
}

/* A cover is portrait and the frame is landscape, so it is letterboxed
   rather than cropped — the art is the point. */
.deck-cover-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The deck dialog's General tab: cover and back side by side. Both are
   controls — they open the preview dialog and are stops in its cycle, the
   same as a card cell — so the anchor's own colour and underline come off and
   the picture is the button. */
.deck-figure {
    margin: 0;
    /* Shrinkable. The pair is about 17rem side by side, which is wider than the
       modal body on the narrowest phones, and two pictures that give a little
       are better than a row that clips. */
    min-width: 0;
}

.deck-figure-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--tblr-border-radius, .25rem);
}

/* max-height rather than height, so the picture can also give width when the
   figure beside it is squeezing it; on any normal screen it is the 14rem it
   always was. */
.deck-figure-image {
    display: block;
    max-height: 14rem;
    max-width: 100%;
    object-fit: contain;
}

/* A suit's own artwork as its tab marker, beside the name. */
.deck-suit-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    vertical-align: text-bottom;
}

/* One cell of a suit tab's grid. The grid itself is .card-grid, shared with
   the reading editor's card step. */
.deck-card-item {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--tblr-border-radius, .25rem);
    padding: .25rem;
    transition: background-color .12s ease-in-out;
}

.deck-card-item:hover,
.deck-card-item:focus {
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
}

/* A cell whose picture has not been swapped in yet (lazy_images.js holds
   it in data-src until the cell nears the fold). The width and height
   attributes already reserve the 7:12 box; this is what stops it reading as
   a rendering fault while it waits. */
.deck-card-item img:not([src]) {
    background-color: var(--tblr-bg-surface-secondary, #f1f5f9);
    border-radius: var(--tblr-border-radius, .25rem);
}

/* The preview dialog's picture: as big as the viewport allows, the same cap
   the reading editor's .card-preview uses. */
.deck-preview-image {
    max-height: 60vh;
    max-width: 100%;
    object-fit: contain;
}

/* The picture and the two chevrons that step off it. The frame is what the
   controls are positioned against, so they follow the image's own box rather
   than the dialog's — and it centres the picture, which is why the rule is a
   flex row and not just `position: relative`. The min-height is for a card
   with no image to show: the column is NOT NULL today, so this is only
   insurance that the controls never collapse on top of each other. */
.deck-preview-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
}

/* Lightbox controls: on the picture, at its edges, out of the way of the art
   until the hand goes near them. Translucent rather than solid because the
   card reaches the frame's edge on a narrow viewport and the chevron then
   sits on the artwork itself — and in Tabler's own surface colour rather than
   a hard-coded white, because the dialog follows data-bs-theme. */
.deck-preview-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    border-radius: 50%;
    background-color: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #1a2234);
    opacity: .7;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    transition: opacity .12s ease-in-out;
}

.deck-preview-nav:hover,
.deck-preview-nav:focus-visible {
    opacity: 1;
}

.deck-preview-nav-prev {
    left: 0;
}

.deck-preview-nav-next {
    right: 0;
}

/* The preview dialog opens over the deck dialog — the only stacked pair in the
   app. Bootstrap gives every modal 1055 and every backdrop 1050, so the
   second backdrop lands *under* the first dialog and leaves it undimmed
   behind the second. Both numbers are Tabler custom properties, so raising
   them needs neither !important nor JS.

   The adjacent-sibling selector works because each modal appends its own
   backdrop to the end of body: with two open, the two backdrops are the
   last two children and therefore adjacent. */
#deck-preview-modal {
    --tblr-modal-zindex: 1065;
}

.modal-backdrop + .modal-backdrop {
    --tblr-backdrop-zindex: 1060;
}

/* What the preview dialog is currently showing. The dialog steps through the
   whole deck, so the grid behind it has to say which of the 80 pictures that
   is — an outline rather than a background, because hover already owns the
   background and the two would be indistinguishable under the cursor. It lands
   on a General-tab figure as readily as on a suit cell: the cover and the back
   are stops in the same cycle. */
.deck-card-item.is-current,
.deck-figure-link.is-current {
    outline: 2px solid var(--tblr-primary, #0054a6);
    outline-offset: -2px;
}