
/* V25: Popular Posts text-wrap + 16 items + sharper/larger representative thumbnails. */
body:not(#layout) #PopularPosts2{display:none!important}

/* --- Popular Posts: never let title text escape or get clipped horizontally. --- */
body:not(#layout) #PopularPosts1 .post,
body:not(#layout) #PopularPosts1 .post-content,
body:not(#layout) #PopularPosts1 .post-info,
body:not(#layout) #PopularPosts1 .post-title,
body:not(#layout) #PopularPosts1 .post-title a{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body:not(#layout) #PopularPosts1 .post-info{overflow:hidden!important}
body:not(#layout) #PopularPosts1 .post-title{
  display:block!important;
  width:100%!important;
  overflow:hidden!important;
  white-space:normal!important;
}
body:not(#layout) #PopularPosts1 .post-title a{
  display:-webkit-box!important;
  width:100%!important;
  white-space:normal!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
  text-overflow:ellipsis!important;
}

/* Blogger's native PopularPosts gadget is capped at 10. V25 merges a hidden LAST_MONTH gadget
   and, only if still short, fills unique recent posts client-side, then shows at most 16. */
body:not(#layout):not(.home) #PopularPosts1 .post:nth-child(n+7){display:block!important}
body:not(#layout):not(.home) #PopularPosts1 .post:nth-child(n+17){display:none!important}
body:not(#layout):not(.home) #PopularPosts1 .post:nth-child(6){border-bottom:1px solid #f2dde6!important}
body:not(#layout):not(.home) #PopularPosts1 .post:nth-child(16){border-bottom:0!important}
#bhx-home-popular-slot #PopularPosts1 .post:nth-child(n+13){display:block!important}
#bhx-home-popular-slot #PopularPosts1 .post:nth-child(n+17){display:none!important}

/* Article/static sidebar: slightly larger image while preserving enough title width. */
body:not(#layout):not(.home) #PopularPosts1 .post-content{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
body:not(#layout):not(.home) #PopularPosts1 .post-image-link{
  width:92px!important;
  height:69px!important;
  flex:0 0 92px!important;
  border-radius:11px!important;
}
body:not(#layout):not(.home) #PopularPosts1 .post-thumb{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  image-rendering:auto!important;
  transform:translateZ(0);
}
body:not(#layout):not(.home) #PopularPosts1 .post-title,
body:not(#layout):not(.home) #PopularPosts1 .post-title a{
  font-size:11px!important;
  line-height:1.42!important;
}

/* Homepage latest cards: larger thumbnail = easier-to-read representative artwork. */
body.home #bhx-home-post-slot .index-post{
  grid-template-columns:112px minmax(0,1fr)!important;
  min-height:100px!important;
}
body.home #bhx-home-post-slot .index-post .post-image-wrap,
body.home #bhx-home-post-slot .index-post .post-image-link{
  width:112px!important;
  height:84px!important;
}
body.home #bhx-home-post-slot .index-post .post-thumb{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  image-rendering:auto!important;
}
body.home #bhx-home-post-slot .index-post .post-info{min-width:0!important;overflow:hidden!important}
body.home #bhx-home-post-slot .index-post .post-info>h2{display:block!important;min-width:0!important;max-width:100%!important;overflow:hidden!important}
body.home #bhx-home-post-slot .index-post .post-info>h2>a{
  display:-webkit-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* Homepage Popular Posts: larger crisp thumbnail too. */
#bhx-home-popular-slot #PopularPosts1 .post-content{
  grid-template-columns:104px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
#bhx-home-popular-slot #PopularPosts1 .post-image-link{
  width:104px!important;
  height:78px!important;
  border-radius:11px!important;
}
#bhx-home-popular-slot #PopularPosts1 .post-thumb{object-position:center!important;image-rendering:auto!important}

@media(max-width:680px){
  body.home #bhx-home-post-slot .index-post{
    grid-template-columns:104px minmax(0,1fr)!important;
    min-height:94px!important;
  }
  body.home #bhx-home-post-slot .index-post .post-image-wrap,
  body.home #bhx-home-post-slot .index-post .post-image-link{width:104px!important;height:78px!important}
  #bhx-home-popular-slot #PopularPosts1 .post-content{grid-template-columns:94px minmax(0,1fr)!important}
  #bhx-home-popular-slot #PopularPosts1 .post-image-link{width:94px!important;height:70px!important}
}
@media(max-width:430px){
  body:not(#layout):not(.home) #PopularPosts1 .post-content{
    grid-template-columns:82px minmax(0,1fr)!important;
    gap:9px!important;
  }
  body:not(#layout):not(.home) #PopularPosts1 .post-image-link{width:82px!important;height:62px!important;flex-basis:82px!important}
  body:not(#layout):not(.home) #PopularPosts1 .post-title,
  body:not(#layout):not(.home) #PopularPosts1 .post-title a{font-size:10.7px!important;line-height:1.4!important}
  body.home #bhx-home-post-slot .index-post{grid-template-columns:96px minmax(0,1fr)!important}
  body.home #bhx-home-post-slot .index-post .post-image-wrap,
  body.home #bhx-home-post-slot .index-post .post-image-link{width:96px!important;height:72px!important}
  #bhx-home-popular-slot #PopularPosts1 .post-content{grid-template-columns:88px minmax(0,1fr)!important}
  #bhx-home-popular-slot #PopularPosts1 .post-image-link{width:88px!important;height:66px!important}
}
