/* ==========================================================
   assets/css/responsive-mobile.css
   استایل‌های اختصاصیِ ریسپانسیو موبایل (max-width) — استخراج‌شده از nq-theme.css
   این فایل فقط وقتی لود می‌شه که عرض صفحه <= 759px باشه (media روی <link>)
   ========================================================== */

@media (max-width:760px){
  .artist-details,.movie-details{grid-template-columns:1fr;gap:22px}
  .artist-image,.movie-image,.cinema-hero-poster{max-width:210px;margin:0 auto}
}

/* ==========================================================
   هیروی پروفایل هنرمند/فیلم/سریال روی موبایل — دقیقاً مثل چیدمان
   قدیمی (عکس بالا، متن پایین، بدون باکس کارتی، راست‌چین مثل بقیه‌ی
   سایت). دسکتاپ دست‌نخورده می‌مونه چون profile-hero-card و بقیه‌ی
   کلاس‌های زیر فقط اینجا (زیر ۷۶۰px) بازنویسی می‌شن، نه توی nq-theme.css.
   ========================================================== */
@media (max-width:760px){
  .profile-hero-card{background:none;border:none;box-shadow:none;padding:0;border-radius:0}
  .profile-hero-inner{gap:22px}
  .profile-poster-col{max-width:210px}
  .profile-body-col{text-align:right}
  .profile-body-col .artist-jobs,.profile-body-col .social-links-row{justify-content:flex-start}
}

@media (max-width:600px){
  .filmography-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
  .movie-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
}

/* کاروسل افقی موبایل (فیلموگرافی هنرمند/آثار مرتبط فیلم و سریال).
   اسکرول فقط داخل خودِ این باکسه، body/صفحه اصلاً تحت تأثیر قرار نمی‌گیره. */
@media (max-width:760px){
  .mobile-carousel{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    flex-wrap:nowrap;
    gap:12px;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:100%;
  }
  .mobile-carousel::-webkit-scrollbar{display:none}
  .mobile-carousel .film-card{flex:0 0 130px;scroll-snap-align:start;min-width:0}
}

@media (max-width:600px){
  .nq-article{padding-top:calc(var(--nq-header-h) + 14px)}
  .nq-article__lead{font-size:var(--nq-fs-md)}
}

/* ==========================================================
   پارتی فیلدهای جدید (migration-v22-profile-parity)
   هنرمند: agency, highlight, telegram, twitter, youtube, tiktok
   فیلم: movie_views badge روی movie-meta-row
   سریال: budget, box_office, filming_locations, music_by, cinematography
   این فیلدها همه از همون کلاس‌های مشترک استفاده می‌کنن
   (.info-grid/.info-item، .social-links-row/.social-link-pill،
   .artist-jobs/.movie-meta-row) که صفحه‌ی هنرمند/فیلم/سریال
   بینشون مشترکه، پس اینجا فقط تنظیم‌دقیق موبایلشون انجام می‌شه
   تا هرچی فیلد جدید اضافه بشه هرسه صفحه یکسان و هماهنگ بمونن.
   ========================================================== */
@media (max-width:760px){
  .artist-highlight{text-align:right;line-height:1.6}
  .info-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
  .social-links-row,.artist-jobs,.movie-meta-row{justify-content:flex-start;gap:8px}
}

@media (max-width:420px){
  .info-grid{grid-template-columns:1fr 1fr;gap:8px}
  .info-item{padding:8px 10px}
  .info-item__label{font-size:11px}
  .info-item__value{font-size:12.5px}
  .social-link-pill{padding:7px 12px;font-size:12.5px}
}

@media (max-width:340px){
  .info-grid{grid-template-columns:1fr}
}

/* ==========================================================
   انتقال مستقیم از nq-theme.css نسخه‌ی «فیکس‌شده» (merged-fixed)
   فقط روی حالت موبایل. دسکتاپ دست‌نخورده می‌مونه چون این فایل فقط
   زیر ۷۶۰px لود می‌شه. مقادیر همون مقادیر اصلی نسخه‌ی فیکس‌شده‌ست،
   نه نسخه‌ی سبک‌شده‌ی فعلی — طبق درخواست، عیناً منتقل شد.
   ========================================================== */
@media (max-width:760px){
  .nq-header{
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
  }
  .nq-tabbar{
    background:rgba(19,17,23,.92);
    backdrop-filter:blur(22px) saturate(150%);
    -webkit-backdrop-filter:blur(22px) saturate(150%);
  }
  .nq-backdrop{
    background-position:center 20%;
    background-repeat:repeat;
    filter:blur(60px) brightness(.25) saturate(1.4);
    transform:scale(1.15);
  }
  .cinema-hero-backdrop{
    background-position:center top;
    background-repeat:repeat;
    filter:blur(52px) saturate(1.5) brightness(.22);
    transform:scale(1.12);
  }
  body.is-light .cinema-hero-backdrop{
    filter:blur(52px) saturate(1.3) brightness(.55);
  }
  .nq-promo__glow{filter:blur(120px)}
  .nq-cta__glow{filter:blur(140px)}
  .nq-article__cover{
    background:none;
    display:block;
  }
  .nq-article__cover img{
    max-height:340px;
    height:auto;
    object-fit:cover;
  }
}