/* =========================================
   Tags » Tagged Items – Grid قطعی
   (محدود به خروجی com_tags)
   ========================================= */

/* کانتینر نتایج */
.com-tags-tag.tag-category ul.com-tags-tag__category.list-group {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* آیتم‌ها */
.com-tags-tag.tag-category ul.com-tags-tag__category.list-group > li.list-group-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* عنوان */
.com-tags-tag.tag-category h3 {
  margin: 0 0 10px 0 !important;
  line-height: 1.6 !important;
  font-size: 1rem !important;
}

/* عکس‌ها هم‌قد و مرتب */
.com-tags-tag.tag-category img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

/* ریسپانسیو */
@media (max-width: 992px) {
  .com-tags-tag.tag-category ul.com-tags-tag__category.list-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 576px) {
  .com-tags-tag.tag-category ul.com-tags-tag__category.list-group {
    grid-template-columns: 1fr !important;
  }
}
/* کارت‌ها: مرتب‌سازی محتوا */
.com-tags-tag.tag-category ul.com-tags-tag__category.list-group > li.list-group-item{
  display:flex !important;
  flex-direction:column !important;
}

/* عکس بالا، عنوان پایین */
.com-tags-tag.tag-category ul.com-tags-tag__category.list-group > li.list-group-item img{
  order: 1 !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display:block !important;
}

.com-tags-tag.tag-category ul.com-tags-tag__category.list-group > li.list-group-item h3{
  order: 2 !important;
  margin: 10px 0 0 0 !important;
}
.com-tags-tag.tag-category li.list-group-item {
  display: flex;
  flex-direction: column;
}

.com-tags-tag.tag-category img {
  flex-shrink: 0;
}
.com-tags-tag.tag-category h3 {
  margin-top: 14px;
  line-height: 1.5;
}
/* =========================================
   Grid Columns: Desktop=4, Mobile=2
   ========================================= */

/* پیش‌فرض (دسکتاپ) */
.com-tags-tag.tag-category ul.com-tags-tag__category.list-group {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

/* تبلت/موبایل: ۲ ستون */
@media (max-width: 768px) {
  .com-tags-tag.tag-category ul.com-tags-tag__category.list-group {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* موبایل خیلی کوچک: ۱ ستون (اختیاری ولی بهتر) */
@media (max-width: 420px) {
  .com-tags-tag.tag-category ul.com-tags-tag__category.list-group {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .com-tags-tag.tag-category h3 { font-size: 1.05rem !important; }
}
/* فقط 8 کارت اول در Tagged Items */
.com-tags-tag.tag-category 
ul.com-tags-tag__category.list-group 
> li:nth-child(n+9) {
  display: none !important;
}
/* --- Tagged Items: عنوان زیر عکس (قوی و مطمئن) --- */

/* هر آیتم را دو ردیفه کن: تصویر بالا، عنوان پایین */
.com-tags-tag li.list-group-item,
.com-tags-tag li.list-group-item-action {
  display: grid !important;
  grid-template-areas:
    "img"
    "ttl" !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
}

/* لینکِ تصویر (معمولاً لینک مستقیمِ داخل li است) */
.com-tags-tag li.list-group-item > a,
.com-tags-tag li.list-group-item-action > a {
  grid-area: img !important;
  order: 1 !important;
}

/* تیتر (h3/h4/h2) را پایینِ تصویر بگذار */
.com-tags-tag li.list-group-item h2,
.com-tags-tag li.list-group-item h3,
.com-tags-tag li.list-group-item h4,
.com-tags-tag li.list-group-item-action h2,
.com-tags-tag li.list-group-item-action h3,
.com-tags-tag li.list-group-item-action h4 {
  grid-area: ttl !important;
  order: 2 !important;
  margin: 12px 0 0 !important;
  text-align: center !important;
}

/* اگر عنوان داخل لینک باشد */
.com-tags-tag li.list-group-item h2 a,
.com-tags-tag li.list-group-item h3 a,
.com-tags-tag li.list-group-item h4 a,
.com-tags-tag li.list-group-item-action h2 a,
.com-tags-tag li.list-group-item-action h3 a,
.com-tags-tag li.list-group-item-action h4 a {
  display: inline-block !important;
}
.com-tags-tag li.list-group-item img,
.com-tags-tag li.list-group-item-action img { order: 1 !important; }
.com-tags-tag li.list-group-item img { display:block !important; }

/* --- کارت‌های ماژول Articles: عنوان زیر عکس --- */

/* محتوا را ستونی کن تا order کار کند */
.mod-articles-item .mod-articles-item-content{
  display: flex !important;
  flex-direction: column !important;
}

/* عکس اول */
.mod-articles-item .mod-articles-image{
  order: 1 !important;
  margin: 0 !important;
}

/* عنوان دوم (زیر عکس) */
.mod-articles-item .mod-articles-title{
  order: 2 !important;
  margin: 12px 0 0 !important;
  text-align: center !important;
}

/* تگ‌ها سوم */
.mod-articles-item .mod-articles-tags{
  order: 3 !important;
  margin-top: 8px !important;
}
.share-box{
  display:flex;
  gap:10px;
  margin:16px 0;
}

.share-btn{
  width:140px;
  height:44px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  position:relative;
  overflow:hidden;
}

.share-btn::before{
  content:"";
  width:22px;
  height:22px;
  background-color:#fff;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.share-x{ background:#111; }
.share-x::before{ -webkit-mask-image:url('/images/social/x.svg'); mask-image:url('/images/social/x.svg'); }

.share-fb{ background:#1877f2; }
.share-fb::before{ -webkit-mask-image:url('/images/social/facebook.svg'); mask-image:url('/images/social/facebook.svg'); }

.share-btn:hover{ opacity:.92; transform:translateY(-1px); transition:.15s; }