/**
 * SOBHANEH EXPERIENCE — «تجربه صبحانه طلوع»
 * وابسته به: styles/base/tokens.css
 * استفاده در PHP: template-parts/sections/sobhaneh-experience.php
 * رفتار اسکرول: js/components/sobhaneh-experience.js
 *
 * اصل کار: هیچ‌چیز به جاوااسکریپت وابسته نیست. حالت پایه (بدون JS)
 * یعنی همه‌ی آیتم‌ها کامل و ساکن نمایان‌اند. وقتی جاوااسکریپت بارگذاری
 * می‌شود، کلاس has-js روی <html> اضافه می‌شود و تازه آن‌وقت حالت اولیه‌ی
 * محو/جابه‌جا («قبل از دیده‌شدن») و جلوه‌ی «آیتم فعال جلو می‌آید» فعال
 * می‌شوند.
 */

.sobhaneh-experience {
  position: relative;
  background-color: var(--color-bg-muted);
  padding-block: var(--space-20);
  overflow: hidden;
}

.sobhaneh-experience__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ---------------------------------------------------------------
 * چیدمان دو‌ستونه (دسکتاپ): فهرست آیتم‌ها + قاب تصویری sticky
 * ------------------------------------------------------------- */

.sobhaneh-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  min-width: 0;
}

@media (min-width: 1024px) {
  .sobhaneh-stage {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    gap: var(--space-16);
  }
}

/* ---------------------------------------------------------------
 * فهرست آیتم‌ها
 * ------------------------------------------------------------- */

.sobhaneh-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .sobhaneh-items {
    gap: var(--space-20);
    /* فاصله‌ی قائم بیشتر بین آیتم‌ها در دسکتاپ یعنی هر آیتم زمان بیشتری
       وسط دید کاربر می‌ماند تا لایه‌ی مربوطه در قاب sticky دیده شود. */
    padding-block: var(--space-8);
  }
}

.sobhaneh-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);

  /* حالت اولیه‌ی پیش از دیده‌شدن؛ فقط وقتی <html> کلاس has-js دارد فعال
     می‌شود، وگرنه (بدون JS) آیتم از همان ابتدا کامل نمایان است. */
}

html.has-js .sobhaneh-item {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

html.has-js .sobhaneh-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sobhaneh-item__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-tala-500), var(--color-zereshk-700));
  color: var(--color-sofreh-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-sm);
}

.sobhaneh-item__card {
  flex: 1;
  min-width: 0;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* آیتم فعال: «کمی جلو می‌آید» — بزرگ‌نمایی و سایه‌ی عمیق‌تر، نه صرفاً
   یک تغییر رنگ کم‌رمق. */
html.has-js .sobhaneh-item.is-active .sobhaneh-item__card {
  transform: translateX(6px) scale(1.02);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  /* در RTL جهت «جلو آمدن به سمت خواننده» یعنی کمی به چپ (دورتر از قاب
     تصویری که سمت چپ نشسته)، تا حس عمق بدهد. */
  html.has-js .sobhaneh-item.is-active .sobhaneh-item__card {
    transform: translateX(-10px) scale(1.03);
  }
}

.sobhaneh-item__title {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-2);
}

