/* ========================================
   COMICS PAGE
======================================== */

.saga-comics-section{
    width:min(1400px,92%);
    margin:80px auto;
}


/* ========================================
   FILTER BAR
======================================== */

.archive-filter-bar{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;

    margin:0 auto 60px;
}

.archive-filter-bar a{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:130px;
    height:56px;

    padding:0 28px;

    border-radius:999px;

    background:#141625;
    color:#fff;

    font-size:1rem;
    font-weight:700;
    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.archive-filter-bar a:hover{
    transform:translateY(-4px);
}


/* ALL */

.filter-all:hover,
.filter-all.active{
    background:linear-gradient(135deg,#7b2ff7,#b245ff);
    box-shadow:0 12px 30px rgba(123,47,247,.35);
}


/* ONGOING */

.filter-ongoing:hover,
.filter-ongoing.active{
    background:linear-gradient(135deg,#00b894,#00d68f);
    box-shadow:0 12px 30px rgba(0,214,143,.35);
}


/* HIATUS */

.filter-hiatus:hover,
.filter-hiatus.active{
    background:linear-gradient(135deg,#ff9800,#ffb547);
    box-shadow:0 12px 30px rgba(255,152,0,.35);
}


/* ENDED */

.filter-ended:hover,
.filter-ended.active{
    background:linear-gradient(135deg,#ff4d4d,#ff6b6b);
    box-shadow:0 12px 30px rgba(255,77,77,.35);
}



/* ========================================
   GRID
======================================== */

.archive-comics-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(220px,1fr));

    gap:42px 26px;
}



/* ========================================
   CARD
======================================== */

.archive-comic-card{
    transition:
        opacity .25s ease,
        transform .25s ease;

    opacity:1;
    transform:translateY(0);
}

.archive-comic-card.hide{
    opacity:0;
    transform:translateY(12px);
}

.archive-comic-card a{
    text-decoration:none;
    color:inherit;
}



/* ========================================
   THUMB
======================================== */

.archive-comic-thumb{
    aspect-ratio:3 / 4.2;

    overflow:hidden;
    border-radius:26px;

    background:#17171f;

    margin-bottom:16px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.16);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.archive-comic-thumb img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .45s ease;
}

.archive-comic-card:hover .archive-comic-thumb{
    transform:translateY(-6px);

    box-shadow:
        0 24px 48px rgba(0,0,0,.28);
}

.archive-comic-card:hover img{
    transform:scale(1.05);
}



/* ========================================
   TITLE
======================================== */

.archive-comic-title{
    font-size:20px;
    font-weight:700;
    line-height:1.35;

    color:#111827;

    margin-bottom:10px;

    transition:color .25s ease;
}

.archive-comic-card:hover .archive-comic-title{
    color:#7c3aed;
}



/* ========================================
   META
======================================== */

.archive-comic-meta{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:14px;
    color:#6b7280;
}



/* ========================================
   STATUS DOT
======================================== */

.archive-status-dot{
    width:10px;
    height:10px;

    border-radius:999px;
}


/* Ongoing */

.archive-status-dot--ongoing{
    background:#22c55e;

    box-shadow:
        0 0 12px rgba(34,197,94,.5);
}


/* Hiatus */

.archive-status-dot--hiatus{
    background:#f59e0b;

    box-shadow:
        0 0 12px rgba(245,158,11,.45);
}


/* Ended */

.archive-status-dot--ended{
    background:#ef4444;

    box-shadow:
        0 0 12px rgba(239,68,68,.45);
}



/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:1024px){

    .archive-comics-grid{
        grid-template-columns:
            repeat(auto-fill,minmax(190px,1fr));
    }

}


@media(max-width:768px){

    .saga-comics-section{
        margin:60px auto;
    }

    .archive-comics-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:28px 18px;
    }

    .archive-comic-title{
        font-size:17px;
    }

    .archive-filter-bar{
        gap:12px;
    }

    .archive-filter-bar a{
        width:calc(50% - 8px);
        min-width:auto;

        height:52px;

        font-size:.95rem;
    }

}


@media(max-width:480px){

    .archive-comics-grid{
        gap:22px 14px;
    }

    .archive-comic-thumb{
        border-radius:20px;
    }

}