/* ==========================================================================
   components.css — قطعه‌های مشترک
   ترتیب و نام‌ها از DESIGN-NOTES.md. هیچ فریم‌ورکی، هیچ مرحله‌ی بیلدی.
   ========================================================================== */

/* ==========================================================================
   ۰. چیدمان پایه
   ========================================================================== */

.psy-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.psy-section { margin-block: var(--section-gap); }
.psy-section--tight { margin-block: var(--sp-5); }

/* هر چیز پهنی که ممکن است سرریز کند، داخل خودش اسکرول می‌شود نه صفحه */
.psy-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.psy-scroll-x::-webkit-scrollbar { height: 6px; }
.psy-scroll-x::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--r-pill);
}

/* ==========================================================================
   ۱. هدر
   موبایل: همبرگر چپ · لوگو وسط · دکمه راست
   تبلت:  ردیف۱ لوگو راست + دکمه چپ · ردیف۲ منو
   دسکتاپ: لوگو راست · منو وسط · دکمه چپ
   ========================================================================== */

.psy-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--paper);
  border-block-end: 1px solid var(--line-soft);
}

/* هدر در ماکاپ تا نزدیک لبه‌ها می‌رود، نه داخل قاب ۱۲۰۰ محتوا */
.psy-header > .psy-container { max-width: 1400px; }

.psy-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
}

.psy-header__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

.psy-header__logo { width: 62px; height: 62px; flex: none; }

.psy-header__name {
  display: block;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 700;
  color: var(--brand);
  line-height: 1.35;
}

.psy-header__tag {
  display: block;
  font-size: var(--fs-caption);
  color: var(--muted);
  line-height: 1.4;
}

.psy-header__nav {
  flex: 1 1 auto;
  /* بدون این، منو کوچک نمی‌شود و دکمه‌ی تماس از قاب بیرون می‌زند */
  min-width: 0;
}

.psy-header__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.1vw, 20px);
  /* اگر منو در عرض جا نشد، داخل خودش می‌لغزد — نه اینکه صفحه را بکشد */
  overflow-x: auto;
  scrollbar-width: none;
}

.psy-header__menu::-webkit-scrollbar { display: none; }

.psy-header__link {
  position: relative;
  display: inline-block;
  font-size: var(--fs-small);
  color: var(--heading);
  white-space: nowrap;
  padding-block: 4px 14px;
}

.psy-header__link:hover { color: var(--brand); }

.psy-header__link[aria-current='page'] {
  color: var(--brand);
  font-weight: 700;
}

/* ماکاپ زیرِ آیتم فعال یک میله‌ی کوتاهِ گردگوشه می‌گذارد، با فاصله از متن —
   نه یک border تمام‌عرض. */
.psy-header__link[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 42%;
  min-width: 26px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--brand);
}

/* ماکاپ آیکن تلفن را سمت چپِ برچسب می‌کشد؛ در DOM اول می‌آید پس در RTL
   سمت راست می‌افتاد. */
.psy-header__cta { flex: 0 0 auto; flex-direction: row-reverse; }

/* بین ۱۰۲۴ و ۱۳۴۰ نُه آیتم منو با اندازه‌ی کامل جا نمی‌شوند */
@media (min-width: 1024px) and (max-width: 1339px) {
  .psy-header__link { font-size: var(--fs-caption); }
  .psy-header__brand { gap: var(--sp-2); }
  .psy-header__logo { width: 52px; height: 52px; }
}

/* همبرگر — فقط زیر ۱۰۲۴ دیده می‌شود */
.psy-burger {
  display: none;
  flex: none;
  order: -1;
  margin-inline-end: auto;
  padding: 8px;
  background: none;
  border: 0;
}

.psy-burger span {
  display: block;
  width: 26px;
  height: 2.5px;
  margin-block: 5px;
  border-radius: 2px;
  background: var(--brand);
}

@media (max-width: 1023px) {
  .psy-burger { display: block; }

  .psy-header__bar { flex-wrap: wrap; row-gap: var(--sp-3); min-height: 64px; }

  .psy-header__nav {
    order: 3;
    flex: 1 0 100%;
    margin-block-start: var(--sp-2);
    border-block-start: 1px solid var(--line-soft);
    padding-block-start: var(--sp-3);
  }

  .psy-header__menu { justify-content: flex-start; }

  /* منوی تبلت هیچ‌وقت صفحه را نمی‌کشد */
  .psy-header__nav > .psy-header__menu {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .psy-header__nav > .psy-header__menu::-webkit-scrollbar { display: none; }
}

@media (max-width: 1023px) {
  /* منوی افقی می‌رود داخل همبرگر */
  .psy-header__nav { display: none; }

  /* در RTL شروعِ محور اصلی سمت راست است:
     order 1 = راست‌ترین. ماکاپ: دکمه راست، لوگو وسط، همبرگر چپ. */
  .psy-header__bar { flex-wrap: nowrap; gap: var(--sp-2); }

  /* ماکاپ‌های موبایل دکمه را فیروزه‌ای می‌کشند، دسکتاپ تیره */
  .psy-header__cta.psy-btn--dark { background: var(--brand); }
  .psy-header__cta { order: 1; margin-inline-start: 0; }

  .psy-header__brand {
    order: 2;
    min-width: 0;
    margin-inline: auto;
    gap: var(--sp-2);
  }

  .psy-burger { order: 3; margin-inline-end: 0; padding: 6px; }

  .psy-header__logo { width: 52px; height: 52px; }
}

/* خط دومِ نام فقط در باریک‌ترین حالت حذف می‌شود؛ ماکاپ تا عرض تبلت داردش */
@media (max-width: 560px) {
  .psy-header__logo { width: 44px; height: 44px; }
  .psy-header__name { font-size: 16px; }
  .psy-header__tag { display: none; }
}

@media (max-width: 400px) {
  /* در باریک‌ترین حالت، نامِ متنی جا نمی‌شود و لوگو خودش نام را دارد */
  .psy-header__name { font-size: 13px; }
  .psy-header__cta { padding-inline: 14px; }
}

/* منوی کشویی موبایل — بدون جاوااسکریپت، با checkbox */
.psy-drawer-toggle { position: absolute; opacity: 0; pointer-events: none; }

.psy-drawer {
  display: none;
  border-block-start: 1px solid var(--line-soft);
  background: var(--paper);
}

/* :has() به‌جای هم‌نیایِ ~ : در قالبِ هدرِ المنتور، چک‌باکس داخل یک ویجت
   می‌نشیند و دیگر هم‌نیای مستقیمِ کشو نیست. با :has() جایش هرکجای هدر
   باشد کار می‌کند و رفتار در پیش‌نمایش هم عوض نمی‌شود. */
.psy-header:has(.psy-drawer-toggle:checked) .psy-drawer { display: block; }

.psy-drawer__list { padding-block: var(--sp-3); }

.psy-drawer__list a {
  display: block;
  padding: 11px var(--gutter);
  color: var(--heading);
  border-block-end: 1px solid var(--line-soft);
}

.psy-drawer__list li:last-child a { border-block-end: 0; }
.psy-drawer__list a:hover { color: var(--brand); background: var(--brand-faint); }

@media (min-width: 1024px) {
  .psy-drawer, .psy-header:has(.psy-drawer-toggle:checked) .psy-drawer { display: none; }
}

/* ==========================================================================
   ۲. دکمه
   ========================================================================== */

.psy-btn {
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 10px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-btn);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.psy-btn:hover { background: var(--dark); color: #fff; }

.psy-btn__icon { flex: none; width: 18px; height: 18px; }

/* شِوران جهت‌دار — RTL یعنی «جلو» به چپ است.
   ماکاپ آن را به لبه‌ی چپ دکمه می‌چسباند و برچسب را وسط می‌گذارد. */
/* حالت پیش‌فرض: شِوران کنار برچسب، هر دو با هم وسط.
   ماکاپ دکمه‌های کوچک را همین‌طور می‌کشد. */
.psy-btn__chev { flex: none; width: 16px; height: 16px; }

/* فقط دکمه‌های تمام‌عرض شِوران را به لبه می‌چسبانند — مثل هیروی صفحه اول.
   اگر روی دکمه‌ی کوچک هم absolute باشد، روی برچسب می‌افتد و حروف را خراب می‌کند. */
.psy-btn--block .psy-btn__chev,
.psy-hero__body .psy-btn .psy-btn__chev,
.psy-split-hero__body .psy-btn .psy-btn__chev {
  position: absolute;
  inset-inline-end: 20px;   /* در RTL یعنی لبه‌ی چپ دکمه */
}

.psy-btn--block:has(.psy-btn__chev),
.psy-hero__body .psy-btn:has(.psy-btn__chev),
.psy-split-hero__body .psy-btn:has(.psy-btn__chev) { padding-inline: 48px; }

/* --dark فقط برای دکمه‌هایی که ماکاپ سرمه‌ای می‌کشد. چند دکمه‌ی اصلی
   اشتباهاً سرمه‌ای شده بودند و ماکاپ فیروزه‌ای می‌کشدشان (ایراد ۱۰ داور). */
.psy-btn--dark { background: var(--dark); }
.psy-btn--dark:hover { background: var(--dark-soft); }

.psy-btn--bright { background: var(--brand-bright); }
.psy-btn--bright:hover { background: var(--brand); }

/* زمینه‌ی سفید، نه شفاف: این دکمه روی نوارهای تصویردار می‌نشیند و با
   زمینه‌ی شفاف، تصویر از پشتِ متن رد می‌شد و خوانایی را می‌برد.
   ماکاپ‌ها هم همه‌جا پُرِ سفید می‌کشندش. */
.psy-btn--ghost {
  background: var(--paper);
  color: var(--brand);
  border-color: var(--brand);
}

.psy-btn--ghost:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* روی زمینه‌ی تیره */
/* ماکاپ این دکمه‌ها را پُرِ سفید با متن تیره می‌کشد، نه ghost خط‌دار */
.psy-btn--on-dark {
  background: #fff;
  color: var(--dark);
  border-color: #fff;
  border-radius: var(--r-pill);
}

.psy-btn--on-dark:hover { background: var(--cream); color: var(--dark); border-color: var(--cream); }

.psy-btn--block { display: flex; width: 100%; }

.psy-btn--sm { min-height: 40px; padding: 8px 18px; font-size: var(--fs-small); }

/* گروه دکمه — در ماکاپ دکمه‌ی پُر سمت چپ و ghost سمت راست است */
.psy-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.psy-btn-row--center { justify-content: center; }

/* ماکاپ «درباره انستیتو» را دکمه‌ای جمع‌وجور می‌کشد، نه تمام‌عرض */
.psy-btn-row--compact .psy-btn { width: auto; min-width: 240px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .psy-btn-row { flex-direction: column; align-items: center; }
  /* ماکاپ‌ها دکمه‌ها را روی هم و با عرض خودشان می‌کشند، نه تمام‌عرض.
     فقط .psy-btn--block تمام‌عرض می‌ماند. */
  .psy-btn-row .psy-btn--block { width: 100%; }
}

/* ==========================================================================
   ۳. کارت و مدال
   ========================================================================== */

.psy-card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-4);
}

.psy-card--lg { border-radius: var(--r-lg); padding: var(--sp-5); }
.psy-card--raise { box-shadow: var(--sh-raise); }
.psy-card--flat { box-shadow: none; }

.psy-medallion {
  display: grid;
  place-items: center;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand);
}

.psy-medallion svg { width: 40px; height: 40px; }

.psy-medallion--sm { width: 56px; height: 56px; }
.psy-medallion--sm svg { width: 30px; height: 30px; }

.psy-medallion--lg { width: 104px; height: 104px; }
.psy-medallion--lg svg { width: 54px; height: 54px; }

/* صفحه‌های ۲، ۵ و ۷ مدال خاکستری دارند نه آبی */
.psy-medallion--neutral { background: var(--neutral-wash); color: var(--dark); }

