/* =========================================================
   Shafa Cards
========================================================= */

.shafa-cards-container{
  max-width:1320px;
  margin:40px auto;
  padding:0 15px;
  direction:rtl;
  box-sizing:border-box;
}

.shafa-grid{
  display:grid !important;
  /* حذف استایل ثابت 4 ستونه از اینجا چون از کلاس‌های پایین‌تر یا PHP مدیریت می‌شود */
  gap:20px !important;
  justify-content: center !important; /* اضافه شده برای وسط‌چین شدن */
}

.shafa-card{
  position:relative;
  background:#fff;
  border-radius:20px;
  border:1px solid #eaeaea;
  padding:25px 15px;
  text-align:center;
  text-decoration:none !important;
  transition:0.3s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:320px;
  /* اصلاح برای جلوگیری از بریدگی متن */
  height: auto !important;
  overflow: visible !important; 
  /* -------------------------- */
  box-sizing:border-box;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  min-width:0 !important;
  gap:12px;
}

.shafa-img-wrapper{
  width:100%;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}

.shafa-img-wrapper img{
  max-width:160px;
  max-height:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  transition:0.4s ease;
}

.shafa-content{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow: visible !important;
  min-height: 0;
}

.shafa-content h3{
  font-size:18px !important;
  font-weight:700 !important;
  color:#2d2d2d;
  margin:0 0 5px 0 !important;
  line-height:1.4;
  margin-bottom:0 !important;
}

.shafa-content p{
  font-size:13px;
  color:#54595f;
  margin:0;
  line-height: 2;                 
  padding-bottom: 2px;            
  overflow: visible !important;   
  max-height: none !important;    
  height: auto !important;        
}

.shafa-hover-overlay{
  position:absolute;
  inset:0;
  background:rgba(17,24,39,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s;
  z-index:5;
  pointer-events:none;
}

.shafa-hover-btn{
  background:#B8001F;
  color:#fff !important;
  padding:10px 20px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  transform:translateY(12px);
  transition:0.3s ease;
}

.shafa-mobile-btn{
  display:none;
  background:#B8001F;
  color:#fff !important;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
  line-height:1;
  text-align:center;
  box-sizing:border-box;
}

/* Tablet: 3 columns */
@media (min-width:768px) and (max-width:1199px){
  .shafa-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; }
}

/* Mobile & Portrait styles - دقیقا طبق کد شما بدون تغییر */
@media (max-width:1024px){
  .shafa-hover-overlay{ display:none !important; }
  .shafa-content p{ display:none !important; }
  .shafa-mobile-btn{
    display:flex !important;
    width:100% !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .shafa-card{
    min-height:0 !important;
    height:auto !important;
    justify-content:flex-start !important;
    padding:10px 10px 6px !important;
    gap:10px !important;
    border-radius:15px !important;
  }
  .shafa-img-wrapper{ height:132px !important; margin-bottom:0 !important; }
  .shafa-img-wrapper img{ max-width:128px !important; max-height:128px !important; }
  .shafa-content h3{ font-size:14px !important; margin:0 !important; line-height:1.25 !important; }
  .shafa-mobile-btn{ height:36px !important; margin-top:4px !important; margin-bottom:0 !important; padding:0 10px !important; border-radius:10px !important; }
}

@media (max-width:767px){
  .shafa-cards-container{
    width:100vw !important;
    position:relative;
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    padding:0 10px !important;
  }
  .shafa-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding:0 10px !important;
  }
  .shafa-card{ padding:8px 8px 5px !important; }
  .shafa-img-wrapper{ height:125px !important; }
  .shafa-img-wrapper img{ max-width:118px !important; max-height:118px !important; }
}

/* بخش‌های کنترلی ستون‌ها */
.shafa-grid.shafa-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.shafa-grid.shafa-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* دسکتاپ هاور */
@media (min-width:1025px){
  .shafa-card:hover{ border-color:#83b735; transform:translateY(-5px); }
  .shafa-card:hover .shafa-hover-overlay{ opacity:1; visibility:visible; }
  .shafa-card:hover .shafa-hover-btn{ transform:translateY(0); }
  .shafa-card:hover img{ transform:scale(1.1); }
}

/* مدیریت جهت صفحه در تبلت/موبایل - دقیقا طبق کد شما */
@media (max-width:1024px) and (orientation: portrait){
  .shafa-grid, .shafa-grid.shafa-cols-3, .shafa-grid.shafa-cols-4{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width:1024px) and (orientation: landscape){
  .shafa-grid, .shafa-grid.shafa-cols-3, .shafa-grid.shafa-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}