/* ==========================================================================
   pages.css — بخش‌های اختصاصی صفحات
   ========================================================================== */

/* ==========================================================================
   ۱. صفحه اصلی
   --------------------------------------------------------------------------
   بر اساس مراجع پوشه Case Study که کارفرما فرستاده (Snøhetta، AR—CO، KONKRET،
   Mesura، JPW): شروع با یک جمله تایپوگرافیک درشت و تصویر در کنارش، بعد شبکه
   پروژه‌ها با خط «نام · دسته · سال». فضای خالی زیاد و هیچ متنی روی تصویر.
   ========================================================================== */
/* ---- نوار تصویر بزرگ بالای صفحه ----
   صفحه اصلی تیتر ندارد و مستقیم با همین تصویر شروع می‌شود (الگوی سایت مرجع).
   روی گوشی قاب عمودی (۴:۵) تمام پهنای صفحه را می‌گیرد، روی دسکتاپ پهن می‌شود. */
.showcase { padding-block: clamp(1.25rem, 2.5vw, 2.25rem) var(--section); }

.showcase > .wrap { display: grid; gap: var(--gap-sm); }

.showcase__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  overflow: hidden;
}

@media (min-width: 640px) { .showcase__frame { aspect-ratio: 3 / 2; } }
@media (min-width: 1100px) { .showcase__frame { aspect-ratio: 16 / 9; } }

.showcase__slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease-in-out), visibility 0s linear 1s;
}

.showcase__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--ease-in-out), visibility 0s; }
.showcase__slide img { width: 100%; height: 100%; object-fit: cover; }


/* ---- سرصفحه فهرست‌ها (پروژه‌ها، جوایز) ---- */
.index-head--stack { max-width: var(--max-stack); margin-inline: auto; }

.index-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block-end: 1.1rem;
  margin-block-end: var(--gap-lg);
  border-block-end: 1px solid var(--ink);
}

.index-head__title { font-weight: 300; }

/* ---- فهرست کوتاه جوایز در صفحه اصلی ---- */
.home-awards { display: grid; border-block-start: 1px solid var(--line); }

.home-award {
  display: grid;
  gap: 0.25rem;
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 860px) {
  .home-award {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: baseline;
  }
}

.home-award__title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 400; line-height: 1.5; }
.home-award__meta, .home-award__project { font-size: 0.85rem; color: var(--muted); }
.home-award__year { font-size: 0.85rem; color: var(--muted); }

@media (min-width: 860px) { .home-award__year { justify-self: end; } }

/* ---- فراخوان تماس ---- */
.home-cta {
  display: grid;
  justify-items: start;
  gap: var(--gap-sm);
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-block-start: 1px solid var(--ink);
  transition: opacity var(--dur-fast) var(--ease);
}

.home-cta:hover { opacity: 0.6; }
.home-cta__title { max-width: 20ch; font-weight: 300; }
html[lang="fa"] .home-cta__title { max-width: 22ch; }

/* ---- آمار (در صفحه درباره استفاده می‌شود) ---- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--gap-md);
  padding-block-start: var(--gap-md);
  border-block-start: 1px solid var(--line);
}

.stat { display: grid; gap: 0.4rem; align-content: start; }
.stat__figure { display: flex; align-items: baseline; gap: 0.2rem; }
.stat__value { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 200; line-height: 1; }
html[lang="fa"] .stat__value { font-weight: 300; }
.stat__suffix { font-size: 1.1rem; color: var(--muted); }
.stat__label { font-size: 0.86rem; color: var(--muted); }

/* ==========================================================================
   ۸. فهرست پروژه‌ها
   --------------------------------------------------------------------------
   طبق اسکچ کارفرما: تصویر شاخص بزرگ در بالا با فلش چپ/راست، ریل فیلتر
   (نوع / سال / مقیاس / وضعیت) در کنار، و شبکه پروژه‌ها با نام زیر هر تصویر.
   هیچ متنی روی تصویر نمی‌نشیند.
   ========================================================================== */

/* ---- تصویر شاخص بالای صفحه ---- */
.whero { background: var(--bg); }

.whero__stage {
  position: relative;
  height: min(64svh, 40rem);
  min-height: 18rem;
  overflow: hidden;
  background: var(--bg-2);
}

.whero__slides, .whero__slide { position: absolute; inset: 0; }

.whero__slide {
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--ease-in-out), visibility 0s linear 1.1s;
}