/* صفحه ۱۰§۴ مدال تیره‌ی پُر */
.psy-medallion--solid { background: var(--dark); color: #fff; }

/* ==========================================================================
   ۴. عنوان بخش
   ========================================================================== */

.psy-section-title { text-align: center; margin-block-end: var(--sp-5); }

.psy-section-title h2 { margin-block-end: var(--sp-3); }

.psy-section-title p {
  max-width: 62ch;
  margin-inline: auto;
  color: var(--muted);
}

.psy-rule {
  width: 44px;
  height: 3px;
  margin: var(--sp-2) auto 0;
  border-radius: var(--r-pill);
  background: var(--brand);
}

/* صفحه ۱§۴ خط را بالای عنوان می‌گذارد */
.psy-rule--above { margin: 0 auto var(--sp-4); }

.psy-rule--start { margin-inline: 0; }

/* اُرنمنت برگ — صفحه‌های ۶ و ۱۰ */
.psy-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
  color: var(--brand);
  opacity: .65;
}

.psy-ornament svg { width: 34px; height: 18px; }

/* صفحه‌های ۶ و ۱۰ اُرنمنت را با دو خط محو در دو طرف می‌کشند */
.psy-ornament--ruled::before,
.psy-ornament--ruled::after {
  content: '';
  width: 70px;
  height: 1px;
  background: linear-gradient(to left, transparent, currentColor);
}

.psy-ornament--ruled::after { background: linear-gradient(to right, transparent, currentColor); }

/* ==========================================================================
   ۵. سربرگ صفحه — نوار گیاهی
   ========================================================================== */

.psy-page-header {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--band-cream) center / cover no-repeat;
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 3.4vw, 48px);
  text-align: center;
}

/* هنر گیاهی نباید متن را ناخوانا کند: یک لایه‌ی محوکننده روی تصویر،
   با همان رنگ زمینه‌ی نوار، پررنگ‌تر در مرکز جایی که متن می‌نشیند. */
.psy-page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 62% 78% at 50% 50%,
    color-mix(in srgb, var(--band-cream) 88%, transparent) 0%,
    color-mix(in srgb, var(--band-cream) 62%, transparent) 55%,
    transparent 100%
  );
}

.psy-page-header__inner { position: relative; z-index: 1; max-width: 58ch; margin-inline: auto; }

.psy-page-header h1 { margin-block-end: var(--sp-3); }

.psy-page-header p { color: var(--muted); font-size: var(--fs-lead); }

.psy-page-header .psy-eyebrow { display: block; margin-block-end: var(--sp-3); }

/* روی paper بدون نوار — صفحه ۶ */
.psy-page-header--plain::before { content: none; }

.psy-page-header--plain {
  background: none;
  border-radius: 0;
  padding-inline: 0;
  padding-block: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 36px);
}

/* فقط تصویر، بدون عنوان — صفحه ۱۰§۲ */
/* صفحه ۹: نوار از زیر هدر تمام‌عرض می‌آید و فقط پایینش گرد است */
.psy-page-header--bleed {
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  margin-inline: calc(var(--gutter) * -1);
}

.psy-page-header--image { padding: 0; aspect-ratio: 1920 / 460; }
.psy-page-header--image::before { content: none; }

.psy-page-header--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* تصویر منبع ۳:۱ است. کادرِ ۱۶/۹ باریک‌تر از آن است، پس cover به‌جای بریدنِ
   بالا و پایین، از دو طرف می‌بُرد و گلدانِ سمت چپ کلاً از کادر بیرون می‌افتاد.
   ماکاپِ موبایل کلِ تصویر را نشان می‌دهد، پس نسبت باید ≥ ۳:۱ بماند. */
@media (max-width: 640px) {
  .psy-page-header--image { aspect-ratio: 3 / 1; }
}

/* ==========================================================================
   ۶. سربرگ دونیمه — صفحه‌های ۲، ۴، ۵
   ========================================================================== */

.psy-split-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--band-cream);
}

/* ماکاپ دسکتاپ سربرگ را داخل قاب و با گوشه‌ی گرد می‌کشد — نه تمام‌عرض.
   نسخه‌ی قبلی full-bleed بود و اشتباه. */

/* در RTL، order 1 سمت راست می‌نشیند. ماکاپ: عکس چپ، متن راست. */
.psy-split-hero__media { order: 2; min-height: 100%; }
.psy-split-hero__body { order: 1; }

/* بدون مهار ارتفاع، یک عکس پرترهٔ بلند کل سربرگ را ۱۲۰۰ پیکسل می‌کند
   — تفاوت صفحه‌ی کودک با صفحه‌ی زوج‌ها دقیقاً همین بود. */
/* عکس با position:absolute دقیقاً هم‌اندازه‌ی نوار می‌شود.
   با min-height: 100% روی یک عکسِ پرتره، خودِ عکس ارتفاع نوار را تعیین
   می‌کرد و بنرِ صفحه‌ی کودک به ۹۳۷ پیکسل می‌رسید. حالا ارتفاع را ستونِ
   متن تعیین می‌کند و عکس همیشه دقیقاً پرش می‌کند — نه کوتاه‌تر (درز)، نه
   بلندتر (بنرِ غول‌آسا). */
.psy-split-hero__media { position: relative; overflow: hidden; min-height: 240px; }

.psy-split-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.psy-split-hero__body {
  position: relative;
  padding: clamp(22px, 2.8vw, 40px) clamp(20px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-3);
  background: transparent;
}

/* برگ در فایل فوتیج سمت چپ است؛ ماکاپ آن را سمت راستِ نوار می‌خواهد،
   پس همان تصویر آینه می‌شود. روی خودِ نوار می‌نشیند نه روی پنل متن،
   تا عکس و متن یک زمینه‌ی مشترک داشته باشند و درز نیفتد. */
.psy-split-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  /* فایل آماده‌ی طراح: کِرِم با شاخه‌ی خط‌نگارِ ظریف در سمت چپ.
     ماکاپ آن را سمت راستِ متن می‌خواهد، پس آینه می‌شود. */
  background: url('../img/band-cream-leaf.jpg') left center / cover no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
}

.psy-split-hero__media, .psy-split-hero__body { position: relative; z-index: 1; }

.psy-split-hero__body > * { position: relative; z-index: 1; }

/* ماکاپ دکمه‌های سربرگ را تمام‌عرضِ ستون متن می‌کشد */
.psy-split-hero__body .psy-btn-row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.psy-split-hero__body .psy-btn { width: 100%; }

/* لبه‌ی عکس با ماسک محو می‌شود و زمینه‌ی مشترکِ نوار از زیرش بیرون می‌آید.
   گرادیانِ هم‌رنگ‌ساز جواب نمی‌داد: پنل متن نقش برگ دارد و رنگش دقیقاً
   با --band-cream یکی نیست، برای همین درزِ عمودی دیده می‌شد. */
.psy-split-hero__media { position: relative; }

@media (min-width: 601px) {
  .psy-split-hero__media img {
    mask-image: linear-gradient(to right, #000 62%, transparent 99%);
  }
}

.psy-split-hero__body h1 { margin: 0; }

.psy-split-hero__kicker {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--dark);
}

.psy-split-hero__body p { color: var(--muted); }

/* واترمارک گیاهی گوشه */
/* ماکاپ صفحه‌های ۴ و ۵ در عرض ۷۰۶ هنوز دوستونه‌اند؛ فقط زیر ۶۰۰ روی هم می‌روند */
@media (max-width: 600px) {
  .psy-split-hero { grid-template-columns: 1fr; }

  /* cover روی کادر باریک و بلند، برگ را غول‌پیکر و وسطِ متن می‌اندازد */
  .psy-split-hero::before {
    background-image: url('../img/leaf-left.png');
    background-size: auto 42%;
    background-position: left bottom;
    opacity: .7;
  }

  .psy-split-hero__media { order: 1; }
  .psy-split-hero__body { order: 2; text-align: center; align-items: center; }
  .psy-split-hero__body .psy-rule { margin-inline: auto; }
  .psy-split-hero__body .psy-btn-row { width: 100%; }
  .psy-split-hero__media img { min-height: 0; max-height: none; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   ۷. هیرو صفحه‌ی اول — لبه‌ی پایین منحنی
   ========================================================================== */

.psy-hero { position: relative; }
.psy-hero__media, .psy-hero__body { position: relative; z-index: 1; }

.psy-hero__media { position: relative; }

.psy-hero__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.psy-hero__curve {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -2px;   /* روی ردیف آخر عکس می‌نشیند، نه کنارش */
  width: 100%;
  height: clamp(64px, 15vw, 190px);
  display: block;
  fill: var(--paper);
}

.psy-hero__body {
  padding-block: var(--sp-4) 0;
  text-align: center;
}

.psy-hero__body h1 { margin-block-end: var(--sp-4); }

.psy-hero__body p {
  max-width: 56ch;
  margin-inline: auto;
  color: var(--muted);
}

.psy-hero__body > * { position: relative; z-index: 1; }

.psy-hero__body .psy-btn-row { margin-block-start: var(--sp-6); flex-direction: column; }
.psy-hero__body .psy-btn { width: 100%; }

@media (min-width: 768px) {
  .psy-hero__media img { aspect-ratio: 21 / 9; max-height: 62vh; }
  .psy-hero__body .psy-btn-row { flex-direction: row; justify-content: center; }
  .psy-hero__body .psy-btn { width: auto; min-width: 240px; }
}

/* صفحه اول ماکاپ دسکتاپ ندارد. طبق قاعده‌ی سند شروع کار، از صفحه ۲ و ۷
   مشتق می‌شود: تیتر بزرگ‌تر و نقش گیاهی پشت متن، تا فضای خالیِ زیر قوس
   مثل بقیه‌ی صفحه‌ها پر شود. */
@media (min-width: 1024px) {
  .psy-hero__body { padding-block: 0 var(--sp-6); margin-block-start: calc(var(--sp-6) * -1); }

  .psy-hero__body h1 { font-size: clamp(40px, 3.6vw, 52px); }

  .psy-hero__body p { max-width: 62ch; font-size: var(--fs-lead); }

  /* نقش پشت کل هیرو می‌نشیند، نه داخل قاب محتوا — وگرنه یک مستطیل با
     لبه‌ی تیز وسط صفحه می‌افتد. عکس مات است و نقش را زیر خودش پنهان می‌کند،
     پس فقط در ناحیه‌ی زیر قوس دیده می‌شود. */
  .psy-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../img/pattern-botanical.jpg') center bottom / cover no-repeat;
    opacity: .38;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 56% 64% at 50% 78%, transparent 32%, #000 94%);
  }
}

/* ==========================================================================
   ۸. ردیف‌های مسیر — صفحه‌های ۱، ۳، ۵
   ========================================================================== */

.psy-path-cards { display: grid; gap: var(--sp-4); }

/* در دسکتاپ ردیف‌های تمام‌عرض هم بلند می‌شوند و هم ~۹۰۰ پیکسل فضای خالی
   وسطشان می‌ماند. ماکاپ فقط موبایل است، پس طبق قاعده مشتق می‌شود: شبکه. */
@media (min-width: 1024px) {
  .psy-path-cards:not(.psy-path-cards--flat) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.psy-path-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t), border-color var(--t);
}

.psy-path-card:hover { box-shadow: var(--sh-raise); border-color: var(--line); }

.psy-path-card__text { min-width: 0; }

.psy-path-card__text > * { display: block; }

.psy-path-card__title {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--brand);
  margin-block-end: 2px;
}

.psy-path-card__sub { display: block; font-size: var(--fs-small); color: var(--muted); }

.psy-path-card__chev { flex: none; width: 18px; height: 18px; color: var(--brand); }

/* صفحه ۳ — مدال سمت چپ، دکمه زیر متن */
.psy-path-cards--tall .psy-path-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    'medal text'
    'medal action';
  align-items: start;
  row-gap: var(--sp-3);
  direction: ltr;              /* فقط برای جابه‌جایی ستون‌ها */
}

.psy-path-cards--tall .psy-path-card > * { direction: rtl; }
.psy-path-cards--tall .psy-path-card .psy-medallion { grid-area: medal; align-self: center; }
.psy-path-cards--tall .psy-path-card__text { grid-area: text; }
.psy-path-cards--tall .psy-path-card__action { grid-area: action; justify-self: start; }
.psy-path-cards--tall .psy-path-card__chev { display: none; }

/* صفحه ۵§۵ — ردیف تخت، بدون کارت و بدون شِوران */
.psy-path-cards--flat { gap: 0; }

.psy-path-cards--flat .psy-path-card {
  border: 0;
  border-block-end: 1px solid var(--line-soft);
  border-radius: 0;
  box-shadow: none;
  background: none;
  padding-inline: 0;
}

