/*
==========================================
TRG STORY CSS CLEAN VERSION
==========================================
*/


/*
GLOBAL FONT
*/

.trg-story-wrapper,
.trg-story-wrapper *,
.trg-story-archive,
.trg-story-archive *{

    font-family:"Montserrat",sans-serif;

}



/*
HEADER
*/

.trg-story-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.trg-story-header h2{

    margin:0;

    font-size:20px;

    font-weight:600;

    letter-spacing:.5px;

}



.trg-story-view-all{

    color:#000;

    text-decoration:none;

    font-weight:600;

}


.trg-story-view-all:hover{

    opacity:.7;

}



/*
==========================================
SLIDER CONTAINER
==========================================
*/


.trg-story-slider{

    position:relative;

    width:100%;

}



.trg-story-viewport{

    width:100%;

    overflow:hidden;

}



.trg-story-track{

    display:flex;

    flex-wrap:nowrap;

    gap:24px;

    width:max-content;

    padding-left:40px;

    transition:transform .5s ease;

}



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


.trg-story-card-link{

    flex:0 0 260px;

    width:260px;

    text-decoration:none;

    color:inherit;

}



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

.trg-story-card{

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    box-shadow:none;

    transition:.35s ease;

}

.trg-story-card:hover{

    transform:translateY(-6px);

    box-shadow:none;

}



/*
IMAGE
*/


.trg-story-image{

    overflow:hidden;

}



.trg-story-image img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

    border-radius:14px;

    transition:transform .5s ease;

}



.trg-story-card:hover 
.trg-story-image img{

    transform:scale(1.08);

}



/*
CONTENT
*/


.trg-story-content{

    padding:18px;

}



.trg-story-content h3{

    margin:0 0 12px;

    font-size:15px;

    line-height:1.4;

    font-weight:600;

}



.trg-story-content p{

    margin:0;

    font-size:12px;

    line-height:1.6;

    color:#555;

}



/*
==========================================
ARROW BUTTON
==========================================
*/


.trg-story-prev,
.trg-story-next{

    position:absolute;

    top:115px;

    transform:translateY(-50%);

    width:42px;

    height:42px;

    border-radius:50%;

    border:1px solid rgba(181,155,99,.35);

    background:#fff;

    color:#b59b63;

    font-size:22px;

    cursor:pointer;

    z-index:20;

    box-shadow:

    0 5px 15px rgba(0,0,0,.15);

    transition:.3s ease;

}



.trg-story-prev{

    left:10px;

}



.trg-story-next{

    right:10px;

}



.trg-story-prev:hover,
.trg-story-next:hover{

    background:#b59b63;

    color:#fff;

    transform:translateY(-50%) scale(1.08);

}



/*
==========================================
CARD SHADOW SPACE
==========================================
*/


.trg-story-slider .trg-story-track{

    padding-bottom:30px;

}


.trg-story-slider .trg-story-card{

    margin-bottom:10px;

}



/*
==========================================
ARCHIVE PAGE
==========================================
*/


.trg-story-archive{

    display:grid;

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

    gap:30px;

}



.trg-story-archive 
.trg-story-card-link{

    width:100%;

}



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


@media(max-width:1000px){


.trg-story-archive{

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

}


}



/*
==========================================
MOBILE
2 STORIES VISIBLE
==========================================
*/

@media(max-width:600px){

    .trg-story-header h2{

        font-size:18px;

    }


    /*
    VIEWPORT
    */

    .trg-story-viewport{

        width:100%;

        overflow:hidden;

    }


    /*
    TRACK
    */

    .trg-story-track{

        display:flex;

        flex-wrap:nowrap;

        gap:12px;

        width:max-content;

        padding-left:0;

        transition:transform .5s ease;

    }


    /*
    EXACTLY 2 CARDS
    */

    .trg-story-card-link{

        flex:0 0 calc(
            (100vw - 42px) / 2
        );

        width:calc(
            (100vw - 42px) / 2
        );

        min-width:0;

        display:flex;

    }


    /*
    CARD
    */

    .trg-story-card{

        width:100%;

        display:flex;

        flex-direction:column;

    }


    /*
    IMAGE
    */

    .trg-story-image{

        width:100%;

        height:170px;

        overflow:hidden;

    }


    .trg-story-image img{

        width:100%;

        height:170px;

        object-fit:cover;

        display:block;

    }


    /*
    CONTENT
    */

    .trg-story-content{

        padding:12px;

        flex:1;

    }


    .trg-story-content h3{

        font-size:12px;

        line-height:1.4;

        margin:0 0 8px;

    }


    .trg-story-content p{

        font-size:10px;

        line-height:1.5;

    }


    /*
    MOBILE ARROWS
    */

    .trg-story-prev,
    .trg-story-next{

        width:36px;

        height:36px;

        font-size:19px;

        top:85px;

    }


    .trg-story-prev{

        left:5px;

    }


    .trg-story-next{

        right:5px;

    }


    /*
    ARCHIVE
    */

    .trg-story-archive{

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

    }

}


/*
==========================================
TRG STORY CARD EQUAL HEIGHT
==========================================
*/

.trg-story-card-link{

    display:flex;

}


.trg-story-card{

    width:100%;

    display:flex;

    flex-direction:column;

}


.trg-story-content{

    flex:1;

}


.trg-story-content p{

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}