/* =========================================================
   سینا سعیدی پور — وب‌سایت شخصی نویسنده
   Design tokens + layout رسمی بر اساس مشخصات پروژه
   ========================================================= */

:root{
  /* Brand */
  --brand-primary: #315C4A;
  --brand-dark: #244638;
  --brand-light: #4B7764;
  --brand-soft: #E7F0EB;

  /* Light theme (default) */
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --surface-2: #F0EFEA;
  --border: #DDDCD6;
  --text: #20211F;
  --text-2: #6F716D;
  --text-disabled: #6A6C66;
  --accent: var(--brand-primary);

  /* Semantic tokens — HEX دقیق هنوز تعریف نشده؛ فعلاً روی طیف خنثی/برند قرار گرفته و باید بعداً تنظیم شود */
  --color-success: var(--brand-primary);
  --color-warning: var(--text-2);
  --color-error: var(--text-2);
  --color-info: var(--text-2);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 28px;
  --space-5: 40px;

  --shadow-1: 0 1px 2px rgba(32,33,31,0.05), 0 1px 1px rgba(32,33,31,0.04);
  --shadow-2: 0 6px 16px rgba(32,33,31,0.08), 0 2px 6px rgba(32,33,31,0.05);
  --shadow-lift: 0 16px 32px rgba(36,70,56,0.16), 0 4px 10px rgba(36,70,56,0.08);
  --ease: cubic-bezier(.22,1,.36,1);

  --font-body: "B Lotus", Tahoma, sans-serif;

  /* عرض ثابت ستون عنوان در لیست‌ها (داستان‌ها/جستارها/آزاد‌نویسی‌ها/کتابخانه/دوره‌ها)
     تقریباً هم‌ارز حدود ۲۵ کاراکتر فارسی — اما بر مبنای واحد em (عرض واقعی رندرشده‌ی
     فونت، نه شمارش کاراکتر) چون حروف فارسی عرض متفاوتی دارند. عنوان‌های بلندتر
     با «…» کوتاه می‌شوند تا ستون‌های بعدی (خلاصه/تاریخ/تعداد کلمات) همیشه هم‌تراز بمانند. */
  --title-col-width: 11.5em;
}

*, *::before, *::after{ box-sizing: border-box; }

@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}


