/* ============================================================
   اسپویل — MOBILE RESPONSIVE (فقط ≤1024px لود می‌شود)
   دسکتاپ دست‌نخورده — این فایل هیچ قانونی خارج از media ندارد.
   ============================================================ */

/* ---------- ≤1024px: tablet & small laptop ---------- */
@media screen and (max-width: 1024px) {
  /* FIX ریشه‌ای: آیتم‌های grid نباید min-content عریض را به track تحمیل کنند */
  html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; }
  body > .shell { width: 100% !important; max-width: 100vw !important; }
  .shell { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; padding: 10px 12px 40px !important; }
  .shell > main { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; padding: 0 !important; }
  .shell > .social-bar { min-width: 0 !important; max-width: 100% !important; position: static !important; order: 2 !important; margin-top: 14px !important; }

  main > * { max-width: 100% !important; }

  /* هر ظرف اسکرول افقی باید داخل ستون محبوس بماند */
  .row-scroll, .table-wrap, .cast-row, .tabs, .sb-strip, .topbar nav, .news-strip, .grid, .grid-3, .grid-posters {
    max-width: 100% !important;
  }
  .row-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-wrap > table.sched { min-width: 640px !important; }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important; }
  .grid-posters { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .news-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .detail-head { flex-direction: column !important; }
  .detail-cover { width: 100% !important; max-width: 200px !important; min-width: 0 !important; margin: 0 auto !important; }

  .slider, .slides { height: auto !important; min-height: 0 !important; max-width: 100% !important; overflow: hidden !important; }
  .slide { flex-direction: column !important; height: auto !important; }
  .slide.active { height: auto !important; }
  .slide-cover { width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 2 / 3 !important; max-height: 300px !important; overflow: hidden !important; }
  .slide-cover img { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; object-fit: cover !important; }
  .slide-info { padding: 12px 14px !important; height: auto !important; min-height: 0 !important; width: 100% !important; overflow: visible !important; }
  .slide-info p { -webkit-line-clamp: 3 !important; }
  .slide-dots { right: 12px !important; }
}

