/* ═══ /games - The Catalogue (Noir Atelier) ═══ */

.page-title-section { padding: clamp(3rem, 6vw, 5rem) 0 2.4rem; position: relative; z-index: 2; }
.catalogue-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.catalogue-head .eyebrow::after { content: ''; width: 2rem; height: 1px; background: var(--gold-dim); }
.section-title-epic { font-size: clamp(2.3rem, 5.5vw, 3.6rem); margin: 0.6rem 0 0.4rem; }
.section-subtitle { color: var(--text-secondary); font-size: 1.02rem; max-width: 620px; margin: 0 auto; }
.section-subtitle a { color: var(--gold); }
.section-subtitle a:hover { color: var(--crimson-hot); }

.section-epic { padding: 1.5rem 0 6rem; position: relative; z-index: 2; }

/* grid */
.games-grid-epic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1000px) { .games-grid-epic { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .games-grid-epic { grid-template-columns: 1fr; } }

/* cards (SSR + client-rendered) */
.game-card-epic {
 position: relative;
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: var(--radius);
 overflow: hidden;
 text-decoration: none; color: var(--text-primary);
 transition: transform 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease;
}
.game-card-epic:hover {
 transform: translateY(-7px);
 border-color: var(--gold-dim);
 box-shadow: var(--shadow-deep);
}
.game-card-image-wrapper { position: relative; overflow: hidden; background: #000; aspect-ratio: 460/215; }
.game-card-image {
 width: 100%; height: 100%; object-fit: cover; display: block;
 filter: saturate(0.85);
 transition: transform 0.6s ease, filter 0.4s ease;
}
.game-card-epic:hover .game-card-image { transform: scale(1.06); filter: saturate(1.05); }
.game-card-overlay {
 position: absolute; inset: 0;
 background: linear-gradient(to top, rgba(11, 8, 9, 0.85) 0%, transparent 55%);
 opacity: 0; transition: opacity 0.3s ease;
}
.game-card-epic:hover .game-card-overlay { opacity: 1; }
.game-card-content { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.game-card-title { font-size: 1.3rem; margin-bottom: 0.5rem; transition: color 0.3s ease; }
.game-card-epic:hover .game-card-title { color: var(--gold); }
.game-card-desc {
 color: var(--text-secondary); font-size: 0.87rem; line-height: 1.55;
 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
 overflow: hidden; margin-bottom: 0.8rem;
}
.game-card-footer { margin-top: auto; }
.game-card-platforms { display: flex; gap: 0.55rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); }
.game-card-platforms:empty { display: none; }
.platform-icon-small { width: 17px; height: 17px; color: var(--text-muted); transition: color 0.3s ease; }
.game-card-epic:hover .platform-icon-small { color: var(--gold); }

/* tags (client-rendered) */
.game-card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.tag-epic { padding: 0.18rem 0.55rem; background: var(--gold-faint); border: 1px solid var(--gold-dim); border-radius: 2px; font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }

/* pagination */
.pagination-wrapper { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: var(--hairline); }
.games-count { text-align: center; color: var(--text-muted); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.pagination-epic { display: flex; justify-content: center; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.pagination-btn {
 padding: 0.5rem 0.95rem;
 background: transparent; border: 1px solid var(--border-color); border-radius: var(--radius);
 color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease;
 font-size: 0.85rem; font-family: var(--font-body);
}
.pagination-btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--gold); }
.pagination-btn.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.pagination-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pagination-info { color: var(--text-muted); font-size: 0.85rem; margin: 0 0.6rem; }

/* legacy hooks kept harmless */
.footer-epic { text-align: center; padding: 2rem; color: var(--text-muted); border-top: var(--hairline); }