/* ==========================================================================
   Noqte Media — بارگذار و نمایشگر بومی تصاویر سایت
   یک ماژول واحد برای بارگذاری روان (skeleton + fade) و نمایشگر تمام‌صفحه.
   ========================================================================== */

/* ── بارگذار پیش‌رونده (progressive loader) ───────────────────────────── */
.nq-frame{position:relative;overflow:hidden;background:#eef1f0;margin:0}
figure.nq-frame{margin:0}
.nq-frame::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#e7ebea 25%,#f3f6f5 50%,#e7ebea 75%);
  background-size:220% 100%;
  animation:nq-shimmer 1.3s ease-in-out infinite;
  opacity:1;transition:opacity .4s ease;
}
.nq-frame.nq-done::before{opacity:0}
@keyframes nq-shimmer{0%{background-position:220% 0}100%{background-position:-120% 0}}

.nq-img{opacity:0;transition:opacity .45s ease;position:relative;z-index:1}
.nq-img.nq-ready{opacity:1}
/* حالت blur-up اختیاری (thumb → full) */
.nq-img.nq-up{filter:blur(10px);transform:scale(1.03)}
.nq-img.nq-up.nq-full{filter:none;transform:none;
  transition:filter .5s ease,transform .5s ease,opacity .45s ease}

/* شکستِ نهاییِ بارگذاری (بعد از اتمامِ تلاش‌های خودکار): آیکنِ لمس‌برای‌تلاشِ‌مجدد
   به‌جای قابِ خالیِ ابدی — کاربر می‌تواند با یک لمس دوباره امتحان کند. */
.nq-frame.nq-err{background:#f4eeee;cursor:pointer}
.nq-frame.nq-err::after{
  content:"\f021";font-family:'FontAwesome',sans-serif;
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:#b23b3b;font-size:20px;opacity:.7;
}
.nq-frame.nq-err .nq-img{display:none}

/* کارت‌های بلاگ: قاب با ارتفاع ثابت، عکس داخلش cover */
.blog-thumb.nq-frame{padding:0}
.nq-thumb-img{width:100%;height:100%;object-fit:cover;display:block}

.article-hero-frame{min-height:200px}

@media (prefers-reduced-motion: reduce){
  .nq-frame::before{animation:none}
  .nq-img{transition:opacity .01s}
}

/* ── نمایشگر تمام‌صفحه (native viewer) ────────────────────────────────── */
.nqv{position:fixed;inset:0;z-index:10000;display:none;
  background:rgba(8,11,16,.96);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  align-items:center;justify-content:center;
  opacity:0;transition:opacity .25s ease;touch-action:none;
  overscroll-behavior:contain;
  --nqv-top:calc(58px + env(safe-area-inset-top,0px));
  --nqv-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
.nqv.nqv-open{display:flex;opacity:1}
.nqv-single{--nqv-bottom:calc(28px + env(safe-area-inset-bottom,0px))}

.nqv-stage{position:relative;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden}

.nqv-img{max-width:calc(100vw - 130px);
  max-height:calc(100vh - var(--nqv-top) - var(--nqv-bottom));
  object-fit:contain;border-radius:8px;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
  opacity:0;transition:opacity .3s ease;
  transform:translate(0px,0px) scale(1);will-change:transform,opacity}
.nqv-img.nqv-shown{opacity:1}
.nqv-img.nqv-grab{cursor:grab}
.nqv-img.nqv-grabbing{cursor:grabbing;transition:opacity .3s ease}

/* ورودِ جهت‌دارِ تصویرِ بعدی/قبلی */
@keyframes nqv-slide-r{from{opacity:.35;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes nqv-slide-l{from{opacity:.35;transform:translateX(26px)}to{opacity:1;transform:none}}
.nqv-stage.nqv-in-r{animation:nqv-slide-r .26s cubic-bezier(.2,.7,.3,1)}
.nqv-stage.nqv-in-l{animation:nqv-slide-l .26s cubic-bezier(.2,.7,.3,1)}

.nqv-spin{position:absolute;width:44px;height:44px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.18);border-top-color:#fff;
  animation:nqv-rot .8s linear infinite;pointer-events:none;
  opacity:0;transition:opacity .2s ease}
.nqv-spin.on{opacity:1}
@keyframes nqv-rot{to{transform:rotate(360deg)}}

/* ── نوار ابزار بالا ── */
.nqv-bar{position:fixed;top:0;left:0;right:0;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 22px;
  background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0));
  transition:opacity .28s ease,transform .28s ease;pointer-events:none}
.nqv-bar>*{pointer-events:auto}
.nqv-tools{display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
  border-radius:14px;padding:4px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nqv-sep{width:1px;height:22px;background:rgba(255,255,255,.16);margin:0 2px}

.nqv-btn{width:38px;height:38px;border-radius:10px;border:none;padding:0;
  cursor:pointer;background:transparent;color:rgba(255,255,255,.88);
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease;
  font-family:inherit;font-size:12px;font-weight:600}
.nqv-btn svg{width:19px;height:19px;display:block}
.nqv-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.nqv-btn:active{background:rgba(255,255,255,.22)}
.nqv-btn:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:-2px}
.nqv-level{width:auto;min-width:52px;padding:0 6px;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.72)}
.nqv-close:hover{background:rgba(220,60,60,.55);color:#fff}

.nqv-count{color:rgba(255,255,255,.86);font-size:13px;font-weight:600;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:8px 14px;letter-spacing:.4px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ── دکمه‌های جابه‌جایی کناری ── */
.nqv-nav{position:fixed;top:50%;transform:translateY(-50%);z-index:3;
  width:50px;height:50px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
  color:#fff;display:flex;align-items:center;justify-content:center;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .18s ease,transform .18s ease,opacity .28s ease}
.nqv-nav svg{width:24px;height:24px;display:block}
.nqv-nav:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.06)}
.nqv-nav:active{transform:translateY(-50%) scale(.96)}
.nqv-nav:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.nqv-prev{right:18px}
.nqv-next{left:18px}

/* ── نوار بندانگشتی پایین ── */
.nqv-film{position:fixed;left:0;right:0;z-index:3;
  bottom:env(safe-area-inset-bottom,0px);
  padding:14px 12px 16px;
  background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));
  transition:opacity .28s ease,transform .28s ease}
