/* PRZC Research — Shared category hub styles
 * Referenced from every /reports/<Category>/index.html (generated by
 * _generate-category-pages.js). Edit here, not in the generator template.
 */
/* Top reserve uses --banner-offset (declared in styles.css): 100px with banner,
 * 64px when body.banner-closed, or the measured value when header.js overrides
 * on mobile wrap. CSS-only so H1/breadcrumb never hide under the fixed header. */
.cat-hero { padding: calc(7rem + var(--banner-offset, 100px)) 0 3rem; background: #000; color: #fff; }
.cat-hero .eyebrow { font-size: 0.75rem; letter-spacing: 2px; text-transform: uppercase; color: #c9a84c; margin-bottom: 1rem; }
.cat-hero h1 { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 2.5rem; font-weight: 700; letter-spacing: -1px; margin-bottom: 1rem; color: #fff; }
.cat-hero .intro { font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.75); max-width: 720px; }
.cat-hero .count { margin-top: 1.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); }
.cat-hero .count strong { color: #fff; }
.cat-hero .count a { color: #c9a84c; text-decoration: none; }
.cat-hero .count a:hover { text-decoration: underline; }
.cat-crumb { padding: 1rem 0; background: #f8f8f8; border-bottom: 1px solid #e0e0e0; font-size: 0.75rem; }
.cat-crumb a { color: #666; text-decoration: none; }
.cat-crumb a:hover { color: #000; }
.cat-crumb .sep { color: #999; margin: 0 0.4rem; }
.cat-crumb .current { color: #333; }
.cat-listing { padding: 3rem 0 5rem; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.5rem; }
.cat-card { display: block; padding: 1.5rem; border: 1px solid #e8e8e8; background: #fff; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.cat-card:hover { border-color: #000; transform: translateY(-2px); text-decoration: none; }
.cat-card .date { font-size: 0.75rem; color: #5e5e5e; letter-spacing: 0.5px; margin-bottom: 0.5rem; }
.cat-card h2 { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin-bottom: 0.75rem; color: #000; }
.cat-card p { font-size: 0.88rem; line-height: 1.55; color: #555; margin-bottom: 1rem; }
.cat-card .tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.cat-card .tag { font-size: 0.65rem; letter-spacing: 0.5px; text-transform: uppercase; padding: 2px 6px; background: #f0f0f0; color: #555; }
.cat-card .read-more { font-size: 0.8rem; font-weight: 600; color: #000; }
.cat-card .read-more::after { content: ' →'; }
.cat-empty { padding: 4rem 2rem; text-align: center; border: 1px dashed #ccc; color: #666; }
.cat-footer-cta { margin-top: 4rem; padding: 2.5rem; background: #000; color: #fff; text-align: center; }
.cat-footer-cta h3 { font-family: 'Inter', 'Inter Fallback', sans-serif; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; color: #fff; }
.cat-footer-cta p { color: rgba(255,255,255,0.75); margin-bottom: 1.5rem; }
.cat-footer-cta .btn { position: relative; display: inline-block; padding: 0.75rem 1.75rem; background: #fff; color: #000; font-weight: 600; font-size: 0.9rem; text-decoration: none; margin: 0 0.5rem; border: 1px solid #fff; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.cat-footer-cta .btn:hover { background: #c9a84c; color: #000; border-color: #c9a84c; text-decoration: none; }
.cat-footer-cta .btn-outline { background: transparent; color: #fff; border: 1px solid #fff; }
.cat-footer-cta .btn-outline:hover { background: #c9a84c; color: #000; border-color: #c9a84c; }
.cat-footer-cta .new-badge { position: absolute; top: -8px; right: -8px; background: #c9a84c; color: #000; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.8px; padding: 2px 6px; border-radius: 2px; text-transform: uppercase; }
@media (max-width: 640px) { .cat-hero h1 { font-size: 1.75rem; } .cat-grid { grid-template-columns: 1fr; } }