@keyframes floatBlob{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-2%, 3%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.visually-hidden{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

html{
  height: 100%;
}

body{
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(700px 480px at 92% -6%, var(--brand-soft) 0%, transparent 60%),
    radial-gradient(600px 420px at -6% 106%, var(--brand-soft) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  direction: rtl;
  text-align: right;
  line-height: 1.9;
  transition: background-color .35s ease, color .35s ease;
}

h1,h2,h3,h4{
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

a{ color: inherit; text-decoration: none; }

button{
  font-family: inherit;
  cursor: pointer;
}

img{ max-width: 100%; display: block; }

::selection{ background: var(--brand-soft); color: var(--brand-dark); }

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

/* =========================================================
   Layout shell
   ========================================================= */

#app{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background-color .3s ease;
  animation: fadeIn .5s var(--ease) both;
}

.home-shell .site-header{
  padding-bottom: var(--space-2);
}

.back-home-logo{
  display: inline-flex;
  align-items: center;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

.back-home-logo img{
  height: clamp(28px, 4vw, 40px);
  width: auto;
}

.back-home-logo:hover{
  transform: translateY(-2px);
  opacity: 0.75;
}

main{
  flex: 1 1 auto;
  min-height: 0;
}

/* =========================================================
   Home page — طراحی جدید مطابق مرجع تایپوگرافی
   ========================================================= */

.home-shell{
  min-height: 100dvh;
  overflow: hidden auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.home-shell::before{
  content: "";
  position: absolute;
  inset: -10% -10% auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--brand-soft) 0%, transparent 70%);
  filter: blur(10px);
  z-index: -1;
  animation: floatBlob 14s ease-in-out infinite;
  pointer-events: none;
}

.home-shell::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Ccircle%20cx%3D%2753.2%27%20cy%3D%2726.9%27%20r%3D%271.3%27%20fill%3D%27white%27%20opacity%3D%270.27%27/%3E%3Ccircle%20cx%3D%2785.5%27%20cy%3D%2759.6%27%20r%3D%270.7%27%20fill%3D%27white%27%20opacity%3D%270.4%27/%3E%3Ccircle%20cx%3D%279.7%27%20cy%3D%2769.9%27%20r%3D%270.7%27%20fill%3D%27white%27%20opacity%3D%270.28%27/%3E%3Ccircle%20cx%3D%2768.5%27%20cy%3D%27129.7%27%20r%3D%270.7%27%20fill%3D%27white%27%20opacity%3D%270.32%27/%3E%3Ccircle%20cx%3D%2799.4%27%20cy%3D%27148.1%27%20r%3D%271.2%27%20fill%3D%27white%27%20opacity%3D%270.37%27/%3E%3Ccircle%20cx%3D%27152.4%27%20cy%3D%2711.1%27%20r%3D%271.5%27%20fill%3D%27white%27%20opacity%3D%270.34%27/%3E%3Ccircle%20cx%3D%2725.9%27%20cy%3D%2721.9%27%20r%3D%270.9%27%20fill%3D%27white%27%20opacity%3D%270.49%27/%3E%3Ccircle%20cx%3D%2731.5%27%20cy%3D%2792.4%27%20r%3D%271.2%27%20fill%3D%27white%27%20opacity%3D%270.36%27/%3E%3Ccircle%20cx%3D%2787.3%27%20cy%3D%2713.5%27%20r%3D%270.7%27%20fill%3D%27white%27%20opacity%3D%270.31%27/%3E%3Ccircle%20cx%3D%27107.4%27%20cy%3D%2769.0%27%20r%3D%270.9%27%20fill%3D%27white%27%20opacity%3D%270.43%27/%3E%3Ccircle%20cx%3D%2772.9%27%20cy%3D%2749.6%27%20r%3D%271.4%27%20fill%3D%27white%27%20opacity%3D%270.46%27/%3E%3Ccircle%20cx%3D%2741.1%27%20cy%3D%2791.3%27%20r%3D%271.1%27%20fill%3D%27white%27%20opacity%3D%270.51%27/%3E%3Ccircle%20cx%3D%27114.9%27%20cy%3D%2747.8%27%20r%3D%271.6%27%20fill%3D%27white%27%20opacity%3D%270.29%27/%3E%3Ccircle%20cx%3D%2767.6%27%20cy%3D%27119.1%27%20r%3D%270.8%27%20fill%3D%27white%27%20opacity%3D%270.4%27/%3E%3Ccircle%20cx%3D%2710.0%27%20cy%3D%27105.6%27%20r%3D%271.4%27%20fill%3D%27white%27%20opacity%3D%270.42%27/%3E%3Ccircle%20cx%3D%27137.1%27%20cy%3D%2751.7%27%20r%3D%271.3%27%20fill%3D%27white%27%20opacity%3D%270.43%27/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

/* بافت ریز کاغذی، خیلی محو — زیر لایه‌ی درخشش‌های سفید می‌نشیند و کمی
   عمق و جنس به پس‌زمینه‌ی صفحه‌ی اصلی می‌دهد بدون اینکه به چشم بزند */
.home-texture{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%20result%3D%22t%22%2F%3E%3CfeColorMatrix%20in%3D%22t%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200.05%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url%28%23n%29%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  z-index: -1;
  pointer-events: none;
}

.home-main{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  text-align: center;
}

.brand-hero{
  animation: fadeInUp .6s var(--ease) both;
}

.brand-title-img{
  height: clamp(70px, 11vw, 130px);
  width: auto;
}

.identity-row{
  display: flex;
  align-items: center;
  gap: var(--space-4);
  animation: fadeInUp .7s var(--ease) both;
  animation-delay: .08s;
}

.identity-photo-wrap{
  width: clamp(120px, 14vw, 180px);
  height: clamp(120px, 14vw, 180px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex: 0 0 auto;
}

.identity-photo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}

.identity-text-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.author-name-img{
  height: calc(clamp(38px, 5vw, 58px) * var(--opt-scale, 1));
  width: auto;
}

.role-label-img{
  height: calc(clamp(22px, 3vw, 32px) * var(--opt-scale, 1));
  width: auto;
}

.home-quick-links{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: fadeInUp .6s var(--ease) both;
  animation-delay: .09s;
}

.home-quick-links .footer-link-img{
  height: calc(clamp(14px, 1.8vw, 18px) * var(--opt-scale, 1));
  width: auto;
  opacity: 0.85;
  transition: opacity .2s ease;
}

.home-quick-links a:hover .footer-link-img{ opacity: 1; }

.tabs-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  max-width: 1100px;
  width: 100%;
  animation: fadeInUp .5s var(--ease) both;
  animation-delay: .10s;
}

.tab-sep{
  color: var(--border);
  font-size: 1.1rem;
  line-height: 1;
  user-select: none;
}

.tab-header-link{
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--ease);
}
.tab-header-link:hover{ transform: translateY(-3px); }

.tab-header-img{
  height: calc(clamp(26px, 3vw, 36px) * var(--opt-scale, 1));
  width: auto;
}

.home-divider{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--border);
}