.whero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.1s var(--ease-in-out), visibility 0s; z-index: 1; }
.whero__img { width: 100%; height: 100%; object-fit: cover; }

.whero__below {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-sm) var(--gap-lg);
  padding-block: clamp(1.25rem, 2.5vw, 2rem) 0;
}

@media (min-width: 900px) {
  .whero__below { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.whero__captions { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }

.whero__caption {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 0.35rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.whero__caption.is-active { visibility: visible; opacity: 1; }
.whero__caption > * { max-width: 100%; }
.whero__title { font-family: var(--font-display); font-weight: 300; transition: opacity var(--dur-fast) var(--ease); }
.whero__title:hover { opacity: 0.55; }
.whero__meta { color: var(--muted); }

.whero__controls, .showcase__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }

@media (max-width: 899px) {
  .whero__controls, .showcase__controls { flex-wrap: wrap; row-gap: 0.75rem; }
}

/* ---- چیدمان دوستونه: ریل فیلتر + شبکه ---- */
.works-layout { display: grid; gap: var(--gap-lg); }

@media (min-width: 1000px) {
  .works-layout {
    grid-template-columns: minmax(11rem, 0.22fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
  }
}

/* ---- ریل فیلتر ---- */
.filters { display: grid; gap: var(--gap-md); align-content: start; }

@media (min-width: 1000px) {
  .filters { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.filters__form { display: grid; gap: 0; }

.filters__search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.6rem;
  margin-block-end: 0.5rem;
  border-block-end: 1px solid var(--line-2);
  color: var(--muted);
  transition: border-color 0.4s, color 0.4s;
}

.filters__search:focus-within { border-color: var(--ink); color: var(--ink); }
.filters__search input { width: 100%; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-size: 0.92rem; }

.filter-group { border-block-end: 1px solid var(--line); }

.filter-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.95rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.95rem;
  transition: color var(--dur-fast) var(--ease);
}

.filter-group__head::-webkit-details-marker { display: none; }
.filter-group__head:hover { color: var(--accent); }

.filter-group__name { position: relative; padding-inline-start: 1.1rem; }

/* نشانگر باز/بسته شدن: بسته «+»، باز «−» — مستقل از جهت نوشتار */
.filter-group__name::before,
.filter-group__name::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  width: 0.6rem;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.filter-group__name::after { transform: rotate(90deg); }
.filter-group[open] .filter-group__name::after { transform: rotate(0deg); opacity: 0; }

.filter-group__value {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 55%;
}

.filter-group[open] .filter-group__value { opacity: 0; }

.filter-group__list { display: grid; gap: 0.1rem; padding-block: 0 1rem; padding-inline-start: 1.1rem; }
.filter-group__list--cols { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: 0.1rem 0.5rem; }

.filter-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease);
}

.filter-opt:hover { color: var(--ink); }
.filter-opt.is-active { color: var(--ink); }
.filter-opt input { accent-color: var(--ink); width: 0.85rem; height: 0.85rem; flex: none; }
.filter-opt:has(input:checked) { color: var(--ink); }

.filters__clear { margin-block-start: 1rem; justify-self: start; color: var(--muted); }

/* ---- بلوک پورتفولیو ---- */
.portfolio-cta {
  display: grid;
  gap: 0.15rem;
  padding: clamp(1.1rem, 2vw, 1.5rem) 0 clamp(1.1rem, 2vw, 1.5rem);
  border-block-start: 1px solid var(--ink);
  transition: opacity var(--dur-fast) var(--ease);
}

.portfolio-cta:hover { opacity: 0.6; }
.portfolio-cta__label { color: var(--muted); }
.portfolio-cta__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 500; line-height: 1.3; }
.portfolio-cta__arrow { margin-block-start: 0.45rem; color: var(--ink); }
.portfolio-cta:hover .portfolio-cta__arrow svg { transform: translateX(0.25rem); }
.portfolio-cta__arrow svg { transition: transform var(--dur-fast) var(--ease); }

/* ---- شبکه پروژه‌ها ---- */
.works-main { min-width: 0; }

.results-line {
  padding-block: 0 clamp(1.25rem, 2.5vw, 2rem);
  color: var(--muted);
}

/* یک ستون در همه اندازه‌ها — مثل سایت مرجع (campobaeza): عکس تا جای ممکن
   بزرگ، عنوان زیر آن، و فاصله عمودی زیاد بین پروژه‌ها. */
.pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3.25rem, 6.5vw, 7rem);
  max-width: var(--max-stack);
  margin-inline: auto;
}

@media (max-width: 999px) {
  .filters { padding-block-end: var(--gap-md); border-block-end: 1px solid var(--line); }
  .portfolio-cta { max-width: 22rem; }
}

/* ==========================================================================
   ۹. صفحه پروژه
   ========================================================================== */
.phero { padding-block-start: var(--header-h); }

.phero__media {
  height: min(78svh, 52rem);
  min-height: 20rem;
  overflow: hidden;
  background: var(--bg-2);
}

.phero__img { width: 100%; height: 100%; object-fit: cover; }

.phero__content {
  display: grid;
  gap: var(--gap-md);
  padding-block: clamp(2rem, 4vw, 3.5rem) 0;
}

@media (min-width: 1000px) {
  .phero__content { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--gap-lg); align-items: start; }
}

.phero__head { display: grid; gap: 0.9rem; justify-items: start; }
.phero__crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--muted); }
.phero__title { max-width: 18ch; font-weight: 300; }
.phero__sub { max-width: 40ch; }

.phero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 1.25rem clamp(1.25rem, 3vw, 2.5rem);
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
}

.phero__facts div { display: grid; gap: 0.3rem; align-content: start; }
.phero__facts .label { color: var(--muted); }
.phero__facts dd { margin: 0; font-size: 1rem; }


.pbody__grid { display: grid; gap: var(--gap-lg); }

@media (min-width: 1000px) {
  .pbody__grid { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.8fr); gap: clamp(3rem, 8vw, 9rem); align-items: start; }
  .pbody__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.pbody__intro { display: grid; gap: var(--gap-md); }
.pbody__summary { max-width: 30ch; font-weight: 300; }
html[lang="fa"] .pbody__summary { max-width: 34ch; }
.pbody__text { font-size: 1.05rem; }

.pbody__aside { display: grid; gap: var(--gap-md); }

.specs { border-block-start: 1px solid var(--line); }
.specs__row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1rem; padding-block: 0.9rem; border-block-end: 1px solid var(--line); font-size: 0.93rem; }
.specs__row dt { color: var(--muted); }
.specs__row dd { margin: 0; }

.pbody__awards, .pbody__credits { display: grid; gap: 0.75rem; }
.pbody__awards ul { display: grid; gap: 0.55rem; }
.pbody__awards li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.93rem; }
.pbody__awards .icon { color: var(--accent); margin-block-start: 0.2rem; }
.pbody__credits .t-small { color: var(--ink-2); line-height: 1.9; }

.gallery__head { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: 1.25rem; margin-block-end: var(--gap-md); border-block-end: 1px solid var(--line); }

.gallery__grid { display: grid; gap: clamp(0.75rem, 1.5vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: 1 / -1; }
}

.gallery__item { margin: 0; }
.gallery__btn { display: block; width: 100%; aspect-ratio: 4 / 5; cursor: zoom-in; }
.gallery__item--wide .gallery__btn { aspect-ratio: 16 / 8; }
@media (max-width: 759px) { .gallery__btn, .gallery__item--wide .gallery__btn { aspect-ratio: 4 / 3; } }
.gallery__btn img { transition: transform 1.8s var(--ease), opacity 1s; }
.gallery__btn:hover img { transform: scale(1.035); }
.gallery__caption { display: flex; gap: 0.75rem; padding-block-start: 0.75rem; font-size: 0.85rem; color: var(--muted); }
.gallery__caption .num { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink); }

.related__controls { display: flex; gap: 0.5rem; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85vw, 30rem);
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

@media (min-width: 1680px) { .rail { padding-inline: calc((100vw - var(--max)) / 2 + var(--gutter)); } }

.rail::-webkit-scrollbar { display: none; }
.rail__item { scroll-snap-align: start; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging a { pointer-events: none; }

.next-project { margin-block-start: var(--section); }
.next-project__link { display: grid; gap: var(--gap-md); }
.next-project__media { height: clamp(18rem, 48vh, 34rem); overflow: hidden; }
.next-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease), opacity 1s; }
.next-project__link:hover .next-project__media img { transform: scale(1.04); }
.next-project__content { display: grid; gap: 0.75rem; justify-items: start; padding-block-end: clamp(3rem, 6vw, 5rem); }
.next-project__content .label { color: var(--muted); }
.next-project__title { font-weight: 300; }

