<style>
/* === UPDATED CSS FOR SIDEBAR === */
.random-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.random-posts li {
  display: flex;
  align-items: flex-start; /* Image aur text ko top se start karega */
  gap: 12px;               /* Image aur text ke darmiyan gap */
  margin-bottom: 15px;
  border-bottom: 1px solid #eee; /* Halka border */
  padding-bottom: 10px;
}

.random-posts img {
  border-radius: 6px;
  
  /* === BOOK COVER SIZE FIX === */
  width: 75px;        /* Width kam ki hai taake text ki jagah banay */
  min-width: 75px;    /* Image pichkay gi nahi */
  height: 115px;      /* Lambai (Height) zyada rakhi hai Books ke liye */
  flex-shrink: 0;     /* Flexbox safety */
  /* =========================== */
  
  object-fit: cover;  /* Image crop ho kar fit hogi */
  box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* Thora sa shadow taake pyara lagay */
  background-color: #f5f5f5;
  transition: opacity 0.3s;
}

.random-posts img:hover {
  opacity: 0.8;
}

/* Text Container */
.random-posts div {
  flex: 1;       /* Baki bachi hui saari jagah text le ga */
  min-width: 0;  /* Text overflow issue fix */
}

.random-posts a {
  font-family: Arial, sans-serif;
  font-size: 15px;     /* Font size sidebar ke hisaab se adjust kiya */
  font-weight: 700;
  color: #222;
  text-decoration: none;
  line-height: 1.4;
  display: block;      /* Block kiya taake lines mein break ho */
  margin-bottom: 4px;
}

.random-posts a:hover {
  color: #d32f2f; /* Hover par red color (Optional) */
}

.random-summary {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
  line-height: 1.5;
  
  /* Text ko 3 lines tak limit karne ke liye (Optional) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.random-info {
  font-size: 11px;
  color: #999;
  margin-bottom: 2px;
}
</style>
