/**
 * Bitpedia — Hero
 * نقشه (hero-map.html) به‌صورت iframe پس‌زمینه؛ تیتر/زیرتیتر/CTA روی آن.
 */

.hero-section {
  position: relative;
  /* هدر شناور است (position:fixed) و ارتفاعش را از جریان سند کم نمی‌کند؛
     این فاصله را دستی می‌دهیم تا هیرو درست از زیر منو شروع شود، نه پشتش. */
  margin-block-start: 130px;
  margin-inline: var(--space-5);
  min-height: calc(100dvh - 130px - var(--space-6));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--bg-0);
}

@media (max-width: 640px) {
  .hero-section {
    margin-block-start: 100px;
    margin-inline: var(--space-3);
    min-height: calc(100dvh - 100px - var(--space-5));
    border-radius: var(--radius-lg);
  }
}

.hero-section__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  /* روی موبایلِ خیلی کوچک نقشه فشرده می‌شود؛ محتوای اصلی همیشه اولویت دارد */
}

/* لایه‌ی تیره‌ی ملایم روی نقشه، فقط زیر محتوای متنی، تا خوانایی تضمین شود
   بدون این‌که کل نقشه تیره و کم‌رمق شود */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--bg-0) 0%, rgba(5, 7, 13, 0.55) 32%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.hero-section__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--space-11) var(--space-9);
  pointer-events: none; /* اجازه بده hover/parallax نقشه از پشت رد شود */
}

.hero-section__content {
  max-width: 42rem;
  pointer-events: auto; /* ولی خودِ محتوا (متن/دکمه) باید تعامل‌پذیر باشد */
}

/* نصف اندازه‌ی قبلی (--fs-hero بود: ۴۸–۱۰۴px) و همیشه تک‌خط — با nowrap
   تضمین می‌شود که حتی طولانی‌ترین عبارت («ارسال و دریافت حواله») نشکند. */
.hero-section__title {
  font-size: clamp(1.5rem, 0.9rem + 2.5vw, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
  min-height: calc(1.5rem * var(--lh-tight));
  white-space: nowrap;
  overflow: hidden;
}

.hero-rotator {
  display: inline-block;
  background: linear-gradient(135deg, var(--text-primary) 40%, var(--bp-blue-200));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity var(--dur-base) var(--ease-flow),
              transform var(--dur-base) var(--ease-flow);
}

.hero-rotator.is-swapping {
  opacity: 0;
  transform: translateY(10px);
}

.hero-section__subtitle {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: 34rem;
  margin-bottom: var(--space-7);
}