/* ============================================================
   Related Category Posts — Stylesheet
   Plugin: related-category-posts
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
.rcp-related-posts {
  --rcp-accent:       #1a56db;
  --rcp-accent-light: #eff4ff;
  --rcp-text:         #111827;
  --rcp-muted:        #6b7280;
  --rcp-border:       #e5e7eb;
  --rcp-bg:           #f9fafb;
  --rcp-hover-bg:     #f0f4ff;
  --rcp-radius:       10px;
  --rcp-font:         inherit;

  font-family:  var(--rcp-font);
  margin:       2.5em 0 1.5em;
  padding:      0;
  border-top:   3px solid var(--rcp-accent);
  background:   var(--rcp-bg);
  border-radius: 0 0 var(--rcp-radius) var(--rcp-radius);
  overflow:     hidden;
  box-shadow:   0 2px 12px rgba(0,0,0,.06);
}

/* ── Header row ─────────────────────────────────────────────── */
.rcp-header {
  display:         flex;
  align-items:     center;
  gap:             .75rem;
  padding:         1rem 1.25rem .75rem;
  border-bottom:   1px solid var(--rcp-border);
  background:      #fff;
}

.rcp-heading {
  margin:       0 !important;
  padding:      0 !important;
  font-size:    1rem !important;
  font-weight:  700 !important;
  line-height:  1.3 !important;
  color:        var(--rcp-text) !important;
  letter-spacing: .01em;
  border:       none !important;
}

.rcp-category-tag {
  display:        inline-flex;
  align-items:    center;
  padding:        .2em .65em;
  font-size:      .72rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color:          var(--rcp-accent);
  background:     var(--rcp-accent-light);
  border-radius:  999px;
  white-space:    nowrap;
}

/* ── List ───────────────────────────────────────────────────── */
.rcp-list {
  list-style: none !important;
  margin:     0 !important;
  padding:    .4rem 0 !important;
}

/* ── Item ───────────────────────────────────────────────────── */
.rcp-item {
  margin:  0 !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--rcp-border);
}

.rcp-item:last-child {
  border-bottom: none;
}

/* ── Link ───────────────────────────────────────────────────── */
.rcp-link {
  display:         flex;
  align-items:     center;
  gap:             .875rem;
  padding:         .7rem 1.25rem;
  text-decoration: none !important;
  color:           inherit !important;
  transition:      background .18s ease, padding-left .18s ease;
}

.rcp-link:hover,
.rcp-link:focus-visible {
  background:   var(--rcp-hover-bg);
  padding-left: 1.55rem;
  outline:      none;
}

.rcp-link:focus-visible {
  outline: 2px solid var(--rcp-accent);
  outline-offset: -2px;
}

/* ── Bullet dot (when no thumbnail) ────────────────────────── */
.rcp-bullet {
  flex-shrink:   0;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--rcp-accent);
  opacity:       .55;
  transition:    opacity .18s ease, transform .18s ease;
}

.rcp-link:hover .rcp-bullet {
  opacity:   1;
  transform: scale(1.35);
}

/* ── Thumbnail ──────────────────────────────────────────────── */
.rcp-thumb {
  flex-shrink: 0;
  width:  52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--rcp-border);
}

.rcp-thumb img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* ── Text block ─────────────────────────────────────────────── */
.rcp-text {
  flex:    1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.rcp-title {
  display:       block;
  font-size:     .9375rem;
  font-weight:   500;
  line-height:   1.4;
  color:         var(--rcp-text);
  white-space:   normal;
  transition:    color .18s ease;
}

.rcp-link:hover .rcp-title {
  color: var(--rcp-accent);
}

.rcp-date {
  display:     block;
  font-size:   .78rem;
  color:       var(--rcp-muted);
  font-weight: 400;
}

.rcp-excerpt {
  display:     block;
  font-size:   .8125rem;
  color:       var(--rcp-muted);
  line-height: 1.5;
  margin-top:  .1rem;

  /* Clamp to 2 lines */
  overflow:         hidden;
  display:          -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Arrow ──────────────────────────────────────────────────── */
.rcp-arrow {
  flex-shrink: 0;
  font-size:   1rem;
  color:       var(--rcp-muted);
  opacity:     0;
  transform:   translateX(-4px);
  transition:  opacity .18s ease, transform .18s ease, color .18s ease;
}

.rcp-link:hover .rcp-arrow {
  opacity:   1;
  transform: translateX(0);
  color:     var(--rcp-accent);
}

/* ── Dark-mode support ──────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .rcp-related-posts {
    --rcp-text:         #f3f4f6;
    --rcp-muted:        #9ca3af;
    --rcp-border:       #374151;
    --rcp-bg:           #1f2937;
    --rcp-hover-bg:     #1e3a5f;
    --rcp-accent-light: #1e3a5f;
  }

  .rcp-header {
    background: #111827;
  }
}

/* ── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 480px) {
  .rcp-header  { padding: .85rem 1rem .65rem; }
  .rcp-link    { padding: .65rem 1rem; gap: .65rem; }
  .rcp-link:hover { padding-left: 1.2rem; }
  .rcp-title   { font-size: .875rem; }
  .rcp-thumb   { width: 44px; height: 44px; }
}