/* ===== Selected Articles ===== */
.hp-art{
  margin-top:126px;
  margin-bottom:126px;
}

.hp-art-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.hp-art-head{
  display:flex;
  gap:14px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:14px;
}

.hp-art-title{
  margin:0 0 1px;
  font-size:56px;
  font-weight:100;
}

.hp-art-sub{
  margin:0;
  line-height:1.55;
}

/* MAIN LAYOUT: featured left + list right */
.hp-art-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:18px;
  align-items:stretch;
}

/* cards base */
.hp-art-card{
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}

.hp-art-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ---------- FEATURED (first post) ---------- */
.hp-art-card:first-child{
  grid-column:1;
  grid-row:1 / span 3; /* makes it tall like the mock */
}

/* featured: text left, image right */
.hp-art-card:first-child .hp-art-link{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:22px;
  align-items:center;
  padding:22px;
}

/* move image to the right in featured */
.hp-art-card:first-child .hp-art-img{
  order:2;
}

.hp-art-card:first-child .hp-art-body{
  order:1;
  padding:0;
}

/* featured image block */
.hp-art-card:first-child .hp-art-img{
  aspect-ratio:3 / 4;           /* tall image like screenshot */
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.04);
}

.hp-art-card:first-child .hp-art-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hp-art-card:first-child .hp-art-tt{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
}

.hp-art-card:first-child .hp-art-ex{
  margin:0 0 12px;
  line-height:1.55;
  max-width:38ch;
}

/* ---------- RIGHT LIST (all except first) ---------- */
.hp-art-card:not(:first-child){
  grid-column:2;
}

/* make each right item: text left, thumb right */
.hp-art-card:not(:first-child) .hp-art-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
}

/* send image to the right (markup has it first) */
.hp-art-card:not(:first-child) .hp-art-img{
  order:2;
}

.hp-art-card:not(:first-child) .hp-art-body{
  order:1;
  padding:0;
}

/* small thumbnail */
.hp-art-card:not(:first-child) .hp-art-img{
  width:86px;
  height:86px;
  flex:0 0 86px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(0,0,0,.04);
}

.hp-art-card:not(:first-child) .hp-art-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hp-art-body{
  padding:12px 14px 14px; /* default fallback */
}

.hp-art-date{
  margin:0 0 6px;
  font-size:12px;
  font-weight:400;
}

.hp-art-tt{
  margin:0 0 6px;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.hp-art-ex{
  margin:0;
  line-height:1.55;
}

/* optional: hide excerpt on the right list like screenshot */
.hp-art-card:not(:first-child) .hp-art-ex{
  display:none;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hp-art-grid{
    grid-template-columns:1fr;
  }
  .hp-art-card:first-child{
    grid-column:auto;
    grid-row:auto;
  }
  .hp-art-card:first-child .hp-art-link{
    grid-template-columns:1fr;
  }
  .hp-art-card:first-child .hp-art-img{
    aspect-ratio:16/10;
  }
}