/* ==========================================================================
   ۱۰. جوایز
   --------------------------------------------------------------------------
   طبق اسکچ کارفرما: سه جایزه مهم بالا، سپس پروژه‌های پرافتخار با فهرست
   جوایزشان (همراه لوگوی مرجع دهنده جایزه) و در پایان بقیه پروژه‌ها.
   ========================================================================== */

/* ---- سه جایزه مهم ---- */
.top-awards {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) { .top-awards { grid-template-columns: repeat(3, 1fr); } }

.top-award { display: grid; gap: var(--gap-sm); align-content: start; }
.top-award__media { aspect-ratio: 4 / 3; }
.top-award__media img { transition: transform 1.6s var(--ease), opacity 1s; }
.top-award:hover .top-award__media img { transform: scale(1.03); }
.top-award__body { display: grid; gap: 0.45rem; justify-items: start; }
.top-award__title { font-weight: 300; }
.top-award__meta { color: var(--muted); }
.top-award__issuer { font-size: 0.9rem; color: var(--ink-2); }
.top-award__project { color: var(--muted); }

/* ---- لوگوی مرجع دهنده جایزه ---- */
.award-logo {
  width: auto;
  max-width: 100%;
  max-height: 2.1rem;
  object-fit: contain;
  object-position: center;
}

.award-logo--lg { max-height: 3.4rem; margin-block-end: 0.35rem; }

/* در تم تاریک، لوگوهای مشکی روی پس‌زمینه تیره دیده نمی‌شوند */
:root[data-theme="dark"] .award-logo { filter: invert(1) grayscale(1) brightness(1.6); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .award-logo { filter: invert(1) grayscale(1) brightness(1.6); }
}

/* ---- پروژه‌های پرافتخار ---- */
.awarded-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 2rem);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) { .awarded-grid { grid-template-columns: repeat(3, 1fr); align-items: start; } }

.awarded { display: grid; gap: var(--gap-sm); align-content: start; }
.awarded__media { display: block; aspect-ratio: 4 / 3; }
.awarded__media img { transition: transform 1.6s var(--ease), opacity 1s; }
.awarded__media:hover img { transform: scale(1.03); }
.awarded__body { display: grid; gap: 0.4rem; }
.awarded__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 400; line-height: 1.4; }
.awarded__title a { transition: opacity var(--dur-fast) var(--ease); }
.awarded__title a:hover { opacity: 0.55; }
.awarded__count { font-size: 0.6em; color: var(--muted); margin-inline-start: 0.25em; }
.awarded__meta { color: var(--muted); }

/* ---- فهرست جوایز ---- */
.award-list { display: grid; gap: 0; margin-block-start: 0.6rem; }

.award-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-block-start: 1px solid var(--line);
}

.award-row__logo {
  display: grid;
  place-items: center;
  width: 2.6rem;
  min-height: 1.6rem;
  flex: none;
  color: var(--accent);
}

.award-row__text { display: grid; gap: 0.15rem; min-width: 0; }
.award-row__title { font-size: 0.93rem; line-height: 1.5; }
.award-row__meta { font-size: 0.78rem; color: var(--muted); line-height: 1.6; }

.award-list--wide .award-row { padding-block: 1.1rem; }
.award-list--wide .award-row:last-child { border-block-end: 1px solid var(--line); }

@media (min-width: 760px) {
  .award-list--wide .award-row__text { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.75rem 2rem; align-items: baseline; }
  .award-list--wide .award-row__title { font-size: 1rem; }
}

/* ---- بقیه پروژه‌های جایزه‌برده ---- */
.awarded-rows { display: grid; border-block-start: 1px solid var(--line); }

.awarded-row {
  display: grid;
  gap: var(--gap-sm);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block-end: 1px solid var(--line);
}

@media (min-width: 900px) {
  .awarded-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
}

.awarded-row__head { display: flex; align-items: center; gap: 1rem; }
.awarded-row__thumb { width: 5.5rem; aspect-ratio: 4 / 3; flex: none; }
.awarded-row__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.4; }
.awarded-row__meta { color: var(--muted); margin-block-start: 0.2rem; }

.award-list--inline { margin-block-start: 0; }
.award-list--inline .award-row:first-child { border-block-start: 0; }

@media (max-width: 899px) {
  .award-list--inline .award-row:first-child { border-block-start: 1px solid var(--line); }
}

