/* ================= NEWS PAGE ================= */

.news-page{

    padding:5rem 0;

}

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

.news-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(350px,1fr));

    gap:30px;

}

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

.news-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(14px);

    transition:.5s;

}

.news-card:hover{

    transform:
    translateY(-10px);

    border-color:
    rgba(212,175,55,.18);

}

/* ================= IMAGE ================= */

.news-image-wrapper{

    display:block;

    overflow:hidden;

}

.news-image{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.8s;

}

.news-card:hover .news-image{

    transform:
    scale(1.08);

}

/* ================= CONTENT ================= */

.news-content{

    padding:1.5rem;

}

.news-meta{

    margin-bottom:1rem;

    color:
    rgba(255,255,255,.65);

    font-size:.9rem;

}

.news-meta i{

    color:#D4AF37;

}

.news-title{

    font-size:1.3rem;

    line-height:1.8;

    margin-bottom:1rem;

}

.news-description{

    color:
    rgba(255,255,255,.72);

    line-height:2;

    margin-bottom:1.5rem;

}

/* button */

.news-btn{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:.9rem 1.4rem;

    border-radius:50px;

    background:
    rgba(212,175,55,.12);

    color:#D4AF37;

    text-decoration:none;

    transition:.4s;

}

.news-btn:hover{

    background:#D4AF37;

    color:#000;

}

/* ================= SINGLE PAGE ================= */

.single-news-page{

    padding:5rem 0;

}

.single-news-card{

    border-radius:35px;

    overflow:hidden;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(14px);

}

/* image */

.single-news-image{

    width:100%;

    max-height:500px;

    object-fit:cover;

}

/* content */

.single-news-content{

    padding:3rem;

}

.single-news-title{

    font-size:
    clamp(2rem,5vw,4rem);

    line-height:1.5;

    margin:1.5rem 0;

}

.single-news-description{

    color:
    rgba(255,255,255,.82);

    line-height:2.5;

    text-align:right;

    font-size:1.05rem;

}

.single-news-description p{

    margin-bottom:1.5rem;

}

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

@media(max-width:768px){

    .news-page,
    .single-news-page{

        padding:3rem 1rem;

    }

    .news-grid{

        grid-template-columns:1fr;

    }

    .single-news-content{

        padding:2rem 1.3rem;

    }

    .single-news-description{

        text-align:right;

        font-size:1rem;

        line-height:2.3;

    }

}


/* ================= ARTICLE CONTENT ================= */

.single-news-description{

    position: relative;

    color: rgba(255,255,255,.84);

    line-height: 2.5;

    font-size: 1.05rem;

    text-align: right;

    overflow: hidden;

}

/* paragraph */

.single-news-description p{

    position: relative;

    margin-bottom: 2rem;

    padding-right: 1.3rem;

    color: rgba(255,255,255,.82);

}

/* golden line */

.single-news-description p::before{

    content: "";

    position: absolute;

    right: 0;

    top: 12px;

    width: 4px;

    height: calc(100% - 20px);

    border-radius: 30px;

    background:
    linear-gradient(
        to bottom,
        rgba(212,175,55,.9),
        transparent
    );

    opacity: .8;

}

/* quote */

.single-news-description blockquote{

    position: relative;

    margin: 2.5rem 0;

    padding: 2rem;

    border-radius: 30px;

    background:
    linear-gradient(
        145deg,
        rgba(212,175,55,.12),
        rgba(255,255,255,.03)
    );

    border:
    1px solid rgba(212,175,55,.18);

    backdrop-filter: blur(12px);

    text-align: right;

    line-height: 2.3;

    font-size: 1.15rem;

    color: #fff;

    overflow: hidden;

}

/* quote icon */

.single-news-description blockquote::before{

    content: "❝";

    position: absolute;

    top: -15px;

    right: 20px;

    font-size: 6rem;

    color: rgba(212,175,55,.15);

    font-family: serif;

}

/* first paragraph bigger */

.single-news-description p:first-child{

    font-size: 1.15rem;

    color: #fff;

}

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

@media(max-width:768px){

    .single-news-description{

        text-align: right;

        font-size: .98rem;

        line-height: 2.3;

    }

    .single-news-description p{

        padding-right: 1rem;

        margin-bottom: 1.6rem;

    }

    .single-news-description blockquote{

        padding: 1.4rem;

        font-size: 1rem;

        line-height: 2.1;

    }

}