/* Red Mammoth — Contact page (contact.html).
   Page-specific rules only; shared patterns come from css/site.css.
   Only existing design tokens are used here (navy/gold/oxblood/text-*) —
   no new colors. Card typography copied verbatim from
   panel-v2/static/css/membership.css (.offer-title/.offer-feature-item),
   same as the FAQ accordion on support.html. */

.contact-hero__grid {
  display: flex; align-items: center; gap: clamp(32px, 6vw, 72px);
}
.contact-hero__text { flex: 1; min-width: 0 }
.contact-hero__art { flex: 1; min-width: 0; display: flex; justify-content: center }

@media (max-width: 860px) {
  /* بند «موبایل: اول متن، بعد انیمیشن» — ترتیب DOM از قبل متن-اول است،
     فقط ستونی می‌شود، بدون نیاز به عوض‌کردن ترتیب. */
  .contact-hero__grid { flex-direction: column; gap: 32px }
  .contact-hero__art { order: 0 }
}

/* ---------- انیمیشن هیرو: نمودار کندل‌استیک + خط قیمت طلایی ---------- */
.contact-chart { width: 100%; max-width: 420px; height: auto }

.contact-chart .chart-line {
  fill: none; stroke: var(--color-gold); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px var(--color-gold)) drop-shadow(0 0 12px rgba(196, 163, 90, .45));
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: chart-draw 11s ease-in-out infinite alternate;
}
@keyframes chart-draw { to { stroke-dashoffset: 0 } }

.contact-chart .chart-candle {
  opacity: 0; transform: scaleY(.2);
  transform-box: fill-box; transform-origin: bottom;
  animation: chart-candle-in 11s ease-in-out infinite alternate;
}
@keyframes chart-candle-in { to { opacity: 1; transform: scaleY(1) } }

.contact-chart .chart-candle--up rect { fill: var(--color-gold) }
.contact-chart .chart-candle--up line { stroke: var(--color-gold) }
.contact-chart .chart-candle--down rect { fill: var(--color-oxblood) }
.contact-chart .chart-candle--down line { stroke: var(--color-oxblood) }
.contact-chart .chart-candle line { stroke-width: 2 }

.contact-chart .chart-candle:nth-child(2) { animation-delay: .9s }
.contact-chart .chart-candle:nth-child(3) { animation-delay: 1.8s }
.contact-chart .chart-candle:nth-child(4) { animation-delay: 2.7s }
.contact-chart .chart-candle:nth-child(5) { animation-delay: 3.6s }
.contact-chart .chart-candle:nth-child(6) { animation-delay: 4.5s }
.contact-chart .chart-candle:nth-child(7) { animation-delay: 5.4s }

@media (prefers-reduced-motion: reduce) {
  .contact-chart .chart-line { animation: none; stroke-dashoffset: 0 }
  .contact-chart .chart-candle { animation: none; opacity: 1; transform: none }
}

/* ---------- کارت‌های روش تماس / کانال‌های اجتماعی ---------- */
.contact-section-title {
  font-family: var(--font-heading); font-weight: 700; font-size: 22px; margin: 0 0 22px;
}
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px }

.contact-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  background: var(--color-navy-light); border: 1px solid rgba(196, 163, 90, .25);
  border-radius: 16px; padding: 22px; text-decoration: none; color: inherit;
  transition: border-color .2s ease;
}
.contact-card:hover, .contact-card:focus-visible { border-color: var(--color-gold) }
.contact-card__icon { width: 22px; height: 22px; color: var(--color-gold) }
/* تایپوگرافی عیناً از membership.css::.offer-card .offer-title */
.contact-card__name {
  font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: var(--color-cream);
}
/* تایپوگرافی عیناً از membership.css::.offer-feature-item */
.contact-card__sub { font-size: 13px; color: var(--text-82) }