.psy-path-cards--flat .psy-path-card:first-child { border-block-start: 1px solid var(--line-soft); }
.psy-path-cards--flat .psy-path-card:last-child { border-block-end: 1px solid var(--line-soft); }
.psy-path-cards--flat .psy-path-card__title { color: var(--heading); }
.psy-path-cards--flat .psy-path-card:hover { box-shadow: none; }
.psy-path-cards--flat .psy-path-card__chev { display: none; }

@media (max-width: 640px) {
  .psy-path-card { padding: var(--sp-4); gap: var(--sp-3); }
  .psy-path-card .psy-medallion { width: 52px; height: 52px; }
  .psy-path-card .psy-medallion svg { width: 40px; height: 40px; }
}

/* ==========================================================================
   ۹. کارت‌های ویژگی — صفحه‌های ۱§۶ و ۹§۵ نوع مستقل
   ========================================================================== */

.psy-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.psy-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.psy-feature-card h3 { color: var(--heading); }
.psy-feature-card p { font-size: var(--fs-small); color: var(--muted); }
.psy-feature-card .psy-btn { margin-block-start: auto; }
.psy-feature-card p { margin-block-end: var(--sp-3); }

/* عرضِ داده‌شده‌ی صفحه ۱ موبایل است و سه‌ستونه کشیده شده — سه‌ستونه می‌ماند */
@media (max-width: 640px) {
  .psy-feature-cards { gap: var(--sp-2); }
  .psy-feature-card { padding: var(--sp-4) 10px; gap: var(--sp-2); }
  .psy-feature-card h3 { font-size: var(--fs-small); }
  .psy-feature-card p { font-size: var(--fs-caption); line-height: 1.75; }
  .psy-feature-card .psy-medallion { width: 52px; height: 52px; }
  .psy-feature-card .psy-medallion svg { width: 40px; height: 40px; }
  /* برچسب در کارتِ ~۱۰۸ پیکسلی به سطر دوم می‌رفت؛ ماکاپ تک‌سطری می‌کشد */
  .psy-feature-card .psy-btn { width: 100%; padding-inline: 6px; font-size: 11px; }
  .psy-feature-card .psy-btn__chev { display: none; }
}

/* ۹§۵ — سه کارت شیوه‌ی برگزاری، آیکن بالای برچسب، بدون دکمه */
.psy-mode-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.psy-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--brand);
  font-weight: 700;
}

.psy-mode-card svg { width: 32px; height: 32px; }
.psy-mode-card span { color: var(--heading); font-size: var(--fs-small); }

@media (max-width: 640px) {
  /* ماکاپ سه مربع کنار هم می‌کشد؛ متن توضیحی در این عرض جا نمی‌شود و
     خودِ ماکاپ هم آن را ندارد. */
  .psy-mode-cards { gap: var(--sp-2); }
  .psy-mode-card { padding: var(--sp-4) 6px; }
  .psy-mode-card span { font-size: var(--fs-caption); }
  .psy-mode-card p { display: none; }
}

/* ==========================================================================
   ۱۰. کارت‌های «چه چیزی شما را آورده» — ۲×۲، صفحه‌های ۴ و ۵
   ========================================================================== */

.psy-reason-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.psy-reason-card {
  display: grid;
  /* در RTL ستون ۱ سمت راست است: متن راست، مدال چپ.
     جای هرکدام صریح داده می‌شود — با order، جای‌گذاری خودکارِ گرید
     مدال را در ستون ۱fr می‌نشاند و کارت سرریز می‌کند. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.psy-reason-card .psy-medallion { grid-column: 2; grid-row: 1; align-self: center; }
.psy-reason-card__text { grid-column: 1; grid-row: 1; min-width: 0; }

.psy-reason-card h3 { color: var(--heading); margin-block-end: 4px; }
.psy-reason-card p { font-size: var(--fs-small); color: var(--muted); }

.psy-reason-card__action {
  grid-column: 1 / -1;
  grid-row: 2;
  color: var(--brand);
  line-height: 0;
}

.psy-reason-card__action svg { width: 20px; height: 20px; }

/* صفحه ۴ — شِوران پایین‌چپ */
.psy-reason-cards .psy-reason-card__action { justify-self: end; }

/* صفحه ۵ — فلش کامل، وسطِ زیر متن */
.psy-reason-cards--arrow .psy-reason-card__action { justify-self: center; }

@media (max-width: 640px) {
  .psy-reason-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۱۱. ستون‌های داخل یک کارت — صفحه‌های ۲§۴ و ۱۱§۸
   ========================================================================== */

.psy-columns {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}

.psy-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}

/* جداکننده‌ی عمودی بین ستون‌ها — RTL، پس مرز سمت چپ */
.psy-column + .psy-column { border-inline-start: 1px solid var(--line-soft); }

.psy-column h3 { color: var(--heading); }
.psy-column p { font-size: var(--fs-small); color: var(--muted); }
.psy-column__label { color: var(--heading); font-size: var(--fs-small); font-weight: 700; }

@media (max-width: 640px) {
  .psy-columns { grid-template-columns: 1fr; }
  .psy-column + .psy-column {
    border-inline-start: 0;
    border-block-start: 1px solid var(--line-soft);
  }
}

/* ==========================================================================
   ۱۲. کاشی‌ها — صفحه ۱۱§۵
   ========================================================================== */

.psy-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.psy-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-2);
  text-align: center;
  background: var(--band-cream);
  border-radius: var(--r-sm);
  color: var(--brand);
}

.psy-tile svg { width: 26px; height: 26px; }
.psy-tile span { color: var(--heading); font-size: var(--fs-caption); }

/* ماکاپ آیکن هر کاشی را داخل دایره‌ی کم‌رنگ می‌گذارد */
.psy-tile__mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-wash);
  color: var(--brand);
}

@media (max-width: 640px) {
  .psy-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ۱۳. نوار فراخوان — یک قطعه، هفت modifier رنگ
   ========================================================================== */

.psy-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--band-cream) center / cover no-repeat;
  padding: clamp(22px, 2.8vw, 40px) clamp(20px, 3vw, 44px);
  text-align: center;
}

.psy-band__inner { position: relative; z-index: 1; }

.psy-band h2, .psy-band h3 { margin-block-end: var(--sp-3); }

.psy-band p { max-width: 60ch; margin-inline: auto; color: var(--muted); }

.psy-band .psy-btn-row { margin-block-start: var(--sp-5); justify-content: center; }

/* ماکاپ دکمه‌های نوار را قرصی می‌کشد */
.psy-band .psy-btn { border-radius: var(--r-pill); }

.psy-band--cream { background-color: var(--band-cream); }
.psy-band--tint  { background-color: var(--band-tint); }
.psy-band--sage  { background-color: var(--band-sage); }
.psy-band--mist  { background-color: var(--band-mist); }
.psy-band--sky   { background-color: var(--band-sky); }

/* آیکن بزرگ و بدون دایره‌ی نوار باریک — مثل ماکاپ */
.psy-band__glyph {
  flex: none;
  width: 46px;
  height: 42px;
  color: var(--brand);
}

.psy-band--slim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
}

.psy-band--slim p { margin: 0; flex: 1 1 260px; color: var(--heading); font-size: var(--fs-small); }
.psy-band--slim .psy-btn-row { margin: 0; }

/* متن راست، دکمه چپ — صفحه‌های ۷§۴ و ۱۰§۸ */
/* فایل‌های Banner و «مستطیل شیری رنگ» خودشان زمینه‌ی کاملِ نوارند، نه برگِ
   شفاف. با background-size کمتر از cover، به‌جای واترمارک یک مستطیلِ رنگی
   با لبه‌ی تیز وسط نوار می‌افتد — همان چیزی که داور دو بار گرفت. */
.psy-band--art {
  background-size: cover;
  background-position: center;
}

.psy-band--sage  { --band-bg: var(--band-sage); }
.psy-band--mist  { --band-bg: var(--band-mist); }
.psy-band--tint  { --band-bg: var(--band-tint); }
.psy-band--cream { --band-bg: var(--band-cream); }
.psy-band--sky   { --band-bg: var(--band-sky); }

/* ماکاپ‌های موبایل هم هنر گیاهی را می‌کشند، پس در ۳۹۰ حذف نمی‌شود. */

.psy-band--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  text-align: start;
}

.psy-band--split .psy-band__inner { flex: 1 1 320px; position: relative; z-index: 1; }
.psy-band--split .psy-btn-row, .psy-band--split .psy-medallion { position: relative; z-index: 1; }

/* نوار با عکس تزئینی: عکس ستون خودش را می‌گیرد.
   قبلاً background بود و دکمه‌ها روی عکس می‌افتادند. */
.psy-band--photo {
  display: grid;
  /* ستون ۱ در RTL سمت راست است و ماکاپ عکس را همان‌جا می‌گذارد،
     پس ستون باریک باید اول باشد نه دوم. */
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  background-image: none !important;
  text-align: start;
}

.psy-band--photo .psy-band__inner { grid-column: 1; }
.psy-band--photo .psy-band__inner p { margin-inline: 0; }
.psy-band--photo .psy-btn-row { grid-column: 1; margin-block-start: var(--sp-4); justify-content: flex-start; }

.psy-band--photo .psy-band__art {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  min-height: 100%;
}

.psy-band--photo .psy-band__art img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  border-radius: var(--r-md);
}

@media (max-width: 767px) {
  .psy-band--photo { grid-template-columns: 1fr; }
  .psy-band--photo .psy-band__art { grid-column: 1; grid-row: auto; }
  .psy-band--photo .psy-band__art img { aspect-ratio: 16 / 9; min-height: 0; }
  .psy-band--photo .psy-btn-row { grid-column: 1; justify-content: center; }
}
.psy-band--split p { margin-inline: 0; }
.psy-band--split .psy-btn-row { margin-block-start: 0; flex: 0 0 auto; }

/* نوار تیره */
.psy-band--dark {
  background-color: var(--dark);
  color: #fff;
}

.psy-band--dark h2,
.psy-band--dark h3 { color: #fff; }

.psy-band--dark p { color: rgba(255, 255, 255, .82); }

/* نوار تیره‌ی نیمه‌عکس — صفحه ۱§۷، عکس سمت راست */
.psy-band--dark-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: 0;
  text-align: start;
  background-color: var(--dark);
  color: #fff;
}

/* ماکاپ صفحه ۱: عکس نیمه‌ی راست، متن نیمه‌ی چپ */
.psy-band--dark-split .psy-band__inner {
  order: 2;
  padding: clamp(20px, 2.6vw, 36px);
  text-align: center;
}

.psy-band--dark-split .psy-band__media { order: 1; align-self: stretch; }

/* کات‌اوت شفاف است و مثل ماکاپ از لبه‌ی بالای نوار بیرون می‌زند.
   تصویر تا مرز سوژه بریده شده، وگرنه حاشیه‌ی شفافِ اطراف باعث می‌شد
   دکتر داخل ستون کوچک به نظر برسد. */
.psy-band--dark-split { overflow: visible; }

.psy-band--dark-split .psy-band__media {
  position: relative;
  align-self: stretch;
  min-height: 260px;
}

.psy-band--dark-split .psy-band__media img {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  width: 100%;
  height: auto;
  /* سرریز باید کوچک و ثابت باشد. با درصد (۱۳۲٪) روی نوارهای بلند به
     ۱۵۰ پیکسل می‌رسید و سرِ دکتر می‌رفت روی کارت بخش بالایی. */
  max-height: calc(100% + 26px);
  object-fit: contain;
  object-position: bottom center;
}