.home-footer{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.footer-copyright-img{
  height: calc(clamp(16px, 2vw, 20px) * var(--opt-scale, 1));
  width: auto;
  opacity: 0.8;
}

.home-footer-links{
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.home-footer-links a{
  display: inline-flex;
  transition: opacity .2s ease;
  opacity: 0.75;
}

.home-footer-links a:hover{ opacity: 1; }

.footer-link-img{
  height: calc(clamp(14px, 1.8vw, 18px) * var(--opt-scale, 1));
  width: auto;
}

@media (max-width: 900px){
  .tabs-row{ gap: var(--space-2); }
}

@media (max-width: 560px){
  .identity-row{ flex-direction: column; gap: var(--space-2); }
  .tabs-row{ gap: 6px var(--space-2); }
}

/* ---------- آخرین مطالب (صفحه اصلی) ---------- */

.latest-section{
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  animation: fadeInUp .5s var(--ease) both;
  animation-delay: .16s;
}

.latest-heading{
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  margin: 0 0 var(--space-2);
}

.latest-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.latest-row{
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  transition: background-color .2s ease;
}

.latest-row:hover{
  background-color: var(--surface-2);
}

.latest-type{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent);
  flex: 0 0 auto;
  white-space: nowrap;
}

.latest-title{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-date{
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-disabled);
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 560px){
  .latest-row{ flex-wrap: wrap; }
  .latest-title{ white-space: normal; flex-basis: 100%; order: 3; }
}

/* =========================================================
   Content pages — Template مشترک: Header / Title / Grid / Pagination
   بدون اسکرول عمودی
   ========================================================= */

.content-shell{
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: fadeIn .4s var(--ease) both;
}

.content-shell main{
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 var(--space-4) var(--space-3);
  gap: var(--space-3);
}

.page-title{
  text-align: center;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  padding-top: var(--space-1);
  animation: fadeInUp .5s var(--ease) both;
  position: relative;
  display: inline-block;
  align-self: center;
}

.page-title-img{
  height: calc(clamp(38px, 5.5vw, 58px) * var(--opt-scale, 1));
  width: auto;
  display: block;
}

/* اصلاح اندازه‌ی نوری هر تایپوگرافی دست‌نویس، چون هرکدام تصویری جداست نه یک
   فونت واحد. مقدارها بر اساس ارتفاع واقعی جوهر (bounding box) هر عکس
   محاسبه شده تا هر ۶ تایپوگرافی تب‌های صفحه اصلی از نظر بصری هم‌اندازه باشند. */
.typo-tab-stories{ --opt-scale: 1.0; }
.typo-tab-essays{ --opt-scale: 1.0; }
.typo-tab-free-writings{ --opt-scale: 1.06; }
.typo-tab-library{ --opt-scale: 1.06; }
.typo-tab-courses{ --opt-scale: 1.05; }
.typo-tab-gallery-images{ --opt-scale: 1.08; }
.typo-author-name{ --opt-scale: 0.92; }
.typo-role-label{ --opt-scale: 1.07; }
.typo-footer-copyright{ --opt-scale: 1.16; }
.typo-footer-about{ --opt-scale: 0.95; }
.typo-footer-contact{ --opt-scale: 0.87; }

.page-title::after{
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--brand-light));
}

