/* static/css/top-random-related.css */
.related-list{list-style:none;padding:0;margin:0;}
.related-list.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); /* не 5 в ряд */
  gap:20px;
}
@media (min-width: 1400px){
  .related-list.card-grid{ grid-template-columns:repeat(4,1fr); } /* фикс 4 на очень широких */
}
.card{
  opacity:0; transform:translateY(12px);
  animation:fadeUp .6s ease forwards; animation-delay:var(--stagger,0ms);
  border:1px solid #eee; border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card.reveal{ opacity:1; transform:none; }
.card-link{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.card-media{ aspect-ratio:16/9; margin:0; overflow:hidden; background:#f6f7f9; }
.card-img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; display:block; }
.card:hover .card-img{ transform:scale(1.03); }
.card-body{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; }
.card-title{ margin:0; font-size:1rem; line-height:1.25; font-weight:650; }
.card-excerpt{ margin:0; font-size:.95rem; opacity:.9; }
.card-date{ font-size:.8rem; opacity:.6; margin-top:auto; }

.card-media.placeholder .ph{
  width:100%; height:100%;
  background: linear-gradient(90deg, #f0f2f5, #e6e9ee, #f0f2f5);
  background-size: 200% 100%;
  animation: phShimmer 1.2s infinite;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes phShimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}

.card-offer{
  margin-top:6px; padding:10px; border:1px solid #eef1f6; border-radius:10px;
  background:#f9fbff; display:grid; gap:6px;
}
.offer-price{ font-weight:700; }
.offer-ppu{ font-size:.9rem; opacity:.85; }
.offer-buy{
  margin-top:4px; align-self:start; display:inline-block; padding:8px 12px; border-radius:10px;
  border:1px solid #2b6fff; text-decoration:none;
}
.offer-buy:hover{ background:#2b6fff; color:#fff; }