/* ============================================================================
   PAGES/LANDING.CSS — صفحهٔ اصلی (hero editorial + landing sections)
   ============================================================================
   مالک:      web/home.html + اینکلودهای landing
              — گام ۵ نقشهٔ مهاجرت
   وابستگی:   dazzle.css (§0 توکن‌ها، §3.12 برند، §3.14 ناوبر مشترک، §3.15 فوتر
              مشترک، btn/badge) + کامپوننت‌های landing (کاتالوگ/قیمت/نقل‌قول
              که CSS خودشان را در قالب خودشان لود می‌کنند)

   · HERO: مارک‌پ قبلی سوپِ utility تیلویند بود. این بخش همان استایل‌ها را
     عیناً — با همان مقادیر arbitrary و همان نقاط شکست 768/1024 — روی
     کلاس‌های semantic پیاده می‌کند (hero.html بازنویسی شد).
     (hero.css قدیمی، پیش‌نویسِ semantic ناتمامی بود که هرگز به مارک‌پ وصل
     نشده بود — مقادیرش با واقعیت رندرشده فرق داشت و پورت نشد.)
   · .dazzle-editorial-landing و .catalog-section: دو رول زندهٔ دیگر که فقط
     home استفاده می‌کند (از sections.css و foundation.css).
   ============================================================================ */


/* ============================================================================
   §3 — بدنهٔ لندینگ (از sections.css + foundation؛ فقط home)
   ============================================================================ */
.dazzle-editorial-landing {
  background: #f8f6ff;
  color: var(--landing-ink);
  overflow: hidden;
}

/* نوار کاتالوگ — پس‌زمینهٔ سبزِ میراث foundation که کامپوننت کاتالوگ
   بازنویسی‌اش نمی‌کند و فقط همین‌جا استفاده می‌شود */
.catalog-section {
  background: linear-gradient(180deg, var(--gray-0), #f7fbf9);
}


/* ============================================================================
   §4 — HERO EDITORIAL (پورت ۱:۱ از utilities تیلویندِ hero.html)
   Breakpoints: tablet ≥768px · desktop ≥1024px (مطابق tailwind.css)
   کلاس‌های landing-reveal / landing-delay هوک‌های بدون استایل‌اند — در مارک‌پ
   حفظ شده‌اند (JS آینده).
   ============================================================================ */
.hero-editorial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--landing-surface);
  padding: 0;
}
@media (min-width: 768px) {
  .hero-editorial { padding-top: 32px; }      /* tablet:pt-8 */
}
@media (min-width: 1024px) {
  .hero-editorial { padding-top: 0; }          /* desktop:pt-0 */
}

/* ----- پوستهٔ دوموستیون ----- */
.hero-editorial-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  direction: ltr;                              /* [direction:ltr] */
  background-image: linear-gradient(105deg, #7c58fd 0%, #7c58fd 62%, #7350f6 100%);
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 0;
}
@media (min-width: 768px) {
  .hero-editorial-shell {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 560px;
    min-height: 560px;
  }
}
@media (min-width: 1024px) {
  .hero-editorial-shell {
    height: 600px;
    min-height: 600px;
  }
}

/* ----- بخش متنی ----- */
.hero-editorial-copy {
  order: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 48px 32px 16px;                     /* pt-12 px-8 pb-4 */
  color: var(--on-purple);
  font-family: var(--font-body-en);
  text-align: left;
}
html[dir="rtl"] .hero-editorial-copy {
  font-family: var(--font-body-fa);
  text-align: right;
}
@media (min-width: 768px) {
  .hero-editorial-copy {
    order: 0;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: calc(100% - 2rem);
    max-width: none;
    margin: 0 2rem 70px auto;                  /* tablet:mr-8 mb-[70px] ml-auto */
    padding: 64px 0 24px;                      /* tablet:pt-16 px-0 pb-6 */
  }
}
@media (min-width: 1024px) {
  .hero-editorial-copy {
    width: 470px;
    max-width: calc(100% - 2rem);
    margin: auto;                              /* desktop:m-auto */
    margin-left: 2rem;                         /* desktop:ml-8 */
    padding-bottom: 32px;                      /* desktop:pb-8 */
  }
}