.psy-band--dark-split h2, .psy-band--dark-split h3 { color: #fff; }
.psy-band--dark-split p { color: rgba(255, 255, 255, .82); margin-inline: auto; }
.psy-band--dark-split .psy-btn-row { justify-content: center; }
.psy-band--dark-split .psy-rule { margin-inline: auto; }

@media (max-width: 640px) {
  /* ماکاپ صفحه ۱ خودش موبایل است و این نوار را دوستونه می‌کشد */
  .psy-band--dark-split { grid-template-columns: minmax(0, 1fr) minmax(0, 46%); }
  .psy-band--dark-split .psy-band__inner { padding: var(--sp-4) var(--sp-3); }
  .psy-band--dark-split h2 { font-size: var(--fs-h3); }
  .psy-band--dark-split p { font-size: var(--fs-caption); }
  .psy-band--dark-split .psy-btn { font-size: var(--fs-caption); padding: 8px 12px; min-height: 38px; }
  .psy-band--dark-split .psy-band__media { min-height: 200px; }
  .psy-band--dark-split .psy-band__media img { max-height: calc(100% + 20px); }
  .psy-band--split { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   ۱۴. اسلایدر
   دسکتاپ: فلش، بدون نقطه · تبلت و موبایل: هر دو
   بدون جاوااسکریپت — ریلِ اسکرول‌شونده با scroll-snap
   ========================================================================== */

.psy-carousel { position: relative; }

.psy-carousel__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sp-4) * 2) / 3);
  gap: var(--sp-4);
  overflow-x: auto;
  padding-block-end: var(--sp-3);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.psy-carousel__rail::-webkit-scrollbar { display: none; }
.psy-carousel__rail > * { scroll-snap-align: center; }

/* فلش‌ها دو سرِ ریل می‌نشینند، نقطه‌ها وسط.
   جهت RTL: «بعدی» به چپ اشاره می‌کند و در انتهای چپ است. */
.psy-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}

.psy-carousel__dots { margin-inline: auto; }

.psy-carousel__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--brand);
}

.psy-carousel__arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.psy-carousel__arrow svg { width: 16px; height: 16px; }

.psy-carousel__dots { display: flex; gap: var(--sp-2); }

.psy-carousel__dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  padding: 0;
}

.psy-carousel__dot[aria-current='true'] { background: var(--brand); }

/* دسکتاپ نقطه ندارد */
@media (min-width: 1024px) {
  .psy-carousel__dots { display: none; }
}

/* تبلت — ماکاپ صفحه ۴ در عرض ۷۰۶ سه کارت کنار هم می‌کشد، نه دو */
@media (min-width: 641px) and (max-width: 1023px) {
  .psy-carousel__rail { grid-auto-columns: calc((100% - var(--sp-3) * 2) / 3); }
}

@media (max-width: 640px) {
  /* یک کارت کامل و لبه‌ی کارت بعدی — نه سه کارت فشرده */
  .psy-carousel__rail {
    /* بدون minmax، وگرنه ترک کوچک می‌شود و ریل هرگز سرریز نمی‌کند */
    grid-auto-columns: 82%;
    gap: var(--sp-3);
  }
  .psy-carousel--peek .psy-carousel__arrow { display: none; }
}

/* کارت وسط برجسته — صفحه‌های ۴§۴ و ۵§۴ */
.psy-carousel--peek .psy-carousel__rail > * { transition: none; }

/* کارت تصویردار */
.psy-media-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.psy-media-card__img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

.psy-media-card__body {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}

.psy-media-card__body h3 { margin-block-end: var(--sp-3); }
.psy-media-card__body p { font-size: var(--fs-small); color: var(--muted); }

/* کارت شخص در اسلایدر */
.psy-avatar-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.psy-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--neutral-wash);
  color: var(--muted);
}

.psy-avatar img { width: 100%; height: 100%; object-fit: cover; }
.psy-avatar svg { width: 38%; height: 38%; }

.psy-avatar-card__name { font-weight: 700; font-size: var(--fs-small); }
.psy-avatar-card__role { font-size: var(--fs-caption); color: var(--muted); }

/* ماکاپ صفحه ۱ زیر خط سمت یک نشان دایره‌ای کوچک می‌گذارد */
.psy-avatar-card__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-block-start: var(--sp-2);
  border-radius: 50%;
  background: var(--neutral-wash);
  color: var(--brand);
}

.psy-avatar-card__badge svg { width: 18px; height: 18px; }

/* ==========================================================================
   ۱۵. چیپ‌ها
   صفحه ۳ و ۸ می‌پیچند · صفحه ۶ داخل خودش اسکرول می‌شود
   ========================================================================== */

.psy-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;   /* در RTL یعنی چسبیده به راست */
  gap: var(--sp-3);
}

.psy-chips--center { justify-content: center; }

.psy-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 8px 22px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--heading);
  font-size: var(--fs-small);
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.psy-chip:hover { border-color: var(--brand); color: var(--brand); }
.psy-chip svg { width: 18px; height: 18px; flex: none; }

.psy-chip[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}

/* صفحه ۶ چیپ فعالش تیره است نه فیروزه‌ای */
.psy-chips--dark .psy-chip[aria-pressed='true'] {
  background: var(--dark);
  border-color: var(--dark);
}

/* صفحه ۶ — یک ردیف سرریز، داخل خودش اسکرول */
.psy-chips--scroll {
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  padding-block-end: var(--sp-2);
  scrollbar-width: none;
}

.psy-chips--scroll::-webkit-scrollbar { display: none; }
.psy-chips--scroll .psy-chip { flex: none; }

/* ==========================================================================
   ۱۶. جستجو
   ========================================================================== */

.psy-search { display: flex; gap: var(--sp-3); align-items: center; }

.psy-search__field {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
}

.psy-search__field input {
  width: 100%;
  min-height: 52px;
  padding: 12px 22px 12px 52px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
}

.psy-search__field input::placeholder { color: var(--muted); }
.psy-search__field input:focus { border-color: var(--brand); outline: none; }

/* ذره‌بین سمت چپ فیلد — همان‌طور که کشیده شده */
.psy-search__icon {
  position: absolute;
  inset-inline-end: 20px;   /* در RTL یعنی لبه‌ی چپ فیلد، مثل ماکاپ */
  width: 20px;
  height: 20px;
  color: var(--muted);
  pointer-events: none;
}

.psy-search__filter { flex: 0 0 auto; }

@media (max-width: 640px) {
  .psy-search { flex-direction: column; align-items: stretch; }
  .psy-search__filter .psy-btn { width: 100%; }
}

/* ==========================================================================
   ۱۷. فهرست هیئت علمی — صفحه ۷
   ========================================================================== */

.psy-roster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.psy-roster__col { min-width: 0; }

.psy-roster__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: var(--sp-4);
}

/* ماکاپ: مدال سمت چپ، عنوان سمت راست */
.psy-roster__head .psy-medallion { order: 2; }

.psy-roster__head h2 {
  order: 1;
  font-size: var(--fs-h3);
  color: var(--brand);
  flex: 1 1 auto;
  text-align: center;
}

.psy-roster__head .psy-rule { margin-block-start: var(--sp-2); }
.psy-roster__head h2 .psy-rule { display: block; }

.psy-roster__list {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding-inline: var(--sp-4);
}

.psy-roster__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-soft);
}

.psy-roster__row:last-child { border-block-end: 0; }

.psy-roster__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--brand);
}

.psy-roster__mark svg { width: 17px; height: 17px; }

.psy-roster__name { font-weight: 700; font-size: var(--fs-small); }

.psy-roster__role {
  font-size: var(--fs-caption);
  color: var(--muted);
  text-align: start;
}

@media (max-width: 1023px) {
  .psy-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
  .psy-roster__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .psy-roster__mark { display: none; }
}

@media (max-width: 640px) {
  .psy-roster { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۱۸. کارت روانکاو — صفحه ۸
   ========================================================================== */

.psy-person-cards { display: grid; gap: var(--sp-4); }

.psy-person-card {
  display: grid;
  /* ستون ۱ در RTL سمت راست است و ماکاپ عکس را همان‌جا می‌گذارد،
     پس ستون باریک باید اول باشد نه دوم. */
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

/* ماکاپ: عکس سمت راست، متن سمت چپ */
.psy-person-card .psy-avatar { grid-column: 1; grid-row: 1; }
.psy-person-card__body { grid-column: 2; grid-row: 1; }

.psy-person-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  min-width: 0;
}

.psy-person-card__name { font-size: var(--fs-h3); font-weight: 700; }
.psy-person-card__role { font-size: var(--fs-small); color: var(--muted); }

.psy-person-card__label {
  margin-block-start: var(--sp-3);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.psy-person-card__areas { font-size: var(--fs-small); }

.psy-person-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: auto;
  align-self: flex-end;      /* در ستون RTL یعنی لبه‌ی چپ */
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--brand);
}

.psy-person-card__link svg { width: 14px; height: 14px; }

.psy-person-card .psy-avatar {
  border-radius: var(--r-md);
  /* نسبت ثابت لازم است: با height:100% تصویرِ مربع بلندتر از کارت
     می‌شود و تاج سر و چانه بریده می‌شود. */
  aspect-ratio: 16 / 11;
  height: auto;
  align-self: center;
  overflow: hidden;
}

.psy-person-card .psy-avatar img { height: 100%; object-fit: cover; object-position: center 32%; }

@media (max-width: 640px) {
  /* ماکاپ صفحه ۸ خودش موبایل است و ردیف افقی را نگه می‌دارد */
  .psy-person-card { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-3); }
  .psy-person-card .psy-avatar { max-height: 150px; }
  .psy-person-card__name { font-size: var(--fs-small); }
}

/* ==========================================================================
   ۱۹. مراحل — صفحه ۹§۴
   ========================================================================== */

.psy-stepper { display: grid; gap: var(--sp-3); }

.psy-step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

/* خط نقطه‌چین عمودی که مدال‌ها را به هم وصل می‌کند */
.psy-step:not(:last-child)::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--sp-5) + 31px);
  inset-block-start: calc(50% + 30px);
  width: 0;
  height: calc(100% - 60px + var(--sp-3));
  border-inline-start: 2px dotted var(--line);
}

.psy-step .psy-medallion { position: relative; z-index: 1; }
.psy-step > span > * { display: block; }
.psy-step__title { display: block; font-weight: 700; color: var(--brand); margin-block-end: 2px; }
.psy-step__desc { display: block; font-size: var(--fs-small); color: var(--muted); }

@media (max-width: 640px) {
  .psy-step { padding: var(--sp-4); gap: var(--sp-3); }
  .psy-step:not(:last-child)::after { inset-inline-start: calc(var(--sp-4) + 23px); }
  .psy-step .psy-medallion { width: 48px; height: 48px; }
  .psy-step .psy-medallion svg { width: 24px; height: 24px; }
}

/* ==========================================================================
   ۲۰. آکاردئون — صفحه ۹§۶
   ========================================================================== */

.psy-accordion { display: grid; gap: var(--sp-3); }

.psy-accordion details {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}

.psy-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  font-size: var(--fs-small);
  cursor: pointer;
  list-style: none;
}

.psy-accordion summary::-webkit-details-marker { display: none; }

.psy-accordion summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  /* مرز فیزیکی، نه منطقی: inline-end در RTL سمت چپ است و شِوران را
     به‌جای پایین، به چپ می‌چرخاند. */
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t);
  color: var(--brand);
}

.psy-accordion details[open] summary::after { transform: rotate(-135deg) translateY(2px); }

.psy-accordion__body {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-small);
  color: var(--muted);
}

/* ==========================================================================
   ۲۱. صفحه ۲ — نمودار سه‌ضلعی و فهرست تیک‌دار
   ========================================================================== */

.psy-checklist { display: grid; gap: var(--sp-4); }

.psy-checklist > * {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}

.psy-checklist svg { order: -1; width: 20px; height: 20px; color: var(--brand); flex: none; margin-block-start: 5px; }

.psy-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}

@media (max-width: 1023px) {
  .psy-pair { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۲۲. صفحه ۶ — مقاله‌ی ویژه، فهرست مقالات، خبرنامه
   ========================================================================== */

.psy-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--band-cream);
}

/* در RTL ستون ۱ سمت راست است؛ ماکاپ عکس را چپ می‌گذارد */
.psy-featured__media { grid-column: 2; grid-row: 1; overflow: hidden; }
.psy-featured__body { grid-column: 1; grid-row: 1; }
.psy-featured__media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; }

.psy-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: clamp(20px, 2.6vw, 36px);
}

.psy-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--brand);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.psy-badge svg { width: 15px; height: 15px; }

.psy-featured__body p { color: var(--muted); }

@media (max-width: 767px) {
  .psy-featured { grid-template-columns: 1fr; }
  .psy-featured__media { grid-column: 1; grid-row: 1; }
  .psy-featured__body { grid-column: 1; grid-row: 2; }
  .psy-featured__media img { min-height: 0; aspect-ratio: 16 / 9; }
}

.psy-article-list { display: grid; gap: var(--sp-3); }

