/* ==========================================================================
   S4M Widget — استایلِ مشترکِ هر سه ماژول (تولدهای نزدیک / ویترین / اعضا)
   هر سه قالب (default/dark/light) با CSS Custom Properties جدا شده‌اند تا
   اضافه‌کردنِ قالبِ چهارم فقط یعنی یک بلاکِ متغیرِ جدید + یک کلاسِ تم — بدونِ
   نیاز به بازنویسیِ کلِ استایل.
   ========================================================================== */

.s4m-widget {
    direction: rtl;
    text-align: right;
    font-family: inherit;
    box-sizing: border-box;
}
.s4m-widget *, .s4m-widget *::before, .s4m-widget *::after {
    box-sizing: border-box;
}
.s4m-widget-title {
    margin: 0 0 12px;
    font-size: 1.05em;
    font-weight: 700;
}
.s4m-widget-empty {
    opacity: .7;
    font-size: .9em;
    margin: 0;
}
.s4m-widget-admin-hint {
    padding: 10px 12px;
    border: 1px dashed #d98c00;
    background: #fff8ea;
    color: #7a5300;
    font-size: .85em;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------
   قالبِ «پیش‌فرض» — عمداً حداقلی: رنگ از خودِ تمِ سایت گرفته می‌شود
   (currentColor / inherit)، فقط چیدمان مشخص شده تا با هر تمی جفت شود.
   --------------------------------------------------------------------- */
.s4m-bday-theme-default .s4m-bday-list,
.s4m-showcase-theme-default .s4m-showcase-grid,
.s4m-people-theme-default .s4m-people-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.s4m-bday-theme-default .s4m-bday-item + .s4m-bday-item,
.s4m-people-theme-default .s4m-people-item + .s4m-people-item {
    border-top: 1px solid rgba(127,127,127,.2);
}
.s4m-bday-theme-default .s4m-bday-link,
.s4m-people-theme-default .s4m-people-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    text-decoration: none;
    color: inherit;
}
.s4m-bday-theme-default .s4m-bday-avatar,
.s4m-people-theme-default .s4m-people-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.s4m-bday-theme-default .s4m-bday-info,
.s4m-people-theme-default .s4m-people-info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.s4m-bday-theme-default .s4m-bday-name,
.s4m-people-theme-default .s4m-people-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.s4m-bday-theme-default .s4m-bday-countdown {
    flex-shrink: 0;
    font-size: .85em;
    opacity: .8;
    white-space: nowrap;
}
.s4m-bday-theme-default .s4m-bday-today .s4m-bday-countdown {
    opacity: 1;
    font-weight: 700;
}
.s4m-people-theme-default .s4m-people-metric {
    flex-shrink: 0;
    font-size: .8em;
    opacity: .85;
    white-space: nowrap;
}

.s4m-showcase-theme-default .s4m-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}
.s4m-showcase-theme-default .s4m-showcase-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    color: inherit;
}
.s4m-showcase-theme-default .s4m-showcase-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}
.s4m-showcase-theme-default .s4m-showcase-title {
    font-weight: 600;
    font-size: .92em;
}
.s4m-showcase-theme-default .s4m-showcase-owner {
    font-size: .8em;
    opacity: .8;
}
.s4m-showcase-theme-default .s4m-showcase-meta {
    display: flex;
    justify-content: space-between;
    font-size: .8em;
    opacity: .85;
}
.s4m-showcase-theme-default .s4m-showcase-time {
    font-size: .78em;
    opacity: .85;
}
.s4m-showcase-more {
    display: inline-block;
    margin-top: 14px;
    font-size: .85em;
    font-weight: 600;
    text-decoration: none;
    color: inherit;
    opacity: .85;
}
.s4m-showcase-more:hover { opacity: 1; text-decoration: underline; }

/* ---------------------------------------------------------------------
   قالبِ «تیره»
   --------------------------------------------------------------------- */
.s4m-bday-theme-dark,
.s4m-showcase-theme-dark,
.s4m-people-theme-dark {
    --s4m-w-bg: #16181d;
    --s4m-w-bg-alt: #1f232b;
    --s4m-w-text: #f2f3f5;
    --s4m-w-muted: #9aa0ab;
    --s4m-w-accent: #f2b705;
    --s4m-w-border: #2b2f38;

    background: var(--s4m-w-bg);
    color: var(--s4m-w-text);
    border: 1px solid var(--s4m-w-border);
    border-radius: 12px;
    padding: 16px;
}
.s4m-bday-theme-dark .s4m-widget-empty,
.s4m-showcase-theme-dark .s4m-widget-empty,
.s4m-people-theme-dark .s4m-widget-empty { color: var(--s4m-w-muted); }

