/* Project cards, archive, single project. */
.proj-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,2.5vw,2.2rem)}
.proj-card{grid-column:span 4;min-inline-size:0}
.proj-grid>.proj-card:nth-child(6n+1){grid-column:span 7}
.proj-grid>.proj-card:nth-child(6n+2){grid-column:span 5}
.proj-grid--related>.proj-card,.proj-grid--related>.proj-card:nth-child(n){grid-column:span 4}
.proj-card__link{display:flex;flex-direction:column;gap:1rem;text-decoration:none;block-size:100%}
.proj-card__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--ts-mist);border-radius:var(--shape-a);transition:border-radius .8s var(--ease),transform .5s var(--ease)}
.proj-card.shape-2 .proj-card__media{border-radius:var(--shape-b)}
.proj-card.shape-3 .proj-card__media{border-radius:var(--shape-c)}
.proj-grid>.proj-card:nth-child(6n+1) .proj-card__media{aspect-ratio:16/10}
.proj-card__media img,.proj-card__media svg{inline-size:100%;block-size:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.proj-card__link:hover .proj-card__media{border-radius:var(--shape-c);transform:translateY(-4px)}
.proj-card.shape-3 .proj-card__link:hover .proj-card__media{border-radius:var(--shape-a)}
.proj-card__link:hover .proj-card__media img,.proj-card__link:hover .proj-card__media svg{transform:scale(1.06)}
.proj-card__meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.88rem;margin-block-end:.4rem}
.proj-card__cat{color:#4a5f50}
.proj-card__title{font-size:clamp(1.25rem,1.1rem + .6vw,1.65rem);margin-block-end:.3em;background:linear-gradient(var(--ts-accent),var(--ts-accent)) no-repeat 100% 100%/0 .18em;transition:background-size .45s var(--ease);display:inline}
.proj-card__link:hover .proj-card__title{background-size:100% .18em}
.proj-card__text{color:#35493c;margin-block:.6rem .8rem}
.proj-card__more{display:inline-flex;gap:.4rem;align-items:center;font-weight:700;color:var(--ts-primary);margin-block-start:auto}
.proj-card__more .arrow{transition:transform .3s var(--ease)}
.proj-card__link:hover .proj-card__more .arrow{transform:translateX(-5px)}
.proj-card__body{display:flex;flex-direction:column;flex:1}

.chip{display:inline-block;padding:.05rem .75rem;border-radius:2rem;font-size:.82rem;font-weight:700;background:var(--ts-mist);color:var(--ts-ink)}
.chip--active{background:#d6ecd9;color:#1d5a2d}
.chip--completed{background:#d4e6ef;color:#17506a}
.chip--planned{background:#f6e8bd;color:#6d5004}
.chip--paused{background:#eadfd6;color:#6a4a31}
.chip--archived{background:#e3e3e0;color:#55554f}
.chip--light{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{font-size:.82rem;padding:.05rem .65rem;border:1px solid var(--ts-line);border-radius:2rem;background:rgba(255,255,255,.5)}
.tags--big li{font-size:.92rem;padding:.2rem .85rem}

/* Archive filters */
.filters{margin-block-start:1.8rem;display:grid;gap:.8rem}
.filters__row{display:flex;flex-wrap:wrap;gap:.4rem}
.filters__row a{display:block;padding:.25rem 1rem;border:1.5px solid var(--ts-line);border-radius:2rem;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .2s,border-color .2s,color .2s}
.filters__row a:hover{border-color:var(--ts-primary)}
.filters__row a[aria-current]{background:var(--ts-forest);border-color:var(--ts-forest);color:#fff}
.filters__row--status a{font-size:.85rem;font-weight:500}
.pagination{margin-block-start:3rem}
.pagination ul{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap}
.pagination a,.pagination span{display:block;min-inline-size:2.6rem;padding:.35rem .9rem;text-align:center;border-radius:2rem;border:1.5px solid var(--ts-line);text-decoration:none;font-weight:600}
.pagination .current{background:var(--ts-forest);border-color:var(--ts-forest);color:#fff}
.pagination a:hover{border-color:var(--ts-primary)}
.empty{padding:2.5rem;border:2px dashed var(--ts-line);border-radius:var(--radius);text-align:center;color:#4a5f50}

/* Single project */
.proj-hero{background:var(--ts-forest);color:#fff;padding-block:clamp(2.5rem,5vw,4.5rem);border-radius:0 0 clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem);overflow:hidden}
.proj-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.proj-hero h1{color:#fff;font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem)}
.proj-hero__crumb{font-size:.92rem;opacity:.8}
.proj-hero__crumb a{text-decoration:none;border-block-end:1px solid rgba(255,255,255,.3)}
.proj-hero__lead{font-size:1.15rem;color:#d3e0cc;max-inline-size:46ch}
.proj-hero__links{display:flex;gap:.6rem;flex-wrap:wrap;margin-block-start:1.2rem}
.proj-hero__media{aspect-ratio:4/3;overflow:hidden;border-radius:var(--shape-a);background:var(--ts-primary);animation:media-morph 12s ease-in-out infinite alternate}
.proj-hero__media img,.proj-hero__media svg{inline-size:100%;block-size:100%;object-fit:cover;display:block}
@keyframes media-morph{to{border-radius:var(--shape-b)}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin-block:2.2rem}
.stat{padding:1rem 1.2rem;border-inline-start:3px solid var(--ts-accent)}
.stat strong{display:block;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.5rem);line-height:1.2;color:var(--ts-primary)}
.stat span{color:#4a5f50;font-size:.95rem}
.proj-body{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-block-end:2rem}
.proj-aside{display:grid;gap:1rem;position:sticky;inset-block-start:5.5rem}
.aside-card{background:rgba(255,255,255,.65);border:1px solid var(--ts-line);border-radius:var(--radius);padding:1.1rem 1.25rem}
.aside-card h2{font-size:.95rem;font-weight:700;color:#4a5f50;margin-block-end:.7rem}
.mini-person{display:flex;gap:.8rem;align-items:center;text-decoration:none}
.mini-person__img{inline-size:3rem;block-size:3rem;border-radius:var(--shape-a);object-fit:cover;flex:none}
.mini-list{display:grid;gap:.6rem}
.mini-list a{text-decoration:none}
.timeline{position:relative;display:grid;gap:.9rem;padding-inline-start:1.4rem}
.timeline::before{content:"";position:absolute;inset-inline-start:.38rem;inset-block:.4rem;inline-size:2px;background:var(--ts-line)}
.timeline li{position:relative;display:flex;justify-content:space-between;gap:.6rem}
.timeline li::before{content:"";position:absolute;inset-inline-start:-1.4rem;inset-block-start:.6rem;inline-size:.8rem;block-size:.8rem;border-radius:50%;background:var(--ts-paper);border:2px solid var(--ts-primary)}
.timeline__now::before{background:var(--ts-accent)!important;border-color:var(--ts-accent)!important}
.timeline span{color:#4a5f50}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.8rem;margin-block:1rem}
.gallery a{display:block;overflow:hidden;border-radius:var(--shape-a);aspect-ratio:1}
.gallery li:nth-child(2n) a{border-radius:var(--shape-b)}
.gallery img{inline-size:100%;block-size:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery a:hover img{transform:scale(1.08)}
.section-title{margin-block-end:1.6rem}

.lightbox{border:0;padding:0;background:transparent;max-inline-size:min(96vw,70rem);max-block-size:92vh;overflow:visible}
.lightbox::backdrop{background:rgba(10,20,14,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox img{display:block;max-inline-size:100%;max-block-size:88vh;margin-inline:auto;border-radius:1rem}
.lightbox__close{position:absolute;inset-block-start:-2.6rem;inset-inline-end:0;background:#fff;border:0;border-radius:2rem;padding:.3rem 1rem;font:inherit;font-weight:700;cursor:pointer}

@media (max-width:64em){
	.proj-card,.proj-grid>.proj-card:nth-child(n),.proj-grid--related>.proj-card:nth-child(n){grid-column:span 6}
	.proj-grid>.proj-card:nth-child(6n+1){grid-column:1/-1}
	.proj-body{grid-template-columns:1fr}
	.proj-aside{position:static;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
}
@media (max-width:40em){
	.proj-card,.proj-grid>.proj-card:nth-child(n),.proj-grid--related>.proj-card:nth-child(n){grid-column:1/-1}
	.proj-hero__grid{grid-template-columns:1fr}
	.proj-hero__media{order:-1;max-block-size:15rem}
}
@media (prefers-reduced-motion:reduce){
	.proj-hero__media{animation:none}
	.proj-card__link:hover .proj-card__media,.proj-card__link:hover img,.proj-card__link:hover svg{transform:none}
}

/* ===== v2: تصویر و لوگوی پروژه (قاب تمیز، بدون لبهٔ کج و موج) ===== */
.proj-card__top{position:relative}
.proj-card__media,.proj-card.shape-2 .proj-card__media,.proj-card.shape-3 .proj-card__media{border-radius:1.5rem;box-shadow:0 1px 2px rgba(18,36,27,.06),0 16px 32px -20px rgba(18,36,27,.4)}
.proj-card__link:hover .proj-card__media,.proj-card.shape-3 .proj-card__link:hover .proj-card__media{border-radius:1.5rem}
.proj-card__top+.proj-card__body{padding-block-start:.7rem}
.proj-hero__media{border-radius:1.75rem;animation:none;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.gallery a,.gallery li:nth-child(2n) a{border-radius:1.1rem}
.media__logo{display:grid;place-items:center;inline-size:100%;block-size:100%;background:radial-gradient(circle at 30% 20%,#fff,var(--ts-mist) 75%)}
.proj-hero__media .media__logo{background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.95),#cfe0c8 80%)}
.mini-logo{inline-size:2.6rem;block-size:2.6rem;border-radius:50%;background:#fff;border:1px solid var(--ts-line);padding:.3rem;object-fit:contain;flex:none}

/* ===== v3: قاب خودکار لوگو، چیدمان صفحهٔ کم‌محتوا، ویدیوی گالری ===== */
/* قاب لوگو بر اساس شکل لوگو (round | square | wide) انتخاب می‌شود؛ تصویر همیشه contain است (هرگز بریده نمی‌شود). */
.lbadge{--lh:4rem;box-sizing:border-box;display:inline-grid;place-items:center;flex:none;background:#fff;border:1px solid var(--ts-line);
	box-shadow:0 8px 20px -10px rgba(18,36,27,.45);overflow:hidden;block-size:var(--lh);max-inline-size:100%}
.lbadge img{display:block;object-fit:contain;max-inline-size:100%}
/* اندازهٔ تصویر صریح است (نه درصدی) تا هرگز از قاب بیرون نزند یا از پایین بریده نشود */
.lbadge--round{inline-size:var(--lh);border-radius:50%;padding:calc(var(--lh) * .15)}
.lbadge--round img{inline-size:calc(var(--lh) * .7 - 2px);block-size:calc(var(--lh) * .7 - 2px);border-radius:50%}
.lbadge--square{inline-size:var(--lh);border-radius:calc(var(--lh) * .26);padding:calc(var(--lh) * .13)}
.lbadge--square img{inline-size:calc(var(--lh) * .74 - 2px);block-size:calc(var(--lh) * .74 - 2px)}
.lbadge--wide{inline-size:auto;border-radius:calc(var(--lh) * .26);padding:calc(var(--lh) * .15) calc(var(--lh) * .26)}
.lbadge--wide img{block-size:calc(var(--lh) * .7 - 2px);inline-size:calc((var(--lh) * .7 - 2px) * var(--lr,2.5));max-inline-size:calc(var(--lh) * 2.9)}
/* نشان گوشهٔ کارت پروژه */
.plogo{position:absolute;z-index:2;inset-inline-start:1.1rem;inset-block-end:-1.5rem;transition:transform .5s var(--ease)}
.plogo .lbadge{--lh:3.6rem;max-inline-size:9rem}
.proj-card__link:hover .plogo{transform:translateY(-4px) rotate(-4deg) scale(1.05)}
/* لوگو وقتی پروژه تصویر شاخص ندارد: وسط کادر، بزرگ */
.media__logo .lbadge{--lh:8.5rem;box-shadow:0 14px 28px -14px rgba(18,36,27,.55)}
.proj-hero__media .media__logo .lbadge{--lh:11rem}
.proj-hero__logo{display:block;margin-block-end:1.1rem}
.proj-hero__logo .lbadge{--lh:4.8rem;max-inline-size:14rem;border-color:transparent;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}

/* بدنهٔ صفحهٔ پروژه: اگر متن کم است نوار کناری جای خالی را پر می‌کند و وسط می‌آید */
.proj-body--stack,.proj-body--solo{grid-template-columns:1fr;justify-items:center}
.proj-body--stack .proj-body__main{inline-size:min(100%,46rem)}
.proj-body--stack .proj-aside,.proj-body--solo .proj-aside{position:static;inline-size:100%;max-inline-size:62rem;
	grid-template-columns:repeat(auto-fit,minmax(15rem,20rem));justify-content:center;align-items:start;gap:1.1rem}
.proj-body--solo{margin-block-start:2rem}
.proj-body--stack .proj-aside{margin-block-start:.5rem}
.proj-body--solo .aside-card,.proj-body--stack .aside-card{box-shadow:0 14px 30px -22px rgba(18,36,27,.45)}

/* ویدیوی گالری */
.gallery__video{grid-column:1/-1}
.gallery__video video{display:block;inline-size:100%;max-block-size:34rem;aspect-ratio:16/9;object-fit:contain;background:#0d1a12;border-radius:1.1rem}
@media (prefers-reduced-motion:reduce){.proj-card__link:hover .plogo{transform:none}}
.prose .gallery,.prose .gallery li{list-style:none;padding-inline-start:0;margin:0}
.prose .gallery{margin-block:1rem}


/* ===== v4: تصویر شاخص همیشه کامل و بدون برش ===== */
/* تصویر با contain نمایش داده می‌شود (هیچ‌وقت بریده نمی‌شود) و فضای خالی دور آن با نسخهٔ محوشدهٔ خودِ همان تصویر پر می‌شود؛ پس‌زمینهٔ سبز دیگر دیده نمی‌شود. */
.media__frame{position:relative;isolation:isolate;display:grid;place-items:center;inline-size:100%;block-size:100%;overflow:hidden;background:var(--ts-mist)}
.media__frame::before{content:"";position:absolute;inset:-12%;z-index:-1;background:var(--m) center/cover no-repeat;filter:blur(22px) saturate(1.15);opacity:.9;transform:translateZ(0)}
.media__frame .media__img{display:block;inline-size:100%;block-size:100%;object-fit:contain;object-position:center}
.proj-card__media .media__img,.proj-card__media .media__frame .media__img{object-fit:contain}
.proj-card__link:hover .proj-card__media .media__img{transform:scale(1.03)}

/* صفحهٔ پروژه: قاب با نسبت طبیعی تصویر، بدون ارتفاع ثابت و بدون پس‌زمینهٔ سبز */
.proj-hero__media{aspect-ratio:auto;max-block-size:none;background:transparent;align-self:center;min-inline-size:0}
.proj-hero__media .media__frame{block-size:auto;border-radius:inherit}
.proj-hero__media .media__img{inline-size:100%;block-size:auto;max-block-size:min(34rem,70vh);object-fit:contain}
/* بدون تصویر (لوگو/جایگزین): همان قاب ۴:۳ قبلی */
.proj-hero__media:has(> .media__logo),.proj-hero__media:has(> svg){aspect-ratio:4/3;background:var(--ts-primary)}
@media (max-width:40em){
	.proj-hero__media{max-block-size:none}
	.proj-hero__media .media__img{max-block-size:min(22rem,60vh)}
}

/* ===== v5: رفع سرریز افقی در موبایل (صفحه به یک طرف کشیده می‌شد) ===== */
/* ستون‌های 1fr به‌صورت پیش‌فرض min-content دارند و محتوای بلند (آدرس، برچسب، جدول زمانی) آن‌ها را از عرض صفحه بیرون می‌برد؛ minmax(0,1fr) این را جلوگیری می‌کند. */
.proj-body,.proj-body--stack,.proj-body--solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:64.01em){
	.proj-body:not(.proj-body--stack):not(.proj-body--solo){grid-template-columns:minmax(0,1fr) 20rem}
}
.proj-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width:40em){
	.proj-hero__grid{grid-template-columns:minmax(0,1fr)}
}
.proj-aside{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));min-inline-size:0;max-inline-size:100%}
.proj-body>*,.proj-hero__grid>*,.proj-aside>*,.aside-card{min-inline-size:0;max-inline-size:100%}
.aside-card,.proj-body__main,.proj-hero__text{overflow-wrap:anywhere}
.aside-card a[dir=ltr]{word-break:break-all}
.proj-body__main img,.proj-body__main video,.proj-body__main iframe,.proj-body__main table,.proj-body__main pre{max-inline-size:100%}
.proj-body__main pre,.proj-body__main table{overflow-x:auto;display:block}
/* انیمیشن ورود از چپ/راست در موبایل کارت را بیرون از صفحه می‌برد و عرض صفحه را زیاد می‌کرد؛ در موبایل فقط از پایین بالا می‌آید. */
@media (max-width:64em){
	.js [data-reveal=left],.js [data-reveal=right]{transform:translateY(28px)}
}
article{overflow-x:clip}