/* ==========================================================================
   ۱۰-ب. پورتفولیو
   --------------------------------------------------------------------------
   حال‌وهوای پورتفولیوی چاپی دفتر: اسپردهای بزرگ، فضای خالی زیاد و هیچ متنی
   روی تصویر.
   ========================================================================== */
.pf-cover { padding-block-end: var(--gap-lg); }
.pf-cover__media { aspect-ratio: 16 / 9; }

@media (max-width: 720px) { .pf-cover__media { aspect-ratio: 4 / 3; } }

.pf-get {
  display: grid;
  gap: var(--gap-md);
  align-items: end;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-block: 1px solid var(--line);
}

@media (min-width: 760px) { .pf-get { grid-template-columns: minmax(0, 1fr) auto; } }

.pf-get__text { display: grid; gap: 0.5rem; justify-items: start; }
.pf-get__title { font-weight: 300; }
.pf-get__note { max-width: 38ch; }

.pf-grid {
  display: grid;
  gap: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .pf-item--wide { grid-column: 1 / -1; }
  .pf-grid > .pf-item:not(.pf-item--wide):nth-child(even) { margin-block-start: clamp(3rem, 7vw, 7rem); }
}

.pf-item { margin: 0; display: grid; gap: 0.85rem; }
.pf-item__media { display: block; aspect-ratio: 3 / 2; }
.pf-item--wide .pf-item__media { aspect-ratio: 16 / 7; }
.pf-item__media img { transition: transform 1.8s var(--ease), opacity 1s; }
.pf-item__media:hover img { transform: scale(1.03); }
.pf-item__cap { display: grid; gap: 0.2rem; }
.pf-item__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; line-height: 1.4; }
.pf-item__meta { font-size: 0.82rem; color: var(--muted); }

@media (max-width: 720px) {
  .pf-item__media, .pf-item--wide .pf-item__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   ۱۱. درباره ما
   --------------------------------------------------------------------------
   ریتم ادیتوریالِ پورتفولیوی چاپی: ستون متنی باریک، فضای خالی زیاد و
   هیچ متنی روی تصویر.
   ========================================================================== */
.about-cover__media { height: clamp(22rem, 78vh, 50rem); }
.about-cover__media img { width: 100%; height: 100%; object-fit: cover; }

.statement__kicker { margin-block-end: var(--gap-md); }

.statement__text {
  max-width: 32ch;
  margin-inline: auto;
  font-weight: 300;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
}

html[lang="fa"] .statement__text { max-width: 38ch; line-height: 1.9; }

@media (max-width: 720px) { .statement__text { max-width: none; text-align: start; } }

.principles__list {
  display: grid;
  gap: 0 clamp(1rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.principle { display: grid; align-content: start; gap: 0.9rem; padding-block: var(--gap-md); border-block-start: 1px solid var(--ink); }
.principle__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }
html[lang="fa"] .principle__num { font-family: var(--font-fa); }
.principle__text { color: var(--ink-2); font-size: 0.97rem; }

/* ---- بلوک ادیتوریال شرکا: تصویر در میان، متن در ستون کنار ---- */
.leads { display: grid; gap: clamp(3.5rem, 8vw, 8rem); }

.lead { display: grid; gap: var(--gap-md); align-items: center; }

@media (min-width: 900px) {
  .lead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }

  /* تصویر همیشه ستون میانی؛ متن یکی در میان چپ و راست می‌نشیند.
     ردیف را صریح می‌دهیم وگرنه در حالت قرینه (متن در ستون اول) چیدمان
     خودکار گرید نمی‌تواند به عقب برگردد و متن به ردیف بعد می‌افتد. */
  .lead__media { grid-column: 2; grid-row: 1; }
  .lead__text { grid-column: 3; grid-row: 1; }
  .lead--flip .lead__text { grid-column: 1; }
}

.lead__media { aspect-ratio: 3 / 4; background: var(--bg-2); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; }

.lead__text { display: grid; gap: 0.5rem; align-content: center; }
.lead__name { font-weight: 300; }
.lead__role { color: var(--muted); }
.lead__bio { margin-block-start: 0.75rem; max-width: 38ch; }
.lead__bio p { font-size: 0.95rem; }
.lead__links { margin-block-start: 0.5rem; }

.history__grid { display: grid; gap: var(--gap-lg); }

@media (min-width: 1000px) {
  .history__grid { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
  .history__intro { position: sticky; top: calc(var(--header-h) + 2rem); }
}

.history__intro { display: grid; gap: var(--gap-md); }
.history__media { aspect-ratio: 4 / 3; }

.timeline { border-block-start: 1px solid var(--line); }
.timeline__item { display: grid; grid-template-columns: minmax(5.5rem, 0.35fr) 1fr; gap: 1.5rem; padding-block: var(--gap-md); border-block-end: 1px solid var(--line); }
.timeline__year { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 200; line-height: 1; letter-spacing: -0.03em; color: var(--muted); }
html[lang="fa"] .timeline__year { letter-spacing: 0; font-weight: 300; }
.timeline__body { display: grid; gap: 0.5rem; }
.timeline__title { font-size: var(--fs-h4); font-weight: 400; }
.timeline__body p { color: var(--ink-2); font-size: 0.95rem; }

/* نقل قول — روی پس‌زمینه روشن صفحه، بدون بلوک تیره تمام‌عرض */
.quote-plain__inner { display: grid; gap: var(--gap-md); max-width: 34ch; margin-inline: auto; text-align: center; }
html[lang="fa"] .quote-plain__inner { max-width: 36ch; }
.quote-plain__text { font-weight: 300; }
.quote-plain__inner footer { justify-self: center; color: var(--muted); }

@media (max-width: 720px) {
  .quote-plain__inner { max-width: none; text-align: start; }
  .quote-plain__inner footer { justify-self: start; }
}

/* ==========================================================================
   ۱۲. تیم
   ========================================================================== */
.team-group { padding-block-start: var(--gap-lg); }
.team-group + .team-group { margin-block-start: var(--gap-lg); }
.team-group__head { display: grid; gap: 0.6rem; margin-block-end: var(--gap-lg); padding-block-end: 1.1rem; border-block-end: 1px solid var(--line); }
.team-group__desc { max-width: 42rem; }

.team-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem); }
.team-grid--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.team-grid--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }

.member__text { display: grid; gap: 0.25rem; }
.member-card .member { cursor: pointer; }

/* ==========================================================================
   ۱۳. تماس
   --------------------------------------------------------------------------
   سه ستون: اطلاعات · «همکاری با ما» و فرم · نقشه — نزدیک به ساختار مرجع
   ولی با پس‌زمینه روشن و فضای خالی بیشتر.
   ========================================================================== */
.contact { display: grid; gap: var(--gap-lg); }

@media (min-width: 1000px) {
  .contact {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }
}

.contact__col-title { color: var(--muted); margin-block-end: 1.25rem; }

.contact__info { display: grid; gap: var(--gap-md); align-content: start; }
.contact__block { display: grid; gap: 0.35rem; justify-items: start; }
.contact__key { color: var(--muted); }
.contact__value { font-size: 1rem; line-height: 1.7; word-break: break-word; }
.contact__value--text { color: var(--ink-2); max-width: 22rem; }
.contact__social { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }

.contact__main { display: grid; gap: var(--gap-lg); min-width: 0; }

.join { display: grid; gap: 0.75rem; justify-items: start; }
.join__text { max-width: 44ch; color: var(--ink-2); }
.join__mail { font-size: 1rem; }

.contact-form { display: grid; gap: var(--gap-md); }
.contact-form__foot { display: grid; gap: 1.5rem; justify-items: start; }

.contact__map { align-self: start; }

