/* Variables on wrapper:
   --gap, --radius, --chip, --info-bg, --dot
   --font-head, --font-body, --fs-head, --fs-body
   --h-desktop, --h-tablet, --h-mobile
   --gray:0/1 , --hover-scale:0/1
*/

.fj-wrap{ position:relative; isolation:isolate; }
.fj-wrap *{ box-sizing:border-box; }

/* پایه تایپوگرافی */
.fj-wrap{ font-family: var(--font-body); }
.fj-heading{ font-family: var(--font-head); font-size: var(--fs-head); }
.fj-desc{ font-size: var(--fs-body); }

/* گرید تبلت و بالاتر (دو ستونه) */
.fj-grid{
  display:grid; gap:var(--gap); align-items:start;
  grid-template-columns: 260px minmax(0,1fr);
  grid-template-areas:
    "info info"
    "thumbs detail";
}

/* چیدمان‌های دسکتاپ (>=1200px) */
@media (min-width:1200px){
  .fj-grid{ grid-template-columns: 270px minmax(0,1fr) 420px; }
  .fj-layout-a .fj-grid{ grid-template-areas: "thumbs detail info"; }
  .fj-layout-b .fj-grid{ grid-template-areas: "info detail thumbs"; }
  .fj-layout-c .fj-grid{ grid-template-areas: "thumbs info detail"; }
}

