/* Extracted from app/pages/category.php */
:root {
        --ink:       #0d1b2a;
        --ink-2:     #2c3e50;
        --ink-3:     #536878;
        --ink-4:     #8fa3b1;
        --paper:     #f5f2ed;
        --paper-2:   #ede9e2;
        --white:     #ffffff;
        --red:       #c0392b;
        --red-dark:  #962d22;
        --gold:      #c9a84c;
        --border:    rgba(13,27,42,.1);

        --ff-d: 'DM Serif Display', Georgia, serif;
        --ff-b: 'DM Sans', system-ui, sans-serif;
        --ease: cubic-bezier(.4,0,.2,1);
        --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
        --sh:   0 2px 6px rgba(13,27,42,.06), 0 6px 20px rgba(13,27,42,.08);
        --sh-h: 0 10px 36px rgba(13,27,42,.14);
    }

    
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; font-size:17px; }
    body {
        font-family: var(--ff-b);
        background: var(--paper);
        color: var(--ink);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
    }
    a { color:inherit; text-decoration:none; transition:color .2s var(--ease); }
    img { display:block; max-width:100%; }

    
    .wrap { max-width:1280px; margin:0 auto; padding:0 28px; }
    @media(max-width:600px){ .wrap{ padding:0 16px; } }

    
    .bc-bar { background:var(--white); border-bottom:1px solid var(--border); padding:15px 0; }
    .bc-list {
        display:flex; align-items:center; flex-wrap:wrap;
        list-style:none; font-size:.85rem; color:var(--ink-3); font-weight:500;
    }
    .bc-list li { display:flex; align-items:center; }
    .bc-list a { color:var(--ink-3); }
    .bc-list a:hover { color:var(--red); }
    .bc-sep { margin:0 9px; color:var(--ink-4); font-size:.65rem; }
    .bc-cur { color:var(--ink); font-weight:700; }

    
    .cat-hero {
        background:var(--ink); color:var(--white);
        padding:68px 0 60px; position:relative; overflow:hidden;
    }
    .cat-hero::before {
        content:''; position:absolute; inset:0; pointer-events:none;
        background:
            radial-gradient(ellipse 60% 80% at 10% 50%, rgba(192,57,43,.2)   0%,transparent 70%),
            radial-gradient(ellipse 50% 60% at 90% 20%, rgba(201,168,76,.14) 0%,transparent 60%);
    }
    .cat-hero-in {
        position:relative; z-index:1;
        display:grid; grid-template-columns:1fr auto; align-items:end; gap:44px;
    }
    .cat-eyebrow {
        display:inline-flex; align-items:center; gap:8px;
        font-size:.72rem; font-weight:700; letter-spacing:2px;
        text-transform:uppercase; color:var(--gold); margin-bottom:18px;
    }
    .cat-hero h1 {
        font-family:var(--ff-d);
        font-size:clamp(2.4rem,5vw,3.8rem);
        line-height:1.1; color:var(--white); margin-bottom:18px;
    }
    .cat-hero-desc {
        font-size:1.1rem; color:rgba(255,255,255,.65);
        max-width:600px; line-height:1.75;
    }
    .cat-stats { display:flex; gap:28px; flex-shrink:0; }
    .stat-box {
        text-align:center;
        background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
        border-radius:var(--r-md); padding:20px 26px; min-width:96px;
    }
    .stat-box strong {
        display:block; font-family:var(--ff-d);
        font-size:2.1rem; color:var(--white); line-height:1; margin-bottom:7px;
    }
    .stat-box span {
        font-size:.72rem; text-transform:uppercase;
        letter-spacing:1.3px; color:rgba(255,255,255,.5);
    }
    @media(max-width:768px){
        .cat-hero-in { grid-template-columns:1fr; }
        .cat-stats { justify-content:flex-start; }
    }

    