.psy-article {
  display: grid;
  /* ستون منعطف باید متن باشد. قبلاً آخر بود و ردیف را با ۶۵۰ پیکسل
     فضای خالی می‌کشید و بوکمارک وسط می‌ماند. */
  grid-template-columns: minmax(0, 1fr) 190px 40px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

/* بوکمارک در انتهای چپ */
.psy-article__mark { grid-column: 3; justify-self: end; color: var(--brand); line-height: 0; }
.psy-article__mark svg { width: 20px; height: 20px; }

.psy-article__img { grid-column: 2; }
.psy-article__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); }

.psy-article__body { grid-column: 1; min-width: 0; }
.psy-article__body h3 { font-size: var(--fs-lead); margin-block-end: var(--sp-2); }
.psy-article__body p { font-size: var(--fs-small); color: var(--muted); margin-block-end: var(--sp-3); }

.psy-article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--muted);
}

.psy-article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.psy-article__meta svg { width: 15px; height: 15px; }

.psy-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-block-end: var(--sp-5);
}

.psy-list-head a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); }
.psy-list-head svg { width: 14px; height: 14px; }

@media (max-width: 767px) {
  .psy-article { grid-template-columns: minmax(0, 1fr) 130px; }
  .psy-article__mark { display: none; }
}

@media (max-width: 480px) {
  .psy-article { grid-template-columns: 1fr; }
  .psy-article__img { grid-column: 1; grid-row: 1; }
  .psy-article__body { grid-column: 1; grid-row: 2; }
}

.psy-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: var(--sp-5);
  overflow: hidden;
  padding: clamp(20px, 2.5vw, 34px);
  border-radius: var(--r-lg);
  background: var(--band-tint);
}

.psy-newsletter__art { order: 1; }
.psy-newsletter__body { order: 2; }
.psy-newsletter__body p { color: var(--muted); margin-block-end: var(--sp-4); }

.psy-newsletter__form { display: flex; gap: var(--sp-3); }

.psy-newsletter__form label { flex: 1 1 auto; position: relative; display: flex; align-items: center; }

.psy-newsletter__form input {
  width: 100%;
  min-height: 50px;
  padding: 12px 22px 12px 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
}

.psy-newsletter__form svg {
  position: absolute;
  inset-inline-end: 18px;
  width: 18px;
  height: 18px;
  color: var(--muted);
}

@media (max-width: 767px) {
  .psy-newsletter { grid-template-columns: 1fr; }
  .psy-newsletter__art { display: none; }
  .psy-newsletter__form { flex-direction: column; }
  .psy-newsletter__form .psy-btn { width: 100%; }
}

/* ==========================================================================
   ۲۳. صفحه ۱۰ — تماس
   ========================================================================== */

.psy-contact-cards { display: grid; gap: var(--sp-3); }

.psy-contact-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.psy-contact-card__label { display: block; font-weight: 700; color: var(--heading); }
.psy-contact-card__value { display: block; font-size: var(--fs-small); color: var(--muted); min-height: 1.6em; }
.psy-contact-card__chev { width: 18px; height: 18px; color: var(--brand); }

.psy-contact-list {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding-inline: var(--sp-5);
}

.psy-contact-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-block-end: 1px solid var(--line-soft);
}

.psy-contact-list__row:last-child { border-block-end: 0; }

.psy-contact-list__label { display: block; font-weight: 700; color: var(--heading); font-size: var(--fs-small); }
.psy-contact-list__value { display: block; font-size: var(--fs-small); color: var(--muted); min-height: 1.6em; }

.psy-form {
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: var(--r-lg);
  background: var(--band-mist);
}

.psy-form h2 {
  display: inline-block;
  margin-block-end: var(--sp-5);
  padding-block-end: var(--sp-2);
  border-block-end: 3px solid var(--brand);
  font-size: var(--fs-h3);
}

.psy-field { position: relative; display: flex; align-items: center; margin-block-end: var(--sp-3); }

.psy-field input,
.psy-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 20px 13px 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
}

.psy-field textarea {
  min-height: 110px;
  border-radius: var(--r-md);
  padding-block: 14px;
  resize: vertical;
}

.psy-field input::placeholder,
.psy-field textarea::placeholder { color: var(--muted); }
.psy-field input:focus, .psy-field textarea:focus { border-color: var(--brand); outline: none; }

.psy-field__icon {
  position: absolute;
  inset-inline-end: 18px;
  width: 18px;
  height: 18px;
  color: var(--muted);
  pointer-events: none;
}

.psy-field--area .psy-field__icon { inset-block-start: 16px; }

.psy-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
}

.psy-map__body { order: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.psy-map__media { order: 2; }
.psy-map__media a { display: block; }

.psy-map__media img,
.psy-map__media iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.psy-map__head { display: flex; align-items: center; gap: var(--sp-2); }
.psy-map__head svg { width: 20px; height: 20px; color: var(--brand); }
.psy-map__head h2 { font-size: var(--fs-h3); }
.psy-map__address { font-size: var(--fs-small); color: var(--muted); min-height: 1.6em; }

/* اسناد OpenStreetMap طبق پروانه‌ی ODbL الزامی است */
.psy-map__credit {
  margin-block-start: var(--sp-2);
  font-size: 11px;
  color: var(--muted);
  text-align: start;
}

@media (max-width: 767px) {
  .psy-map { grid-template-columns: 1fr; }
  /* عنوان «آدرس ما» باید بالای نقشه بماند */
  .psy-map__body { order: 1; }
  .psy-map__media { order: 2; }
}

/* ==========================================================================
   ۲۴. صفحه ۱۱ — پروفایل و لینک بازگشت
   ========================================================================== */

.psy-profile {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 45%);
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: var(--band-cream);
}

/* در RTL، order 1 سمت راست می‌نشیند و ماکاپ عکس را همان‌جا می‌خواهد */
.psy-profile__media { position: relative; z-index: 1; order: 1; }
.psy-profile__body { position: relative; z-index: 1; order: 2; }

/* ماکاپ عکس را تقریباً مربع می‌کشد؛ ۴/۵ کارت را ۱.۵ برابر بلند می‌کرد */
.psy-profile__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--r-lg);
}

.psy-profile__role { font-size: var(--fs-lead); color: var(--muted); margin-block-start: var(--sp-2); }
.psy-profile__body .psy-rule { margin-inline: 0; }

.psy-profile__facts { margin-block-start: var(--sp-4); }

/* ترتیب DOM «مدال، بعد متن» است، پس ستون اول باید auto باشد نه 1fr.
   با minmax(0,1fr) auto ستونِ پهن به مدال می‌رسید و متن در ستونِ باریکِ
   سمت چپ گیر می‌کرد — فاصله‌ی زیاد بین آیکن و متن، که LTR به نظر می‌رسید. */
.psy-profile__facts > * {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: 1px solid rgba(11, 52, 64, .08);
  font-size: var(--fs-small);
}

.psy-profile__facts > *:last-child { border-block-end: 0; }

@media (max-width: 767px) {
  .psy-profile { grid-template-columns: 1fr; }
  .psy-profile__media { order: 1; }
  .psy-profile__body { order: 2; }
  .psy-profile__media img { aspect-ratio: 4 / 3; }
}

/* عنوان کارت با مدال در انتهای راست */
.psy-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-3);
}

.psy-card-head h2 { flex: 1 1 auto; font-size: var(--fs-h3); }
.psy-card-head .psy-medallion { order: -1; }

.psy-backlink {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--brand);
}

.psy-backlink svg { width: 15px; height: 15px; }

.psy-backlink--bar {
  display: flex;
  width: 100%;
  justify-content: flex-end;   /* در RTL یعنی لبه‌ی چپ نوار، مثل ماکاپ */
  padding: var(--sp-4) var(--sp-5);
  background: var(--band-mist);
  border-radius: var(--r-md);
}

/* ==========================================================================
   ۲۵. فوتر — مشتق‌شده، هیچ ماکاپی ندارد
   ========================================================================== */

.psy-footer {
  margin-block-start: var(--section-gap);
  padding-block: var(--sp-8) var(--sp-5);
  /* پیش‌تر این تصویر با صفتِ style روی خودِ <footer> می‌نشست. وقتی فوتر
     قالبِ المنتور شد، آن سبک به یک فایل CSS منتقل شد و مسیرِ نسبیِ
     پیش‌نمایش از آنجا اشتباه حل می‌شد — زمینه ۴۰۴ می‌گرفت. حالا مسیر
     نسبت به همین فایل است و همه‌جا درست است. */
  background: var(--dark) url('../img/footer-art.jpg') right center / cover no-repeat;
  color: rgba(255, 255, 255, .82);
}

.psy-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.psy-footer__brand { display: flex; align-items: center; gap: var(--sp-3); }
.psy-footer__brand img { width: 56px; height: 56px; }
.psy-footer__brand strong { color: #fff; font-size: var(--fs-lead); display: block; }
.psy-footer__brand span { font-size: var(--fs-caption); }

.psy-footer__about { margin-block-start: var(--sp-4); font-size: var(--fs-small); max-width: 46ch; }

.psy-footer h2 { color: #fff; font-size: var(--fs-lead); margin-block-end: var(--sp-4); }

.psy-footer__links { display: grid; gap: var(--sp-3); }
.psy-footer__links a { color: rgba(255, 255, 255, .82); font-size: var(--fs-small); }
.psy-footer__links a:hover { color: #fff; }

.psy-footer__bottom {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid rgba(255, 255, 255, .16);
  font-size: var(--fs-caption);
  text-align: center;
}

@media (max-width: 767px) {
  .psy-footer__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ==========================================================================
   ۲۶. اصلاحات دور دوم — پس از بازبینی بصری
   ========================================================================== */

/* قاب پهن‌تر برای سربرگ‌هایی که در ماکاپ تا نزدیک لبه می‌روند */
.psy-container--wide { max-width: 1400px; }

/* کارت هم‌پوشانِ صفحه ۲: در دسکتاپ متن راست و مدال چپ، در موبایل روی هم */
/* ماکاپ دسکتاپ و تبلت مدال را سمت راست کارت می‌گذارد؛
   در RTL یعنی ستون اول. */
.psy-overlap-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}

.psy-overlap-card .psy-medallion { grid-column: 1; grid-row: 1; }
.psy-overlap-card > div { grid-column: 2; grid-row: 1; }

@media (max-width: 640px) {
  .psy-overlap-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  /* مدال زیر متن می‌نشیند، نه کنارش — متن به ستون ۱۶۰ پیکسلی فشرده نشود */
  .psy-overlap-card .psy-medallion { grid-column: 1; grid-row: 2; }
  .psy-overlap-card > div { grid-column: 1; grid-row: 1; }
}

/* سربرگ راست‌چین — ماکاپ موبایلِ صفحه ۷ */
@media (max-width: 640px) {
  .psy-page-header--start,
  .psy-page-header--start .psy-page-header__inner { text-align: start; }
  .psy-page-header--start .psy-rule,
  .psy-page-header--start .psy-ornament { margin-inline: 0; justify-content: flex-start; }
}

/* این بلوک حذف شد. از ماکاپِ تبلتِ صفحه‌ی «درباره» گرفته شده بود، ولی
   هفت ماکاپِ دیگر در همین بازه (روانکاوان ۸۶۴، زوج‌ها ۷۰۶، دوره‌ها ۹۴۱،
   شروع درمان ۹۴۱، کودک ۸۳۴، مقالات ۸۵۳، تماس ۹۴۱) دکمه را سمت **راست**
   می‌کشند. همان ترتیبِ ≤۱۰۲۳ برای همه اعمال می‌شود. */

/* دکمه‌های نوار پایانی زیر متن، نه روی هنر */
.psy-band__actions { flex: 1 1 100%; justify-content: flex-start; }

@media (min-width: 768px) {
  .psy-band__actions { flex: 0 0 auto; justify-content: flex-end; }
}

/* ریتم: فاصله‌ی بخش‌ها در ماکاپ یکنواخت نیست */
.psy-section--after-cards { margin-block-start: var(--sp-6); }
.psy-section--flush { margin-block-start: var(--sp-4); }

/* ==========================================================================
   ۲۷. اصلاحات دور سوم — پس از بازبینی دوم پنج صفحه و بازبینی اول شش صفحه
   ========================================================================== */

/* نمودار سه‌ضلعی صفحه ۲: اضلاع با SVG کشیده می‌شوند و رئوس مطلق می‌نشینند،
   تا برچسب‌ها روی خطوط نیفتند و نسبت مثلث در هر عرضی حفظ شود. */
.psy-triangle {
  position: relative;
  display: block;
  aspect-ratio: 200 / 176;
  /* width لازم است: در آیتم گرید، margin-inline:auto جلوی stretch را
     می‌گیرد و چون همه‌ی فرزندها absolute هستند عرض صفر می‌شود. */
  width: 100%;
  max-width: 320px;
  /* برچسب رئوس پایین absolute است و از کادر بیرون می‌زند؛ جا برایش باز می‌شود */
  margin: 0 auto var(--sp-8);
  padding: 0;
  /* مختصات رئوس فیزیکی‌اند؛ با RTL نباید آینه شوند.
     متن هر برچسب خودش دوباره rtl می‌شود. */
  direction: ltr;
}

.psy-triangle__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--brand);
  opacity: .35;
}

.psy-triangle__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 32%;
  text-align: center;
  direction: rtl;
  transform: translate(-50%, -50%);
}

