/* ======= WRAP & HEADING ======= */
.r365c-wrap{ position: relative }
.r365c-heading{ font: 800 24px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial; margin: 0 0 14px }

/* ======= LAYOUTS ======= */
.r365c-collage{ --cols:3; --gap:16px; --row:8px }

/* Masonry: JS-assisted CSS Grid */
.r365c-layout-masonry .r365c-collage{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
  grid-auto-rows: var(--row);
}

/* Grid layout */
.r365c-layout-grid .r365c-collage{
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

/* ======= CARD ======= */
.r365c-card{ position: relative; border-radius: 18px; overflow: hidden; background:#0f1115; color:#fff; box-shadow: 0 10px 28px rgba(0,0,0,.2) }
.r365c-inner{ position: relative }
.r365c-imgbox{ position:relative }
.r365c-image-link{ display:block; width:100%; height:100% }
.r365c-card img{ width:100%; height:auto; display:block; object-fit:cover }

/* Helper text on each image */
.r365c-helper{
  position:absolute; left:8px; top:8px; z-index:1;
  background: rgba(0,0,0,.55); color:#fff; border-radius: 999px;
  padding: 4px 10px; font: 600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  letter-spacing:.2px; backdrop-filter: blur(2px);
  transition: opacity .2s ease;
}
.r365c-card:hover .r365c-helper,
.r365c-card.is-open .r365c-helper{ opacity:.0 }

/* Bottom info bar always visible */
.r365c-infobar{
  position:absolute; left:0; right:0; bottom:0; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,12,16,.65) 40%, rgba(10,12,16,.9) 100%);
  color:#fff;
}
.r365c-infobar .tt{ font: 700 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r365c-infobar .pr{ font: 800 14px/1.2 system-ui,-apple-system; background: rgba(255,255,255,.12); padding:4px 8px; border-radius:10px }

/* Overlay with buttons */
.r365c-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,8,12,0) 0%, rgba(6,8,12,.35) 40%, rgba(6,8,12,.85) 100%);
  transform: translateY(15%);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
  display:flex; align-items:flex-end; padding:12px;
}
.r365c-card:hover .r365c-overlay,
.r365c-card:focus-within .r365c-overlay,
.r365c-card.is-open .r365c-overlay{ transform: translateY(0); opacity:1 }

.r365c-meta{ width:100% }
.r365c-desc{ margin:0 0 10px; color: #f0f2f5; opacity:.98; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.r365c-links{ display:flex; gap:10px }
.r365c-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 14px; border-radius:999px; text-decoration:none; color:#fff;
  background: rgba(255,255,255,.14);
  transition: transform .15s ease, background .15s ease;
}
.r365c-btn:hover, .r365c-btn:focus{ transform: translateY(-1px); background: rgba(255,255,255,.22) }
.r365c-btn.fb{ background: #0866FF }
.r365c-btn.olx{ background: #222 }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .r365c-overlay{ transition: none }
  .r365c-btn{ transition: none }
}