/* Compact article cards (image + small title + meta bar) */
:root{
  --ink:#101418; --muted:#617079; --bg:#f4f6f8;
  --brand:#3a40ff; --brand2:#232699;
  --card:#fff; --radius:22px; --shadow:0 10px 30px rgba(16,20,24,.08);
}

.bloglistwrap{margin:28px auto}
.page-title{margin:0 0 14px; font-weight:900; font-size:clamp(26px,4vw,54px)}

/* Tabs */
.z-tabs{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 22px}
.z-tab{padding:10px 18px; border:1px solid #e1e6ea; background:#fff; border-radius:999px; font-weight:700; cursor:pointer}
.z-tab.is-active{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-color:transparent}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
@media (max-width:1024px){ .grid{gap:14px} }
@media (max-width:760px){ .grid{gap:12px} }

.card{grid-column:span 6; background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
@media (min-width:1160px){ .card{grid-column:span 4} } /* 3 in row on large */
@media (max-width:640px){ .card{grid-column:span 12} }

.card__link{display:block; color:inherit; text-decoration:none;min-width:380px;}
.media{margin:0; position:relative; aspect-ratio:16/9; overflow:hidden}
.media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .35s ease}
.card:hover .media img{transform:scale(1.06)}

/* Title layer: small, two lines max */
.title-layer{position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 65%, rgba(0,0,0,.62) 100%); color:#fff;}
.title-layer .title{text-shadow: 0 2px 8px rgba(0, 0, 0, .4);margin:0; font-weight:800; font-size:clamp(16px,1.55vw,20px); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis}

/* Meta bar under image */
.meta-bar{display:flex; gap:18px; align-items:center; padding:10px 14px; border-top:1px solid #eef2f5; background:#fff}
.meta-bar .meta{display:inline-flex; gap:8px; align-items:center; color:var(--muted); font-weight:600; font-size:14px}
.i{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; color:#8597a3}