.psy-triangle__node--top   { top: 7%; left: 50%; }
.psy-triangle__node--start { top: 86%; left: 18%; }
.psy-triangle__node--end   { top: 86%; left: 82%; }

.psy-triangle__core {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  direction: rtl;
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--heading);
  line-height: 1.6;
}

.psy-triangle__label { font-size: 11.5px; line-height: 1.5; color: var(--brand); font-weight: 700; }
.psy-triangle .psy-medallion { width: 40px; height: 40px; }
.psy-triangle .psy-medallion svg { width: 19px; height: 19px; }

/* اسلایدر فشرده — ردیف چهره‌های صفحه ۲: بندانگشتی و نام، بدون سمت */
.psy-carousel--compact .psy-carousel__rail { grid-auto-columns: calc((100% - var(--sp-4) * 4) / 5); }
.psy-carousel--compact .psy-avatar-card { padding: var(--sp-3); }
.psy-carousel--compact .psy-avatar-card__role { display: none; }
.psy-carousel--compact .psy-avatar-card__name { font-size: var(--fs-caption); }

@media (max-width: 1023px) {
  .psy-carousel--compact .psy-carousel__rail { grid-auto-columns: calc((100% - var(--sp-3) * 2) / 3); }
}

@media (max-width: 767px) {
  .psy-carousel--compact .psy-carousel__rail { grid-auto-columns: 44%; }
}

/* آیکن‌های تزئینی داخل ستون هنرِ نوار — جایگزین تصویر، وقتی تصویری نیست */
.psy-band__art--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--brand);
  opacity: .5;
}

.psy-band__art--icon svg { width: clamp(48px, 7vw, 86px); height: auto; }

/* جای‌نگهدار نقشه — به‌جای مستطیل رنگیِ بی‌معنی */
.psy-map__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--brand-faint);
  color: var(--muted);
  text-align: center;
  padding: var(--sp-4);
}

.psy-map__placeholder svg { width: 30px; height: 30px; color: var(--brand); opacity: .6; }

/* نوار باریک صفحه ۳: دکمه به لبه‌ی چپ می‌چسبد */
.psy-band--slim { justify-content: space-between; }
.psy-band--slim .psy-btn-row { margin-inline-start: auto; }

/* فاصله‌ی کارت‌های دوره با ریتم بخش هماهنگ شود */
.psy-path-cards--tall { gap: var(--sp-5); }

/* مدال کارت مشورت اولیه کنار متن، نه در دو سر نوار */
.psy-band--cream.psy-band--split { justify-content: flex-start; gap: var(--sp-5); }
.psy-band--cream.psy-band--split .psy-band__inner { flex: 1 1 320px; }

/* آیکن‌های «شیوه‌های برگزاری» داخل مدال، مثل بقیه‌ی صفحه‌ها.
   انتخابگرِ فرزندِ مستقیم نیست: در المنتور این svg داخل ویجت HTML
   می‌نشیند و `> svg` دیگر به آن نمی‌خورد. هر کارت فقط همین یک svg را
   دارد، پس نتیجه در پیش‌نمایش عوض نمی‌شود. */
.psy-mode-card svg {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 15px;
  border-radius: 50%;
  background: var(--brand-wash);
}

/* نوارهای پایانی: دکمه‌ها در موبایل روی هم و تمام‌عرض، مثل ماکاپ.
   با align-items: center هر دکمه به اندازه‌ی متنِ خودش جمع می‌شد و
   کنارش فضای خالی می‌ماند. */
@media (max-width: 640px) {
  .psy-band .psy-btn-row { flex-direction: column; align-items: stretch; }
  .psy-band .psy-btn-row .psy-btn { width: 100%; }
}

/* نمودار و متنِ کنارش: در موبایل روی هم، وگرنه مثلث به ستون ۱۲۰ پیکسلی
   فشرده می‌شود و برچسب‌ها روی هم می‌افتند. */
.psy-diagram-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: center;
}

@media (max-width: 767px) {
  .psy-diagram-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ۲۸. نقش‌های گیاهی — از فوتیج اصلی، داخل خودِ قالب
   ==========================================================================
   ماکاپ‌ها روی کارت‌ها و نوارهای کِرِم یک واترمارک برگ دارند. قبلاً این کار
   با <img> نیمه‌شفاف انجام می‌شد که درز عمودی می‌ساخت و بعد کلاً حذف شد.

   حالا نقش‌ها از خودِ فایل‌های فوتیج می‌آیند، به‌عنوان زمینه‌ی کامل (cover)
   و از داخل `assets/img/` — نه از `design/`. دو دلیل:
     ۱. `design/` داخل زیپ قالب نمی‌رود؛ ارجاع به آن روی سرور می‌شکست.
     ۲. نقش تزئینی نباید به کتابخانه‌ی رسانه و پاس دستی بعد از ایمپورت
        وابسته باشد. فقط عکس‌های محتوایی {{ASSET:}} می‌گیرند.
   ========================================================================== */

/* برگ به‌عنوان یک فایل جدا: با pattern-cream کامل، روی کارت‌های باریک
   مقیاسِ cover برگ را یا حذف می‌کرد یا غول‌پیکر پشت متن می‌انداخت. */
.psy-band--cream,
.psy-page-header--cream,
.psy-profile {
  background-color: var(--band-cream);
  background-image: url('../img/leaf-left.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto 64%;
}

/* سربرگ صفحه کوتاه و پهن است؛ با ۶۴٪ برگ خیلی ریز و کم‌رنگ می‌ماند */
.psy-page-header--cream { background-size: auto 108%; }

@media (max-width: 640px) {
  .psy-page-header--cream { background-size: auto 62%; background-position: left bottom; }
}

/* pattern-tint.jpg و pattern-dark.jpg نقشی ندارند — رنگِ تختِ ساده‌اند و هر دو
   خارج از پالت (#DCEBFE بنفش‌آبی و #0C3440 که --heading است نه --dark).
   حذف شدند؛ رنگ از توکن می‌آید. فقط pattern-footer.jpg نقشِ برگ دارد و می‌ماند. */
.psy-band--sky {
  background-image: url('../img/pattern-sky.jpg');
  background-size: cover;
  /* برگ در انتهای چپِ فایل است؛ با موقعیتِ پیش‌فرضِ center روی عرض موبایل
     کاملاً بریده می‌شد و نقش اصلاً دیده نمی‌شد. */
  background-position: left center;
}
.psy-band--dark  { background-image: url('../img/pattern-footer.jpg'); background-size: cover; background-position: left center; }
.psy-footer      { background-image: url('../img/pattern-footer.jpg'); }

.psy-page-header--botanical { background-image: none; }

/* برگ‌ها در فایل فوتیج سمت راست‌اند ولی ماکاپ آن‌ها را سمت چپ می‌خواهد،
   پس همان تصویر آینه می‌شود. background-image را نمی‌شود مستقیم آینه کرد. */
.psy-page-header--botanical::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../img/pattern-botanical.jpg') center / cover no-repeat;
  transform: scaleX(-1);
  pointer-events: none;
  /* ماکاپ برگ‌ها را خیلی کم‌رنگ می‌کشد؛ با کدریِ کامل روی متن می‌افتند
     و خوانایی را می‌برند. */
  opacity: .42;
}

/* `--cream-wide` حذف شد: فایل `مستطیل شیری رنگ.png` خودش یک پله‌ی
   تُنالیته وسطش دارد و روی نوار یک درز عمودی می‌انداخت. این نوارها حالا
   همان چیدمانِ ستون‌برگِ بخش ۳۱ را می‌گیرند، مثل نوار کِرِمِ صفحه اول. */


/* واترمارک روی کارت‌های ساده‌ی کِرِم (بدون کلاس نوار) */
.psy-pattern {
  background-image: url('../img/pattern-cream.jpg');
  background-size: cover;
  background-position: center;
}



/* ==========================================================================
   ۳۰. اسلایدر «روانکاوان مجموعه» — کارت وسط برجسته
   ==========================================================================
   ماکاپ `صفحه اول/4.png`: کارت میانی کامل و بزرگ، دو کارت کناری کوچک‌تر و
   از لبه‌های صفحه بریده. ریلِ اسکرولیِ معمولی این را نمی‌سازد چون همه‌ی
   کارت‌ها هم‌اندازه‌اند و از ابتدای ریل شروع می‌شوند.
   ========================================================================== */

@media (max-width: 767px) {
  /* ریل باید اسکرول‌شدنی بماند. padding کناری لازم است تا کارت اول و آخر
     هم بتوانند وسط بایستند. */
  .psy-carousel--spotlight .psy-carousel__rail {
    padding-inline: 12%;
    scroll-padding-inline: 12%;
  }

  .psy-carousel--spotlight .psy-carousel__rail > * {
    scroll-snap-align: center;
    transform: scale(.9);
    transform-origin: center;
    opacity: .78;
    transition: transform var(--t), opacity var(--t), box-shadow var(--t);
  }

  /* کارت وسطِ ریل — با اسکریپت مشخص می‌شود */
  .psy-carousel--spotlight .psy-carousel__rail > .is-active {
    transform: none;
    opacity: 1;
    box-shadow: var(--sh-raise);
  }
}

@media (prefers-reduced-motion: reduce) {
  .psy-carousel--spotlight .psy-carousel__rail > * { transition: none; }
}

/* ==========================================================================
   ۳۱. نوار کِرِم در دسکتاپ — چیدمان دوستونه
   ==========================================================================
   ماکاپ این کارت فقط موبایل است. کشیدنِ همان چیدمانِ وسط‌چین روی عرض ۱۴۴۰
   یک ستون باریک متن وسطِ یک کادر خیلی پهن می‌سازد: یک‌سوم راست کاملاً خالی
   و برگ در انتهای چپ بی‌ارتباط با متن معلق می‌ماند.

   طبق قاعده‌ی سند شروع کار، از صفحه ۲ مشتق می‌شود: متن در ستون راست و
   عنصر تصویری لنگرِ ستون چپ. برگ بزرگ می‌شود و به لبه‌ی کارت می‌چسبد.
   ========================================================================== */

@media (min-width: 1024px) {
  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) {
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30%);
    align-items: center;
    gap: clamp(24px, 3vw, 48px);
    text-align: start;
    /* برگ حالا ستون خودش را دارد و دیگر واترمارکِ معلق نیست */
    background-image: none;
  }

  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) .psy-band__inner {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
  }

  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) .psy-btn-row {
    position: relative;
    z-index: 1;
  }

  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) .psy-band__inner p {
    margin-inline: 0;
    max-width: 58ch;
  }

  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) .psy-btn-row {
    justify-content: flex-start;
  }

  /* شکستِ خطِ اجباریِ زیرعنوان از ماکاپ موبایل می‌آید؛ در این عرض فقط
     یک سطر نصفه و فضای خالی می‌سازد. */
  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) .psy-lead br {
    display: none;
  }

  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo) .psy-lead {
    font-size: clamp(17px, 1.5vw, 21px);
  }

  /* لایه‌ی برگ تمام‌بلید است، نه یک آیتمِ گرید.
     به‌صورت ستونِ گرید، تصویر در لبه‌ی ستون **بریده** می‌شد و یک پله‌ی
     عمودی می‌ساخت (اندازه‌گیری: پرش ۶.۳ واحد روشنایی در ۳۲.۹٪ عرض).
     حالا چیزی آن را نمی‌بُرد و فقط ستونِ خالیِ گرید جا برایش باز می‌کند. */
  .psy-band--cream:not(.psy-band--slim):not(.psy-band--split):not(.psy-band--photo)::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url('../img/leaf-left.png') left center / auto 118% no-repeat;
    opacity: .9;
    pointer-events: none;
  }
}