.sl { 
    display:flex; 
    align-items:baseline; 
    gap:18px; 
    margin-bottom:32px;
    flex-wrap:wrap;  /* ADD THIS */
}
.sl h2 {
    font-family:var(--ff-d); font-size:1.9rem;
    color:var(--ink); white-space:nowrap;
}
.sl-line { flex:1; height:1px; background:var(--border); min-width:20px; } /* ADD min-width */
.sl a { font-size:.85rem; font-weight:700; color:var(--red); white-space:nowrap; }
.sl a:hover { color:var(--red-dark); }
.sl-note { 
    font-size:.85rem; 
    color:var(--ink-4); 
    white-space:nowrap;
    /* REMOVE white-space:nowrap on mobile via media query below */
}
@media(max-width:640px){
    .top-grid, .ag { grid-template-columns:1fr; }
    .cat-stats { gap:16px; }
    .subcat-grid { grid-template-columns:repeat(2,1fr); }
    .sl h2 { font-size:1.55rem; }

    /* ADD THESE */
    .sl { gap:10px; }
    .sl-note { 
        white-space:normal; 
        width:100%; 
        font-size:.80rem;
    }
    .sl-line { display:none; } /* hide the divider line when wrapping */
}

    
    .card {
        background:var(--white); border-radius:var(--r-lg);
        box-shadow:var(--sh);
        transition:transform .28s var(--ease), box-shadow .28s var(--ease);
        overflow:hidden; display:flex; flex-direction:column;
    }
    .card:hover { transform:translateY(-6px); box-shadow:var(--sh-h); }
    .ci { position:relative; overflow:hidden; flex-shrink:0; }
    .ci img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
    .card:hover .ci img { transform:scale(1.04); }
    .img-fb {
        width:100%; height:100%;
        background:linear-gradient(135deg,var(--ink) 0%,var(--ink-2) 100%);
        display:flex; align-items:center; justify-content:center;
        color:rgba(255,255,255,.45); font-family:var(--ff-d);
        font-size:1.05rem; text-align:center; padding:22px; line-height:1.4;
    }
    .badge {
        position:absolute; top:14px; left:14px; z-index:2;
        font-size:.68rem; font-weight:800; letter-spacing:1.4px;
        text-transform:uppercase; padding:5px 12px; border-radius:30px;
    }
    .b-gold { background:var(--gold); color:var(--ink); }
    .b-ink  { background:var(--ink);  color:#fff; }

    .pill {
        display:inline-block;
        font-size:.77rem; font-weight:700; letter-spacing:.4px;
        padding:4px 12px; border-radius:30px;
        background:rgba(13,27,42,.07); color:var(--ink-2);
        transition:background .2s, color .2s;
    }
    .pill:hover { background:var(--red); color:#fff; }

    .mr { display:flex; align-items:center; gap:14px; font-size:.84rem; color:var(--ink-4); }
    .mr i { font-size:.72rem; }

    .rl {
        font-size:.88rem; font-weight:700; color:var(--red);
        display:inline-flex; align-items:center; gap:5px;
        transition:gap .2s var(--ease), color .2s;
    }
    .rl:hover { color:var(--red-dark); gap:9px; }

    
    .subcat-grid {
        display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
        gap:18px; margin-bottom:68px;
    }
    .sc-card {
        background:var(--white); border:1px solid var(--border);
        border-radius:var(--r-md); padding:24px 22px;
        display:flex; flex-direction:column; align-items:flex-start; gap:11px;
        transition:border-color .2s var(--ease), box-shadow .2s, transform .2s var(--ease);
    }
    .sc-card:hover {
        border-color:var(--red); transform:translateY(-3px);
        box-shadow:0 4px 22px rgba(192,57,43,.11);
    }
    .sc-icon {
        width:44px; height:44px; background:rgba(192,57,43,.09);
        border-radius:var(--r-sm); display:flex; align-items:center;
        justify-content:center; color:var(--red); font-size:1.05rem;
    }
    .sc-card h3 { font-size:1.05rem; font-weight:700; color:var(--ink); line-height:1.35; }
    .sc-card:hover h3 { color:var(--red); }
    .sc-desc { font-size:.88rem; color:var(--ink-3); line-height:1.55; }
    .sc-count { margin-top:auto; font-size:.8rem; font-weight:700; color:var(--ink-4); }

    
    .top-grid {
        display:grid; grid-template-columns:repeat(3,1fr);
        gap:26px; margin-bottom:68px;
    }
    .tc .ci { height:220px; }
    .tc-body { padding:24px; flex:1; display:flex; flex-direction:column; }
    .tc-title {
        font-family:var(--ff-d); font-size:1.3rem; line-height:1.35;
        color:var(--ink); margin:13px 0 11px;
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .tc-title a:hover { color:var(--red); }
    .tc-excerpt {
        font-size:.95rem; color:var(--ink-3); line-height:1.65;
        margin-bottom:18px; flex:1;
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .tc-foot {
        display:flex; justify-content:space-between; align-items:center;
        padding-top:16px; border-top:1px solid var(--border); margin-top:auto;
    }

    
    .grp { margin-bottom:60px; }
    .grp-hd {
        display:flex; align-items:center; justify-content:space-between;
        margin-bottom:22px; padding-bottom:14px; border-bottom:2px solid var(--paper-2);
    }
    .grp-hd-l { display:flex; align-items:center; gap:13px; }
    .grp-icon {
        width:38px; height:38px; background:rgba(192,57,43,.09);
        border-radius:var(--r-sm); display:flex; align-items:center;
        justify-content:center; color:var(--red); font-size:1rem;
    }
    .grp-title { font-family:var(--ff-d); font-size:1.45rem; color:var(--ink); }
    .grp-title a:hover { color:var(--red); }
    .grp-all {
        font-size:.84rem; font-weight:700; color:var(--red);
        display:flex; align-items:center; gap:6px;
        transition:gap .2s var(--ease), color .2s;
    }
    .grp-all:hover { color:var(--red-dark); gap:10px; }

    
    .ag { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
    .ac .ci { height:200px; }
    .ac-body { padding:22px; flex:1; display:flex; flex-direction:column; }
    .ac-title {
        font-size:1.12rem; font-weight:700; color:var(--ink);
        line-height:1.4; margin:11px 0 9px;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    }
    .ac-title a:hover { color:var(--red); }
    .ac-exc {
        font-size:.93rem; color:var(--ink-3); line-height:1.65;
        margin-bottom:16px; flex:1;
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    }
    .ac-foot {
        display:flex; justify-content:space-between; align-items:center;
        padding-top:14px; border-top:1px solid var(--border); margin-top:auto;
    }

    
    .pag {
        display:flex; justify-content:center; align-items:center;
        gap:8px; margin:56px 0 20px; flex-wrap:wrap;
    }
    .pg {
        display:inline-flex; align-items:center; justify-content:center;
        min-width:46px; height:46px; padding:0 15px;
        border-radius:var(--r-sm); font-size:.93rem; font-weight:600;
        border:1.5px solid var(--border);
        background:var(--white); color:var(--ink-2);
        transition:all .2s var(--ease); cursor:pointer;
    }
    .pg:hover  { border-color:var(--red); color:var(--red); background:#fff5f4; }
    .pg.on     { background:var(--red); border-color:var(--red); color:#fff; pointer-events:none; }
    .pg.off    { opacity:.36; pointer-events:none; }
    .pg-dots   { font-size:.93rem; color:var(--ink-4); padding:0 4px; }
    .pg-info   { font-size:.88rem; color:var(--ink-4); margin-left:8px; }

    
    .empty {
        text-align:center; padding:90px 20px;
        background:var(--white); border-radius:var(--r-lg); border:2px dashed var(--border);
    }
    .empty i  { font-size:3rem; color:var(--ink-4); margin-bottom:22px; }
    .empty h3 { font-family:var(--ff-d); font-size:1.65rem; margin-bottom:12px; }
    .empty p  { color:var(--ink-3); font-size:1rem; }

    
    .cat-main { padding:52px 0 90px; }

    
    @media(max-width:1024px){
        .top-grid, .ag { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:640px){
        .top-grid, .ag { grid-template-columns:1fr; }
        .cat-stats { gap:16px; }
        .subcat-grid { grid-template-columns:repeat(2,1fr); }
        .sl h2 { font-size:1.55rem; }
    }
    @media(max-width:400px){
        .subcat-grid { grid-template-columns:1fr; }
    }