/* =========================================================
   Student Gallery - popup.css (Popup width = image width, viewport-capped)
   ========================================================= */

:root{
  --sg-gap: 16px;

  /* سقف‌های ارتفاع ظرف تصویر بر پایه viewport */
  --sg-media-max-mobile: 58svh;
  --sg-media-max-tablet: 64svh;
  --sg-media-max-desktop: 72svh;

  /* پالت روشن هماهنگ با کارت‌ها */
  --sg-bg: #ffffff;
  --sg-fg: #111827;
  --sg-border: #e5e7eb;
  --sg-border-2: #d1d5db;
  --sg-chip-bg: #f3f4f6;
  --sg-chip-fg: #374151;
  --sg-shadow: 0 6px 16px rgba(17,24,39,.08);
}

/* بک‌دراپ */
#popup-root{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  z-index: 9999;
}
#popup-root.active{
  display: grid;
  place-items: center;
  min-height: 100svh;
  overscroll-behavior: contain;
  padding:
    max(var(--sg-gap), env(safe-area-inset-top))
    max(var(--sg-gap), env(safe-area-inset-right))
    max(var(--sg-gap), env(safe-area-inset-bottom))
    max(var(--sg-gap), env(safe-area-inset-left));
}
@supports not (place-items: center){
  #popup-root.active{ display:flex; align-items:center; justify-content:center; }
}

/* جعبه پاپ‌آپ – عرض توسط JS ست می‌شود، اما سقف را CSS نگه می‌دارد */
.popup-content{
  position: relative;
  background: var(--sg-bg);
  color: var(--sg-fg);
  box-sizing: border-box;

  /* سقف ایمن: حتی اگر JS ست کند، بیشتر از این نمی‌شود */
  max-inline-size: min(900px, calc(100svw - 2 * var(--sg-gap)));
  inline-size: 100%;
  margin-inline: auto;
  border: 1px solid var(--sg-border);
  border-radius: 12px;
  box-shadow: var(--sg-shadow);
  overflow: visible;
}

/* دکمه بستن */
.popup-close{
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 20px;
  cursor: pointer;
  transition: color .2s ease;
}
.popup-close:hover{ color:#111827; }

/* تیتر و بدنه */
.popup-header{ font-weight:700; margin:14px 16px 8px; color:var(--sg-fg); }
.popup-body{ font-size:.95rem; line-height:1.6; padding:0 16px 16px; color:var(--sg-fg); }

/* ظرف تصویر: بدون نسبت اجباری؛ تصویر خودش اندازه را تعیین می‌کند */
.popup-body .media{
  width: 100%;
  border-radius: 8px;
  background: #f9fafb;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sg-border);
  /* سقف ارتفاع */
  max-block-size: var(--sg-media-max-mobile);
}
@media (min-width: 481px){ .popup-body .media{ max-block-size: var(--sg-media-max-tablet); } }
@media (min-width:1024px){ .popup-body .media{ max-block-size: var(--sg-media-max-desktop); } }

/* تصویر: contain برای جلوگیری از برش/کِشیدگی */
.popup-body .media > img{
  max-inline-size: 100%;
  max-block-size: 100%;
  width: auto; height: auto;
  object-fit: contain; object-position: center;
  display: block;
}

/* تگ‌ها (در صورت وجود) */
.popup-body .popup-tags .tags{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;
}
.popup-body .popup-tags .tag{
  display:inline-block;
  background:var(--sg-chip-bg);
  border:1px solid var(--sg-border);
  color:var(--sg-chip-fg);
  font-size:12px; padding:2px 8px; border-radius:999px; white-space:nowrap;
}

/* موبایل: گوشه‌ها نرم بماند، عرض با JS و سقف CSS کنترل می‌شود */
@media (max-width:480px){
  .popup-content{ border-radius: 10px; }
}