/* =========================================================
   RazTheme — Category Archive (scoped, tokens-first)
   Scope root: .raz-archive--cat
   ========================================================= */

/* ---------- Minimal icon masks (scoped) ---------- */
.raz-archive--cat .card-head[data-icon="folder"]{
  --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='M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z'/%3E%3C/svg%3E");
}
.raz-archive--cat .card-head[data-icon="help-circle"]{
  --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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2-3 4'/%3E%3Ccircle cx='12' cy='17' r='.5'/%3E%3C/svg%3E");
}

/* ---------- Breadcrumb (مثل سینگل) ---------- */
.raz-archive--cat .breadcrumb{ margin:0 0 16px }
.raz-archive--cat .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);
  box-shadow:none;
  white-space:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-snap-type:x proximity;max-width:100%;
}
.raz-archive--cat .breadcrumb ol::-webkit-scrollbar{ display:none }
.raz-archive--cat .breadcrumb li{display:inline-flex;align-items:baseline;gap:6px;direction:rtl;color:var(--fg);min-width:0;flex:0 0 auto;scroll-snap-align:center}
.raz-archive--cat .breadcrumb li+li::before{content:"›";margin:0 10px;color:var(--muted)}
.raz-archive--cat .breadcrumb a.crumb__link{display:inline-flex;align-items:baseline;gap:4px;color:color-mix(in srgb,var(--emerald-600) 90%, var(--fg));text-decoration:none;font-weight:500}
.raz-archive--cat .breadcrumb a.crumb__link:hover{text-decoration:underline}
.raz-archive--cat .breadcrumb .crumb__current{color:var(--fg);font-weight:400}

/* ---------- Titlebar ---------- */
.raz-archive--cat .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);box-shadow:none;
}
.raz-archive--cat .raz-archive__titlebar>.card-head{margin:0;padding:0;color:var(--fg)}
.raz-archive--cat .raz-archive__titlebar>.card-head::before{background:var(--emerald-600)!important}

.raz-archive--cat .raz-archive__title{font-size:21px;line-height:1.45;font-weight:700}
@media (max-width:480px){ .raz-archive--cat .raz-archive__title{font-size:19px} }
.raz-archive--cat .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);color:var(--fg);
}

/* ---------- Collapsible intro ---------- */
.raz-archive--cat .raz-cat-desc__inner{
  color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;max-height:120px;overflow:hidden;transition:max-height .25s ease;box-shadow:none;min-width:0;
}
.raz-archive--cat .raz-cat-desc__inner p{text-align:justify;text-justify:inter-word;hyphens:auto}
.raz-archive--cat .raz-cat-desc__toggle{
  margin-top:8px;font:500 13px/1 var(--font-ui,inherit);
  padding:8px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;
}

/* ---------- Layout (grid + sticky aside) ---------- */
:root{
  --header-height:72px;
  --sticky-gap:18px;
  --sticky-offset:calc(var(--header-height) + var(--sticky-gap));
}
.raz-archive--cat .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);
  overflow:visible;
}
.raz-archive--cat .raz-archive__main{grid-area:main;min-width:0}
.raz-archive--cat .raz-archive__bottom{grid-area:bottom;display:grid;gap:clamp(16px,2.5vw,24px);min-width:0}
.raz-archive--cat .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--cat .raz-archive__layout{grid-template-columns:1fr;grid-template-areas:"main" "bottom" "aside"}
  .raz-archive--cat .raz-archive__aside{position:static;top:auto}
}

/* ---------- Cards ---------- */
.raz-archive--cat .raz-cat-cards{
  display:grid;gap:clamp(12px,2vw,16px);grid-template-columns:1fr;list-style:none;padding:0;margin:0;min-width:0;
}
.raz-archive--cat .raz-cat-cards__item{list-style:none;min-width:0}
.raz-archive--cat .raz-cat-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);box-shadow:none;min-width:0;
}
@media (min-width:1440px){ .raz-archive--cat .raz-cat-card{grid-template-columns:280px 1fr} }

/* thumb */
.raz-archive--cat .raz-cat-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--cat .raz-cat-card__thumb img,
.raz-archive--cat .raz-no-thumb{width:100%;height:100%;object-fit:cover;display:block}
.raz-archive--cat .raz-no-thumb{background:color-mix(in srgb,var(--fg) 12%, var(--bg))}

/* body */
.raz-archive--cat .raz-cat-card__body{grid-column:2;display:flex;flex-direction:column;gap:8px;padding:0 4px;min-width:0}
.raz-archive--cat .raz-cat-card__title{margin:0;font-size:16px;line-height:1.6;font-weight:700;color:var(--fg)}
.raz-archive--cat .raz-cat-card__title a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.raz-archive--cat .raz-cat-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--cat .raz-cat-card__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;min-width:0}
.raz-archive--cat .raz-cat-card__date{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font-ui,inherit);color:var(--muted)}
.raz-archive--cat .raz-cat-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;
}
.raz-archive--cat .raz-cat-card__tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}

