/*
 * Game Category Pages
 *
 * .c888-cat-games — "Games Cat": infinite-scroll list of every game (7/row)
 * .c888-cat-big   — "Main Cat":  slider + title + search + strips + featured
 *
 * Uses theme CSS variables from main.css :root
 * (--c888-primary, --c888-surface, --c888-secondary, --c888-text,
 *  --c888-text-secondary, --c888-accent-hover).
 * Game-strip and game-card styles live in main.css; this file adds only the
 * page-level wrappers and the new section types.
 */

#c888-category {
    min-height: 60vh;
}

/* ============================================================
   Games Cat — infinite-scroll grid
   ============================================================ */

.c888-cat-games .c888-archive__header {
    margin-bottom: 20px;
}

/*
 * NOTE: main.css also defines `.c888-game-grid` as a `display:grid` container
 * (used elsewhere as a tile grid). Here `.c888-game-grid` is only the SECTION
 * wrapper — the real grid is `.c888-game-grid__grid` below — so we must force it
 * back to a plain block, otherwise the inner grid collapses to min-content and
 * the cards render at uneven, content-sized widths. Scope with `.c888-cat-games`
 * to win the specificity battle regardless of stylesheet load order.
 */
.c888-cat-games .c888-game-grid {
    display: block;
    padding: 0 0 32px;
}

/*
 * 7-column game grid.
 * minmax(0, 1fr) (not plain 1fr) is required: a bare 1fr track has a min size of
 * `auto` (= min-content), so cards with long titles or wide images would blow
 * their column out and the columns would render at uneven widths. minmax(0, …)
 * lets every track shrink to an equal share, giving 7 evenly sized cards.
 */
.c888-game-grid__grid {
    display: grid;
    grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
    gap: 8px;
}

@media ( max-width: 1200px ) { .c888-game-grid__grid { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); } }
@media ( max-width: 960px )  { .c888-game-grid__grid { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); } }
@media ( max-width: 768px )  { .c888-game-grid__grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); } }
@media ( max-width: 480px )  { .c888-game-grid__grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } }

/* Infinite-scroll sentinel + spinner */
.c888-game-grid__sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-top: 16px;
}

.c888-game-grid__spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var( --c888-surface, #232323 );
    border-top-color: var( --c888-primary, #7BF037 );
    border-radius: 50%;
    opacity: 0;
    animation: c888-spin 0.7s linear infinite;
    transition: opacity 0.2s;
}

.c888-game-grid__sentinel.is-loading .c888-game-grid__spinner {
    opacity: 1;
}

@keyframes c888-spin {
    to { transform: rotate( 360deg ); }
}

/* ============================================================
   Main Cat
   ============================================================ */

/* Term h2 title (between the slider and the search) */
.c888-cat-big__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var( --c888-text, #fff );
    margin: 20px 0 8px;
}

/* Full-width game search bar */
.c888-game-search {
    padding: 12px 0 16px;
    background: var( --c888-surface, #232323 );
    border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
}

.c888-game-search__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.c888-game-search__icon {
    position: absolute;
    left: 14px;
    color: var( --c888-text-secondary, #C1C1C1 );
    pointer-events: none;
    flex-shrink: 0;
}

.c888-game-search__input {
    width: 100%;
    padding: 11px 16px 11px 44px;
    background: var( --c888-secondary, #171717 );
    border: 1px solid rgba( 255, 255, 255, 0.12 );
    border-radius: 6px;
    color: var( --c888-text, #fff );
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.15s;
}

.c888-game-search__input::placeholder {
    color: var( --c888-text-secondary, #C1C1C1 );
}

.c888-game-search__input:focus {
    border-color: var( --c888-primary, #7BF037 );
}

/* Sub-category strip list — stacks .c888-game-strip sections */
.c888-game-strip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Featured games */
.c888-featured-games {
    padding: 24px 0;
}

.c888-featured-games__heading {
    font-size: 1.125rem;
    font-weight: 600;
    color: var( --c888-text, #fff );
    margin: 0 0 16px;
}

.c888-featured-games__row {
    display: grid;
    grid-template-columns: repeat( 7, 1fr );
    gap: 8px;
}

@media ( max-width: 1200px ) { .c888-featured-games__row { grid-template-columns: repeat( 6, 1fr ); } }
@media ( max-width: 960px )  { .c888-featured-games__row { grid-template-columns: repeat( 5, 1fr ); } }
@media ( max-width: 768px )  { .c888-featured-games__row { grid-template-columns: repeat( 4, 1fr ); } }
@media ( max-width: 480px )  { .c888-featured-games__row { grid-template-columns: repeat( 3, 1fr ); } }