/* ============================================================
   تب‌های فیلتر
   ============================================================ */
.poems-tabs{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.poems-tab{
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 26px;
  border-radius: 999px;

  background: rgba(32,32,32,0.55);
  border: 1px solid rgba(255,225,31,.18);
  color: rgba(255,255,255,.65);

  font-size: 14px;
  text-decoration: none;

  transition: all .25s ease;
}

.poems-tab:hover{
  border-color: rgba(255,225,31,.4);
  color: #fff;
}

.poems-tab.active{
  background: linear-gradient(135deg, var(--gold-light, #f4d98a), var(--gold, #eccb84));
  border-color: transparent;
  color: #1c1408;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(236,203,132,.25);
}

.poems-tab.active i{
  color: #1c1408;
}

/* ============================================================
   گرید و کارت شعر
   ============================================================ */
.poems-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}

.poems-empty{
  color: rgba(255,255,255,.5);
  text-align: center;
  grid-column: 1 / -1;
  padding: 30px 0;
}

.poem-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 26px 22px;
  border-radius: 20px;

  background: linear-gradient(160deg, rgba(40,36,28,.65), rgba(24,22,18,.75));
  border: 1px solid rgba(255,225,31,.15);

  text-decoration: none;
  color: #fff;

  overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.poem-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,225,31,.08), transparent 60%);
  pointer-events: none;
}

.poem-card:hover{
  border-color: rgba(255,225,31,.45);
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.poem-card-eyebrow{
  font-size: 12px;
  color: var(--gold, #eccb84);
  display: flex;
  align-items: center;
  gap: 6px;
}

.poem-card-title{
  font-size: 18px;
  font-weight: 700;
  color: #ffe11f;
  margin: 0;
}

.poem-card-verse{
  color: rgba(255,255,255,.65);
  font-size: 13.5px;
  line-height: 2.1;
}

.poem-card-more{
  margin-top: auto;
  align-self: flex-start;
  font-size: 12.5px;
  color: var(--gold, #eccb84);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: gap .25s ease;
}

.poem-card:hover .poem-card-more{
  gap: 8px;
}

/* ---------- گوشه‌های تذهیب ---------- */
.manuscript-corner{
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,225,31,.35);
  z-index: 1;
}

.manuscript-corner.tl{ top: 10px; right: 10px; border-left: none; border-bottom: none; }
.manuscript-corner.tr{ top: 10px; left: 10px;  border-right: none; border-bottom: none; }
.manuscript-corner.br{ bottom: 10px; left: 10px; border-right: none; border-top: none; }
.manuscript-corner.bl{ bottom: 10px; right: 10px; border-left: none; border-top: none; }

@media (max-width: 768px){
  .poems-tab{ padding: 8px 20px; font-size: 13px; }
  .poems-grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 486px){
  .poems-tab{ padding: 8px 20px; font-size: 13px; }
  .poems-grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 2fr)); }
}
@media (max-width: 410px){
  .poems-tab{ padding: 8px 20px; font-size: 13px; }
  .poems-grid{ grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}