.s4m-bday-theme-dark .s4m-bday-list { list-style: none; margin: 0; padding: 0; }
.s4m-bday-theme-dark .s4m-bday-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin: 0 -8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--s4m-w-text);
    transition: background .15s ease;
}
.s4m-bday-theme-dark .s4m-bday-link:hover { background: var(--s4m-w-bg-alt); }
.s4m-bday-theme-dark .s4m-bday-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--s4m-w-border);
}
.s4m-bday-theme-dark .s4m-bday-today .s4m-bday-avatar { border-color: var(--s4m-w-accent); }
.s4m-bday-theme-dark .s4m-bday-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s4m-bday-theme-dark .s4m-bday-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4m-bday-theme-dark .s4m-bday-profession,
.s4m-bday-theme-dark .s4m-bday-jalali { font-size: .78em; color: var(--s4m-w-muted); margin-inline-end: 8px; }
.s4m-bday-theme-dark .s4m-bday-countdown {
    flex-shrink: 0; font-size: .8em; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; background: var(--s4m-w-bg-alt); color: var(--s4m-w-muted); white-space: nowrap;
}
.s4m-bday-theme-dark .s4m-bday-today .s4m-bday-countdown { background: var(--s4m-w-accent); color: #201a02; }

.s4m-showcase-theme-dark {
    padding: 16px;
}
.s4m-showcase-theme-dark .s4m-showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    list-style: none; margin: 0; padding: 0;
}
.s4m-showcase-theme-dark .s4m-showcase-link {
    display: block;
    text-decoration: none;
    color: var(--s4m-w-text);
    background: var(--s4m-w-bg-alt);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s ease;
}
.s4m-showcase-theme-dark .s4m-showcase-link:hover { transform: translateY(-2px); }
.s4m-showcase-theme-dark .s4m-showcase-thumb-wrap { position: relative; display: block; }
.s4m-showcase-theme-dark .s4m-showcase-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.s4m-showcase-theme-dark .s4m-showcase-popularity-badge {
    position: absolute; top: 6px; left: 6px;
    background: rgba(0,0,0,.65); color: #fff; font-size: .72em;
    padding: 2px 7px; border-radius: 999px;
}
.s4m-showcase-theme-dark .s4m-showcase-time-badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--s4m-w-accent); color: #201a02; font-size: .72em; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}
.s4m-showcase-theme-dark .s4m-showcase-body { display: block; padding: 8px 10px 10px; }
.s4m-showcase-theme-dark .s4m-showcase-title {
    display: block; font-weight: 700; font-size: .9em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s4m-showcase-theme-dark .s4m-showcase-owner { display: block; font-size: .78em; color: var(--s4m-w-muted); margin-top: 2px; }
.s4m-showcase-theme-dark .s4m-showcase-price { display: block; font-size: .8em; color: var(--s4m-w-accent); margin-top: 4px; font-weight: 700; }

.s4m-people-theme-dark .s4m-people-list { list-style: none; margin: 0; padding: 0; }
.s4m-people-theme-dark .s4m-people-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin: 0 -8px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--s4m-w-text);
    transition: background .15s ease;
}
.s4m-people-theme-dark .s4m-people-link:hover { background: var(--s4m-w-bg-alt); }
.s4m-people-theme-dark .s4m-people-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--s4m-w-border);
}
.s4m-people-theme-dark .s4m-people-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s4m-people-theme-dark .s4m-people-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4m-people-theme-dark .s4m-people-profession { font-size: .78em; color: var(--s4m-w-muted); }
.s4m-people-theme-dark .s4m-people-metric-badge {
    flex-shrink: 0; font-size: .78em; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; background: var(--s4m-w-bg-alt); color: var(--s4m-w-accent); white-space: nowrap;
}

/* ---------------------------------------------------------------------
   قالبِ «روشن» — دقیقاً همون ساختارِ تیره، فقط با پالتِ روشن
   --------------------------------------------------------------------- */
