/* =========================================================
   projects.css — صفحه‌ی فهرست پروژه‌ها (رویایی رسا)
   بازطراحی اساسی: بدون جستجو، تب دسته‌بندی، اسپاتلایت پروژه ویژه
   و ردیف‌های دسته‌بندی‌شده با کارت‌های عمودی خلاقانه.
   بر پایه‌ی هیرو/فوتر/توکن‌های articles.css
   ========================================================= */
   @import url("articles.css");

   .projects-page{
     --cat-a:#0c8d8d; --cat-b:#e2394a; --cat-c:#7c4dff; --cat-d:#f2994a;
     --cat-e:#0aa06b; --cat-f:#c9902f;
     padding-top:2.6rem !important;
   }
   @media (min-width:900px){ .projects-page{ padding-top:3.2rem !important; } }
   
   /* ---------------------------------------------------------
      ۱) تب‌های دسته‌بندی — بدون تیتل، شناور زیر هیرو
   --------------------------------------------------------- */
   .proj-tabs-section{ margin-bottom: 2.6rem; }
   
   .proj-tabs{
     display:flex; align-items:center; gap:.6rem;
     overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
     padding:.3rem .1rem .6rem;
     direction:rtl;
   }
   .proj-tabs::-webkit-scrollbar{ display:none; }
   
   .proj-tab{
     flex:0 0 auto; display:inline-flex; align-items:center; gap:.5rem;
     padding:.7rem 1.25rem; border-radius:999px; cursor:pointer;
     background:#fff; border:1.5px solid rgba(12,141,141,.16);
     color:var(--c-deep); font-family:inherit; font-size:.86rem; font-weight:700;
     white-space:nowrap; position:relative;
     transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
   }
   .proj-tab:hover{ border-color:var(--cat-color, var(--c-teal)); transform:translateY(-1px); }
   .proj-tab .proj-tab-dot{
     width:8px; height:8px; border-radius:50%; flex-shrink:0;
     background:var(--cat-color, var(--c-teal));
     transition:transform .25s ease;
   }
   .proj-tab.is-active{
     background:var(--cat-color, var(--c-teal)); border-color:transparent; color:#fff;
     box-shadow:0 14px 28px -14px var(--cat-color, var(--c-teal));
   }
   .proj-tab.is-active .proj-tab-dot{ background:#fff; transform:scale(1.2); }
   
   .proj-tab-skel{
     flex:0 0 auto; width:110px; height:42px; border-radius:999px;
     background:linear-gradient(100deg, rgba(12,141,141,.06) 30%, rgba(12,141,141,.13) 50%, rgba(12,141,141,.06) 70%);
     background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite;
   }
   
   /* ---------------------------------------------------------
      ۲) بنتو — گزیده‌ی تصادفی پروژه‌ها (چیدمان نامتقارن)
   --------------------------------------------------------- */
   .proj-bento-section{ margin-bottom:4rem; }

   .proj-bento-grid{
     display:grid; direction:rtl;
     grid-template-columns:repeat(4, 1fr);
     grid-template-rows:180px 180px 150px;
     gap:1rem;
   }
   .bento-a{ grid-column:3 / 5; grid-row:1 / 3; }
   .bento-b{ grid-column:1 / 3; grid-row:1 / 2; }
   .bento-c{ grid-column:1 / 2; grid-row:2 / 3; }
   .bento-d{ grid-column:2 / 3; grid-row:2 / 3; }
   .bento-e{ grid-column:1 / 5; grid-row:3 / 4; }

   .proj-bento-item{
     position:relative; display:block; overflow:hidden;
     border-radius:var(--r-lg); background:#0d1a1a; text-decoration:none;
     box-shadow:0 18px 40px -22px rgba(18,84,84,.3);
     isolation:isolate;
   }
   .proj-bento-media{ position:absolute; inset:0; }
   .proj-bento-media img, .proj-bento-media video{
     position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
     transition:transform .8s var(--ease-signature);
   }
   .proj-bento-item:hover .proj-bento-media img,
   .proj-bento-item:hover .proj-bento-media video{ transform:scale(1.06); }

   .proj-bento-item::before{
     content:""; position:absolute; inset:0; z-index:1;
     background:linear-gradient(0deg, rgba(6,14,14,.9) 0%, rgba(6,14,14,.4) 45%, rgba(6,14,14,.04) 70%);
   }

   .proj-bento-tag{
     position:absolute; z-index:2; top:.9rem; right:.9rem;
     background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26);
     backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
     color:#fff; font-size:.72rem; font-weight:800;
     padding:.35rem .8rem; border-radius:999px;
   }
   .proj-bento-play{
     position:absolute; z-index:2; top:.9rem; left:.9rem;
     width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
     background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; backdrop-filter:blur(6px);
   }
   .proj-bento-play svg{ width:14px; height:14px; }

   .proj-bento-title{
     position:absolute; z-index:2; bottom:0; inset-inline-end:0; inset-inline-start:0;
     margin:0; padding:1.2rem 1.1rem .95rem; text-align:right;
     color:#fff; font-family:var(--font-display); font-weight:850; line-height:1.4;
     font-size:clamp(.95rem, 1.6vw, 1.35rem);
     text-shadow:0 6px 20px rgba(0,0,0,.4);
     display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
   }
   .bento-e .proj-bento-title{ font-size:1.05rem; -webkit-line-clamp:1; }

   .proj-bento-skel{
     border-radius:var(--r-lg);
     background:linear-gradient(100deg, rgba(12,141,141,.06) 30%, rgba(12,141,141,.13) 50%, rgba(12,141,141,.06) 70%);
     background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite;
   }

   @media (max-width:760px){
     .proj-bento-grid{
       grid-template-columns:1fr 1fr; grid-template-rows:200px 130px 130px 130px;
     }
     .bento-a{ grid-column:1 / 3; grid-row:1 / 2; }
     .bento-b{ grid-column:1 / 3; grid-row:2 / 3; }
     .bento-c{ grid-column:1 / 2; grid-row:3 / 4; }
     .bento-d{ grid-column:2 / 3; grid-row:3 / 4; }
     .bento-e{ grid-column:1 / 3; grid-row:4 / 5; }
   }
   
   /* ---------------------------------------------------------
      ۳) ردیف‌های دسته‌بندی
   --------------------------------------------------------- */
   .proj-groups{ display:flex; flex-direction:column; gap:3.4rem; }
   .proj-group{ scroll-margin-top:6.5rem; }
   
   .proj-group-head{
     display:flex; align-items:center; justify-content:flex-start; gap:.8rem;
     margin-bottom:1.5rem; text-align:right;
   }
   .proj-group-head h2{
     font-family:var(--font-display); font-size:1.55rem; font-weight:850; margin:0; color:#000;
     position:relative; padding-inline-end:1rem; order:1;
   }
   .proj-group-head h2::before{
     content:""; position:absolute; inset-inline-end:0; top:.18em; bottom:.18em; width:5px; border-radius:4px;
     background:var(--cat-color, var(--c-teal));
   }
   .proj-group-count{
     font-size:.8rem; color:var(--c-deep); opacity:.55; font-weight:700; order:2;
   }
   
   .proj-scroll-row{
     display:flex; gap:1.1rem; overflow-x:auto; direction:rtl;
     scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
     padding:.2rem .2rem 1rem; scrollbar-width:none; -ms-overflow-style:none;
   }
   .proj-scroll-row::-webkit-scrollbar{ display:none; }
   
   /* ---------------------------------------------------------
      ۴) کارت عمودی پروژه
   --------------------------------------------------------- */
   .proj-card{
     position:relative; display:flex; flex-direction:column; justify-content:flex-end;
     flex:0 0 auto; width:min(46vw, 240px); aspect-ratio:3/4;
     border-radius:var(--r-lg); overflow:hidden; scroll-snap-align:start;
     text-decoration:none; color:inherit; background:#0d1a1a;
     box-shadow:0 18px 40px -22px rgba(18,84,84,.3);
     transition:transform .4s var(--ease-signature), box-shadow .4s ease;
   }
   .proj-card:hover{ transform:translateY(-6px); box-shadow:0 26px 54px -22px rgba(12,141,141,.4); }
   
   .proj-card-media{ position:absolute; inset:0; }
   .proj-card-media img, .proj-card-media video{
     position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
     transition:transform .6s var(--ease-signature);
   }
   .proj-card:hover .proj-card-media img,
   .proj-card:hover .proj-card-media video{ transform:scale(1.08); }
   
   .proj-card::before{
     content:""; position:absolute; inset:0; z-index:1;
     background:linear-gradient(0deg, rgba(6,14,14,.94) 0%, rgba(6,14,14,.55) 38%, rgba(6,14,14,.02) 62%);
   }
   
   .proj-card-video-badge{
     position:absolute; z-index:2; inset-inline-start:.8rem; top:.8rem;
     width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
     background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); color:#fff; backdrop-filter:blur(6px);
   }
   .proj-card-video-badge svg{ width:14px; height:14px; }
   
   .proj-card-team{
     position:absolute; z-index:2; inset-inline-end:.8rem; top:.8rem;
     display:flex; flex-direction:row-reverse;
   }
   .proj-card-team img, .proj-card-team span{
     width:26px; height:26px; border-radius:50%; object-fit:cover;
     border:2px solid rgba(6,14,14,.9); margin-inline-start:-9px;
     display:flex; align-items:center; justify-content:center;
     background:linear-gradient(135deg, var(--c-teal), var(--c-deep));
     color:#fff; font-size:.6rem; font-weight:800; font-family:var(--font-display);
   }
   .proj-card-team img:first-child, .proj-card-team span:first-child{ margin-inline-start:0; }
   
   .proj-card-index{
     position:absolute; z-index:2; inset-inline-start:.9rem; bottom:1rem;
     font-family:var(--font-display); font-weight:900; font-size:1.5rem;
     color:rgba(255,255,255,.16); line-height:1; pointer-events:none;
   }

   .proj-card-body{ position:relative; z-index:2; padding:1.1rem 1.15rem; display:flex; flex-direction:column; gap:.45rem; }
   .proj-card-cat{
     align-self:flex-start; font-size:.7rem; font-weight:800; color:var(--c-ink);
     background:var(--cat-color, var(--c-cyan-2));
     padding:.28rem .8rem .28rem .6rem; position:relative;
     clip-path:polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 60%);
   }
   .proj-card-title{
     margin:0; text-align:right; color:#fff; font-family:var(--font-display); font-weight:800;
     font-size:1.05rem; line-height:1.5;
     display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
   }
   
   .proj-card-skel{
     flex:0 0 auto; width:min(46vw, 240px); aspect-ratio:3/4; border-radius:var(--r-lg);
     background:linear-gradient(100deg, rgba(12,141,141,.06) 30%, rgba(12,141,141,.13) 50%, rgba(12,141,141,.06) 70%);
     background-size:200% 100%; animation:shimmer 1.6s ease-in-out infinite;
   }
   
   /* ---------------------------------------------------------
      ریسپانسیو
   --------------------------------------------------------- */
   @media (max-width:768px){
     .proj-spotlight-info{ padding:1.5rem 1.4rem 1.4rem; }
     .proj-spotlight-title{ font-size:1.3rem; }
     .proj-spotlight-excerpt{ display:none; }
     .proj-spotlight{ width:88vw; }
     .proj-card{ width:min(60vw, 210px); }
     .proj-group-head h2{ font-size:1.25rem; }
   }
   
   @media (max-width:480px){
     .proj-tab{ padding:.6rem 1rem; font-size:.8rem; }
     .proj-spotlight{ width:92vw; height:clamp(240px, 58vw, 380px); border-radius:var(--r-lg); }
     .proj-spotlight-team img, .proj-spotlight-team span{ width:30px; height:30px; }
     .proj-card{ width:min(66vw, 190px); }
     .proj-card-title{ font-size:.92rem; }
   }