/* ---------------------------------------------------------------------------
   tile-grid.css - the card grid, shared by both catalogues
   Location: /css/tile-grid.css
   Revision: 1  (2026-08-19)

   WHAT THIS IS
     The .cat-grid / .cat-item / .cat-thumb component that /adam-collection/
     renders its browse pages with, lifted out of adam.css so the ColecoVision
     collection can use the same layout. Structure only: geometry, spacing,
     shadow shape, hover behaviour, the thumbnail preview.

   IT DECLARES NO COLOURS OF ITS OWN
     Every colour here is a var() with a fallback. The two catalogues are
     deliberately different to look at - ColecoVision is yellow on near-black,
     ADAM is a light page with dark blue-grey shells - and that stays true. The
     host page supplies the palette; this file supplies the shape.

     Define these on :root (or any ancestor) before linking this file:

       --tile-panel        card background (a colour or a gradient)
       --tile-rule         card border
       --tile-rule-lt      card border while hovered
       --tile-text         title colour
       --tile-heading      title colour while hovered
       --tile-muted        the meta line under the title
       --tile-label        the monospace id
       --tile-thumb-bg     behind a thumbnail that does not fill its box
       --tile-border-soft  thumbnail border
       --tile-glow         the hover shadow's colour

     /adam-collection/ maps these to its --adam-* tokens; /collection/ maps them
     to the ColecoVision palette. Neither app has to know the other exists.

   WHY THE FALLBACKS ARE THERE
     A page that links this file and forgets the palette gets a legible grey
     card rather than an invisible one. That is a safety net, not a theme - if
     you are seeing grey cards, the host page has not defined its tokens.
   --------------------------------------------------------------------------- */

.cat-grid {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.cat-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
    background: var(--tile-panel, #23272c);
    border: 2px solid var(--tile-rule, #3a3f45);
    border-radius: 8px;
    color: var(--tile-text, #e8e8e8);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .45),
                inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: all .3s ease;
}

.cat-item:hover {
    border-color: var(--tile-rule-lt, #6a7078);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px var(--tile-glow, rgba(0, 0, 0, .5)),
                inset 0 1px 0 rgba(255, 255, 255, .12);
    text-shadow: none;
}

/* --- the thumbnail ------------------------------------------------------- */

.cat-thumb {
    width: 56px; height: 56px;
    object-fit: contain;
    background: var(--tile-thumb-bg, #0a0a0a);
    border: 1px solid var(--tile-border-soft, #3a3f45);
    border-radius: 4px;
    flex: 0 0 auto;
}

/* Dashed, and dimmed until the card is hovered. Coverage is 72% site-wide and
   as low as 29% on some categories, so this state is common enough to be part
   of the design rather than an error condition. */
.cat-thumb-missing { border-style: dashed; opacity: .8; }
.cat-item:hover .cat-thumb-missing { opacity: 1; }

.cat-nothumb {
    width: 56px; height: 56px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed var(--tile-border-soft, #3a3f45);
    border-radius: 4px;
    color: var(--tile-muted, #999);
    font-size: 22px;
}

/* --- the text ------------------------------------------------------------ */

.cat-txt { min-width: 0; }        /* lets the ellipsis work inside a grid cell */

/* --tile-title is separate from --tile-text on purpose. ADAM sets its titles
   white and turns them yellow on hover; ColecoVision's lists have always shown
   titles yellow at rest, and a tile view that dropped that would stop looking
   like the rest of its own catalogue. Giving each theme a token beats making
   one of them override a rule. Falls back to --tile-text when unset. */
/* A title may be a link now (browse.php makes it one so the entry is crawlable
   and middle-clickable). Anchors arrive underlined; the hover rule below is
   what should say "this is clickable", not a permanent rule under every card. */
.cat-title { text-decoration: none; }
.cat-title {
    display: block;
    font-size: 14px;
    color: var(--tile-title, var(--tile-text, #e8e8e8));
    font-weight: bold;
    line-height: 1.35;
}
.cat-item:hover .cat-title { color: var(--tile-heading, #fff); }

.cat-meta {
    display: block;
    font-size: 11.5px;
    color: var(--tile-muted, #999);
    margin-top: 4px;
}

.cat-id {
    font-family: 'Courier New', monospace;
    color: var(--tile-label, #b9b9b9);
    font-size: 11px;
    font-weight: bold;
}

/* --- hover-to-enlarge ---------------------------------------------------- */

.thumb-zoom { position: relative; display: inline-block; flex: 0 0 auto; }

.thumb-zoom-pop {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 64px; top: 50%;
    transform: translateY(-50%);
    background: var(--tile-thumb-bg, #0a0a0a);
    border: 2px solid var(--tile-rule-lt, #6a7078);
    border-radius: 8px;
    padding: 6px;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .85),
                0 0 22px var(--tile-glow, rgba(0, 0, 0, .4));
    /* The card underneath stays clickable: the preview never takes the cursor,
       so moving onto it cannot swallow the click or make it flicker. */
    pointer-events: none;
}
.thumb-zoom:hover .thumb-zoom-pop { display: block; }

.thumb-zoom-pop img {
    display: block;
    max-width: 260px; max-height: 340px;
    width: auto; height: auto;
    border-radius: 4px;
    background: #fff;          /* box art is usually white-edged; keep it white */
}

.thumb-zoom-cap {
    display: block;
    max-width: 260px;
    color: var(--tile-heading, #fff);
    font-size: 12px; font-weight: bold;
    text-align: center;
    margin-top: 5px;
}

/* Lift the whole card while it is hovered, or the preview hides behind its
   neighbours.

   .cat-item:hover carries a transform, and a transform makes the element a
   stacking context. That traps the popup: its z-index of 9999 stops competing
   with the rest of the page and only orders it WITHIN the hovered card. The
   card has no z-index of its own, so it keeps its place in document order and
   every later card in the grid paints on top, clipping the preview.

   So the fix is not a bigger number on the popup - no number there can escape
   the context. It is to raise the CARD the popup is trapped inside. */
.cat-item, .cat-cell { position: relative; }
.cat-item:hover, .cat-cell:hover { z-index: 600; }

/* The last column has no room to its right, so its preview opens leftward.
   nth-child(5n) is the widest the grid gets at minmax(260px, 1fr). */
.cat-grid > *:nth-child(5n) .thumb-zoom-pop { left: auto; right: 64px; }

/* Touch screens have no hover, and a preview that appeared on tap would fight
   the link underneath it. Left out there entirely. */
@media (hover: none) {
    .thumb-zoom-pop { display: none !important; }
}

@media (max-width: 640px) {
    .cat-grid { grid-template-columns: 1fr; gap: 9px; }
    .cat-item { padding: 9px 11px; }
}