/* PG Post Grid styles */
.pgpg-wrapper{--pgpg-gap:16px;--pgpg-cols:5}

.pgpg-grid{
    display:grid;
    grid-template-columns:repeat(var(--pgpg-cols,5),1fr);
    gap:var(--pgpg-gap);
}

/* Карточка поста */
.pgpg-item{
    position:relative;
    background:#272727;
    color:#fff;
    border-radius:10px;
    padding:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
}
.pgpg-item:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(0,0,0,.4);
}

/* Бейдж категории (зелёный как "WORKING") */
.pgpg-badge{
    position:absolute;
    top:10px;
    left:10px;
    padding:4px 12px;
    border-radius:999px;
    background:#ff2d8b;
    color:#fff;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
    z-index:2;
}

/* Превью / иконка поста + hover-анимация */
.pgpg-thumb{
    display:block;
    position:relative;
    border-radius:8px;
    overflow:hidden;
    margin-bottom:10px;

    /* резервируем место под картинку, чтобы не было CLS */
    aspect-ratio: 5 / 3; /* близко к 500x350, можешь поменять при желании */
}

.pgpg-thumb img,
.pgpg-thumb--ph{
    width:100%;
    height:100%;
    display:block;
    border-radius:8px;
    object-fit:cover;
    transition:transform .35s ease, filter .35s ease;
}

.pgpg-item:hover .pgpg-thumb img,
.pgpg-item:hover .pgpg-thumb--ph{
    transform:scale(1.04) translateY(-2px);
    filter:brightness(1.03);
}

/* плейсхолдер, когда нет миниатюры */
.pgpg-thumb--ph{
    background:#333;
}

/* Заголовок */
.pgpg-title{
    font-size:16px;
    line-height:1.3;
    margin:10px 0 6px;
}
.pgpg-title a{
    text-decoration:none;
    color:#fff;
}
.pgpg-title a:hover{
    text-decoration:underline;
}

/* Дата + просмотры */
.pgpg-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:14px;
    color:#9aa0a6;
    margin-bottom:2px;
}
.pgpg-date{
    opacity:.9;
}

/* Просмотры (кружок + число) */
.pgpg-views{
    display:inline-flex;
    align-items:center;
    gap:4px;
    white-space:nowrap;
}
.pgpg-views__icon{
    width:14px;
    height:14px;
    border-radius:999px;
    border:2px solid rgba(255,255,255,.85);
    box-sizing:border-box;
    position:relative;
}
.pgpg-views__icon::before{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
}
.pgpg-views__count{
    color:#fff;
    font-weight:500;
}

/* Кнопка Load more в стиле яркой Search */
.pgpg-load-more-wrap{
    margin-top:20px;
    text-align:center;
}
.pgpg-more{
    cursor:pointer;
    padding:12px 26px;
    border:none;
    border-radius:999px;
    background:#ff2d8b;
    color:#fff;
    font-weight:600;
    font-size:14px;
    box-shadow:0 8px 20px rgba(255,45,139,.45);
    transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.pgpg-more:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px rgba(255,45,139,.6);
}
.pgpg-more:active{
    transform:translateY(0);
    box-shadow:0 6px 16px rgba(255,45,139,.5);
}
.pgpg-more[disabled]{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
    box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* Адаптив */
@media (max-width:1000px){
    .pgpg-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
    .pgpg-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
    .pgpg-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
    .pgpg-grid{grid-template-columns:repeat(1,1fr)}
}