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

.comic-navigation{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    margin:0 auto 35px;

    padding:6px;

    max-width:520px;

    background:#f5f6f8;

    border:1px solid #e7e8ec;

    border-radius:16px;

}


.comic-navigation a{

    display:flex;

    align-items:center;
    justify-content:center;

    gap:7px;

    flex:1;

    min-height:42px;

    padding:0 12px;

    color:#626574;

    border-radius:11px;

    text-decoration:none;

    font-size:.78rem;

    font-weight:700;

    transition:.2s ease;

}


.comic-navigation a i{

    font-size:.75rem;

}


.comic-navigation a:hover{

    color:#2563eb;

    background:#fff;

}


.comic-navigation a.active{

    color:#fff;

    background:#2563eb;

    box-shadow:0 5px 15px rgba(37,99,235,.18);

}



/* ==================================================
   COMIC INTRO
================================================== */

.comics-intro{

    text-align:center;

    max-width:650px;

    margin:65px auto 35px;

}


.comics-intro .eyebrow{

    display:block;

    margin-bottom:10px;

    color:#2563eb;

    font-size:.7rem;

    font-weight:800;

    letter-spacing:.13em;

}


.comics-intro h2{

    margin:0;

    color:#171827;

    font-size:2rem;

    line-height:1.15;

    font-weight:800;

}


.comics-intro p{

    margin:12px auto 0;

    color:#727587;

    font-size:.88rem;

}



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

.comic-section{

    margin-top:0;

}


.comic-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:22px;

}



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

.comic-card{

    display:block;

    overflow:hidden;

    background:#fff;

    border:1px solid #e7e7ef;

    border-radius:20px;

    text-decoration:none;

    box-shadow:
        0 7px 22px rgba(20,25,45,.045);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.comic-card:hover{

    transform:translateY(-5px);

    border-color:#d9d9e4;

    box-shadow:
        0 18px 38px rgba(20,25,45,.10);

}



/* ==================================================
   COVER
================================================== */

.comic-cover{

    position:relative;

    overflow:hidden;

    aspect-ratio:3 / 4;

    background:#e9e9ee;

}


.comic-cover img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .4s ease;

}


.comic-card:hover
.comic-cover img{

    transform:scale(1.035);

}



/* ==================================================
   COMIC BADGE
================================================== */

.comic-badge{

    position:absolute;

    top:13px;
    left:13px;

    padding:6px 9px;

    color:#fff;

    background:rgba(20,20,30,.82);

    border-radius:7px;

    font-size:.62rem;

    font-weight:800;

    letter-spacing:.08em;

    backdrop-filter:blur(8px);

}



/* ==================================================
   READ BUTTON ON COVER
================================================== */

.comic-read{

    position:absolute;

    right:13px;
    bottom:13px;

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 11px;

    color:#fff;

    background:#2563eb;

    border-radius:9px;

    font-size:.68rem;

    font-weight:800;

    box-shadow:
        0 7px 18px rgba(0,0,0,.18);

}


.comic-read i{

    font-size:.65rem;

}



/* ==================================================
   COMIC INFORMATION
================================================== */

.comic-info{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    padding:16px;

}


.comic-info strong{

    min-width:0;

    overflow:hidden;

    color:#171827;

    font-size:.84rem;

    font-weight:800;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.comic-info span{

    flex-shrink:0;

    display:flex;

    align-items:center;

    gap:5px;

    color:#727587;

    font-size:.66rem;

    font-weight:700;

}


.comic-info span i{

    font-size:.58rem;

}



/* ==================================================
   SECOND AD SPACING
================================================== */

.second-ad{

    margin-top:60px;

}



/* ==================================================
   TABLET
================================================== */

@media(max-width:850px){

    .comic-grid{

        grid-template-columns:
            repeat(2,1fr);

    }

}



/* ==================================================
   MOBILE
================================================== */

@media(max-width:560px){

    .comic-navigation{

        margin-left:0;
        margin-right:0;

        gap:4px;

    }


    .comic-navigation a{

        min-height:40px;

        padding:0 7px;

        font-size:.68rem;

    }


    .comic-navigation a i{

        font-size:.65rem;

    }


    .comics-intro{

        margin-top:50px;

    }


    .comics-intro h2{

        font-size:1.75rem;

    }


    .comic-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:13px;

    }


    .comic-card{

        border-radius:15px;

    }


    .comic-info{

        display:block;

        padding:12px;

    }


    .comic-info strong{

        display:block;

        margin-bottom:7px;

        font-size:.76rem;

    }


    .comic-info span{

        font-size:.62rem;

    }


    .comic-badge{

        top:9px;
        left:9px;

        padding:5px 7px;

        font-size:.55rem;

    }


    .comic-read{

        right:9px;
        bottom:9px;

        padding:6px 8px;

        font-size:.58rem;

    }

}



/* ==================================================
   SMALL PHONES
================================================== */

@media(max-width:380px){

    .comic-grid{

        gap:10px;

    }


    .comic-info{

        padding:10px;

    }


    .comic-info strong{

        font-size:.7rem;

    }

}