/**
 * HERO SECTION
 * وابسته به: styles/base/tokens.css
 * استفاده در PHP: template-parts/sections/hero.php
 */

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

/* تصمیم طراحی: نور محو طلایی گوشه بالا-راست، استعاره از نور طلوع که
   از پشت وارد قاب صفحه می‌شود؛ تنها گرادیان اتمسفریک این صفحه. */
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 85% 0%, rgba(244, 123, 32, 0.32), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
  min-width: 0;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-16);
  }
}

.hero__content {
  text-align: center;
}

@media (min-width: 1024px) {
  .hero__content {
    text-align: right;
  }
}

.hero__heading {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .hero__heading {
    font-size: var(--font-size-4xl);
  }
}

.hero__subheading {
  font-size: var(--font-size-md);
  color: var(--color-text-muted);
  max-width: 34ch;
  line-height: var(--line-height-relaxed);
  margin: 0 auto var(--space-8);
}

@media (min-width: 1024px) {
  .hero__subheading {
    margin-inline: 0 auto; /* در RTL این یعنی چسبیدن به سمت راست */
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

@media (max-width: 479.98px) {
  .hero {
    padding-block: var(--space-12) var(--space-16);
  }

  .hero__inner,
  .toloee-menu__inner,
  .story__inner,
  .why-toloee__inner,
  .sobhaneh-experience__inner,
  .contact__inner,
  .site-footer__inner {
    padding-inline: var(--space-4);
  }

  .hero__heading {
    font-size: clamp(2rem, 10vw, var(--font-size-3xl));
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .hero__actions {
    justify-content: flex-start; /* در RTL یعنی شروع از راست */
  }
}

/* --- قاب تصویر --- */

.hero__media {
  display: flex;
  justify-content: center;
}

.hero__frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  /* تصمیم طراحی: گوشه‌های بالای بزرگ برای شبیه‌سازی طاق‌های سنتی
     سفره‌خانه/چایخانه ایرانی؛ نه یک کارت مستطیل ساده. */
  border-radius: 200px 200px 24px 24px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-lg);
  background:
    radial-gradient(80% 70% at 50% 30%, rgba(255, 196, 61, 0.55), transparent 70%),
    var(--color-cream-100);
}

.hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 1024px) {
  .hero__frame {
    max-width: 420px;
  }
}