/* =========================================================
   CPC Layout: Related
   (Mostly reuses related hover behavior; keep file for future tweaks)
   ========================================================= */

/* If you need a dedicated related-only rule later, add it here. */
/* Currently related is covered by the shared related/related hover rules. */

.custom-posts.wrapper.layout-related {
  gap: 40px 16px;
}
.custom-posts.wrapper.layout-related .cp-content {
  gap: 16px;
  padding: 16px 0 8px;
}
.custom-posts.wrapper.layout-related .cp-card {
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
}

/* Thumb wrapper for related (same visual as related) */
.custom-posts.wrapper.layout-related .cp-card .cp-thumb {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm, 8px);
  contain: paint;
}

/* Thumb image behavior */
.custom-posts.wrapper.layout-related .cp-card .cp-thumb img {
  display: block;
  width: 100%;
  object-fit: cover;
  transform-origin: center center;
  height: 240px;
}

/* Title sizing on mobile is handled in base responsive rules, but keep default related typography */
.custom-posts.wrapper.layout-related .cp-card .cp-title {
  color: #000;
  line-height: 1.2;
  font-weight: 700;
  padding-bottom: 0;
}

/* related excerpt is slightly bigger in your spec */
.custom-posts.wrapper.layout-related .cp-card .cp-excerpt {
  font-size: 16px;
  color: #2b2b2b;
  font-weight: 400;
  line-height: 20px;
}

/* Hover effects (match your earlier combined hover rules) */
@media (hover: hover) and (pointer: fine) {
  .custom-posts.wrapper.layout-related .cp-card:hover .cp-thumb img {
    transform: scale(1.04) !important;
  }
  .custom-posts.wrapper.layout-related .cp-card:hover .cp-thumb {
    box-shadow: 0 2px 8px 0 #bbb4a4;
  }
}
@media (max-width: 768px) {
  .custom-posts.wrapper.layout-related .cp-card .cp-thumb img {
    max-height: 222px;
  }
  .custom-posts.wrapper.layout-related .cp-card .cp-title {
    font-size: 18px;
  }
  .custom-posts.wrapper.layout-related .cp-card .cp-excerpt {
    font-size: 14px;
  }
}