/* =====================================
   Latest posts (grid/card/skeleton)
   ===================================== */

.posts-section .card-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}
@media (max-width:1200px){
  .posts-section .card-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .posts-section .card-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:480px){
  .posts-section .card-grid{ grid-template-columns:repeat(2,1fr); }
}

.posts-section .card{
  overflow:hidden;
  background:var(--card,#fff);
  border:none;
  box-shadow:none;
  border-radius:0;
}

.posts-section .card-head{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--thumb-border,#e6e7ea);
  border-radius:12px;
}
.posts-section .card-head::before{
  content:"";
  display:block;
  width:100%;
  padding-top:66.66%;
}
.posts-section .card-head img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:12px;
}

.posts-section .card-body{
  padding:0.9rem 0;
}
.posts-section .card-body a{
  text-decoration:none;
  color:inherit;
}
.posts-section .card-body h4{
  margin:0 0 .3rem;
  font-size:.95rem;
  font-weight:700;
}
.posts-section .card-body .desc{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
  line-height:1.4;
}

.posts-section .card--skeleton{
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}
.posts-section .card--skeleton .sk-img{
  height:0;
  padding-top:66.66%;
  background:linear-gradient(90deg, #eee, #f6f6f6 35%, #eee 65%);
  background-size:400% 100%;
  animation:pk-post-sk 1.35s infinite linear;
}
.posts-section .card--skeleton .sk-line{
  height:12px;
  margin:.5rem 0;
  border-radius:6px;
  background:linear-gradient(90deg, #eee, #f6f6f6 35%, #eee 65%);
  background-size:400% 100%;
  animation:pk-post-sk 1.35s infinite linear;
}
.posts-section .card--skeleton .w-70{ width:70%; }
.posts-section .card--skeleton .w-50{ width:50%; }
.posts-section .card--skeleton .w-40{ width:40%; }

@keyframes pk-post-sk{
  0%{ background-position:0 0; }
  100%{ background-position:-400% 0; }
}