/* =========================================================
   RazTheme — Blog Index (home.php) • standalone styles
   Scope root: .raz-archive--blog
   ========================================================= */

/* ---------- Minimal mask icons (titlebar + UI) ---------- */
.raz-archive--blog .card-head[data-icon="newspaper"]{
  --icon-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}

/* ---------- Breadcrumb ---------- */
.raz-archive--blog .breadcrumb{margin:0 0 16px}
.raz-archive--blog .breadcrumb ol{
  display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:12px 16px;
  background:var(--glass-bg, var(--glass));border:1px solid var(--glass-border, var(--border));
  border-radius:14px;-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
  white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity
}
.raz-archive--blog .breadcrumb ol::-webkit-scrollbar{display:none}
.raz-archive--blog .breadcrumb li{display:inline-flex;align-items:baseline;gap:6px;min-width:0;flex:0 0 auto;scroll-snap-align:center}
.raz-archive--blog .breadcrumb li+li::before{content:"›";margin:0 10px;color:var(--muted)}
.raz-archive--blog .breadcrumb a.crumb__link{display:inline-flex;align-items:baseline;gap:4px;font-weight:500;text-decoration:none}

/* ---------- Titlebar ---------- */
.raz-archive--blog .raz-archive__titlebar{
  display:flex;align-items:center;gap:12px;min-width:0;
  padding:14px 16px;margin:0 0 var(--space-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)
}
.raz-archive--blog .raz-archive__title{margin:0;font-weight:700;font-size:21px;line-height:1.45}
@media (max-width:480px){ .raz-archive--blog .raz-archive__title{font-size:19px} }
.raz-archive--blog .raz-archive__badge{
  margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 10px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--emerald-500) 28%, var(--border));
  background:color-mix(in srgb,var(--emerald-500) 10%, transparent);
  font:600 12px/1 var(--font-ui,inherit)
}

/* ---------- Layout (grid + sticky aside) ---------- */
:root{ --header-height:72px; --sticky-gap:18px; --sticky-offset:calc(var(--header-height) + var(--sticky-gap)); }
.raz-archive--blog .raz-archive__layout{
  display:grid;gap:clamp(16px,2.5vw,24px);
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-areas:"main aside" "bottom bottom";
  align-items:start;min-width:0;margin-top:clamp(16px,2.5vw,24px)
}
.raz-archive--blog .raz-archive__main{grid-area:main;min-width:0}
.raz-archive--blog .raz-archive__aside{grid-area:aside;position:sticky;top:var(--sticky-offset);align-self:start;height:max-content;min-width:0}
@media (max-width:991.98px){
  .raz-archive--blog .raz-archive__layout{grid-template-columns:1fr;grid-template-areas:"main" "aside"}
  .raz-archive--blog .raz-archive__aside{position:static;top:auto}
}

/* ---------- Cards ---------- */
.raz-archive--blog .raz-blog-cards{
  display:grid;gap:clamp(12px,2vw,16px);grid-template-columns:1fr;list-style:none;padding:0;margin:0;min-width:0
}
.raz-archive--blog .raz-blog-cards__item{list-style:none;min-width:0}
.raz-archive--blog .raz-blog-card{
  display:grid;grid-template-columns:260px 1fr;align-items:center;gap:12px;
  padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:0
}
@media (min-width:1440px){ .raz-archive--blog .raz-blog-card{grid-template-columns:280px 1fr} }

/* thumb */
.raz-archive--blog .raz-blog-card__thumb{
  grid-column:1;grid-row:1 / span 3;height:160px;border-radius:var(--radius-sm);
  overflow:hidden;background:color-mix(in srgb,var(--fg) 6%, var(--bg));min-width:0
}
.raz-archive--blog .raz-blog-card__thumb img, .raz-archive--blog .raz-no-thumb{
  width:100%;height:100%;object-fit:cover;display:block
}
.raz-archive--blog .raz-no-thumb{background:color-mix(in srgb,var(--fg) 12%, var(--bg))}

/* body */
.raz-archive--blog .raz-blog-card__body{grid-column:2;display:flex;flex-direction:column;gap:8px;padding:0 4px;min-width:0}
.raz-archive--blog .raz-blog-card__title{margin:0;font-size:16px;line-height:1.6;font-weight:700}
.raz-archive--blog .raz-blog-card__title a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.raz-archive--blog .raz-blog-card__excerpt{
  margin:0;font-size:13px;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  text-align:justify;text-justify:inter-word;hyphens:auto;word-break:break-word
}

/* footer: تاریخ ابتدا، دسته‌ها انتها */
.raz-archive--blog .raz-blog-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;min-width:0}
.raz-archive--blog .raz-blog-card__date{
  display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-ui,inherit);color:var(--muted)
}
.raz-archive--blog .raz-blog-card__date::before{
  content:"";inline-size:16px;block-size:16px;flex:0 0 16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 2v4M8 2v4'/%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 2v4M8 2v4'/%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat
}

/* دسته‌ها: دسکتاپ wrap عادی (فقط ۲ مورد به‌خاطر PHP) | موبایل اسکرول افقی */
.raz-archive--blog .raz-blog-card__cats{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
@media (max-width:1023.98px){
  .raz-archive--blog .raz-blog-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px}
  .raz-archive--blog .raz-blog-card__thumb{grid-column:1;grid-row:1;height:auto;aspect-ratio:16/9;border-radius:8px}
  .raz-archive--blog .raz-blog-card__body{grid-column:1;padding:8px 0 0}
  .raz-archive--blog .raz-blog-card__excerpt{-webkit-line-clamp:3}
  .raz-archive--blog .raz-blog-card__cats{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .raz-archive--blog .raz-blog-card__cats::-webkit-scrollbar{display:none}
}

/* چیپ دسته با آیکن پوشه (فاصله صحیح کنار متن؛ بدون تغییر رنگ لینک) */
.raz-archive--blog .raz-chip-cat{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.raz-archive--blog .raz-chip-cat__icon{
  inline-size:14px;block-size:14px;flex:0 0 14px;background:currentColor;opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E") center/contain no-repeat
}

/* ---------- Pager ---------- */
.raz-archive--blog .raz-pager{margin:clamp(16px,2.5vw,24px) 0 0;text-align:center}
.raz-archive--blog .raz-pager .nav-links{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.raz-archive--blog .raz-pager a,
.raz-archive--blog .raz-pager span{
  display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface)
}
.raz-archive--blog .raz-pager .current{font-weight:700}

/* ---------- Dark mode (glass tokens) ---------- */
html[data-theme="dark"] .raz-archive--blog .raz-archive__titlebar,
html[data-theme="dark"] .raz-archive--blog .raz-pager a,
html[data-theme="dark"] .raz-archive--blog .raz-pager span,
html[data-theme="dark"] .raz-archive--blog .raz-blog-card{
  background:var(--glass-bg);
  border-color:var(--glass-border);
}
html[data-theme="dark"] .raz-archive--blog .raz-no-thumb{
  background:color-mix(in srgb, var(--fg) 12%, transparent)
}