/* mobile cards */
@media (max-width:1023.98px){
  .raz-archive--cat .raz-cat-card{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px}
  .raz-archive--cat .raz-cat-card__thumb{grid-column:1;grid-row:1;height:auto;aspect-ratio:16/9;border-radius:8px}
  .raz-archive--cat .raz-cat-card__body{grid-column:1;padding:8px 0 0}
  .raz-archive--cat .raz-cat-card__excerpt{-webkit-line-clamp:3}
  .raz-archive--cat .raz-cat-card__tags{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .raz-archive--cat .raz-cat-card__tags::-webkit-scrollbar{display:none}
}

/* ---------- Pager ---------- */
.raz-archive--cat .raz-pager{margin:clamp(16px,2.5vw,24px) 0 0;text-align:center}
.raz-archive--cat .raz-pager .nav-links{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.raz-archive--cat .raz-pager a,
.raz-archive--cat .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);color:var(--fg);box-shadow:none;
}
.raz-archive--cat .raz-pager .current{font-weight:700}

/* ---------- Bottom blocks ---------- */
.raz-archive--cat .raz-cat-content,
.raz-archive--cat .raz-cat-faq{
  padding:var(--space-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:none;min-width:0;
}

/* متن محتوای پایین — justify */
.raz-archive--cat .raz-cat-content__inner,
.raz-archive--cat .raz-cat-content__inner p{
  text-align:justify;text-justify:inter-word;hyphens:auto;
}

/* FAQ head */
.raz-archive--cat .raz-faq-head{margin:0 0 8px;color:var(--fg)}
.raz-archive--cat .raz-faq-head::before{background:var(--emerald-600)!important}
[dir="rtl"] .raz-archive--cat .raz-faq-head{margin-inline-start:0}

/* FAQ items (light) */
.raz-archive--cat .raz-faq{display:flex;flex-direction:column;gap:12px}
.raz-archive--cat details.raz-faq__item{
  border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease;box-shadow:none;
}
.raz-archive--cat details.raz-faq__item[open]{box-shadow:0 4px 14px rgba(0,0,0,.06)}
.raz-archive--cat .raz-faq__q{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;user-select:none;outline:0;
  font:500 15px/1.7 var(--font-ui,inherit);color:var(--text,var(--fg));background:transparent;position:relative;
}
.raz-archive--cat .raz-faq__q::-webkit-details-marker,
.raz-archive--cat details.raz-faq__item>summary::marker{display:none}
.raz-archive--cat .raz-faq__q::after{
  content:"";inline-size:18px;block-size:18px;flex:0 0 18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg 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'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg 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'><polyline points='6 9 12 15 18 9'/></svg>") center/contain no-repeat;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.raz-archive--cat details.raz-faq__item[open] .raz-faq__q::after{transform:rotate(180deg)}
.raz-archive--cat .raz-faq__a{
  padding:10px 16px 14px;font:400 13.5px/1.9 var(--font-ui,inherit);color:var(--text-dim,var(--muted));
  text-align:justify;text-align-last:right;hyphens:auto;
}

/* =========================================================
   Dark Mode — همسان با سینگل (glass-bg / glass-border + accent)
   ========================================================= */
html[data-theme="dark"] .raz-archive--cat .raz-archive__titlebar,
html[data-theme="dark"] .raz-archive--cat .raz-cat-desc__inner,
html[data-theme="dark"] .raz-archive--cat .raz-cat-content,
html[data-theme="dark"] .raz-archive--cat .raz-cat-faq,
html[data-theme="dark"] .raz-archive--cat .raz-pager a,
html[data-theme="dark"] .raz-archive--cat .raz-pager span{
  background:var(--glass-bg);
  border-color:var(--glass-border);
  box-shadow:none;
}

/* کارت‌ها در دارک: همان گلس */
html[data-theme="dark"] .raz-archive--cat .raz-cat-card{
  background:var(--glass-bg);
  border-color:var(--glass-border);
  box-shadow:none;
}

/* FAQ بازشده در دارک: شَدو تیره‌تر */
html[data-theme="dark"] .raz-archive--cat details.raz-faq__item[open]{
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* FAQ آیتم‌ها مثل سینگل */
html[data-theme="dark"] .raz-archive--cat details.raz-faq__item{
  background:var(--glass-bg);
  border-color:var(--glass-border);
}
html[data-theme="dark"] .raz-archive--cat details.raz-faq__item[open]{
  border-color:color-mix(in oklab, var(--accent), transparent 70%);
}
html[data-theme="dark"] .raz-archive--cat .raz-faq__q{ color:var(--text) }
html[data-theme="dark"] .raz-archive--cat .raz-faq__a{ color:var(--text-dim) }

/* no-thumb در دارک */
html[data-theme="dark"] .raz-archive--cat .raz-no-thumb{
  background:color-mix(in srgb, var(--fg) 12%, transparent);
}
