/* Stylish Related Posts – clean thumbnail grid */

/* Container & heading */
.srp-container{
  width:100%;
  margin:12px 0 0;
  padding:0;
  background:transparent;
  border:0;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.srp-title{
  font-size:30px;
  font-weight:bold;
  color:#fff;
  text-align:left;
  margin:0 0 12px;
}

/* Responsive grid */
.srp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px; /* spacing like the screenshot */
}

/* Card = pure image tile with overlay title */
.srp-card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background:#000;                 /* prevents gaps while image loads */
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.srp-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}

/* Make the anchor define the 16:9 box (like your tiles) */
.srp-card-link{
  position:relative;
  display:block;
  height:0;
  padding-bottom:56.25%;          /* 16:9 aspect ratio */
  text-decoration:none;
  color:inherit;
  outline:0;
}

/* Image fills the tile */
.srp-card-image{
  position:absolute;
  inset:0;
  background:#e9ecef;
  overflow:hidden;
  padding:0;                      /* override old padding-top method */
}
.srp-card-image img{
  position:absolute;
  inset:0;
  width:100%;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .35s ease;
}
.srp-card:hover .srp-card-image img{ transform:scale(1.04); }

/* Placeholder for posts without thumbs */
.srp-card-placeholder{
  background:linear-gradient(135deg,#f1f3f5,#dee2e6);
}

/* Bottom overlay caption */
.srp-card-content{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.72) 100%);
  color:#fff;
}
.srp-card-title{
  margin:0;
  font-size:15px;
  line-height:1.2;
  font-weight:700;
  /* clamp to two lines so all tiles stay equal height */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Focus ring for keyboard users */
.srp-card-link:focus-visible{
  box-shadow:0 0 0 3px rgba(59,130,246,.6);
  border-radius:12px;
}

/* Small screens */
@media (max-width:600px){
  .srp-title{ font-size:20px; }
  .srp-grid{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
}