/* ----- تایتل ----- */
.hero-editorial-title {
  margin: 0;
  width: min(400px, 100%);
  color: var(--on-purple);
  font-size: clamp(34px, 10vw, 46px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: normal;                      /* [letter-spacing:normal] */
}
html[dir="rtl"] .hero-editorial-title {
  width: 100%;
  font-size: clamp(30px, 8vw, 40px);
  line-height: 1.3;
  font-weight: 800;                            /* rtl:font-[800] */
  letter-spacing: normal;
}
@media (min-width: 768px) {
  .hero-editorial-title {
    font-size: 54px;
    width: 450px;
  }
  html[dir="rtl"] .hero-editorial-title {
    font-size: 43px;
    width: 400px;
  }
  .hero-title-line { white-space: nowrap; }    /* tablet:whitespace-nowrap */
}
@media (min-width: 1024px) {
  .hero-editorial-title {
    width: 525px;
    font-size: clamp(40px, 4.2vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.03em;
  }
  html[dir="rtl"] .hero-editorial-title {
    width: 430px;
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.3;
    letter-spacing: normal;
  }
}
.hero-title-line {
  display: block;
  white-space: normal;
}
.hero-mark {
  padding: 0;
  color: var(--landing-lime);                  /* text-brand-lime */
  background: transparent;
  font-family: var(--font-display);            /* style اینلاین قبلی */
}

/* Persian hero: one semantic h1, two intentional lines, two brand faces. */
html[dir="rtl"] .hero-title-line--fa-intro {
  white-space: nowrap;
  font-size: clamp(21px, 7vw, 34px);
}
@media (min-width: 768px) {
  html[dir="rtl"] .hero-title-line--fa-intro {
    font-size: clamp(26px, 3.4vw, 30px);
  }
}
@media (min-width: 1024px) {
  html[dir="rtl"] .hero-title-line--fa-intro {
    font-size: clamp(32px, 3.2vw, 38px);
  }
}
html[dir="rtl"] .hero-title-line--fa-brand {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.3em;
  white-space: nowrap;
}
html[dir="rtl"] .hero-mark--fa {
  font-family: var(--font-body-fa); /* Vazirmatn */
}
html[dir="rtl"] .hero-mark--latin {
  font-family: var(--font-display); /* original Dazzle display face */
  font-size: 0.9em;
}

/* ----- لید ----- */
.hero-editorial-lead {
  margin-top: 24px;                            /* mt-6 */
  width: min(360px, 100%);
  font-size: 0.75rem;                          /* text-caption */
  line-height: 1.5;
  color: hsla(0, 0%, 100%, 0.78);              /* ltr:text-white/[0.78] */
  font-family: var(--font-body-en);
}
html[dir="rtl"] .hero-editorial-lead {
  color: hsla(0, 0%, 100%, 0.82);
  font-family: var(--font-body-fa);
}
@media (min-width: 1024px) {
  .hero-editorial-lead {
    width: 330px;                              /* desktop:w-[330px] */
    font-size: 0.875rem;                       /* desktop:text-body-sm */
    line-height: 1.7;
  }
  html[dir="rtl"] .hero-editorial-lead {
    width: 100%;                               /* rtl:desktop:w-full */
    line-height: 1.9;
  }
}

/* ----- دکمه‌های اقدام ----- */
.hero-editorial-actions {
  display: flex;
  align-items: center;
  gap: 12px;                                   /* gap-3 */
  margin-top: 24px;                            /* mt-6 */
}
html[dir="rtl"] .hero-editorial-actions {
  flex-direction: row-reverse;
  justify-content: flex-start;
}
@media (min-width: 1024px) {
  html[dir="rtl"] .hero-editorial-actions { justify-content: flex-end; } /* desktop:rtl:justify-end */
}

/* فلش دکمه (span داخل btn-lime) */
.hero-cta-arrow {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-purple);
  color: var(--brand-lime);
  font-size: 0.75rem;
  line-height: 1;
}
html[dir="rtl"] .hero-cta-arrow { transform: scaleX(-1); } /* rtl:scale-x-[-1] */

/* ----- آمار ----- */
.hero-editorial-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(350px, 100%);
  max-width: 100%;
  margin: 32px auto 0;                         /* mt-8 mx-auto */
  text-align: center;
}
@media (min-width: 768px) {
  .hero-editorial-metrics {
    width: 340px;                              /* tablet:w-[340px] */
    margin: 48px 0 0;                          /* tablet:mt-12 mx-0 */
    text-align: left;
  }
  html[dir="rtl"] .hero-editorial-metrics { text-align: right; }
}
/* divide-x divide-white/[0.28] rtl:divide-x-reverse — با پراپرتی منطقی */
.hero-editorial-metrics > * + * {
  border-inline-start: 1px solid hsla(0, 0%, 100%, 0.28);
}
.hero-metric {
  min-width: 0;
  padding: 0 1rem;                             /* px-4 */
}
.hero-metric:first-child {
  padding-inline-start: 0;                     /* first:ps-0 (first:border-s-0 با همین قاعده پوشش داده می‌شود) */
}
.hero-metric strong {
  display: block;
  color: var(--on-purple);
  font-weight: 400;                            /* font-normal */
  line-height: 1;                              /* leading-none */
  letter-spacing: -0.02em;
  font-size: clamp(26px, 2.6vw, 43px);
  font-family: var(--font-body-en);
}
html[dir="rtl"] .hero-metric strong {
  font-family: var(--font-body-fa);
  letter-spacing: normal;                      /* rtl:tracking-normal */
}
.hero-metric span {
  display: block;
  max-width: 90px;
  margin-top: 8px;                             /* mt-2 */
  color: hsla(0, 0%, 100%, 0.7);               /* text-white/70 */
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;                      /* tracking-caption */
  font-family: var(--font-body-en);
}
html[dir="rtl"] .hero-metric span {
  max-width: none;
  line-height: 1.5;
  letter-spacing: normal;
  font-family: var(--font-body-fa);
}

