/* RONROV Random Posts Row – clean, single-row cards */
.ronrov-rpr-wrapper{ --rpr-height:160px; --rpr-radius:22px; --rpr-gap:16px; --rpr-ratio:16/9; --rpr-gray:0; }
.ronrov-rpr-header h3{ margin:0 0 12px; font-weight:700; font-size:1.06rem }
.ronrov-rpr-row{
  display:flex; flex-direction:row; gap:var(--rpr-gap);
  overflow-x:auto; overflow-y:hidden; padding:4px 2px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.rpr-card{
  position:relative; display:block; flex:0 0 auto;
  width: calc(var(--rpr-height) * (16/9)); /* default if browser ignores aspect-ratio var */
  aspect-ratio: var(--rpr-ratio);
  height: var(--rpr-height);
  border-radius: var(--rpr-radius);
  background: #d1d5db;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  overflow:hidden; text-decoration:none; color:#111827;
  scroll-snap-align:start;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.rpr-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 22px rgba(0,0,0,.12) }
.rpr-img{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter: saturate(calc(1 - var(--rpr-gray))); /* grayscale if requested */
}
.rpr-title{
  position:absolute; inset-inline:10px; bottom:10px; left:auto; right:10px;
  background: rgba(17,24,39,.72); color:#fff; font-weight:700;
  padding:6px 10px; border-radius:12px; font-size:14px; line-height:1;
  max-width: 90%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Hide scrollbars (Firefox keeps usability) */
.ronrov-rpr-row::-webkit-scrollbar{height:8px} 
.ronrov-rpr-row::-webkit-scrollbar-thumb{background:#e5e7eb; border-radius:20px}
