/* ==========================================================================
   responsive.css  |  همه استایل‌های واکنش‌گرا (تبلت و موبایل)
   ========================================================================== */

/* ---- تبلت بزرگ و کمتر ---- */
@media (max-width: 1000px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .feat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-about { grid-column: 1 / -1; }
}

/* ---- منو: زیر ۹۰۰px منوی بالا پنهان و منوی کشویی فعال می‌شود ---- */
@media (max-width: 900px) {
  .menu { display: none; }
  .menu-btn { display: grid; }
}

/* ---- موبایل و تبلت کوچک ---- */
@media (max-width: 720px) {
  body { padding-bottom: 128px; }

  /* هدر */
  .top { position: static; }
  .top .wrap { gap: 10px 12px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .top-acts .btn { display: none; }

  /* پلیر: دو ردیف */
  .player-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "trk ctl" "seek seek"; gap: 8px 12px; }
  .p-center { display: contents; }
  .p-track { grid-area: trk; }
  .p-ctl { grid-area: ctl; gap: 4px; }
  .p-seek { grid-area: seek; }
  .p-side { display: none; }
  .p-track .cv { width: 44px; height: 44px; }
  .p-ctl .main { width: 42px; height: 42px; }
  .toast { bottom: 136px; }

  /* هیرو خواننده */
  .a-in { flex-direction: column; text-align: center; padding: 24px 16px; gap: 18px; }
  .a-av { width: 130px; height: 130px; }
  .a-stats, .a-act { justify-content: center; }
  .a-main .en { text-align: center; }
}

/* ---- موبایل ---- */
@media (max-width: 640px) {
  /* پست بزرگ: کاور بالا، متن پایین */
  .post-b { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
  .post .cv { width: 100%; max-width: var(--cover); height: auto; aspect-ratio: 1; margin-inline: auto; }
  .info { min-height: 0; }
  .post-h, .post-f { padding: 12px 14px; }
  .name { font-size: 19px; }
  .grid, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* دانلود */
  .dl-row { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .dl-row .btn { grid-column: 1 / -1; width: 100%; }
  .act-row { grid-template-columns: minmax(0, 1fr); }
  .cta-card { flex-wrap: wrap; }
  .cta-card .btn { width: 100%; }
  .lyrics-body { padding-inline: 16px; }

  /* لیست ترک‌ها */
  .track { grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .track .td { display: none; }
  .track .dl-btn.alt { display: none; }
  .round-btn { width: 40px; height: 40px; }
}

/* ---- موبایل کوچک ---- */
@media (max-width: 560px) {
  /* ویژه: اسکرول افقی */
  .feat {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  }
  .feat::-webkit-scrollbar { display: none; }
  .fcard { flex: none; width: 150px; scroll-snap-align: start; }
  .sec-h { flex-wrap: wrap; }
  .p-ctl button:not(.main) { width: 32px; height: 32px; }
}

@media (max-width: 480px) {
  .f-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}