/*
 * V48 — Related posts: one compact horizontal row.
 * 3 visible cards on desktop/tablet; horizontal swipe on narrow phones.
 * CSS only; original URLs, images, article ordering and effects retained.
 */
body.single-post #page_content .content.cz_related_posts {
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-block:clamp(22px,2.8vw,36px)!important;
  padding:0!important;
  box-sizing:border-box!important;
}
body.single-post #page_content .content.cz_related_posts > h4 {
  color:#f2d19a!important;
  font:850 clamp(18px,1.45vw,22px)/1.6 Almarai,system-ui,sans-serif!important;
  margin:0 0 clamp(16px,1.9vw,22px)!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(231,190,118,.25)!important;
  text-align:right!important;
}
body.single-post #page_content .content.cz_related_posts > .clr {
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:clamp(11px,1.5vw,18px)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  direction:rtl;
  box-sizing:border-box!important;
}
body.single-post #page_content .content.cz_related_posts > .clr::before,
body.single-post #page_content .content.cz_related_posts > .clr::after {
  display:none!important;
  content:none!important;
}
body.single-post #page_content .content.cz_related_posts > .clr > article.cz_related_post {
  position:relative!important;
  float:none!important;
  clear:none!important;
  display:block!important;
  flex:0 1 calc((100% - 2 * clamp(11px,1.5vw,18px))/3)!important;
  width:calc((100% - 2 * clamp(11px,1.5vw,18px))/3)!important;
  max-width:calc((100% - 2 * clamp(11px,1.5vw,18px))/3)!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  text-align:right!important;
}
body.single-post #page_content .content.cz_related_posts > .clr > article.cz_related_post > div {
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  border:1px solid rgba(225,181,106,.42)!important;
  border-radius:14px!important;
  padding:0 0 13px!important;
  background:linear-gradient(160deg,#14364d,#0c2a41)!important;
  box-shadow:0 9px 23px rgba(0,13,26,.14)!important;
  box-sizing:border-box!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
body.single-post #page_content .content.cz_related_posts > .clr > article.cz_related_post:is(:hover,:focus-within) > div {
  border-color:#dfbb7e!important;
  box-shadow:0 13px 28px rgba(0,11,27,.21)!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_post_image {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  margin:0 0 8px!important;
  padding:0!important;
  border-radius:13px 13px 0 0!important;
  background:#10283d!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_post_image > img {
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  aspect-ratio:16/9!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:0!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_post_title {
  display:block!important;
  flex:1 1 auto!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:8px clamp(11px,1.2vw,16px) 6px!important;
  text-decoration:none!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_post_title h3 {
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:3!important;
  line-clamp:3;
  overflow:hidden!important;
  text-align:right!important;
  text-wrap:pretty;
  overflow-wrap:break-word!important;
  margin:0!important;
  padding:0!important;
  color:#f4f8fc!important;
  font:750 clamp(13px,1.05vw,16px)/1.8 Almarai,system-ui,sans-serif!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_post_title:is(:hover,:focus-visible) h3 {
  color:#ffe0a7!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_related_post_date {
  display:block!important;
  margin:0!important;
  padding:5px clamp(11px,1.2vw,16px) 0!important;
  text-align:right!important;
  font:600 12px/1.7 Almarai,system-ui,sans-serif!important;
  color:#dfcbac!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_related_post_date a {
  color:#e7cd9d!important;
  text-decoration:none!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_related_post_date a:is(:hover,:focus-visible){
  color:#ffdfa5!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}
body.single-post #page_content .content.cz_related_posts article.cz_related_post :is(.cz_post_image,.cz_post_title):focus-visible{
  outline:2px solid #f2d29b!important;
  outline-offset:-2px!important;
}
/* On small screens, keep a true horizontal one-line strip with a swipeable
   overflow instead of stacking cards or shrinking text to unreadable size. */
@media(max-width:650px){
  body.single-post #page_content .content.cz_related_posts > .clr {
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:thin;
    scrollbar-color:#d5b27a transparent;
    padding:2px 2px 13px!important;
  }
  body.single-post #page_content .content.cz_related_posts > .clr > article.cz_related_post {
    flex:0 0 min(78vw,270px)!important;
    width:min(78vw,270px)!important;
    max-width:min(78vw,270px)!important;
    min-width:0!important;
    scroll-snap-align:start;
  }
  body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_post_title h3{
    font-size:15px!important;
    line-height:1.75!important;
  }
  body.single-post #page_content .content.cz_related_posts article.cz_related_post .cz_related_post_date{
    font-size:12px!important;
  }
}
@media(max-width:360px){
  body.single-post #page_content .content.cz_related_posts > .clr > article.cz_related_post {
    flex-basis:80vw!important;
    width:80vw!important;
    max-width:80vw!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.single-post #page_content .content.cz_related_posts article.cz_related_post > div{
    transition:none!important;
  }
}