/* components/duo.css — قاب تصویر سایت عمومی پلاس.

   نام «duo» از ظاهر دوتون قبلی مانده است: تصویرها خاکستری و ته‌رنگ‌دار بودند
   و فقط با هاور رنگی می‌شدند. تصمیم کارفرما (دور L، ۱۹ مهر ۱۴۰۵): هیچ تصویری
   خاکستری نیست و همه همیشه رنگی‌اند؛ هاور فقط کمی بزرگ‌نمایی می‌کند. تنها
   استثنا کارت دوره‌ی برگزارشده است که بر پایه‌ی وضعیت (نه هاور) خاکستری
   می‌ماند — components/course-card.css، کلاس is-ended.

   رنگ برند (modir/ravan/gold) فقط ته‌رنگ پس‌زمینه‌ی قابی است که هنوز تصویری
   ندارد و نماد جای خالی رویش می‌نشیند. */
.duo{--duo-c:var(--teal-400);position:relative;overflow:hidden;display:block;
  color:color-mix(in oklab,var(--duo-c) 55%,#fff);
  background:radial-gradient(120% 140% at 80% -10%,color-mix(in oklab,var(--duo-c) 34%,var(--navy-900)),var(--navy-950) 75%)}
.duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease-out)}
.duo.modir{--duo-c:var(--brand-modir)}
.duo.ravan{--duo-c:var(--brand-ravan)}
.duo.gold{--duo-c:var(--gold-400)}
:is(a,article,.card):hover .duo img,.duo:hover img{transform:scale(1.04)}
.tcard .duo{inline-size:132px;block-size:132px;border-radius:18px}
.tcard .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
@media (max-width:820px){
.tcard .duo{inline-size:108px;block-size:108px}
}
.inst-photo .duo{display:block;aspect-ratio:4/5;border-radius:26px;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.inst-photo .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.ipick .duo{inline-size:34px;block-size:34px;border-radius:50%;flex:none}
.ipick .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
@media (max-width:1040px){
.inst-photo .duo{aspect-ratio:16/10;max-inline-size:340px}
}
.inst-photo .duo{transition:opacity .34s var(--ease-soft),transform .46s var(--ease-out)}
.inst-photo.swap .duo{opacity:0;transform:scale(.94) translateY(10px)}
.mc-avs .duo{inline-size:38px;block-size:38px;border-radius:50%;flex:none;
  border:2px solid var(--bg-elev);margin-inline-start:-11px}
.mc-avs .duo:first-child{margin-inline-start:0}
.mc-avs .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.fc-top .duo{flex:none;inline-size:76px;block-size:76px;border-radius:20px}
.fc-top .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.prof-photo .duo{display:block;aspect-ratio:4/5;border-radius:26px;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.prof-photo .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
@media (max-width:1040px){
.prof-photo .duo{aspect-ratio:16/10;max-inline-size:330px}
}
.am-au .duo{inline-size:42px;block-size:42px;border-radius:50%;flex:none}
.am-au .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.art-cover .duo{display:block;overflow:hidden;border-radius:var(--card-radius);aspect-ratio:21/9;
  box-shadow:0 50px 90px -56px rgba(11,18,38,.8)}
.art-cover .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.prose figure .duo{display:block;overflow:hidden;border-radius:var(--card-radius);aspect-ratio:16/9}
.aubox .duo{inline-size:96px;block-size:96px;border-radius:22px}
.aubox .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.rlist2 .duo{flex:none;inline-size:66px;block-size:52px;border-radius:12px}
.rlist2 .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
@media (max-width:820px){
.art-cover .duo{aspect-ratio:16/9}
}
.fm-p .duo{inline-size:52px;block-size:52px;border-radius:50%;flex:none;overflow:hidden}
.fm-p .duo img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion: reduce){
.duo img{transition:none}
}
.fac-card .duo{display:block;aspect-ratio:1/1}
.ribbon .track .duo{flex:none;inline-size:clamp(210px,22vw,320px);aspect-ratio:3/2;border-radius:16px}
.life a .duo{position:absolute;inset:0;z-index:-1}
.arc-item .duo{aspect-ratio:3/2;border-radius:18px;border:1px solid rgba(148,178,214,.2);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.arc-item.front .duo{border-color:color-mix(in oklab,var(--accent) 45%,transparent);
  box-shadow:0 40px 100px -36px color-mix(in oklab,var(--accent) 55%,transparent)}