/*
|--------------------------------------------------------------------------
| Category Page (templates/category.php)
|--------------------------------------------------------------------------
|
| Page-specific styling for the Category page's `.yo-category` scope —
| avatar badge, pagination, award/category card grid, horizontal scroll
| track. Shared tokens/utilities live in design-tokens.css instead; both
| load together via $pageStylesMap in includes/layouts/header.php.
|--------------------------------------------------------------------------
*/

.yo-category {
    --yo-navy-dark: #0F172A;
    --yo-gold: #D97706;
    --yo-gold-light: #FEF3C7;
    --yo-amber: #F59E0B;
    --yo-bronze: #EA580C;
    --yo-bg-subtle: #F1F5F9;
    --yo-border-subtle: #E2E8F0;
    --yo-text-primary: #0F172A;
    --yo-text-muted: #64748B;

    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    color: var(--yo-text-primary);
}

.yo-category h1,
.yo-category h2,
.yo-category h3,
.yo-category .yo-serif {
    font-family: 'Source Serif 4', Georgia, serif;
}

/* Same sitewide `section, .section` override Home needed — see
   templates/home.php's own note on this rule for why it can't be
   fixed at the (shared, non-mirrored) source stylesheet instead. */
.yo-category > section {
    background: transparent !important;
    padding: 18px 0 !important;
}

/* breadcrumb.php's own <nav class="mb-4"> — neutralized here
   (rather than edited in that shared partial, since it's reused
   by every other template) so it carries no extra bottom margin
   on this page. */
.yo-category nav.mb-4 {
    margin-bottom: 0 !important;
}

.yo-btn-navy:active {
    transform: scale(.97);
}

.yo-mini-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--yo-border-subtle);
    border-radius: 1rem;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.yo-mini-card:hover {
    border-color: var(--yo-gold);
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .2);
}

.yo-mini-thumb {
    width: 96px;
    flex-shrink: 0;
    background: var(--yo-bg-subtle);
    align-self: stretch;
}

.yo-chip {
    border: 1px solid var(--yo-border-subtle);
    border-radius: 1.25rem;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

.yo-chip:hover {
    border-color: var(--yo-gold);
    box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .25);
}

.yo-chip-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f75815;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Larger version of the same avatar treatment, used once in the
   category overview card instead of repeated in a chip row. */
.yo-category-avatar {
    width: 54px;
    height: 54px;
    border-radius: 1.25rem;
    background: #f75815;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.yo-spotlight-media {
    position: relative;
    height: 190px;
    overflow: hidden;
}

.yo-spotlight-media img {
    transition: transform .4s;
}

.yo-card:hover .yo-spotlight-media img {
    transform: scale(1.06);
}

.yo-spotlight-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, .75), rgba(15, 23, 42, .05) 55%, transparent);
}

/* Local, scoped-only brand-color pass on the shared pagination.php
   partial's default Bootstrap markup — no edits to that file
   itself, since it's reused by awards.php/categories.php too. */
.yo-category .pagination .page-link {
    color: var(--yo-text-primary);
    border-color: var(--yo-border-subtle);
}

.yo-category .pagination .page-link:hover {
    color: #f75815;
}

.yo-category .pagination .page-item.active .page-link {
    background: #f75815;
    border-color: #f75815;
}

/* Reused from Home's own horizontal-scroll chip row — same
   scrollbar-hiding treatment for the "Other Categories" row. */
.yo-category .yo-scroll-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.yo-category .yo-scroll-track::-webkit-scrollbar {
    display: none;
}