/* بخشی که تصویرش از بالای نوار بیرون می‌زند، به فضای امن نیاز دارد.
   margin روی خودِ نوار از داخل container بیرون collapse می‌کند و اثری ندارد؛
   پس padding روی section گذاشته می‌شود. */
.psy-section--overhang { padding-block-start: var(--sp-5); }

@media (max-width: 640px) {
  .psy-section--overhang { padding-block-start: 0; }
}

/* فوتر در موبایل: بلوک برند تمام‌عرض، دو ستون لینک کنار هم.
   با یک ستون، «مسیرها» و «انستیتو» پشت سر هم می‌آمدند و یک فهرست
   بلندِ به‌هم‌چسبیده می‌ساختند. */
@media (max-width: 767px) {
  .psy-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
  }

  .psy-footer__grid > :first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   ۳۲. صفحه‌ی شروع درمان — پرکردن فضای خالیِ دسکتاپ
   ==========================================================================
   هر سه بخش یک مشکل داشتند: ردیف تمام‌عرض با یک ستون محتوا در یک سمت و
   ۶۰۰ تا ۹۰۰ پیکسل فضای مرده در سمت دیگر. ماکاپ این صفحه فقط موبایل است،
   پس طبق قاعده‌ی سند شروع کار از صفحه ۲ و ۷ مشتق می‌شود.
   ========================================================================== */

@media (min-width: 768px) {
  /* کارت «مشورت اولیه»: مدال کوچک بود و ستون چپ عملاً خالی می‌ماند.
     بزرگ‌شدنش ستون را لنگر می‌کند بدون اینکه عنصر تازه‌ای اختراع شود. */
  .psy-band--cream.psy-band--split .psy-medallion--lg {
    width: 148px;
    height: 148px;
  }

  .psy-band--cream.psy-band--split .psy-medallion--lg svg {
    width: 62px;
    height: 62px;
  }

  .psy-band--cream.psy-band--split .psy-medallion--lg {
    margin-inline-end: clamp(20px, 3vw, 48px);
  }
}

@media (min-width: 1024px) {
  /* چهار پله در دو ستون — تک‌ستونه ۹۰۰ پیکسل فضای خالی می‌ساخت */
  .psy-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  /* خط نقطه‌چینِ عمودی فقط در حالت تک‌ستونه معنی دارد؛ در دو ستون
     پله‌ها را به هم وصل نمی‌کند و فقط نویز است. */
  .psy-step:not(:last-child)::after { display: none; }

  /* پرسش‌های رایج: ردیفِ ۱۱۵۰ پیکسلی برای یک سطر پرسش خیلی پهن است و
     میانه‌اش خالی می‌ماند. دو ستون هم جواب نمی‌دهد چون سه آیتم است و یکی
     تنها می‌ماند، و باز شدن یکی ستون دیگر را می‌پراند. پس عرض محدود می‌شود. */
  .psy-accordion {
    max-width: 860px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   ۳۳. کارت «مشورت اولیه» — بازگشت به خودِ ماکاپ
   ==========================================================================
   دو انحراف از ماکاپ باعث عجیب‌شدنِ این کارت شده بود:

   ۱. نقش برگ. ماکاپ این کارت را **کِرِمِ ساده** می‌کشد، بدون هیچ واترمارکی.
      برگ از قاعده‌ی عمومیِ .psy-band--cream به اینجا هم رسیده بود و مدال
      دقیقاً رویش می‌افتاد.
   ۲. در موبایل مدال زیر دکمه می‌رفت و تنها می‌ماند. ماکاپِ این صفحه خودش
      موبایل است و مدال را کنارِ متن، سمت چپ، وسطِ ارتفاع می‌کشد.
   ========================================================================== */

.psy-band--cream.psy-band--split {
  background-image: none;
  align-items: center;
}

/* در همه‌ی عرض‌ها ردیف می‌ماند — همان‌طور که ماکاپ می‌کشد */
@media (max-width: 640px) {
  .psy-band--cream.psy-band--split {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--sp-4);
  }

  .psy-band--cream.psy-band--split .psy-band__inner { flex: 1 1 auto; min-width: 0; }

  .psy-band--cream.psy-band--split .psy-medallion--lg {
    flex: none;
    width: 78px;
    height: 78px;
    margin-inline-end: 0;
  }

  .psy-band--cream.psy-band--split .psy-medallion--lg svg { width: 34px; height: 34px; }

  .psy-band--cream.psy-band--split .psy-btn-row { justify-content: flex-start; }
}

/* ==========================================================================
   ۳۴. صفحه‌ی روانکاوان — پنل کِرِم و کارت راهنما
   ==========================================================================
   ماکاپ `صفحه روانکاوان.png`: سربرگ، فیلد جست‌وجو و ردیف چیپ‌ها همگی داخل
   **یک** پنل کِرِم‌اند، نه سه بخش جدا روی زمینه‌ی صفحه.
   ========================================================================== */

.psy-page-header--panel {
  text-align: center;
  padding-block-end: clamp(20px, 2.6vw, 34px);
}

.psy-page-header--panel .psy-page-header__inner { margin-block-end: var(--sp-4); }

.psy-page-header__search {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
}

.psy-page-header__chips {
  position: relative;
  z-index: 1;
  justify-content: center;
  margin-block-start: var(--sp-4);
}

/* کارت راهنمای پایان صفحه.
   ماکاپ: تصویر ستون راست، عنوان و متن ستون چپ، و دو دکمه در یک ردیف
   در پایین — نه دکمه‌های روی هم و نه آیکن وسط متن. */
.psy-helper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-4) clamp(24px, 4vw, 56px);
  text-align: start;
}

.psy-helper__art {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: clamp(120px, 15vw, 190px);
  color: var(--brand);
  opacity: .85;
}

.psy-helper__art svg { width: 100%; height: auto; }

.psy-helper__body { grid-column: 2; grid-row: 1; }
.psy-helper__body p { margin-inline: 0; max-width: 52ch; }

/* دکمه‌ها یک ردیف، از لبه‌ی راستِ ستون متن — مثل ماکاپ */
.psy-helper__actions {
  grid-column: 2;
  grid-row: 2;
  margin-block-start: 0;
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .psy-helper {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: var(--sp-4);
  }

  .psy-helper__body { grid-column: 1; grid-row: 1; }
  .psy-helper__body p { margin-inline: auto; }
  .psy-helper__art { grid-column: 1; grid-row: 2; width: 150px; }
  .psy-helper__actions { grid-column: 1; grid-row: 3; justify-content: center; }
}

/* ==========================================================================
   ۳۵. صفحه‌ی تماس — ستون‌بندی دسکتاپ و تصویر گلدان به‌عنوان زمینه
   ==========================================================================
   ماکاپ این صفحه فقط موبایل است. تک‌ستونه‌کردنِ همان چیدمان روی ۱۴۴۰ باعث
   می‌شد هر کارت ~۱۰۰۰ پیکسل فضای مرده وسطش داشته باشد.
   ========================================================================== */

@media (min-width: 768px) {
  .psy-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* فهرست چهارردیفه: دو ستون، خط مویی فقط بین ردیف‌های هم‌ستون */
  .psy-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }

  .psy-contact-list__row:nth-last-child(2) { border-block-end: 0; }
}

/* تصویر گلدان زمینه‌ی خودِ کارت است و تا لبه می‌رود — نه یک پنل گردگوشه‌ی
   جدا که کنار متن بنشیند. ماکاپ متن و دکمه‌ها را روی همین زمینه می‌گذارد. */