/* نواحی */
.fj-thumbs{ grid-area: thumbs; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.fj-detail{ grid-area: detail; }
.fj-info  { grid-area: info; background:var(--info-bg); border-radius:16px; padding:22px 24px; position:relative; }

/* هدینگ */
.fj-heading{ margin:0 0 14px; font-weight:800; color:#263238; position:relative; text-align:right; }
.fj-heading span{ position:relative; display:inline-block; padding-bottom:10px; }
.fj-heading span:before{ content:""; position:absolute; right:0; left:0; bottom:0; height:2px; background:#e4e4e4; border-radius:2px; }
.fj-heading span:after{ content:""; position:absolute; right:calc(50% - 22px); bottom:-2px; width:33.333%; height:4px; background:#fea000; border-radius:10px; }
.fj-desc p{ margin:0 0 10px; line-height:1.9; color:#2c3e50; text-align:justify; }

/* بندانگشتی‌ها */
.fj-thumb{ display:block; border-radius:10px; overflow:hidden; }
.fj-thumb img{
  width:100%; height:130px; object-fit:cover;
  filter: grayscale(calc(var(--gray)));
  transition: filter .25s linear, transform .25s linear;
  cursor:url('../assets/cursor.svg'), pointer;
}
.fj-thumb img.active{ filter:grayscale(0); }
.fj-thumb:hover img{ transform: scale(calc(1 + .03*var(--hover-scale))); }

/* تصویر بزرگ و بیج بیو */
.fj-detail-figure{ margin:0; background:#DFE7EE; border-radius:10px; overflow:hidden; position:relative; }
.fj-detail-figure img{ display:block; width:100%; height:var(--h-desktop); object-fit:cover; }
.fj-detail-figure img.animate-scale{ transition: transform .4s linear, opacity .4s linear; opacity:.5; }

/* چیپ نام/سمت */
.fj-meta{
  margin-top:12px; background:var(--chip); border-radius:10px; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size: var(--fs-body);
}
.fj-name > span{ position:relative; padding-right:14px; font-weight:700; color:#3A4654; }
.fj-name > span::before{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; background:var(--dot); border-radius:50%;
}
.fj-role > span{ color:#212121; font-weight:500; }

/* دکور بک‌گراند */
.fj-bg{ position:absolute; pointer-events:none; z-index:-1; opacity:.9; }
.fj-bg1{ width:190px; height:190px; right:53px; top:0; background:url('../assets/bg1.svg') no-repeat center/contain; }
.fj-bg2{ width:160px; height:160px; left:45px; bottom:-35px; background:url('../assets/bg2.svg') no-repeat center/contain; }

/* موبایل */
@media (max-width:767px){
  .fj-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:"info info" "thumbs detail";
    gap:16px;
  }
  .fj-thumb img{ height:110px; }
  .fj-detail-figure img{ height:var(--h-tablet); }
  .fj-bg2{ left:5px; bottom:-370px; }
}
@media (max-width:359px){
  .fj-grid{ grid-template-columns:1fr; grid-template-areas:"info" "thumbs" "detail"; }
  .fj-detail-figure img{ height:var(--h-mobile); }
}
@media (min-width:768px) and (max-width:1024px){
  .fj-detail-figure img{ height:var(--h-tablet); }
  .fj-bg2{ left:38px; bottom:-610px; }
}

/* بندانگشتی‌های زیر تصویر بزرگ */
.fj-detail .fj-bottom{ display:flex; flex-wrap:wrap; gap: var(--gap); margin-top: calc(var(--gap) - 6px); }
.fj-detail .fj-bottom .fj-thumb img{
  width: 140px; height: 96px; object-fit: cover; border-radius: 8px;
  filter: grayscale(var(--gray)); transition: .25s ease; cursor: url(../assets/cursor.svg), auto;
}
.fj-detail .fj-bottom .fj-thumb img:hover,
.fj-detail .fj-bottom .fj-thumb img.active{ filter: grayscale(0); transform: scale(calc(1 + .03*var(--hover-scale))); }
@media (max-width: 767px){
  .fj-detail .fj-bottom{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
  .fj-detail .fj-bottom .fj-thumb img{ width: 100%; height: 100px; }
}

/* ---------- برچسب بیوگرافی روی تصویر بزرگ (Glass) ---------- */
.fj-detail-figure{ position: relative; }

/* جایگاه دقیق و جلوگیری از کشیده‌شدن داخل گرید */
.fj-detail-figure .fj-bio-badge{
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;       /* راست در RTL */
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: auto !important; inline-size: auto !important; max-inline-size: max-content;
  padding: .28rem .60rem;
  border-radius: 999px;
  font-family: var(--font-head, Vazirmatn), sans-serif;
  font-weight: 700; font-size: .75rem; line-height: 1;
  white-space: nowrap; cursor: pointer;

  /* fallback (اگر فیلتر شیشه‌ای در مرورگر نبود) */
  background: var(--badge-bg, #F04F86);
  color: var(--badge-fg, #fff);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease;
}

/* حالت شیشه‌ای واقعی وقتی مرورگر پشتیبانی دارد */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .fj-detail-figure .fj-bio-badge{
    background: rgba(255,255,255,.14);
    color: #fff; /* روی زمینه‌ی شیشه‌ای خواناتر است */
    border: 1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter: saturate(1.15) blur(8px);
    backdrop-filter: saturate(1.15) blur(8px);
  }
  .fj-detail-figure .fj-bio-badge:hover{
    background: rgba(255,255,255,.22);
  }
}

/* هاور عمومی + فوکوس کیبورد */
.fj-detail-figure .fj-bio-badge:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
.fj-detail-figure .fj-bio-badge:focus-visible{
  outline: 2px solid var(--dot, #fea000);
  outline-offset: 2px;
}

/* کوچک‌تر در تبلت و موبایل */
@media (max-width: 1024px){
  .fj-detail-figure .fj-bio-badge{ padding: .24rem .52rem; font-size: .72rem; top: 9px; inset-inline-end: 9px; }
}
@media (max-width: 767px){
  .fj-detail-figure .fj-bio-badge{ padding: .18rem .44rem; font-size: .66rem; top: 8px; inset-inline-end: 8px; }
}

/* اگر نباید دیده شود */
.fj-bio-badge.is-hidden,
.fj-bio-badge[hidden]{ display:none !important; }

/* ---------- MODAL ---------- */
.fj-modal[hidden]{ display:none !important; }
.fj-modal{
  position:fixed; inset:0;
  display:flex; justify-content:center; align-items:center; /* وسط صفحه روی همه دستگاه‌ها */
  padding: max(12px, env(safe-area-inset-top)) 12px 12px;   /* آفست امن در موبایل‌ها + ناچ */
  /* استفاده از dvh برای ثبات در مرورگر موبایل */

  background:rgba(16,24,40,.35);
  z-index:2147483647; /* روی همه چیز */
}

/* کارت مودال: کوچکتر */
.fj-modal-card{
  width:min(620px, 94vw);
  max-height:calc(100dvh - 2*max(12px, env(safe-area-inset-top)));
  background:var(--modal-bg); color:var(--modal-fg);
  border-radius:16px; border:1px solid var(--modal-accent);
  box-shadow:0 24px 64px rgba(0,0,0,.30);
  overflow:hidden; display:flex; flex-direction:column;
  animation: fj-pop .18s ease-out;
}
@keyframes fj-pop{ from{ transform:scale(.96); opacity:.75; } to{ transform:scale(1); opacity:1; } }

/* هدر مودال */
.fj-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#fbfcfd; border-bottom:1px solid var(--modal-accent); }
.fj-modal-title{ font:700 15px/1.4 var(--font-head); color:#1f2937; }
.fj-modal-close{ width:32px; height:32px; border-radius:8px; border:0; background:#eef2f6; color:#334155; font-size:22px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s, transform .12s; }
.fj-modal-close:hover{ background:#e3e9f0; transform:translateY(-1px); }

/* محتوای مودال */
.fj-modal-content{
  padding:14px 18px 18px;
  font:400 calc(var(--fs-body) - 1px)/1.9 var(--font-body);
  color:var(--modal-fg);
  overflow:auto;
  max-height:calc((100dvh - 2*max(12px, env(safe-area-inset-top))) - 57px); /* ارتفاع کارت - هدر */
}

/* قفل اسکرول هنگام باز بودن مودال */
html.fj-modal-open, body.fj-modal-open{ overflow:hidden !important; }

/* موبایل */
@media (max-width:767px){
  .fj-modal-card{ width:94vw; border-radius:14px; }
  .fj-modal-head{ padding:10px 14px; }
  .fj-modal-title{ font-size:14px; }
  .fj-modal-close{ width:30px; height:30px; }
}


/* enforce opaque background for modal card */
.fj-modal-card{ background:#fff !important; }
.fj-modal{ min-height:100dvh; }
/* prevent any accidental transform on html/body when open */
html.fj-modal-open, body.fj-modal-open{ transform:none !important; }