:root{
  --bc-border: var(--border, #e5e7eb);
  --bc-shadow: var(--shadow, 0 12px 30px rgba(15,23,42,.06));
  --bc-green:  var(--green, #14532d);
  --bc-green-700: var(--green-700, #0b3d1b);
}

/* Wrap */
.blog-body .all-articles{ margin-top:20px; }
.blog-body .all-articles .sec-head{ display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.blog-body .all-articles .sec-head .tag-ico{ font-size:22px; }
.blog-body .all-articles .list{ display:flex; flex-direction:column; gap:18px; }

/* Card */
.blog-body .all-articles .a-card{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--bc-border); border-radius:14px;
  box-shadow: var(--bc-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: transform;
}
.blog-body .all-articles .a-card:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 20px 46px rgba(15,23,42,.12), 0 6px 14px rgba(15,23,42,.08);
  border-color:#e9eff3; background:#fbfdfc;
}

/* Shine sweep on hover */
.blog-body .all-articles .a-card::after{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  transform: translateX(-120%);
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 70%);
  mix-blend-mode: screen; opacity:.26;
}
.blog-body .all-articles .a-card:hover::after{ animation: bc-sweep 1.45s ease; }
@keyframes bc-sweep{ to{ transform: translateX(120%);} }

/* Grid inside card */
.blog-body .all-articles .a-inner{ display:grid; grid-template-columns: 320px 1fr; align-items:stretch; }
@media (max-width:1100px){ .blog-body .all-articles .a-inner{ grid-template-columns:260px 1fr; } }
@media (max-width:860px){
  .blog-body .all-articles .a-inner{ grid-template-columns:1fr; }
  .blog-body .all-articles .a-media{ height:20px; border-right:none; border-bottom:1px solid var(--bc-border); }
}

/* Media */
.blog-body .all-articles .a-media{
  position:relative; display:block; height:260px; 
  border-right:1px solid var(--bc-border); overflow:hidden; background:#cbd5e1;
}
.blog-body .all-articles .a-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
/* Hover zoom */
.blog-body .all-articles .a-card:hover .a-media img{ transform: scale(1.08); }

/* Legibility overlay */
.blog-body .all-articles .a-media::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,0) 40%);
  z-index:1;
}

/* Read-time badge */
.blog-body .all-articles .a-media .badge--time{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(15,23,42,.88); color:#fff;
  font-size:12px; padding:6px 10px; border-radius:999px; font-weight:800;
  border:1px solid rgba(255,255,255,.12);
}

/* Content */
.blog-body .all-articles .a-content{ padding:18px 22px; display:flex; flex-direction:column; }
.blog-body .all-articles .a-content .p-meta{
  display:flex; align-items:center; gap:10px; color:#6b7280; font-size:14px;
}
.blog-body .all-articles .a-content .p-meta .chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#ecfdf5; color:#065f46; border:1px solid #b7e7cf;
  font-weight:800; padding:6px 10px; border-radius:999px; font-size:12px;
}
.blog-body .all-articles .a-content .p-meta .dot{
  width:4px; height:4px; border-radius:50%; background:#94a3b8; display:inline-block;
}
.blog-body .all-articles .a-content .p-title{ margin:10px 0 8px; font-size:22px; line-height:1.25; font-weight:900; color:#0f172a; }
.blog-body .all-articles .a-content .p-title a{ color:inherit; text-decoration:none; }
.blog-body .all-articles .a-content .p-title a:hover{ text-decoration:underline; }
.blog-body .all-articles .a-content .p-excerpt{ color:#475569; margin:0 0 10px; }

.blog-body .all-articles .a-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px;
}
.blog-body .all-articles .a-foot .author{
  color:#6b7280; font-size:14px; display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.blog-body .all-articles .a-foot .read{
  text-decoration:none; font-weight:800; color:var(--bc-green-700);
  display:inline-flex; align-items:center; gap:8px;
}
.blog-body .all-articles .a-foot .read:hover{ text-decoration:underline; }

/* Tag row */
.blog-body .all-articles .tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.blog-body .all-articles .tag-row .chip{
  position:relative; overflow:hidden;
  background:#eef2f7; color:#0f172a; border:1px solid #e1e7ef;
  font-size:12px; padding:6px 10px; border-radius:999px; font-weight:800;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.blog-body .all-articles .tag-row .chip::after{
  content:""; position:absolute; inset:-2px; transform:translateX(-120%);
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 70%);
  mix-blend-mode:screen; opacity:.45; pointer-events:none;
}
.blog-body .all-articles .tag-row .chip:hover{
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(15,23,42,.10);
  background:#ffffff; border-color:#d6dde8;
}
.blog-body .all-articles .tag-row .chip:hover::after{ animation: bc-sweep 1.25s ease; }