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

.story-grid{
    width:90%;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(180px,1fr));
    gap:15px;
}

.story-card{
    width:100%;
}

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

.story-card{
    background:rgba(25,25,25,0.85);
    border-radius:10px;
    overflow:hidden;

    cursor:pointer;
    color:#222;
    text-decoration:none;

    max-width:260px;
    margin:0 auto;

    box-shadow:0 2px 10px rgba(0,0,0,0.2);

    transition:transform 0.25s ease,
               box-shadow 0.25s ease;
}

.story-card:hover{
    transform:translateY(-6px) scale(1.01);
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

/* IMAGE */
.story-card img{
    width:100%;
    aspect-ratio:220 / 300;
    object-fit:cover;
    display:block;
}

/* CONTENT */
.story-content{
    padding:15px;
}

/* TITLE */
.story-title{
    font-size:14px;
    font-weight:bold;
    margin-bottom:6px;
    color:white;
}

/* TEXT */
.story-text{
    color:white;
    line-height:1.5;
    font-size:12px;
    opacity:0.85;
}

.story-stats {

    margin-top: 12px;

    padding-top: 8px;

    border-top: 1px solid rgba(255,255,255,0.2);

    display: flex;

    justify-content: space-between;

    font-size: 14px;

    color: #ddd;

}


.story-stats span {

    display: flex;

    align-items: center;

    gap: 4px;

}

.story-meta {

    display:flex;

    margin-top:8px;

}


.story-info {

    display:flex;

    flex-direction:column;

    gap:5px;

}



.story-author {

    color:#ffcc66;

    font-size:12px;

}



.genre-badge {

    display:inline-flex;

    width:max-content;

    padding:4px 10px;

    border-radius:10px;

    background:rgba(255,255,255,0.15);

    color:#ffd166;

    font-size:11px;

    font-weight:bold;

    backdrop-filter:blur(5px);

}

@media (prefers-reduced-motion:no-preference){
    .story-card{
        transition:transform 0.25s ease,
                   box-shadow 0.25s ease;
    }
}

/* =========================================
   NEW STORY BADGE
========================================= */

.new-story-badge{
    display:inline-block;

    margin-right:6px;

    padding:2px 6px;

    background:#ff6600;

    color:white;

    border-radius:4px;

    font-size:10px;

    font-weight:bold;

    vertical-align:middle;
}

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

@media (max-width:768px){

    .story-grid{
        width:95%;
        gap:10px;

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

    .story-card{
        width:100%;
        max-width:none;
    }

    .story-card img{
        width:100%;
        height:auto;
        display:block;
    }

    .story-content{
        padding:12px;
    }
}