/* GxMedia Tiles Mosaic Recent Posts PRO - Styles
   Uses CSS variables on the grid wrapper for per-widget customization.
*/
.gxmtmrp-pro-grid{
  --gxm-min:140px;
  --gxm-gap:10px;
  --gxm-radius:12px;
  --gxm-ratio:1/1;
  --gxm-lines:2;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(var(--gxm-min),1fr));
  gap:var(--gxm-gap);
}
.gxmtmrp-pro-tile{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:var(--gxm-ratio);
  border-radius:var(--gxm-radius);
  overflow:hidden;
  text-decoration:none;
  background:#e5e7eb;
  color:#fff;
}
/* Background-image mode */
.gxmtmrp-pro-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
/* IMG mode */
.gxmtmrp-pro-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Fallback initial */
.gxmtmrp-pro-initial{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.3rem;
  font-weight:700;
  color:#111827;
  background:#e5e7eb;
  opacity:.7;
}

.gxmtmrp-pro-overlay{
  position:absolute;
  left:0; right:0;
  padding:.6rem .7rem;
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.overlay-bottom .gxmtmrp-pro-overlay{ bottom:0; }
.overlay-top .gxmtmrp-pro-overlay{ top:0; }

/* Styles */
.overlay-gradient .gxmtmrp-pro-overlay{
  background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.overlay-top.overlay-gradient .gxmtmrp-pro-overlay{
  background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
}
.overlay-solid .gxmtmrp-pro-overlay{
  background:rgba(0,0,0,.55);
}
.overlay-none .gxmtmrp-pro-overlay{
  background:transparent;
}

.gxmtmrp-pro-title{
  font-size:.98rem;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:var(--gxm-lines);
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gxmtmrp-pro-meta{
  font-size:.8rem;
  opacity:.9;
  display:flex;
  gap:.5rem;
  align-items:center;
}
.gxmtmrp-pro-cat{
  background:rgba(255,255,255,.15);
  padding:.12rem .4rem;
  border-radius:999px;
  font-size:.75rem;
}
.gxmtmrp-pro-excerpt{
  font-size:.85rem;
  opacity:.95;
}
.gxmtmrp-pro-tile:focus{
  outline:2px solid #0ea5e9;
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  .gxmtmrp-pro-tile, .gxmtmrp-pro-overlay{ transition:none; }
}