.s4m-bday-theme-light,
.s4m-showcase-theme-light,
.s4m-people-theme-light {
    --s4m-w-bg: #ffffff;
    --s4m-w-bg-alt: #f5f6f8;
    --s4m-w-text: #1c1e21;
    --s4m-w-muted: #6b7280;
    --s4m-w-accent: #d97706;
    --s4m-w-border: #e5e7eb;

    background: var(--s4m-w-bg);
    color: var(--s4m-w-text);
    border: 1px solid var(--s4m-w-border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.s4m-bday-theme-light .s4m-widget-empty,
.s4m-showcase-theme-light .s4m-widget-empty,
.s4m-people-theme-light .s4m-widget-empty { color: var(--s4m-w-muted); }

.s4m-bday-theme-light .s4m-bday-list { list-style: none; margin: 0; padding: 0; }
.s4m-bday-theme-light .s4m-bday-link {
    display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px;
    border-radius: 8px; text-decoration: none; color: var(--s4m-w-text); transition: background .15s ease;
}
.s4m-bday-theme-light .s4m-bday-link:hover { background: var(--s4m-w-bg-alt); }
.s4m-bday-theme-light .s4m-bday-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--s4m-w-border);
}
.s4m-bday-theme-light .s4m-bday-today .s4m-bday-avatar { border-color: var(--s4m-w-accent); }
.s4m-bday-theme-light .s4m-bday-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s4m-bday-theme-light .s4m-bday-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4m-bday-theme-light .s4m-bday-profession,
.s4m-bday-theme-light .s4m-bday-jalali { font-size: .78em; color: var(--s4m-w-muted); margin-inline-end: 8px; }
.s4m-bday-theme-light .s4m-bday-countdown {
    flex-shrink: 0; font-size: .8em; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; background: var(--s4m-w-bg-alt); color: var(--s4m-w-muted); white-space: nowrap;
}
.s4m-bday-theme-light .s4m-bday-today .s4m-bday-countdown { background: var(--s4m-w-accent); color: #fff; }

.s4m-showcase-theme-light { padding: 16px; }
.s4m-showcase-theme-light .s4m-showcase-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
    list-style: none; margin: 0; padding: 0;
}
.s4m-showcase-theme-light .s4m-showcase-link {
    display: block; text-decoration: none; color: var(--s4m-w-text);
    background: var(--s4m-w-bg-alt); border-radius: 10px; overflow: hidden; transition: transform .15s ease;
}
.s4m-showcase-theme-light .s4m-showcase-link:hover { transform: translateY(-2px); }
.s4m-showcase-theme-light .s4m-showcase-thumb-wrap { position: relative; display: block; }
.s4m-showcase-theme-light .s4m-showcase-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.s4m-showcase-theme-light .s4m-showcase-popularity-badge {
    position: absolute; top: 6px; left: 6px;
    background: rgba(255,255,255,.9); color: #1c1e21; font-size: .72em;
    padding: 2px 7px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.s4m-showcase-theme-light .s4m-showcase-time-badge {
    position: absolute; top: 6px; right: 6px;
    background: var(--s4m-w-accent); color: #fff; font-size: .72em; font-weight: 700;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.s4m-showcase-theme-light .s4m-showcase-body { display: block; padding: 8px 10px 10px; }
.s4m-showcase-theme-light .s4m-showcase-title {
    display: block; font-weight: 700; font-size: .9em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.s4m-showcase-theme-light .s4m-showcase-owner { display: block; font-size: .78em; color: var(--s4m-w-muted); margin-top: 2px; }
.s4m-showcase-theme-light .s4m-showcase-price { display: block; font-size: .8em; color: var(--s4m-w-accent); margin-top: 4px; font-weight: 700; }

.s4m-people-theme-light .s4m-people-list { list-style: none; margin: 0; padding: 0; }
.s4m-people-theme-light .s4m-people-link {
    display: flex; align-items: center; gap: 10px; padding: 8px; margin: 0 -8px;
    border-radius: 8px; text-decoration: none; color: var(--s4m-w-text); transition: background .15s ease;
}
.s4m-people-theme-light .s4m-people-link:hover { background: var(--s4m-w-bg-alt); }
.s4m-people-theme-light .s4m-people-avatar {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--s4m-w-border);
}
.s4m-people-theme-light .s4m-people-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.s4m-people-theme-light .s4m-people-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4m-people-theme-light .s4m-people-profession { font-size: .78em; color: var(--s4m-w-muted); }
.s4m-people-theme-light .s4m-people-metric-badge {
    flex-shrink: 0; font-size: .78em; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; background: var(--s4m-w-bg-alt); color: var(--s4m-w-accent); white-space: nowrap;
}

/* ریسپانسیو ساده برای هر سه ماژول در سایدبارهای باریک */
@media (max-width: 380px) {
    .s4m-showcase-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; }
    .s4m-people-grid { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------
   حالتِ گریدِ «اعضا» — وقتی از پنلِ بلاک تعدادِ ستونِ ثابت انتخاب شده باشد
   (به‌صورتِ پیش‌فرض، لیستِ عمودیِ معمولی است؛ این کلاس فقط وقتی اضافه
   می‌شود که columns > 0). چیدمانِ کارتی‌تر از حالتِ لیست، هم‌راستا با
   استایلِ s4m-showcase-grid.
   --------------------------------------------------------------------- */
.s4m-people-grid {
    display: grid;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.s4m-people-grid .s4m-people-item { border-top: none !important; }
.s4m-people-grid .s4m-people-link,
.s4m-people-grid .s4m-people-item > a {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
    align-items: center;
    padding: 12px 8px;
    border: 1px solid rgba(127,127,127,.15);
    border-radius: 8px;
}
.s4m-people-grid .s4m-people-avatar { width: 56px; height: 56px; }
.s4m-people-grid .s4m-people-info { align-items: center; text-align: center; }

/* ---------------------------------------------------------------------
   استایل‌واریشنِ «فشرده» (is-style-compact) — از پنلِ «استایل»های ادیتورِ
   گوتنبرگ انتخاب می‌شود؛ فقط چیدمان را جمع‌وجورتر می‌کند (بدونِ فایلِ
   قالبِ PHP جدا)، برای جاهایی که فضا کم است (مثلاً سایدبارِ باریک).
   --------------------------------------------------------------------- */
.is-style-compact .s4m-bday-avatar,
.is-style-compact .s4m-people-list:not(.s4m-people-grid) .s4m-people-avatar {
    width: 26px !important;
    height: 26px !important;
}
.is-style-compact .s4m-bday-link,
.is-style-compact .s4m-people-list:not(.s4m-people-grid) .s4m-people-link {
    padding: 5px 0 !important;
    gap: 8px !important;
}
.is-style-compact .s4m-profession-badge,
.is-style-compact .s4m-people-metric,
.is-style-compact .s4m-showcase-meta {
    display: none !important;
}
.is-style-compact .s4m-widget-title {
    font-size: .92em !important;
    margin-bottom: 6px !important;
}
.is-style-compact .s4m-showcase-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 8px !important;
}
.is-style-compact .s4m-showcase-title {
    font-size: .82em !important;
}
.is-style-compact .s4m-showcase-owner {
    font-size: .75em !important;
}

/* ---------------------------------------------------------------------
   دکمه‌ی «بارگذاریِ بیشتر» (v2.5.0) — فقط بلاک، از رنگِ تمِ سایت پیروی
   می‌کند (رنگِ متن/بوردر با currentColor/رنگِ ملایمِ خنثی، نه هاردکد).
   --------------------------------------------------------------------- */
.s4m-loadmore-btn {
    display: block;
    margin: 14px auto 0;
    padding: 8px 22px;
    border: 1px solid rgba(127,127,127,.35);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .88em;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}
.s4m-loadmore-btn:hover:not(:disabled) {
    background: rgba(127,127,127,.1);
}
.s4m-loadmore-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* ---------------------------------------------------------------------
   دکمه‌ی لایکِ رویداد (v2.6.0) — از تابعِ خودِ S4M Works می‌آید
   (s4w_render_event_like_button)؛ اینجا فقط جاگذاریش داخلِ کارتِ ویترین.
   --------------------------------------------------------------------- */
.s4m-showcase-like {
    padding: 6px 10px;
    text-align: center;
}
.s4m-showcase-like .s4w-event-like-btn {
    width: 100%;
    padding: 4px 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .85em;
    cursor: pointer;
    opacity: .85;
}
.s4m-showcase-like .s4w-event-like-btn:hover:not(:disabled) {
    opacity: 1;
}
.s4m-showcase-like .s4w-event-like-btn:disabled {
    cursor: not-allowed;
    opacity: .5;
}

/* ---------------------------------------------------------------------
   🆕 v2.7.0: دکمه‌های «فالو» / «تبریک تولد» — رندرشده توسط توابعِ عمومیِ
   S4M Artist Manager (کلاس‌های .s4m-chip و ... مالِ آن پلاگین‌اند، اینجا
   فقط چیدمانِ ردیفِ زیرِ هر آیتم و هماهنگیِ رنگ با تمِ dark/light تنظیم
   می‌شود؛ اگر آن پلاگین فعال نباشد این span اصلاً چاپ نمی‌شود).
   --------------------------------------------------------------------- */
.s4m-widget-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 8px 8px;
    margin-top: -4px;
}
.s4m-people-grid .s4m-widget-actions {
    justify-content: center;
    padding: 0 8px 10px;
}

/* تمِ «تیره» و «روشنِ ثابت»: چیپ‌های s4m.css به‌طور پیش‌فرض روشن هستند،
   اینجا با رنگ‌های همان تمِ ویجت (متغیرهای موجود) هماهنگش می‌کنیم تا قاطی
   نشود؛ تمِ «پیش‌فرض» عمداً دست‌نخورده می‌ماند چون قرار است رنگِ تمِ سایت
   را بگیرد (همان فلسفه‌ی بقیه‌ی این پلاگین). */
.s4m-bday-theme-dark .s4m-widget-actions .s4m-chip,
.s4m-people-theme-dark .s4m-widget-actions .s4m-chip {
    background: var(--s4m-w-bg-alt) !important;
    border-color: var(--s4m-w-border) !important;
    color: var(--s4m-w-text) !important;
}
.s4m-bday-theme-dark .s4m-widget-actions .s4m-follow-btn.is-following,
.s4m-people-theme-dark .s4m-widget-actions .s4m-follow-btn.is-following {
    background: var(--s4m-w-accent) !important;
    border-color: var(--s4m-w-accent) !important;
    color: #201a02 !important;
}
.s4m-bday-theme-dark .s4m-widget-actions .s4m-wish-btn.is-wished,
.s4m-people-theme-dark .s4m-widget-actions .s4m-wish-btn.is-wished {
    opacity: .6;
}
.s4m-bday-theme-dark .s4m-widget-actions .s4m-reminder-btn.is-subscribed,
.s4m-people-theme-dark .s4m-widget-actions .s4m-reminder-btn.is-subscribed {
    background: var(--s4m-w-accent) !important;
    border-color: var(--s4m-w-accent) !important;
    color: #201a02 !important;
}

.s4m-bday-theme-light .s4m-widget-actions .s4m-chip,
.s4m-people-theme-light .s4m-widget-actions .s4m-chip {
    background: #fff !important;
    border-color: var(--s4m-w-border) !important;
    color: var(--s4m-w-text) !important;
}
.s4m-bday-theme-light .s4m-widget-actions .s4m-follow-btn.is-following,
.s4m-people-theme-light .s4m-widget-actions .s4m-follow-btn.is-following {
    background: var(--s4m-w-accent) !important;
    border-color: var(--s4m-w-accent) !important;
    color: #fff !important;
}

/* ==========================================================================
   🆕 v2.9.0 — ماژولِ «اعضا»:
   1) دو رفعِ باگ: <li class="s4m-people-item"> خودش هیچ‌وقت flex نبود؛ فقط
      <a class="s4m-people-link"> داخلش flex بود. برای همین دکمه‌ی «دنبال
      کردن» (که s4m_widget_render_person_actions به‌عنوانِ یک <span> بعدِ
      </a>، هم‌سطحِ آن داخلِ <li> برمی‌گرداند) همیشه زیرِ ردیفِ اصلی می‌افتاد
      نه کنارش. اینجا خودِ <li> هم flex می‌شود (فقط در حالتِ لیست، نه گرید —
      برای گرید معماریِ متفاوتی لازم است که پایین‌تر جدا اومده) و <a> با
      flex:1 داخلش جا می‌گیرد، پس دکمه کنارش (هم‌ردیف) می‌نشیند.
   2) نمایشِ اختیاریِ رتبه/مدال (s4m-people-rank) — چون حالا <li> flex است،
      رتبه هم به‌عنوانِ یک فرزندِ flex دیگر، قبلِ <a>، طبیعی جا می‌گیرد.
   ========================================================================== */
.s4m-people-list:not(.s4m-people-grid) .s4m-people-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.s4m-people-list:not(.s4m-people-grid) .s4m-people-link {
    flex: 1 1 auto;
    min-width: 0;
}
.s4m-people-list:not(.s4m-people-grid) .s4m-widget-actions {
    flex-shrink: 0;
}
.s4m-people-rank {
    flex-shrink: 0;
    width: 26px;
    text-align: center;
    font-weight: 700;
    font-size: .95em;
    opacity: .8;
}
.s4m-people-top3 .s4m-people-rank {
    font-size: 1.25em;
    opacity: 1;
}

/* --- حالتِ گرید: رتبه به‌جای هم‌ردیف‌بودن، روی گوشه‌ی کارت می‌نشیند
       (دقیقاً هم‌الگو با نشانِ محبوبیتِ s4m-showcase-grid) --- */
.s4m-people-grid .s4m-people-item {
    position: relative;
}
.s4m-people-grid .s4m-people-rank {
    position: absolute;
    top: 6px;
    inset-inline-start: 6px;
    width: auto;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: .78em;
    padding: 2px 7px;
    border-radius: 999px;
    z-index: 1;
}