/* --- Uniform Category Thumbnails --- */
.thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;        /* consistent ratio */
  overflow: hidden;
  border-bottom: 1px solid var(--ring);
  background: #0c141d;        /* same background as cards */
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* crop instead of stretching */
  object-position: center;    /* center the focus */
  display: block;
  transition: transform 0.3s ease;
}

/* Optional: add hover zoom polish */
.thumb:hover img {
  transform: scale(1.05);
}

/* Optional: keep the whole grid uniform */
.grid .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- Uniform Category Thumbnails (with hover glow) --- */
.thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3; /* consistent ratio for all cards */
    overflow: hidden;
    border-bottom: 1px solid var(--ring);
    background: #0c141d;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px 14px 0 0; /* match rounded corners from game cards */
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

    .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* crop instead of stretch */
        object-position: center;
        display: block;
        transition: transform .35s ease;
    }

/* Hover glow effect similar to game cards */
.card:hover .thumb {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 6px 22px rgba(0,0,0,.40);
    filter: brightness(1.05);
}

    .card:hover .thumb img {
        transform: scale(1.05);
    }

    /* Optional: subtle border glow for interactivity */
    .card:hover .thumb::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid rgba(110,168,254,0.35); /* same blue accent tint */
        border-radius: inherit;
        pointer-events: none;
        box-shadow: 0 0 14px rgba(110,168,254,0.25);
        animation: thumb-glow 1.4s ease-in-out infinite alternate;
    }

@keyframes thumb-glow {
    from {
        box-shadow: 0 0 8px rgba(110,168,254,0.3);
    }

    to {
        box-shadow: 0 0 18px rgba(110,168,254,0.55);
    }
}