/* =========================================================
   Carrz-Fox-Fire - CFFCS Style Paged Article Rows
   File suggestion: Assets/css/Visitors/SubCategoryPaged.css
   ========================================================= */

:root{
    --cff-header-bg:#f8f8f8;
    --cff-panel-bg:#fcfcfc;
    --cff-panel-bg-alt:#ffffff;
    --cff-text-main:#555;
    --cff-text-soft:#777;
    --cff-link-color:#666;
    --cff-border-soft:rgba(0,0,0,.055);
    --cff-shadow-soft:0 1px 4px rgba(0,0,0,.035);
    --cff-shadow-hover:0 8px 18px rgba(0,0,0,.065);
}

.cff-page-wrap{
    width:85%;
    margin:26px auto;
}

.cff-subcategory-results{
    width:100%;
}

.cff-list-header{
    background:#fbfbfb;
    border:1px solid var(--cff-border-soft);
    border-radius:16px;
    padding:18px 20px;
    margin-bottom:16px;
    box-shadow:var(--cff-shadow-soft);
}

.cff-list-header h1{
    margin:0;
    font-size:24px;
    font-weight:600;
    color:var(--cff-text-main);
}

.cff-list-tools{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin:16px 0;
    padding:12px 14px;
    background:#fcfcfc;
    border:1px solid var(--cff-border-soft);
    border-radius:14px;
}

.cff-result-count,
.cff-page-size{
    font-size:13px;
    color:var(--cff-text-soft);
}

.cff-result-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.cff-result-row{
    margin:0;
    padding:0;
    background:var(--cff-panel-bg);
    border:1px solid var(--cff-border-soft);
    border-radius:15px;
    overflow:hidden;
    box-shadow:var(--cff-shadow-soft);
    transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.cff-result-row:nth-child(even){
    background:var(--cff-panel-bg-alt);
}

.cff-result-row:hover{
    transform:translateY(-1px);
    box-shadow:var(--cff-shadow-hover);
}

.cff-result-row a,
.cff-result-row a:link,
.cff-result-row a:visited{
    min-height:92px;
    display:grid;
    grid-template-columns:52px 1fr 90px;
    gap:16px;
    align-items:center;
    padding:16px 18px;
    color:var(--cff-link-color);
    text-decoration:none;
}

.cff-result-number{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(0,0,0,.035);
    border:1px solid rgba(0,0,0,.035);
    color:#777;
    font-size:13px;
    font-weight:600;
}

.cff-result-main h3{
    margin:0 0 6px 0;
    font-size:18px;
    line-height:1.3;
    font-weight:600;
    color:#555;
}

.cff-result-main p{
    margin:0;
    color:#777;
    font-size:13px;
    line-height:1.55;
}

.cff-result-action{
    justify-self:end;
    font-size:13px;
    color:#777;
    white-space:nowrap;
}

.cff-arrow{
    margin-left:6px;
    opacity:.55;
}

.cff-empty{
    padding:18px 20px;
    background:#fcfcfc;
    border:1px solid var(--cff-border-soft);
    border-radius:14px;
    color:#777;
}

.cff-pager{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin:22px 0 8px 0;
    flex-wrap:wrap;
}

.cff-pager a,
.cff-pager span{
    min-width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 11px;
    border-radius:12px;
    background:#fcfcfc;
    border:1px solid var(--cff-border-soft);
    color:#666;
    text-decoration:none;
    font-size:13px;
}

.cff-pager .is-current{
    background:#f2f2f2;
    font-weight:700;
}

.cff-pager .is-disabled{
    opacity:.45;
    pointer-events:none;
}

@media(max-width:850px){
    .cff-page-wrap{
        width:95%;
    }

    .cff-list-tools{
        align-items:flex-start;
        flex-direction:column;
    }

    .cff-result-row a,
    .cff-result-row a:link,
    .cff-result-row a:visited{
        grid-template-columns:42px 1fr;
        gap:12px;
    }

    .cff-result-action{
        grid-column:2;
        justify-self:start;
        margin-top:2px;
    }
}

@media(max-width:560px){
    .cff-result-row a,
    .cff-result-row a:link,
    .cff-result-row a:visited{
        grid-template-columns:1fr;
    }

    .cff-result-number{
        display:none;
    }

    .cff-result-action{
        grid-column:auto;
    }
}