/* ----- تصویر ----- */
.hero-editorial-visual {
  order: 1;
  width: 100%;
  max-width: none;
  min-height: 0;
  flex: none;
  margin: 32px 0 0;                            /* mt-8 */
}
@media (min-width: 768px) {
  .hero-editorial-visual {
    order: 0;                                  /* tablet:order-none */
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    width: calc(100% - 2rem);
    max-width: none;
    flex: auto;                                /* tablet:flex-auto */
    margin: 0 auto 70px 2rem;                  /* tablet:mt-0 mx-auto mb-[70px] ml-8 */
  }
}
@media (min-width: 1024px) {
  .hero-editorial-visual {
    width: 470px;
    max-width: calc(100% - 2rem);
    margin: auto;                         /* desktop:my-auto mr-8 ml-auto */
    margin-right: 2rem;
    align-self: stretch;
    overflow: visible;
  }
}
.hero-editorial-img {
  display: block;
  width: min(420px, 78vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto;                              /* mx-auto */
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 768px) {
  .hero-editorial-img {
    width: min(510px, 100%);
    margin: 0;                                 /* tablet:mx-0 */
  }
}
@media (min-width: 1024px) {
  .hero-editorial-img {
    width: 470px;
    max-width: none;
  }
}

/* Landing-only educational introductions; no changes to existing page sections. */
.landing-learning-method {
  background: #f8f6ff;
  padding: 64px 24px 36px;
}
.landing-content-shell {
  width: min(1100px, 100%);
  margin-inline: auto;
}
.landing-content-title {
  margin: 0;
  color: #2e2753;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  line-height: 1.6;
}
.landing-learning-method .landing-content-title {
  margin-bottom: 24px;
  text-align: center;
}
.landing-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.landing-method-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid #e8e3fa;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(76 51 146 / 5%);
}
.landing-method-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 15px;
  background: #ede7ff;
  color: #7657f6;
}
.landing-method-icon svg {
  width: 23px;
  height: 23px;
}
.landing-method-card h3 {
  margin: 16px 0 8px;
  color: #362a67;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.5;
}
.landing-method-card p {
  margin: 0;
  color: #625d76;
  font-size: 0.95rem;
  line-height: 1.9;
}
.landing-placement {
  padding: 24px 24px 70px;
  background: #f8f6ff;
}
.landing-placement-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 40px;
  border: 1px solid #ddd4ff;
  border-radius: 24px;
  background: linear-gradient(110deg, #f2edff, #fff);
}
.landing-placement-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.landing-placement-copy p {
  max-width: 740px;
  margin: 8px 0;
  color: #544c70;
  font-size: 0.98rem;
  line-height: 1.9;
}
.landing-placement-copy small {
  display: block;
  color: #756e8c;
  font-size: 0.78rem;
  line-height: 1.8;
}
.landing-placement-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .landing-learning-method { padding: 48px 16px 24px; }
  .landing-method-grid { grid-template-columns: 1fr; gap: 12px; }
  .landing-method-card { padding: 20px; }
  .landing-placement { padding: 16px 16px 52px; }
  .landing-placement-shell {
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: 25px 20px;
  }
  .landing-placement-cta { text-align: center; white-space: normal; }
}