/* ============================================================
   News grid widget

   Card shape matches the theme's .hs-pcard (used by the blog index and archives)
   on purpose — a reader moving from the home page band to /tin-tuc/ should not
   see the same content in two different card designs. The class names differ
   because the two are rendered by different packages; if they ever need to
   diverge, they can, and neither will drag the other with it.
   ============================================================ */

/* ---- Banner ---- */
.hs-news__banner{
  position:relative;
  display:flex;
  align-items:center;
  min-height:280px;
  padding:48px;
  margin-bottom:32px;
  overflow:hidden;
  border:1px solid var(--hs-w-border,var(--hs-line));
  border-radius:20px;
}
.hs-news__banner::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(14,15,17,.86),rgba(14,15,17,.3)),
    var(--hs-news-img,none) center/cover no-repeat;
}
/* Inside the banner the head sits on a photo, so drop its bottom margin and let
   the banner's own padding do the spacing. */
.hs-news__banner .hs-sec-head{margin-bottom:0}
.hs-news__banner .hs-sec-head p{color:#d9d7d2}

/* ---- Grid ---- */
.hs-news__grid{
  display:grid;
  grid-template-columns:repeat(var(--hs-news-cols,3),minmax(0,1fr));
  gap:20px;
}

.hs-news__card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--hs-w-surface,var(--hs-card));
  border:1px solid var(--hs-w-border,var(--hs-line));
  border-radius:16px;
  transition:border-color var(--hs-t),transform var(--hs-t);
}
.hs-news__card:hover{border-color:#3a3f45;transform:translateY(-4px)}

.hs-news__ph{
  display:block;
  height:220px;
  flex:0 0 220px;
  background:#0c0d0e;
  overflow:hidden;
}
.hs-news__ph img{width:100%;height:100%;object-fit:cover}

.hs-news__body{display:flex;flex-direction:column;flex:1;padding:18px}
.hs-news__cat{
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hs-news__title{font-size:18px;font-weight:800;line-height:1.3;margin:10px 0 8px}
.hs-news__title a:hover{color:var(--hs-w-accent,var(--hs-accent))}
/* margin-top:auto pins the meta line to the bottom so it aligns across a row of
   cards whose titles wrap to different heights. */
.hs-news__meta{font-size:12.5px;margin-top:auto}

@media(max-width:1000px){
  .hs-news__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hs-news__banner{padding:32px;min-height:220px}
}
@media(max-width:640px){
  .hs-news__grid{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .hs-news__card{transition:none}
  .hs-news__card:hover{transform:none}
}