/* ---------- جستجوی داخل تب ---------- */

.search-box{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  animation: fadeInUp .5s var(--ease) both;
}

/* ---------- تعویض تاریک‌خانه/نگارخانه ---------- */

.gallery-toggle{
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  animation: fadeInUp .5s var(--ease) both;
}

.gallery-toggle-btn{
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  padding: 7px 20px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.92rem;
  transition: all .2s ease;
}

.gallery-toggle-btn:hover{
  border-color: var(--accent);
  color: var(--accent);
}

.gallery-toggle-btn.active{
  background: linear-gradient(135deg, var(--accent), var(--brand-light));
  border-color: var(--accent);
  color: var(--surface);
  box-shadow: var(--shadow-2);
}

.search-box input{
  width: 100%;
  max-width: 360px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.search-box input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.search-box input::placeholder{
  color: var(--text-disabled);
}

.results-area{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: var(--space-2);
}

/* ---------- لیست ساده برای داستان‌ها / جستارها / آزاد‌نویسی‌ها / کتابخانه / دوره‌ها (بدون کارت) ----------
   ستون‌ها با CSS Grid + subgrid هم‌تراز می‌شوند: عرض ستون عنوان به‌اندازه‌ی
   بلندترین عنوانِ همان صفحه (تا یک سقف مشخص) تنظیم می‌شود، نه یک عدد ثابت
   یکسان برای همه؛ همین باعث می‌شد وقتی عنوان کوتاه بود، فاصله‌ی خالی زیادی
   قبل از خط اول متن بیفتد. */

.text-list{
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--title-col-width) minmax(0, 1fr) max-content max-content;
  column-gap: 18px;
  align-content: start;
  overflow: hidden;
}

.text-list.text-list--books{
  grid-template-columns: max-content var(--title-col-width) minmax(0, 1fr) max-content;
}

.text-row{
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: baseline;
  font-size: 1.05rem;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border);
  transition: opacity .2s ease;
  animation: fadeInUp .5s var(--ease) both;
}

.text-list > .text-row:first-child{
  padding-top: 0;
}

.text-row:hover{
  opacity: 0.7;
}

