.cba-archive{
    --cba-gap-x:40px;
    --cba-gap-y:40px;
    --cba-radius:16px;
    --cba-cut: 56px;
    font-family:Onest,sans-serif;
    width:100%;
}

.cba-archive *{box-sizing:border-box}

/* =====================================================
   FILTERS
===================================================== */
.cba-filters{
    display:grid;
    grid-template-columns:minmax(144px,auto) minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    margin:0 0 46px;
}

.cba-filters select,
.cba-filters input{
    width:100%;
    height:44px;
    min-width:0;
    border-radius:10px;
    border:1px solid #B2B1B1;
    background:#FFF;
    color:#898686;
    font-family:Onest,sans-serif;
    font-size:16px !important;
    font-weight:400;
    line-height:24px !important;
    padding:10px 16px;
    box-shadow:none;
    outline:none;
}

.cba-filters select{
    min-width:144px;
    padding:10px 44px 10px 16px;
    cursor:pointer;
    -webkit-appearance:none;
    appearance:none;
    background-color:#FFF;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23898686' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;
    background-size:16px 16px;
}

.cba-filters input:focus,
.cba-filters select:focus{
    border-color:#898686;
}

.cba-filters .cba-submit{
    width:auto;
    height:44px;
    min-height:44px;
    border:0;
    border-radius:294px;
    background:#67DC79;
    color:#2A543D;
    font-family:Onest,sans-serif;
    font-size:18px;
    font-weight:500;
    line-height:28px;
    letter-spacing:-0.2px;
    padding:0 32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    white-space:nowrap;
    box-shadow:none;
    transition:background .2s ease;
}

.cba-filters .cba-submit:hover,
.cba-filters .cba-submit:focus{
    background:#53BF63;
    color:#2A543D;
}

/* =====================================================
   RESULTS / GRID
===================================================== */
.cba-results-wrap{
    position:relative;
    min-height:160px;
}

.cba-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:var(--cba-gap-x);
    row-gap:var(--cba-gap-y);
}

/* Important: no background on the outer card.
   This keeps the transparent clipped corner truly transparent. */
.cba-card{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border-radius:var(--cba-radius);
    background:transparent;
    text-decoration:none!important;
    color:#383737!important;
    transition:transform .2s ease;
}

.cba-card:hover .cba-card__title {
    color: #2A543D !important;
}

.cba-card__body{
    padding:20px 24px;
    min-height:145px;
    display:flex;
    flex-direction:column;
    background:#F3F3F3;
}

.cba-card__title{
    color:#383737!important;
    font-family:Onest,sans-serif!important;
    font-size:24px!important;
    font-weight:600!important;
    line-height:30px!important;
    letter-spacing:-0.2px!important;
    margin:0 0 12px!important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.cba-card__excerpt{
    color:#747272!important;
    font-family:Onest,sans-serif!important;
    font-size:16px!important;
    font-weight:400!important;
    line-height:24px!important;
    letter-spacing:-0.2px!important;
    margin:0!important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.cba-card__image{
    height:auto;
    aspect-ratio:1.39/1;
    overflow:hidden;
    background:#e0e0e0;
    clip-path:polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--cba-cut)),
        calc(100% - var(--cba-cut)) 100%,
        0 100%
    );
    border-radius:0 0 var(--cba-radius) var(--cba-radius);
}

.cba-card__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease;
}

/* =====================================================
   LOADING
===================================================== */
.cba-loading{
    position:absolute;
    z-index:2;
    inset:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:70px;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .15s;
}

.cba-spinner{
    width:38px;
    height:38px;
    border:4px solid #d9f7de;
    border-top-color:#53BF63;
    border-radius:50%;
    animation:cba-spin .7s linear infinite;
}

.cba-results-wrap.is-loading .cba-loading{
    opacity:1;
    visibility:visible;
}

.cba-results-wrap.is-loading .cba-results{
    opacity:.32;
    pointer-events:none;
}

@keyframes cba-spin{
    to{transform:rotate(360deg)}
}

/* =====================================================
   PAGINATION / EMPTY
===================================================== */
.cba-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    margin-top:64px;
}

.cba-page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:none !important;
    background:transparent !important;
    color:#898686 !important;
    border-radius:8px !important;
    min-width:38px;
    height:38px;
    padding:0 10px !important;
    font:inherit;
    cursor:pointer;
    line-height:1;
}

.cba-page.is-active{
    background:#E9E9E9 !important;
    color:#383737 !important;
}

.cba-page--ellipsis{
    cursor:default;
    pointer-events:none;
    padding:0 4px !important;
    min-width:28px;
    letter-spacing:2px;
}

.cba-page--arrow{
    min-width:38px;
    padding:0 !important;
    color:#383737 !important;
}

.cba-page--arrow svg{
    width:24px;
    height:24px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.cba-page--arrow:disabled{
    opacity:.35;
    cursor:default;
}

.cba-empty{
    text-align:center;
    padding:65px 16px;
    color:#666;
    background:#f4f4f4;
    border-radius:16px;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:900px){
    .cba-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cba-archive{
        --cba-gap-x:20px;
        --cba-gap-y:24px;
    }
}

@media(max-width:600px){
    .cba-filters{
        grid-template-columns:144px minmax(0,1fr);
        gap:10px;
        margin-bottom:28px;
    }

    .cba-filters .cba-submit{
        grid-column:1/-1;
        width:100%;
    }

    .cba-grid{
        grid-template-columns:1fr;
        row-gap:20px;
    }

    .cba-card__body{
        min-height:0;
    }

    .cba-card__image{
        aspect-ratio:1.5/1;
    }
}

@media(max-width:420px){
    .cba-filters{
        grid-template-columns:1fr;
    }

    .cba-filters select,
    .cba-filters .cba-submit{
        width:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    .cba-card,
    .cba-card__image img,
    .cba-spinner{
        transition:none;
        animation:none;
    }
}