.nqv-film-track{display:flex;gap:8px;justify-content:flex-start;
  overflow-x:auto;scroll-behavior:smooth;padding:2px 4px;
  scrollbar-width:none;-ms-overflow-style:none}
.nqv-film-track::-webkit-scrollbar{display:none}
.nqv-thumb{flex:0 0 auto;width:58px;height:58px;padding:0;cursor:pointer;
  border-radius:9px;overflow:hidden;background:rgba(255,255,255,.06);
  border:2px solid transparent;opacity:.5;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease}
.nqv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nqv-thumb:hover{opacity:.85}
.nqv-thumb.on{opacity:1;border-color:#fff;transform:translateY(-3px)}
.nqv-thumb:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:1px}

/* تک‌تصویر: جابه‌جایی، شمارنده و نوار بندانگشتی معنایی ندارد */
.nqv-single .nqv-prev,.nqv-single .nqv-next,
.nqv-single .nqv-count,.nqv-single .nqv-film{display:none}

/* بی‌کاری: نوارها محو می‌شوند تا تصویر تنها بماند */
.nqv-idle .nqv-bar{opacity:0;transform:translateY(-8px);pointer-events:none}
.nqv-idle .nqv-film{opacity:0;transform:translateY(10px);pointer-events:none}
.nqv-idle .nqv-nav{opacity:0;pointer-events:none}
/* هنگام زوم، تمام عرضِ صفحه در اختیارِ تصویر */
.nqv-zoomed .nqv-img{max-width:calc(100vw - 20px)}

/* اشاره‌گر قابل‌کلیک برای عکس‌های داخل متن */
.article-content img{cursor:zoom-in}

@media(max-width:860px){
  .nqv-img{max-width:calc(100vw - 40px)}
  .nqv-prev{right:10px}.nqv-next{left:10px}
}
@media(max-width:640px){
  .nqv{--nqv-top:calc(54px + env(safe-area-inset-top,0px));
       --nqv-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .nqv-img{max-width:calc(100vw - 16px)}
  .nqv-bar{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 20px}
  .nqv-btn{width:36px;height:36px;border-radius:9px}
  .nqv-btn svg{width:18px;height:18px}
  .nqv-level{min-width:46px;font-size:11px}
  .nqv-count{font-size:12px;padding:7px 11px}
  .nqv-nav{width:42px;height:42px}
  .nqv-nav svg{width:21px;height:21px}
  .nqv-thumb{width:48px;height:48px}
  .nqv-film{padding:10px 8px 12px}
}
@media(max-width:380px){
  /* روی صفحه‌های خیلی باریک، سوایپ جای دکمه‌های کناری را می‌گیرد */
  .nqv-nav{display:none}
}
@media (prefers-reduced-motion: reduce){
  .nqv-stage.nqv-in-r,.nqv-stage.nqv-in-l{animation:none}
  .nqv-thumb.on{transform:none}
}