.sobhaneh-item__excerpt {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.sobhaneh-item__detail {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
  overflow: hidden;
  transition:
    max-height var(--transition-base),
    color var(--transition-base);

  /* بدون جاوااسکریپت، توضیح کامل از همان ابتدا کاملاً باز و قابل‌خواندن
     است — هیچ محتوایی پشت رفتار جاوااسکریپت قایم نمی‌شود. */
  max-height: none;
}

/* توضیح تکمیلی «کارت باز می‌شود»: فقط وقتی جاوااسکریپت هست، ابتدا کمی
   جمع‌شده نمایش داده می‌شود و با رسیدن آیتم به دید هنگام اسکرول کامل باز
   می‌شود. این هیچ‌وقت hover-only نیست چون محرک، دیده‌شدن هنگام اسکرول
   است، نه هاور موس. */
html.has-js .sobhaneh-item__detail {
  max-height: 3.4em;
}

html.has-js .sobhaneh-item.is-active .sobhaneh-item__detail {
  max-height: 8em;
  color: var(--color-text);
}

/* ---------------------------------------------------------------
 * قاب تصویری sticky (فقط دسکتاپ)
 * ------------------------------------------------------------- */

.sobhaneh-visual {
  display: none;
}

@media (min-width: 1024px) {
  .sobhaneh-visual {
    display: block;
    position: sticky;
    top: var(--space-16);
    align-self: start;
  }
}

.sobhaneh-visual__frame {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background-color: var(--color-sofreh-200);
  border: 6px solid var(--color-tala-500);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* عمق ملایم شبه‌سه‌بعدی با perspective برای لایه‌های داخلی؛ بدون هیچ
     مدل سه‌بعدی واقعی یا کتابخانه‌ی سنگین. */
  perspective: 800px;
}

.sobhaneh-visual__photo {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sobhaneh-visual__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sobhaneh-visual__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(18px) scale(0.92);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.sobhaneh-visual__layer.is-active {
  opacity: 1;
  /* لایه‌ی فعال کمی «جلو می‌آید»: بزرگ‌تر و بالاتر، حس شبه‌سه‌بعدی. */
  transform: translateY(0) scale(1.06);
}

.sobhaneh-visual__progress {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.sobhaneh-visual__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  transition: background-color var(--transition-base), transform var(--transition-base);
}

.sobhaneh-visual__dot.is-active {
  background-color: var(--color-primary);
  transform: scale(1.3);
}

.sobhaneh-visual__dot.is-done {
  background-color: var(--color-accent);
}

/* ---------------------------------------------------------------
 * موبایل / تبلت: کارت‌های عمودی ساده، بدون sticky، بدون لایه‌های
 * شبه‌سه‌بعدی. هر کارت آیکون کوچک خودش را دارد.
 * ------------------------------------------------------------- */

@media (max-width: 1023.98px) {
  .sobhaneh-item {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
  }

  .sobhaneh-item__card {
    border: none;
    box-shadow: none;
    padding: 0;
  }

  html.has-js .sobhaneh-item.is-active .sobhaneh-item__card {
    transform: none;
  }

  .sobhaneh-item__detail {
    max-height: none !important;
  }
}

@media (max-width: 479.98px) {
  .sobhaneh-item {
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .sobhaneh-item__card {
    padding-inline: 0;
  }
}

/* ---------------------------------------------------------------
 * prefers-reduced-motion: نسخه‌ی بدون حرکت پیچیده
 * foundation.css به‌صورت سراسری مدت انیمیشن/ترنزیشن را تقریباً صفر
 * می‌کند؛ اینجا علاوه‌بر آن، خودِ transform های حسِ عمق را هم کاملاً
 * حذف می‌کنیم تا چیزی «می‌جهد» یا «جلو می‌آید» دیده نشود.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.has-js .sobhaneh-item,
  html.has-js .sobhaneh-item.is-visible,
  html.has-js .sobhaneh-item.is-active .sobhaneh-item__card,
  .sobhaneh-visual__layer,
  .sobhaneh-visual__layer.is-active,
  .sobhaneh-visual__dot.is-active {
    transform: none !important;
    opacity: 1 !important;
  }

  .sobhaneh-item__detail,
  html.has-js .sobhaneh-item__detail {
    max-height: none !important;
  }
}

/* نسخه‌ی فشرده: عکس فقط در هیرو دیده می‌شود؛ آیتم‌ها در یک شبکه‌ی کوتاه
   و قابل‌اسکن قرار می‌گیرند تا این بخش طول صفحه را بی‌دلیل زیاد نکند. */
.sobhaneh-visual {
  display: none !important;
}

@media (min-width: 768px) {
  .sobhaneh-stage {
    display: block;
  }

  .sobhaneh-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
    padding-block: 0;
  }

  .sobhaneh-item {
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .sobhaneh-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sobhaneh-item__card,
  html.has-js .sobhaneh-item.is-active .sobhaneh-item__card {
    transform: none;
  }
}

.sobhaneh-item__detail,
html.has-js .sobhaneh-item__detail,
html.has-js .sobhaneh-item.is-active .sobhaneh-item__detail {
  max-height: none;
}