/* ===== Swatch block ===== */
.pal-swatch {
  flex: 1 1 20%;
  min-width: 50px;
  height: 80px;
  background: var(--c, #ccc);
  position: relative;
  transition: flex-basis .25s ease;
  overflow: hidden;
  cursor: pointer;
}

/* حالت hover: سواچ پهن‌تر میشه */
.pal-swatch:hover {
  flex-basis: 40%; /* تقریبا دوبرابر */
}

/* کد و نام در حالت عادی مخفی */
.pal-code, .pal-name {
  position: absolute;
  inset-inline: 0;
  text-align: center;
  color: #111;                  /* متن تیره خالص */
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: rgba(255,255,255,0.75); /* بک‌گراند محو سفید */
  text-shadow: none;             /* حذف سایه‌ی سیاه */
  border-radius: .4rem;          /* که چیپ قشنگ‌تر بشه */
  padding: .2rem .5rem;          /* کمی فاصله دور متن */
}

/* نمایش فقط در hover یا active */
.pal-swatch:hover .pal-code,
.pal-swatch:hover .pal-name,
.pal-swatch.active .pal-code,
.pal-swatch.active .pal-name {
  opacity: 1;
}

/* HEX وسط بلوک */
.pal-code {
  top: 50%;
  transform: translateY(-50%);
  font-size: .95rem;
  font-weight: 600;
}

/* نام فارسی کوچک‌تر زیر HEX */
.pal-name {
  color: #374151
  top: calc(50% + 1.2rem);
  font-size: .7rem;
  font-weight: 500;
  opacity: .95;
}

/* ===== Wrapper ===== */
.fa-trends-wrap { font-family: inherit; color: #111827; }
@media (prefers-color-scheme: dark){
  .fa-trends-wrap { color: #e5e7eb; }
}

.fa-trends-header h3 {
  margin: .25rem 0 1rem;
  font-size: 1.1rem;
  font-weight: 800;
}

/* grid */
.fa-trends-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: .85rem;
}

/* ===== Card ===== */
.pal-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  transition: transform .15s ease;
}
.pal-card:hover { transform: translateY(-1px); }
@media (prefers-color-scheme: dark){
  .pal-card { background: #D8DCE4; border-color: rgba(255,255,255,.08); }
}

/* row of swatches */
.pal-card__image { width: 100%; height: 92px; overflow: hidden; }
.pal-card__colors { display: flex; height: 100%; }

/* title — بدون هیچ نوار/بک‌گراند */
.pal-card__info{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-top: .35rem;
  padding: .35rem .4rem 0;
  text-align: center;
  color: #181B67;
  font-weight: 600;
}
@media (prefers-color-scheme: dark){
  .pal-card__info{ color: #cbd5e1 !important; }
}

/* حذف هر اوورلی */
.pal-card__overlay { display: none !important; }

/* toast reuse */
.fa-toast { z-index: 9999; }

/* ===== Mobile ===== */
@media (max-width: 480px){
  .fa-trends-list {
    grid-template-columns: repeat(1, minmax(260px, 1fr));
    gap: .75rem;
  }
  .pal-card__image { height: 88px; }
  .pal-code { font-size: 1rem; }
  .pal-name { font-size: .75rem; }
}
/* پیش‌فرض: همون 40% */
.pal-swatch:hover { flex-basis: 40%; }

/* اگر حداقل 7 سواچ باشد، هاور کمتر بزرگ شود */
.pal-card__colors:has(.pal-swatch:nth-child(n+7)) .pal-swatch:hover{
  flex-basis: 28%;
}

/* اگر حداقل 10 سواچ باشد، باز هم کمتر */
.pal-card__colors:has(.pal-swatch:nth-child(n+10)) .pal-swatch:hover{
  flex-basis: 22%;
}

/* برای سواچ‌های خیلی زیاد، حداقل عرض کمی کمتر تا جا باز شود */
.pal-card__colors:has(.pal-swatch:nth-child(n+10)) .pal-swatch{
  min-width: 42px;
}