/* ==========================================================================
   Component: Sidebar widgets — "Stay connected" stats + "Popular posts"
   ========================================================================== */

@media (min-width: 992px) {
  .sidebar-sticky {
    position: sticky;
    top: calc(var(--header-h) + 22px);
  }
}

/* ---------- Social stats ---------- */
.social-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Odd count: the last tile spans the row so the grid stays balanced */
.social-stats > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

.social-stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  height: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--mist);
  text-align: left;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.social-stat:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.social-stat img { grid-row: 1 / 3; width: 30px; height: 30px; }
:root[data-theme="dark"] .social-stat img[src*="/x.svg"] { filter: invert(1); }
.social-stat strong { align-self: end; font-size: .9rem; font-weight: 700; line-height: 1.2; color: var(--ink); }
.social-stat span { align-self: start; overflow: hidden; font-size: .7rem; line-height: 1.3; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Popular posts ---------- */
.pop-posts {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pop;
}

.pop-post {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  counter-increment: pop;
}
.pop-post::before {
  content: counter(pop);
  flex: none;
  width: 16px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand);
  text-align: center;
  opacity: .55;
}

.pop-post__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.pop-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.pop-post:hover .pop-post__thumb img { transform: scale(1.08); }

.pop-post__title {
  display: -webkit-box;
  margin: 0 0 2px;
  overflow: hidden;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pop-post:hover .pop-post__title a { color: var(--brand); }
.pop-post__date { font-size: .7rem; color: var(--muted); }