/* Server Room related-guide thumbnails v6
 * Adds article-specific visual previews without changing article copy or routes.
 */

.sr-related a {
  min-height: 24rem;
  padding: .8rem .8rem 1.15rem;
  overflow: hidden;
}

.sr-related__thumb {
  position: relative;
  order: -1;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 0 1.2rem;
  padding: .38rem;
  overflow: hidden;
  background: #cfd6de;
  border-radius: 17px;
  box-shadow:
    inset 5px 5px 12px rgba(157, 168, 179, .72),
    inset -5px -5px 12px rgba(255, 255, 255, .78);
  isolation: isolate;
}

.sr-related__thumb::after {
  content: "";
  position: absolute;
  inset: .38rem;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 13px;
  pointer-events: none;
}

.sr-related__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  filter: saturate(.88) contrast(1.025);
  transition: filter .35s ease, transform .45s cubic-bezier(.2, .75, .25, 1);
}

.sr-related__thumb small {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .42rem .58rem;
  background: rgba(234, 238, 243, .9);
  color: var(--sr-violet);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(48, 58, 68, .16);
  font: 780 .58rem/1 "SR Plus Jakarta", sans-serif;
  letter-spacing: .04em;
  backdrop-filter: blur(8px);
}

.sr-related strong {
  margin: 0 .45rem 1rem;
  font-size: clamp(.98rem, 1vw, 1.08rem);
  line-height: 1.2;
}

.sr-related a > .sr-related__action {
  margin: auto .45rem 0;
}

.sr-related a:hover .sr-related__thumb img,
.sr-related a:focus-visible .sr-related__thumb img {
  filter: saturate(1) contrast(1.04);
  transform: scale(1.035);
}

@media (max-width: 1120px) {
  .sr-related a {
    min-height: 25rem;
  }
}

@media (max-width: 720px) {
  .sr-related a {
    min-height: 0;
    padding: .72rem .72rem 1.15rem;
  }

  .sr-related__thumb {
    aspect-ratio: 16 / 9;
    margin-bottom: 1.1rem;
  }

  .sr-related strong {
    margin: 0 .45rem 1.6rem;
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-related__thumb img {
    transition: none;
  }
}