/* === MyCopon Blog Grid (clean, using theme vars) === */
.mc-blog-archive{
  max-width:1200px;
  margin:0 auto;
  padding:24px;
  background:var(--bg);
}
.mc-blog-archive *{box-sizing:border-box}

.mc-blog-archive .mc-ad{
  width:100%;
  margin:0 0 24px;
  border-radius:14px;
  overflow:hidden;
}
.mc-blog-archive .mc-ad img{display:block;width:100%;height:auto;border-radius:14px}
.mc-blog-archive .mc-ad iframe{display:block;max-width:100%;margin:0 auto}

.mc-arch-head{margin:6px 0 18px}
.mc-arch-title{
  margin:0 0 8px;
  font-weight:800;
  font-size:34px;
  line-height:1.25;
  color:var(--ink);
}
.mc-arch-intro{
  color:var(--muted);
  font-size:15px;
}

.blog-cats-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}
.blog-cats-filter .chip{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  padding:6px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--white);
  color:var(--ink-soft);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.blog-cats-filter .chip:hover,
.blog-cats-filter .chip.active{
  border-color:var(--brand);
  color:var(--brand);
  background:color-mix(in srgb,var(--brand) 5%,var(--white));
}
.mc-blog-empty{grid-column:1/-1;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--white);color:var(--muted);text-align:center}

.mc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  margin-top:16px;
}

.mc-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:var(--bg);
  box-shadow:0 8px 22px var(--slate-shadow-06); /* اگر خواستی حتی این را هم به متغیر تبدیل می‌کنیم */
  transition:transform .18s, box-shadow .18s;
}
.mc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px var(--slate-shadow-10);
}

.mc-thumb{ display:block; aspect-ratio:16/9; background:var(--surface-muted) }
.mc-thumb img{ width:100%; height:100%; object-fit:cover }

.mc-body{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mc-title{
  margin:0;
  font-weight:800;
  font-size:18px;
  line-height:1.35;
}
.mc-title a{
  text-decoration:none;
  color:var(--ink);
}
.mc-title a:hover{
  color:var(--accent);
}

.mc-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}
.mc-meta__item{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:inherit;
  text-decoration:none;
}
.mc-meta__item svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mc-meta__item[href]:hover{color:var(--accent)}

.mc-excerpt{
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.8;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.mc-readmore{
  margin-top:auto;
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}

.mc-pag{
  margin:26px 0 6px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.mc-pag a,
.mc-pag span{
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  color:var(--ink);
  background:var(--bg);
}
.mc-pag .current{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}



/* RTL blog pagination: next points toward the next page direction. */
.blog-archive .navigation.pagination .next .mc-page-arrow svg{
  transform:rotate(180deg);
}

@media (max-width:640px){
  .mc-blog-archive{padding:18px 14px}
  .mc-arch-title{font-size:28px}
  .mc-blog-archive .mc-ad{border-radius:10px;margin-bottom:18px}
}