/* =================================
   SINGLE DESKTOP
================================= */

.single-page{

    padding:60px 0;

    background:#f4f4f1;

}

.post-article{

    max-width:1200px;

    margin:0 auto;

    background:#fff;

    border-radius:12px;

    padding:50px;

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

}

.post-header{

    border-bottom:
    1px solid #ececec;

    margin-bottom:35px;

    padding-bottom:25px;

}

.post-meta{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:15px;

    font-size:14px;

}

.post-date{

    color:#666;

}

.post-category a{

    color:var(--green);

    font-weight:600;

}

.post-title{

    font-size:52px;

    line-height:1.15;

    color:#111;

}

.post-featured{

    margin-bottom:40px;

    text-align:center;

}

.post-featured img{

    max-width:100%;

    border-radius:12px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.12);

}

.post-content{

    max-width:900px;

    margin:0 auto;

    font-size:18px;

    line-height:1.9;

    color:#333;

}

.post-content p{

    margin-bottom:22px;

}

.post-content h2,
.post-content h3{

    margin-top:40px;

    margin-bottom:20px;

    color:#111;

}

.post-content ul{

    margin:20px 0 20px 25px;

    list-style:disc;

}

.post-content img{

    max-width:100%;

    height:auto;

    border-radius:10px;

    margin:30px auto;

}

.post-content a{

    color:var(--green);

    font-weight:600;

}

.post-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.post-content table td,
.post-content table th{

    border:1px solid #ddd;

    padding:10px;

}

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

@media(max-width:992px){

    .single-page{

        padding:50px 0;

    }

    .post-article{

        padding:35px;

    }

    .post-title{

        font-size:40px;

    }

    .post-content{

        font-size:17px;

    }

}

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

@media(max-width:768px){

    .single-page{

        padding:35px 0;

    }

    .post-article{

        padding:20px;

        border-radius:8px;

    }

    .post-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:5px;

    }

    .post-title{

        font-size:32px;

        line-height:1.2;

    }

    .post-content{

        font-size:16px;

        line-height:1.8;

    }

}