/* ووموو+ — فهرست نوشته‌ها
 *
 * فقط روی برگه‌ای بارگذاری می‌شود که تمپلیت «ووموو+ — نوشته‌ها»
 * گرفته باشد (functions.php).
 *
 * زبان بصری همان دسته‌ی ورقِ صفحه اصلی است — عکس، شماره، تیتر،
 * یک خط، «بخوان» — ولی چیدمانش شبکه است نه کاروسل. کلاس‌های
 * .sheet عمداً دوباره استفاده نشدند: آن‌ها به flex-grow و باز
 * شدن با هاور بند هستند و داخل شبکه با هم می‌جنگند.
 */

.plus-sec{
  padding:0 clamp(var(--s4),4vw,var(--s7)) var(--s9);
}

/* auto-fit نه auto-fill، با سقفِ ستون — همان درسی که در شبکه‌ی
   فروشگاه گرفتیم: با پنج نوشته روی نمایشگر پهن، auto-fill
   ستون‌های خالی نگه می‌داشت و auto-fit تنها کارت‌ها را غول
   می‌کرد. */
.plus-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),380px));
  justify-content:center;
  gap:var(--s7) var(--s5);
}

.plus-item{
  display:flex;flex-direction:column;
  color:var(--ink);
}

/* قاب عکس. نسبت ثابت تا شبکه با عکس‌های نامساوی ناهموار نشود،
   و وقتی نوشته‌ای عکس ندارد همان قاب با زمینه‌ی خنثی می‌ماند —
   شبکه نباید با نبودِ یک عکس بشکند. */
.plus-shot{
  position:relative;display:block;
  aspect-ratio:4/3;
  border-radius:var(--r-card);
  background:var(--band) center/cover no-repeat;
  overflow:hidden;
  transition:opacity var(--t-fast) var(--e);
}
.plus-item:hover .plus-shot{opacity:.86}

/* نوشته‌ی بدون عکس شاخص، قاب خالی نمی‌گیرد. یک مستطیلِ خاکستریِ
   توخالی از نبودِ عکس بدتر است — کارت متنی می‌شود و شبکه هم با
   ارتفاع‌های نامساوی مشکلی ندارد.
   تا وقتی نوشته‌ها عکس ندارند، همه‌ی کارت‌ها همین حالت‌اند. */
.plus-item.no-shot .plus-shot{display:none}
.plus-item.no-shot .plus-body{margin-top:0}

.plus-body{
  display:flex;flex-direction:column;gap:var(--s2);
  margin-top:var(--s4);
}

/* شماره و تاریخ، ریز و کنار — بیرون از عکس. دلیلش در
   page-plus.php نوشته شده. */
.plus-meta{
  display:flex;align-items:center;gap:var(--s3);
  color:var(--muted);
}
.plus-num{color:var(--muted)}

.plus-title{
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink);
}
.plus-item:hover .plus-title{
  text-decoration:underline;text-underline-offset:4px;
}

.plus-ex{
  color:var(--muted);
  font-size:var(--fs-body-s);
  line-height:1.7;
}

.plus-go{
  margin-top:var(--s2);
  color:var(--muted);
  transition:color var(--t-fast) var(--e);
}
.plus-item:hover .plus-go{color:var(--ink)}


/* ————————————————————————————— صفحه‌بندی */

.plus-pages{
  display:flex;flex-wrap:wrap;justify-content:center;
  align-items:center;gap:var(--s2);
  margin-top:var(--s9);
}

.plus-pages .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--s7);
  padding:var(--s2) var(--s3);
  border:var(--hair) solid var(--gline);
  border-radius:var(--r-full);
  color:var(--muted);
  font-size:var(--fs-body-s);
  line-height:1.7;
  transition:color var(--t-fast) var(--e),
             border-color var(--t-fast) var(--e);
}
.plus-pages a.page-numbers:hover{
  color:var(--ink);border-color:var(--ink);
}

/* صفحه‌ی فعلی — این یکی از سه جای مجاز رنگ تأکیدی نیست، پس با
   وارونه‌کردن رنگ مشخص می‌شود نه با --signal. */
.plus-pages .page-numbers.current{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--page);
}

.plus-pages .dots{border:0;padding-inline:0;min-width:0}


@media (max-width:640px){
  .plus-grid{gap:var(--s6) var(--s4)}
  .plus-sec{padding-bottom:var(--s8)}
}