.text-row-title-col{
  grid-column: 1;
  width: var(--title-col-width);
  max-width: var(--title-col-width);
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-row-excerpt-col{
  grid-column: 2;
  min-width: 0;
  font-weight: 400;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-row-date-col{
  grid-column: 3;
  text-align: center;
  font-weight: 400;
  font-size: 0.93em;
  color: var(--text-disabled);
  white-space: nowrap;
}

.text-row-date-col .date-ltr{
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

.text-row-count-col{
  grid-column: 4;
  text-align: left;
  font-weight: 400;
  font-size: 0.93em;
  color: var(--text-disabled);
  white-space: nowrap;
}

.text-row-instructor-col{
  grid-column: 4;
  max-width: 130px;
  text-align: left;
  font-weight: 400;
  font-size: 0.93em;
  color: var(--text-disabled);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-list-empty{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-disabled);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* ردیف کتابخانه: بندانگشتی کوچک جلد کتاب کنار عنوان، ستون‌ها یکی جابه‌جا */
.text-list--books .text-row-title-col{ grid-column: 2; }
.text-list--books .text-row-excerpt-col{ grid-column: 3; }
.text-list--books .text-row-date-col{ grid-column: 4; }

.book-row{
  align-items: center;
}

.book-row-cover{
  grid-column: 1;
  width: 36px;
  height: 52px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.book-row-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-row-cover-empty{
  display: block;
  width: 100%;
  height: 100%;
}

/* مرورگرهای خیلی قدیمی که subgrid را نمی‌شناسند: fallback به flex ساده
   (ستون‌ها هم‌تراز نمی‌شوند اما چیدمان همچنان خوانا و درست می‌ماند) */
@supports not (grid-template-columns: subgrid){
  .text-row{ display: flex; gap: 18px; }
}

/* ---------- شبکه‌ی گالری — مثل گالری عکس گوشی، فشرده و مربعی ---------- */

.thumb-grid{
  flex: 1 1 auto;
  min-height: auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 6px;
}

/* برخلاف ردیف‌های متنی (ارتفاع ثابت و از پیش معلوم)، ارتفاع هر آیتم گالری
   با نسبت واقعی تصویرش متفاوت است؛ پس نمی‌شود مطمئن بود همه در یک صفحه
   بدون اسکرول جا می‌شوند. برای همین results-area‌ای که این گرید داخلش
   است، روی هر اندازه صفحه (نه فقط موبایل) قابل اسکرول می‌شود. */
.results-area--gallery,
.results-area:has(.thumb-grid){
  overflow-y: auto;
}

.thumb-col{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
}

.thumb-cell{
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: 4px;
  animation: fadeIn .4s var(--ease) both;
}

.thumb-cell img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform .4s var(--ease);
}

.thumb-cell:hover img{
  transform: scale(1.03);
}

.thumb-empty{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--surface-2), var(--border));
}

/* =========================================================
   Pagination
   ========================================================= */

.pagination{
  flex: 0 0 auto;
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: var(--space-2) 0 var(--space-2);
  max-width: 100%;
}

.pagination button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 0.92rem;
  transition: all .25s var(--ease);
}

@media (max-width: 480px){
  .pagination{
    gap: 4px;
  }
  .pagination button{
    min-width: 30px;
    height: 30px;
    padding: 0 4px;
    font-size: 0.82rem;
  }
  .pagination .pg-icon{
    width: 14px;
    height: 14px;
  }
  .pagination-jump .pg-icon-double{
    width: 12px;
    height: 12px;
  }
}

/* فلش‌ها به‌صورت SVG رسم می‌شوند (نه کاراکتر فونت) تا روی همه‌ی
   دستگاه‌ها/فونت‌ها یک‌اندازه، پررنگ و کاملاً قابل‌دیدن باشند */
.pagination .pg-icon{
  display: block;
  color: inherit;
}
.pagination-jump{
  color: var(--text-2);
}
.pagination-jump .pg-icon-double{
  width: 15px;
  height: 15px;
}

.pagination button.active{
  background: linear-gradient(135deg, var(--accent), var(--brand-light));
  color: var(--surface);
  box-shadow: var(--shadow-2);
}

.pagination button:not(.active):not(:disabled):hover{
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.pagination button:disabled{
  color: var(--text-disabled);
  opacity: 0.4;
  cursor: default;
}

.pagination .ellipsis{
  color: var(--text-disabled);
  padding: 0 4px;
}

/* =========================================================
   صفحات با اسکرول مجاز: تک نوشته، تحلیل کتاب، درباره من، ارتباط با من
   ========================================================= */

.scroll-page{
  height: 100dvh;
  overflow-y: auto;
  animation: fadeIn .45s var(--ease) both;
}

.article-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4) var(--space-5);
  animation: fadeInUp .5s var(--ease) both;
}

