/* ===== Home Categories – Clean & Optimized (no cards) ===== */
.home-cats{
  --accent: #1e40af;     /* رنگ سازمانی پایه */
  --label:  #0f172a;     /* متن پیش‌فرض */
  --ring:   color-mix(in srgb, var(--accent) 42%, #fff);
}

/* Grid */
.home-cats .cats-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}
@media (max-width:1024px){ .home-cats .cats-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){  .home-cats .cats-grid{grid-template-columns:repeat(2,1fr)} }

/* Item (بدون کارت پس‌زمینه) */
.home-cats .cat{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  text-decoration:none;
  outline:0;
  transition:transform .25s ease;
  will-change:transform;
}
.home-cats .cat:focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 55%, #fff);
  outline-offset:4px;
  border-radius:16px;
}

/* Icon circle */
.home-cats .cat img{
  width:116px; height:116px;
  border-radius:9999px;
  aspect-ratio:1/1; object-fit:contain; display:block;
  margin-bottom:10px;
  background: radial-gradient(circle at 40% 35%, #f1f5f9, #e2e8f0 60%, #cbd5e1);
  border:2px solid var(--ring);
  padding:12px;
  box-shadow:
    0 8px 18px rgba(15,23,42,.06),
    inset 0 -10px 18px rgba(255,255,255,.75);
  transition:transform .35s cubic-bezier(.18,.88,.26,1.1), box-shadow .3s ease, filter .3s ease;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.08));
}
.home-cats .cat:hover img{
  transform:translateY(-6px) scale(1.04);
  box-shadow:
    0 16px 28px rgba(15,23,42,.10),
    inset 0 -12px 20px rgba(255,255,255,.8);
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.10));
}

/* Label */
.home-cats .cat span{
  font:700 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--label);
  transition:color .2s ease, text-shadow .2s ease, background-position 1.2s linear;
}
.home-cats .cat:hover span{
  color: color-mix(in srgb, var(--accent) 85%, #0f172a);
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}

/* Hover lift (بدون کارت) */
.home-cats .cat:hover{ transform:translateY(-2px); }

/* Entrance animation (ملایم) */
@keyframes catPop{
  0%{ opacity:0; transform:translateY(14px) scale(.98); }
  70%{ opacity:1; transform:translateY(-2px) scale(1.01); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
.home-cats .cat{ animation:catPop .6s cubic-bezier(.2,.8,.2,1) both; }
.home-cats .cat:nth-child(1){animation-delay:.02s}
.home-cats .cat:nth-child(2){animation-delay:.08s}
.home-cats .cat:nth-child(3){animation-delay:.14s}
.home-cats .cat:nth-child(4){animation-delay:.20s}
.home-cats .cat:nth-child(5){animation-delay:.26s}
.home-cats .cat:nth-child(6){animation-delay:.32s}
.home-cats .cat:nth-child(7){animation-delay:.38s}
.home-cats .cat:nth-child(8){animation-delay:.44s}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .home-cats .cat,
  .home-cats .cat img,
  .home-cats .cat span{ transition:none !important; animation:none !important; }
}

/* Dark mode (optional) */
@media (prefers-color-scheme: dark){
  .home-cats .cat img{
    background: radial-gradient(circle at 40% 35%, #1f2937, #0f172a 60%, #0b1220);
    box-shadow:
      0 10px 20px rgba(0,0,0,.35),
      inset 0 -10px 20px rgba(255,255,255,.06);
    border-color: color-mix(in srgb, var(--accent) 55%, #0b1220);
  }
  .home-cats .cat span{ color:#e5e7eb; }
}

/* ==== HOTFIX (mobile) | keep cats clean on phones ==== */
@media (max-width:640px){
  .home-cats .cat{
    /* متن و بُردر و پس‌زمینه روشن؛ هرچی قبلاً ست شده خنثی بشه */
    border-color:#e5e7eb !important; /* gray-200 */
    background:#ffffff !important;
    color:#111827 !important;        /* gray-900 */
  }
  .home-cats .cat span{
    color:#111827 !important;        /* متن تیره، جلوی مشکی/بنفش شدن لینک */
  }
  .home-cats .cat:visited span{
    color:#111827 !important;
  }
  .home-cats .cat img{
    /* اگر جایی فیلترِ سیاه/گری‌اسکیل گذاشته بود، بردار */
    -webkit-filter:none !important;
    filter:none !important;
  }
}