/* ---------- ≤768px: large phone / small tablet ---------- */
@media screen and (max-width: 768px) {
  .topbar { flex-direction: column !important; padding: 8px 12px !important; gap: 6px !important; }
  .topbar .logo { font-size: 17px !important; }
  .topbar .logo small { display: none !important; }
  .topbar nav {
    overflow-x: auto !important; flex-wrap: nowrap !important; gap: 2px !important;
    width: 100% !important; scrollbar-width: none !important;
    border-top: 1px solid var(--line) !important; margin-top: 4px !important; padding-bottom: 2px !important;
  }
  .topbar nav::-webkit-scrollbar { display: none !important; }
  .topbar nav > a { white-space: nowrap !important; flex-shrink: 0 !important; padding: 8px 10px !important; font-size: 13px !important; }

  .top-search-wrap { width: 100% !important; }
  .top-search-wrap input { width: 100% !important; font-size: 16px !important; min-height: 42px !important; }
  .top-search-wrap:focus-within input { width: 100% !important; }
  .top-search-wrap .ac-list { position: absolute !important; inset-inline: 0 !important; }

  .tabs { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
  .tabs::-webkit-scrollbar { display: none !important; }
  .tabs button { white-space: nowrap !important; flex-shrink: 0 !important; }

  .grid-posters { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
  .ww-filters { flex-direction: column !important; }
  .ww-filters select { width: 100% !important; min-width: 0 !important; }

  .sched th { padding: 8px 10px !important; font-size: 11px !important; }
  .sched td { padding: 10px !important; font-size: 13px !important; }
  .sched-thumb { width: 40px !important; height: 56px !important; }
  .day-chip { font-size: 12px !important; padding: 4px 12px !important; }
  .hm-sched-wrap { min-height: 160px !important; }

  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat-card b { font-size: 18px !important; }
}

/* ---------- ≤640px: phone ---------- */
@media screen and (max-width: 640px) {
  body { font-size: 13.5px !important; }
  main, .shell { padding: 8px 10px 30px !important; }

  .page-title { font-size: 19px !important; }
  .page-sub { font-size: 12px !important; }
  .hero { padding: 20px 16px !important; }
  .hero h1 { font-size: 21px !important; }

  .card { padding: 12px !important; border-radius: 12px !important; }
  .section { margin-top: 18px !important; }
  .footer { padding: 10px !important; font-size: 10.5px !important; }

  .grid, .grid-3 { grid-template-columns: 1fr !important; gap: 10px !important; }
  .grid-posters { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .p-title { font-size: 10.5px !important; }
  .p-sub { font-size: 9.5px !important; }
  .row-scroll .poster-card { width: 128px !important; flex-shrink: 0 !important; }
  .row-head h2 { font-size: 15px !important; }
  .sec-btn { font-size: 11px !important; padding: 5px 10px !important; }

  .news-strip { grid-template-columns: 1fr !important; }
  .news-img { width: 60px !important; height: 60px !important; }
  .news-img.big { width: 84px !important; height: 84px !important; }
  .news-title { font-size: 12.5px !important; }
  .news-emoji, .news-emoji.big { width: 32px !important; height: 32px !important; font-size: 16px !important; }

  .detail-cover { max-width: 170px !important; }
  .rates { flex-wrap: wrap !important; gap: 6px !important; }
  .rate-box { flex: 1 1 30% !important; min-width: 88px !important; padding: 7px 8px !important; }
  .rate-val { font-size: 15px !important; }
  .cast-row { gap: 8px !important; overflow-x: auto !important; }
  .cast-card { width: 68px !important; flex-shrink: 0 !important; }
  .cast-img { width: 60px !important; height: 82px !important; }
  .person-photo { width: 96px !important; height: 134px !important; }

  .comment { flex-direction: column !important; gap: 4px !important; padding: 10px 0 !important; }
  .comment-text { font-size: 13px !important; }
  .chat-box { height: 380px !important; }
  .chat-msg { font-size: 12.5px !important; }
  .chat-input input { font-size: 16px !important; min-height: 42px !important; }

  .post-text { font-size: 13.5px !important; }
  .post-media { max-height: 300px !important; }
  .post-actions button { padding: 6px 10px !important; font-size: 12px !important; }
  .composer textarea { font-size: 16px !important; min-height: 56px !important; }
  .composer-bar { flex-wrap: wrap !important; }

  input, textarea, select { font-size: 16px !important; min-height: 44px !important; }
  .btn { min-height: 40px !important; font-size: 13px !important; }
  .btn.small { min-height: 34px !important; }
  .btn.tiny { min-height: 28px !important; }
  .form { max-width: 100% !important; width: 100% !important; }
  .row { flex-direction: column !important; gap: 0 !important; }

  .profile-head { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .profile-actions { flex-wrap: wrap !important; flex-direction: row !important; justify-content: center !important; }
  .profile-stats { justify-content: center !important; flex-wrap: wrap !important; }

  .dm-bubble { max-width: 92% !important; font-size: 13px !important; }
  .dm-row { padding: 10px !important; }
  .dm-thread .chat-box { height: 48vh !important; }
  .notif-row { font-size: 12.5px !important; padding: 10px !important; }
  .rec-cover { width: 38px !important; height: 54px !important; }

  .modal { max-width: 100% !important; margin: 8px !important; padding: 16px !important; max-height: 92vh !important; }
  .login-req-box { max-width: 100% !important; margin: 12px !important; padding: 22px 16px !important; }
  .login-req-btns { flex-direction: column !important; }
  .login-req-btn { width: 100% !important; min-width: 0 !important; }

  .item-cover { width: 52px !important; height: 74px !important; }
  .item-emoji { width: 48px !important; height: 48px !important; font-size: 24px !important; }
  .detail-emoji { width: 64px !important; height: 64px !important; font-size: 30px !important; }
  .sb-card { padding: 10px !important; }
  .sb-card h4 { font-size: 12.5px !important; }
  .sb-ring { width: 44px !important; height: 44px !important; }
  .sb-story small { max-width: 52px !important; }
  #lang-btn { font-size: 10px !important; padding: 4px 8px !important; }
  .pager .btn { font-size: 12px !important; padding: 6px 12px !important; }
  .pcomment { font-size: 12px !important; }
  .post-ref { font-size: 11px !important; }
}

/* ---------- ≤480px: small phones ---------- */
@media screen and (max-width: 480px) {
  .topbar nav > a { padding: 7px 8px !important; font-size: 12.5px !important; }
  .rate-box { flex: 1 1 44% !important; }
  .grid-posters { gap: 6px !important; }
  .sched th { padding: 6px !important; font-size: 10px !important; white-space: nowrap !important; }
  .sched td { padding: 8px 6px !important; font-size: 12px !important; }
  .sched-thumb { width: 34px !important; height: 48px !important; }
  .day-chip { font-size: 10.5px !important; padding: 3px 8px !important; }
  .hm-sched-wrap { min-height: 140px !important; }
  .slide-cover { max-height: 260px !important; }
}

/* ---------- touch devices: bigger tap targets ---------- */
@media (pointer: coarse) {
  .vote button { padding: 7px 14px !important; min-height: 36px !important; }
  .tabs button { min-height: 38px !important; }
  .chip { font-size: 11px !important; padding: 3px 10px !important; }
  .ac-item { padding: 12px 14px !important; }
  .sb-story { min-width: 56px !important; }
  .post-actions button { min-height: 34px !important; }
}