.psy-band--vase {
  /* تصویرِ گلدان لبه‌ی راستش محو شده (tools/make-vase.js)، پس در هر عرضی
     داخل زمینه‌ی کارت حل می‌شود. نسخه‌ی قبلی بنرِ کاملِ ۳:۱ بود که روی
     کارتِ ۵:۱ تمام عرض را نمی‌گرفت و کارت شبیه دو کارت دیده می‌شد. */
  background-color: #F4F7F7;
  background-image: url('../img/art-vase-mint.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.psy-band--vase .psy-band__inner,
.psy-band--vase .psy-btn-row { position: relative; z-index: 1; }

@media (min-width: 768px) {
  .psy-band--vase {
    display: grid;
    /* در RTL مقدار end یعنی «چپ». با end محتوا به سمت گلدان می‌چسبید و
       سمت راستِ کارت ~۳۶۰ پیکسل خالی می‌ماند. start یعنی راست. */
    justify-items: start;
    text-align: start;
    gap: var(--sp-4);
    /* در RTL این یعنی سمت چپ: متن و دکمه‌ها از روی گلدان کنار می‌روند */
    padding-inline-end: clamp(150px, 24%, 330px);
  }

  .psy-band--vase .psy-band__inner { max-width: 48ch; }
  .psy-band--vase .psy-band__inner p { margin-inline: 0; }
  .psy-band--vase .psy-btn-row { margin-block-start: 0; }
}

@media (max-width: 767px) {
  /* در عرض باریک، cover تصویر را عمودی می‌بُرد و گلدان بزرگ‌تر از حد
     می‌شود؛ لبه‌ی چپ نگه داشته می‌شود تا سوژه در کادر بماند. */
  .psy-band--vase { background-size: cover; background-position: 22% center; }
}

/* نوار باریک ساده است و واترمارک ندارد. این قاعده باید بعد از بخش ۲۸
   بیاید، وگرنه background-image همان بخش رویش را می‌گیرد. */
.psy-band--slim,
.psy-band--tint.psy-band--slim { background-image: none; }

/* ==========================================================================
   ۳۶. فرم تماس در دسکتاپ — شبکه به‌جای چهار ردیف تمام‌عرض
   ==========================================================================
   نام، تلفن و ایمیل هرکدام یک مقدار کوتاه‌اند و به عرض ۱۱۰۰ پیکسل نیازی
   ندارند. تنها فیلدی که واقعاً طول می‌خواهد متنِ پیام است.
   ========================================================================== */

@media (min-width: 768px) {
  .psy-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
  }
}

/* در عرض دسکتاپ هر سه فیلد کوتاه در یک ردیف جا می‌شوند و دیگر
   نصفه‌ی خالی کنار ایمیل نمی‌ماند. */
@media (min-width: 1024px) {
  .psy-form__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {

  /* نام و تلفن کنار هم؛ ایمیل هم‌عرضِ همان ستون‌ها می‌ماند */
  .psy-form__grid .psy-field { margin-block-end: 0; }

  /* فقط متن پیام تمام‌عرض */
  .psy-form__grid .psy-field--area { grid-column: 1 / -1; }

  /* --block دکمه را تمام‌عرض می‌کند؛ در دسکتاپ لازم نیست */
  .psy-form__grid .psy-form__submit { grid-column: 1 / -1; justify-self: start; width: auto; }
}

/* نوار هیئت علمی — تصویر گلدان و کتاب‌ها زمینه‌ی کارت است.
   قبلاً یک <img> داخل پنل گردگوشه‌ی جدا بود و کارت شبیه دو کارت دیده می‌شد،
   همان مشکلی که نوار گلدانِ صفحه‌ی تماس داشت. */
.psy-band--books {
  background-color: #E9EDEB;
  background-image: url('../img/art-vase-books.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.psy-band--books .psy-band__inner,
.psy-band--books .psy-btn-row { position: relative; z-index: 1; }

@media (min-width: 768px) {
  .psy-band--books {
    display: grid;
    /* در RTL مقدار end یعنی «چپ». با end محتوا به سمت گلدان می‌چسبید و
       سمت راستِ کارت ~۳۶۰ پیکسل خالی می‌ماند. start یعنی راست. */
    justify-items: start;
    text-align: start;
    gap: var(--sp-4);
    padding-inline-end: clamp(150px, 26%, 340px);
  }

  .psy-band--books .psy-band__inner { max-width: 46ch; }
  .psy-band--books .psy-band__inner p { margin-inline: 0; }
  .psy-band--books .psy-btn-row { margin-block-start: 0; }
}

@media (max-width: 767px) {
  .psy-band--books { background-size: cover; background-position: 18% center; }
}

/* ==========================================================================
   ۳۷. «سه مسیر برای والدین» در دسکتاپ — سه ستون به‌جای سه ردیف
   ==========================================================================
   ماکاپ این بخش فقط موبایل است و ردیف‌های تختِ خط‌جدا می‌کشد. همان چیدمان
   روی ۱۴۴۰ سه ردیفِ ۱۱۵۰ پیکسلی می‌سازد که متنِ کوتاهشان به لبه‌ی راست
   می‌چسبد و ~۹۰۰ پیکسل سمت چپ خالی می‌ماند.

   ترکیبِ سه‌ستونه‌ی «مدال بالا، عنوان، توضیح، همه وسط‌چین» عیناً همان
   چیزی است که .psy-feature-cards در صفحه اول دارد؛ قطعه‌ی تازه‌ای
   اختراع نمی‌شود.
   ========================================================================== */

@media (min-width: 768px) {
  .psy-path-cards--flat {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .psy-path-cards--flat .psy-path-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4);
    text-align: center;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-block-end: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
  }

  .psy-path-cards--flat .psy-path-card:last-child {
    border-block-end: 1px solid var(--line-soft);
  }

  .psy-path-cards--flat .psy-path-card__text { text-align: center; }

  .psy-path-cards--flat .psy-path-card__title { margin-block-end: var(--sp-2); }
}

/* ==========================================================================
   ۳۸. صفحه‌ی مقالات — کارت ویژه و نوار خبرنامه
   ========================================================================== */

/* در ماکاپ، عکسِ کارت ویژه لبه‌ی تیز ندارد؛ داخل کِرِمِ کارت محو می‌شود.
   همان کاری که سربرگ دونیمه‌ی صفحه ۲ می‌کند. */
@media (min-width: 768px) {
  .psy-featured__media img {
    mask-image: linear-gradient(to right, #000 58%, transparent 98%);
  }
}

/* نوار خبرنامه: تصویر گلدانِ شیشه‌ای زمینه‌ی نوار است، نه یک ستون <img>.
   فایل درست `تصویر پایین صفحه.jpg` است — نسخه‌ی قبلی سربرگ گیاهیِ صفحه‌ی
   هیئت علمی را گذاشته بود. */
.psy-newsletter--art {
  grid-template-columns: minmax(0, 1fr);
  background-color: #E4EEF2;
  background-image: url('../img/art-vase-glass.jpg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
}

.psy-newsletter--art .psy-newsletter__body { position: relative; z-index: 1; }

@media (min-width: 768px) {
  .psy-newsletter--art {
    justify-items: start;   /* در RTL یعنی راست */
    /* در RTL این یعنی سمت چپ: متن از روی گلدان کنار می‌رود */
    padding-inline-end: clamp(150px, 26%, 340px);
    /* نوار باید بلندتر باشد وگرنه گلدان که ارتفاعش را پر می‌کند ریز
       می‌ماند و مثل یک تصویرِ جدا کنار متن دیده می‌شود.
       نسبت ماکاپ حدود ۳.۷:۱ است، نه ۵:۱. */
    padding-block: clamp(36px, 4.4vw, 64px);
  }
}

@media (max-width: 767px) {
  .psy-newsletter--art { background-size: cover; background-position: 14% center; }
}

/* ==========================================================================
   ۳۹. نوارهای تصویردار در موبایل — پرده‌ی خوانایی
   ==========================================================================
   با `cover` در عرض باریک، سوژه بزرگ می‌شود و متن رویش می‌افتد. یک پرده‌ی
   نیمه‌شفاف هم‌رنگِ خودِ نوار، تصویر را نگه می‌دارد ولی متن را خوانا می‌کند.
   ========================================================================== */

@media (max-width: 767px) {
  .psy-band--vase::after,
  .psy-band--books::after,
  .psy-newsletter--art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .psy-band--vase::after      { background: rgba(244, 247, 247, .74); }
  .psy-band--books::after     { background: rgba(233, 237, 235, .74); }
  .psy-newsletter--art::after { background: rgba(228, 238, 242, .74); }

  /* محتوا باید بالای پرده بماند */
  .psy-band--vase > *,
  .psy-band--books > *,
  .psy-newsletter--art > * { position: relative; z-index: 1; }
}

/* بخش ۴۰ حذف شد: سربرگ‌ها تمام‌بلید نمی‌شوند.
   یک دور بر اساس گزارش داور تمام‌عرض شدند، ولی ماکاپ‌ها همه‌شان را داخل
   قاب و با گوشه‌ی گرد می‌کشند. کارفرما تأیید کرد. */

/* ==========================================================================
   ۴۱. ارتفاع کنترل‌ها در بازه‌ی تبلت
   ==========================================================================
   داور اندازه‌گیری کرد که در ۷۰۰–۹۵۰ چیپ‌ها، دکمه‌ها و فیلد جست‌وجو حدود
   ۲۰–۳۵٪ کوچک‌تر از ماکاپ‌اند (چیپ ۳۶ در برابر ۵۸، دکمه ۴۲ در برابر ۶۲،
   فیلد ۴۶ در برابر ۶۰). مقیاس تایپ اصلاح شد؛ اینها ارتفاعِ ثابت دارند.
   ========================================================================== */

@media (min-width: 700px) and (max-width: 1023px) {
  .psy-btn { min-height: 54px; padding-block: 14px; }
  .psy-btn--sm { min-height: 46px; padding-block: 11px; }
  .psy-chip { min-height: 52px; padding-block: 12px; }
  .psy-search__field input { min-height: 58px; }
  .psy-field input { min-height: 56px; }
}

/* ==========================================================================
   ۴۲. اصلاحات صفحه‌محورِ گزارش بازبینی
   ========================================================================== */

/* ۲۳: صفحه‌ی تماس در ماکاپ تک‌ستونه است، نه دوستونه. کارت‌ها و فیلدها
   تا ۱۰۲۴ روی هم می‌مانند و دکمه‌ی ارسال تمام‌عرض است. */
@media (max-width: 1023px) {
  .psy-contact-cards,
  .psy-contact-list { grid-template-columns: 1fr; }
  .psy-form__grid { grid-template-columns: 1fr; }
  .psy-form__grid .psy-form__submit { width: 100%; justify-self: stretch; }
}

/* ۲۴: ردیف‌های تماس همان مدالِ تیره‌ی پُر را دارند که دو کارت بالا دارند */
.psy-contact-list__row .psy-medallion {
  background: var(--dark);
  color: #fff;
  width: 62px;
  height: 62px;
}

.psy-contact-list__row .psy-medallion svg { width: 30px; height: 30px; }

/* ۱۲: ماکاپ صفحه‌ی «درباره» زیر عنوان بخش‌ها خط نمی‌کشد — فقط زیر h1 هیرو */
.psy-page-about .psy-section-title .psy-rule,
.psy-page-about .psy-list-head .psy-rule { display: none; }

/* ۱۵: پاراگراف سربرگ هیئت علمی در ماکاپ وسط‌چین است */
.psy-page-header--botanical .psy-page-header__inner p { text-align: center; }

/* ۲۷: کارت‌های «از کدام مسیر» هم‌قد می‌شوند؛ زیرنویسِ تک‌سطری یکی را
   کوتاه‌تر می‌کرد. */
.psy-path-cards .psy-path-card { align-content: center; }
.psy-path-card__sub { min-height: 2.9em; }

@media (min-width: 641px) {
  .psy-path-card__sub { min-height: 0; }
}

/* قاعده‌ی [hidden] مرورگر با هر قاعده‌ی display از خودِ ما شکست می‌خورد
   (مثلاً .psy-person-card { display: grid }). بدون این، اسکریپت فیلتر
   ویژگی hidden را می‌گذاشت ولی کارت‌ها همچنان دیده می‌شدند. */
[hidden] { display: none !important; }

/* پیام «چیزی پیدا نشد» برای فیلتر و جست‌وجو */
.psy-empty {
  margin-block-start: var(--sp-5);
  padding: var(--sp-5);
  text-align: center;
  color: var(--muted);
  background: var(--brand-faint);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}

/* ==========================================================================
   ۳۹. برگه‌ی نمایه‌ی روانکاو
   ==========================================================================
   ماکاپ این دو مقدار را درون‌خطی می‌نوشت. قالبِ PHP نباید style بنویسد،
   پس همان‌ها اینجا کلاس شدند.
   ========================================================================== */

.psy-columns--3 { --cols: 3; }

.psy-column__icon { width: 30px; height: 30px; color: var(--brand); }

/* ==========================================================================
   ۴۰. کارت‌های مطلب — شبکه
   ==========================================================================
   ماکاپ مطالب را ردیف‌های افقی می‌کشید. مشتری کارتِ مربع‌وار در شبکه
   خواست، با نویسنده و چکیده و لینکِ واقعی. بقیه‌ی زبانِ طرح (شعاع،
   حاشیه، سایه، رنگ متن) همان کارت‌های دیگر است.
   ========================================================================== */

.psy-article-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

@media (max-width: 1023px) { .psy-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .psy-article-grid { grid-template-columns: 1fr; } }

.psy-article-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  color: inherit;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}

.psy-article-card:hover {
  box-shadow: var(--sh-raise);
  border-color: var(--line);
  color: inherit;
}

.psy-article-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* کارتِ بی‌تصویر نباید کوتاه‌تر از بقیه بیفتد */
.psy-article-card__img--empty {
  background: var(--band-mist) url('../img/leaf-left.png') center / cover no-repeat;
  opacity: .9;
}

.psy-article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  flex: 1 1 auto;
}

.psy-article-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: var(--fs-caption);
  color: var(--brand);
}

.psy-article-card__cat svg { width: 15px; height: 15px; }

.psy-article-card__title {
  font-size: var(--fs-lead);
  font-weight: 700;
  color: var(--heading);
  line-height: var(--lh-tight);
}

.psy-article-card__excerpt {
  font-size: var(--fs-small);
  color: var(--muted);
  margin: 0;
}

/* نویسنده ته کارت می‌ماند تا ردیفِ کارت‌ها هم‌تراز بمانند */
.psy-article-card__by {
  margin-block-start: auto;
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--fs-caption);
  color: var(--muted);
}

/* ── برگه‌ی خودِ مطلب ── */
.psy-post__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.psy-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-block-start: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--muted);
}

.psy-post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.psy-post__meta svg { width: 16px; height: 16px; color: var(--brand); }

/* ==========================================================================
   ۴۱. متغیرهای پوسته‌ی مادر
   ==========================================================================
   Archi رنگِ اصلی‌اش زرد (#FAB702) است و همان را روی لینک‌ها در حالت‌های
   :active و :visited، دکمه‌ی «بازگشت به بالا» و نوارِ بارگذاری می‌گذارد.
   بعضی‌شان فقط لحظه‌ای دیده می‌شوند — موقع کلیک تا وقتی صفحه‌ی بعد
   بیاید — و به همین دلیل در بازبینیِ ایستا پیدا نمی‌شدند. به‌جای
   دنبال‌کردنِ تک‌تک، خودِ متغیر به پالتِ ما برمی‌گردد.
   ========================================================================== */

:root {
  --archi-color-primary: var(--brand);
  --archi-color-link: var(--brand);
  --archi-color-link-hover: var(--dark);
  --archi-heading-color: var(--heading);
}

/* حالت‌های لینک صریح نوشته می‌شوند تا هیچ حالتی به پیش‌فرضِ پوسته‌ی
   مادر برنگردد. */
a:visited { color: var(--brand); }
a:hover,
a:focus,
a:active { color: var(--dark); }

/* لینک‌های داخلِ زمینه‌های تیره و کارت‌ها رنگِ خودشان را دارند و نباید
   با قاعده‌ی بالا عوض شوند. */
.psy-footer a:visited,
.psy-band--dark a:visited { color: inherit; }

.psy-article-card:visited,
.psy-article-card:hover,
.psy-article-card:focus,
.psy-article-card:active { color: inherit; }

/* صفحه‌بندیِ فهرستِ مطالب */
.psy-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-6);
}

.psy-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--heading);
  font-size: var(--fs-small);
}

.psy-pager .page-numbers:hover { border-color: var(--brand); color: var(--brand); }

.psy-pager .page-numbers.current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}