.section-crumb-row{
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.section-crumb{
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}

.section-crumb-prefix{
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  font-weight: 700;
  color: var(--text-2);
  line-height: 1;
  padding-bottom: 2px;
}

.section-crumb-img{
  height: calc(clamp(20px, 2.6vw, 28px) * var(--opt-scale, 1));
  width: auto;
  opacity: 0.85;
}

.section-crumb-label{
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  opacity: 0.9;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-crumb--text:hover .section-crumb-label{ opacity: 1; }

.section-crumb:hover{
  transform: translateY(-2px);
  opacity: 1;
}

.section-crumb:hover .section-crumb-img{
  opacity: 1;
}

.article-header{
  text-align: center;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.article-header .article-title{
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
}

.article-header .article-meta{
  color: var(--text-disabled);
  font-size: 0.92rem;
  margin-top: var(--space-1);
}

.article-cover{
  display: block;
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-md);
}

.article-body{
  font-size: 1.05rem;
  color: var(--text);
}

.article-body p{
  margin: 0 0 1.1em;
  text-align: justify;
  text-align-last: right;
  line-height: 2;
}

.article-body .inline-link{
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}

.article-body .inline-link:hover{
  color: var(--brand-light);
}

/* ---------- پیمایش نوشته‌ی قبلی/بعدی ---------- */

.prev-next-divider{
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0 var(--space-3);
}

.prev-next-nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.prev-next-link{
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 46%;
  color: var(--text-2);
  font-size: 0.92rem;
  transition: color .2s ease;
}

.prev-next-link:hover{
  color: var(--accent);
}

.prev-next-title{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prev-next-arrow{
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1.1rem;
}

.prev-next-empty{
  flex: 1;
}

/* Book / course detail — سرِ کتاب یا دوره (جلد/تصویر + عنوان)، بالای
   فهرست نوشته‌های مرتبطش */
.book-head{
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-4);
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
}

.book-head img{
  width: 160px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.card-meta{
  font-size: 0.88rem;
  color: var(--text-disabled);
}

.book-info .card-meta{ margin-top: var(--space-1); }

.article-section{
  margin-bottom: var(--space-4);
}

.article-section h3{
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: var(--space-1);
}

/* About page */
.about-wrap{
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.about-wrap .author-photo{
  width: 160px;
  height: 160px;
}

.about-wrap .article-body{
  text-align: right;
  align-self: stretch;
}

/* صفحه‌ی ۴۰۴ */
.error-404-text{
  color: var(--text-2);
  font-size: 1rem;
}

.error-404-actions{
  margin-top: var(--space-2);
}

.error-404-home-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  transition: opacity .25s var(--ease);
}

.error-404-home-link:hover{
  opacity: 0.88;
}

/* Contact page */
.contact-wrap{
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4) var(--space-5);
}

.contact-info-grid{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-row{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.contact-row:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand-light);
}

.contact-icon{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-primary);
}

.contact-icon svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.contact-row-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.contact-row-label{
  font-size: 0.82rem;
  color: var(--text-2);
}

.contact-row-value{
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-row-value--ltr{
  direction: ltr;
  text-align: right;
  unicode-bidi: plaintext;
}

.form-note{
  font-size: 0.88rem;
  color: var(--text-disabled);
  margin-top: var(--space-1);
}

/* ---------- بخش نظرات (زیر هر داستان/جستار/آزادنویسی/کتاب/دوره) ---------- */

.comments-section{
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-2) 0;
  animation: fadeInUp .5s var(--ease) both;
}

.comments-title{
  font-size: 1.1rem;
  margin: 0 0 var(--space-2);
  color: var(--text);
}

.comments-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.comments-status{
  color: var(--text-disabled);
  font-size: 0.9rem;
}

.comment-item{
  --comment-indent: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-inline-start: calc(var(--comment-depth, 0) * var(--comment-indent));
  max-width: 100%;
  overflow-wrap: anywhere;
}

.comment-item-author{
  border-inline-start: 3px solid var(--brand-primary);
}

.comment-item-head{
  font-size: 0.88rem;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.comment-author-name{
  font-weight: 700;
}

.comment-item-body{
  margin: 0 0 6px;
  color: var(--text-2);
  white-space: pre-wrap;
  line-height: 1.9;
}

.comment-reply-toggle{
  display: block;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--brand-primary);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  text-align: left;
  margin-inline-end: auto;
}

.comment-replies{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.comment-reply-form{
  margin: var(--space-2) 0 0;
}

.comment-reply-form[hidden]{ display: none; }

.comment-form{
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.comment-form label{
  font-size: 0.9rem;
  color: var(--text-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.comment-form input,
.comment-form textarea{
  font-family: inherit;
  direction: rtl;
  text-align: right;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-size: 0.95rem;
}

.comment-form textarea{ min-height: 90px; resize: vertical; }

.comment-form button{
  align-self: flex-start;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-dark));
  color: #fff;
  border: none;
  padding: 10px 26px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.comment-form button:hover{
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.comment-form button:disabled{
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.comment-note{
  font-size: 0.85rem;
  color: var(--text-disabled);
  min-height: 1.2em;
}

/* فیلد تله‌ی ربات (honeypot) — برای کاربر واقعی کاملاً نامرئی است */
.hp-field{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 900px){
  .content-shell{ height: auto; }
  .content-shell main{ min-height: auto; }

  .results-area{ overflow-y: auto; }
}

@media (max-width: 560px){
  .site-header{ padding: var(--space-2) var(--space-3); }

  /* روی موبایل، به‌جای فشردن ۴ ستون در یک خط باریک، هر ردیف به دو خط
     تبدیل می‌شود: خط اول عنوان (کوتاه‌شونده با «…») + تاریخ + تعداد کلمه
     (همیشه هم‌خط و بدون شکستن)، خط دوم خلاصه‌ی متن در یک خط جدا */
  .text-list, .text-list.text-list--books{
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
  .text-row{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 3px;
    font-size: 0.96rem;
  }
  .text-row-title-col{
    grid-column: auto;
    /* flex-basis صفر (نه auto) عمدی است: با auto، مرورگر برای تصمیم به
       شکستن خط، عرض کامل متن (بدون کوتاه‌شدن) عنوان را حساب می‌کند و اگر
       عنوان بلند باشد تاریخ/تعداد کلمه را به خط بعد می‌فرستد؛ با ۰،
       عنوان با flex-grow فضای باقی‌مانده را می‌گیرد و خودش با
       overflow/ellipsis کوتاه می‌شود، بدون اینکه ستون‌های کناری را
       به خط دیگر بیندازد */
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    width: auto;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .text-row-date-col{
    grid-column: auto;
    flex: 0 0 auto;
    font-size: 0.8rem;
  }
  .text-row-count-col, .text-row-instructor-col{
    grid-column: auto;
    flex: 0 0 auto;
    max-width: 90px;
    font-size: 0.8rem;
  }
  .text-row-excerpt-col{
    grid-column: auto;
    flex: 1 1 100%;
    width: 100%;
    order: 4;
    font-size: 0.85rem;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .book-row{
    display: grid;
    grid-template-columns: 36px 1fr max-content;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: baseline;
  }
  .book-row .book-row-cover{ grid-column: 1; grid-row: 1 / 3; align-self: start; }
  .book-row .text-row-title-col{ grid-column: 2; grid-row: 1; flex: initial; }
  .book-row .text-row-date-col{ grid-column: 3; grid-row: 1; flex: initial; }
  .book-row .text-row-excerpt-col{ grid-column: 2 / 4; grid-row: 2; flex: initial; order: initial; }

  .book-head{ flex-direction: column; align-items: center; text-align: center; }

  .comments-section{ padding: var(--space-3) var(--space-2) 0; }
  .comment-form{ padding: var(--space-2); }
  .comment-item{ --comment-indent: 9px; padding: var(--space-2); }
  .comment-reply-form{ padding: var(--space-2); }
}