/* ═══ BLOGS LISTING ═══ */
.blog-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-md) var(--r-md) var(--r-md) 4px;
  overflow:hidden;display:flex;flex-direction:column;transition:.35s}
.blog-card:hover{transform:translateY(-7px);border-color:var(--green);box-shadow:var(--shadow-lg)}

/* photo banner with floating date chip */
.blog-media{display:block;position:relative;aspect-ratio:16/10;overflow:hidden}
.blog-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.blog-card:hover .blog-media img{transform:scale(1.06)}
.blog-date{position:absolute;left:14px;top:14px;background:#fff;border-radius:12px 12px 12px 4px;
  padding:.55rem .7rem;text-align:center;box-shadow:0 10px 22px rgba(25,68,82,.18);min-width:52px}
.blog-date b{display:block;font-family:var(--disp);font-size:1.4rem;color:var(--deep);line-height:1}
.blog-date span{font-family:var(--body);font-weight:700;font-size:.62rem;letter-spacing:.2em;color:var(--green);text-transform:uppercase}

/* body */
.blog-body{padding:1.6rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.75rem;flex:1}
.blog-meta{display:flex;gap:1rem;flex-wrap:wrap;color:var(--muted)}
.blog-meta i{color:var(--green);margin-right:.4rem;font-size:16px}
.blog-body h3{font-size:1.25rem;margin:0;line-height:1.3}
.blog-body h3 a{color:var(--deep);text-decoration:none;transition:.3s}
.blog-body h3 a:hover{color:var(--green)}
.blog-body p{color:var(--muted);font-size:18px;line-height:1.65;margin:0;flex:1}
.blog-body .link-arrow{align-self:flex-start;font-size:18px;margin-top:.4rem}

/* empty note reuse */
.empty-note{text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:4rem 1rem;color:var(--muted)}
.empty-note i{font-size:2rem;color:var(--sky);display:block;margin-bottom:1rem}

/* responsive */
@media (max-width:991.98px){
  .blog-body{padding:1.3rem 1.3rem 1.4rem}
}
@media (max-width:575.98px){
  .blog-body{padding:1.2rem 1.1rem 1.3rem}
  .blog-body h3{font-size:1.12rem}
  .blog-date{padding:.45rem .6rem;min-width:46px}
  .blog-date b{font-size:1.2rem}
}