@media (min-width: 1000px) {
  .contact__info, .contact__map { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.map { height: clamp(18rem, 46vh, 30rem); background: var(--bg-2); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
:root[data-theme="dark"] .map iframe { filter: grayscale(1) invert(0.92) contrast(0.9); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map iframe { filter: grayscale(1) invert(0.92) contrast(0.9); }
}

/* ==========================================================================
   ۱۴. تعرفه و ماشین‌حساب
   ========================================================================== */
.calc { display: grid; gap: var(--gap-lg); padding-block-start: var(--gap-md); border-block-start: 1px solid var(--line); }

@media (min-width: 1000px) {
  .calc { grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .calc__result { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}

.calc__form { display: grid; gap: var(--gap-lg); }
.calc__step { display: grid; gap: 1.25rem; min-width: 0; padding: 0; border: 0; }
.calc__legend { display: flex; align-items: baseline; gap: 1rem; padding: 0; margin-block-end: 1.25rem; font-family: var(--font-display); font-size: var(--fs-d3); font-weight: 300; }
.calc__no { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); }

.calc__sizes { display: grid; gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 640px) { .calc__sizes { grid-template-columns: repeat(3, 1fr); } }
.calc__sizes .field__input { font-family: var(--font-mono); }
html[dir="rtl"] .calc__sizes .field__input { text-align: right; }

.services-pick { display: grid; gap: 0.6rem; }
.service-opt { position: relative; display: block; cursor: pointer; }
.service-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.service-opt__box {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-2);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.service-opt:hover .service-opt__box { border-color: var(--ink); }
.service-opt input:checked + .service-opt__box { border-color: var(--ink); background: var(--bg-2); }
.service-opt input:focus-visible + .service-opt__box { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.service-opt__check { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--line-2); color: transparent; transition: background-color 0.4s var(--ease), color 0.4s, border-color 0.4s; }
.service-opt input:checked + .service-opt__box .service-opt__check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.service-opt__text { display: grid; gap: 0.15rem; }
.service-opt__title { font-size: 1.02rem; }
.service-opt__desc { font-size: 0.85rem; color: var(--muted); }
.service-opt__amount { font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; color: var(--ink-2); }
.service-opt input:not(:checked) + .service-opt__box .service-opt__amount { opacity: 0; }

@media (max-width: 560px) {
  .service-opt__box { grid-template-columns: auto 1fr; }
  .service-opt__amount { grid-column: 2; }
}

.calc__result { min-width: 0; }
.calc__panel { display: grid; gap: 1.25rem; min-width: 0; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--ink); color: var(--bg); }
.calc__panel .label { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.calc__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; }
.calc__total-value { font-family: var(--font-display); font-size: clamp(2rem, 2.9vw, 3rem); font-weight: 200; line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; transition: opacity 0.3s; }
html[lang="fa"] .calc__total-value { letter-spacing: 0; font-weight: 250; }
.calc__total-value.is-updating { opacity: 0.4; }
.calc__currency { font-size: 0.95rem; opacity: 0.7; }
.calc__minimum, .calc__empty { opacity: 0.7; }
.calc__summary { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 1rem; border-block: 1px solid color-mix(in srgb, var(--bg) 16%, transparent); }
.calc__summary div { display: grid; gap: 0.2rem; }
.calc__summary dt { font-size: 0.78rem; opacity: 0.6; }
.calc__summary dd { margin: 0; min-height: 1.5em; }
.calc__panel .btn { --btn-bg: var(--bg); --btn-fg: var(--ink); }
.calc__panel .btn:hover { color: #fff; }
.calc__panel .btn.is-disabled { opacity: 0.4; pointer-events: none; }
.calc__disclaimer { opacity: 0.55; line-height: 1.7; }

.service-list { border-block-start: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem 1.5rem; padding-block: var(--gap-md); border-block-end: 1px solid var(--line); }
@media (min-width: 800px) { .service-row { grid-template-columns: 3rem 1.6fr 1fr; align-items: baseline; } }
.service-row.is-highlighted .service-row__title::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-inline-start: 0.6rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.service-row__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); padding-block-start: 0.4rem; }
.service-row__main { display: grid; gap: 0.35rem; }
.service-row__title { font-size: var(--fs-d3); font-weight: 300; }
.service-row__desc { color: var(--muted); max-width: 40rem; }
.service-row__price { grid-column: 2; font-size: 1.05rem; }
@media (min-width: 800px) { .service-row__price { grid-column: auto; text-align: end; } }
.service-row__price small { display: block; font-size: 0.8rem; color: var(--muted); }
.fee-note { margin-block-start: var(--gap-md); color: var(--muted); }

/* ==========================================================================
   ۱۵. صفحات محتوایی، تشکر و خطا
   ========================================================================== */
.content-body { max-width: 52rem; padding-block-start: var(--gap-md); border-block-start: 1px solid var(--line); }

.center-page { display: grid; align-items: center; min-height: calc(100svh - var(--header-h)); padding-block: var(--section); }
.center-page__inner { display: grid; justify-items: center; gap: 1.5rem; text-align: center; }
.center-page__inner .t-lead { max-width: 36rem; }
.center-page__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid var(--line-2); border-radius: 50%; color: var(--accent); }
.center-page__code { font-family: var(--font-display); font-size: clamp(6rem, 22vw, 16rem); font-weight: 200; line-height: 0.9; color: var(--bg-3); letter-spacing: -0.05em; }
.center-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-start: 0.5rem; }
.page-center .footer__cta { display: none; }