/* V223 - Related articles: 4 balanced cards on desktop.
   Scoped to article detail markup only; no effect on homepage/news listing/admin. */

@media(min-width:1200px){
  body:not(.admin-layout) .article-detail .v175-related-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:16px!important;
    width:100%!important;
    align-items:stretch!important;
  }

  body:not(.admin-layout) .article-detail .v175-related-grid>*{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    height:100%!important;
  }

  body:not(.admin-layout) .article-detail .v175-related-grid article,
  body:not(.admin-layout) .article-detail .v175-related-grid .news-card{
    border-radius:14px!important;
    overflow:hidden!important;
  }

  body:not(.admin-layout) .article-detail .v175-related-grid img{
    width:100%!important;
    aspect-ratio:16/10!important;
    height:auto!important;
    object-fit:cover!important;
    display:block!important;
  }

  body:not(.admin-layout) .article-detail .v175-related-grid h3{
    font-size:14px!important;
    line-height:1.38!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    overflow:hidden!important;
  }
}

/* Laptop: still 4 columns but tighter. */
@media(min-width:992px) and (max-width:1199px){
  body:not(.admin-layout) .article-detail .v175-related-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:12px!important;
  }

  body:not(.admin-layout) .article-detail .v175-related-grid h3{
    font-size:13px!important;
  }
}

/* Tablet: 2 columns. */
@media(min-width:600px) and (max-width:991px){
  body:not(.admin-layout) .article-detail .v175-related-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
}

/* Mobile: 1 column to keep titles/images readable. */
@media(max-width:599px){
  body:not(.admin-layout) .article-detail .v175-related-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
}