@charset "UTF-8";
/* ==========================================================================
   کارت ویزیت آنلاین
   --------------------------------------------------------------------------
   این فایل تنها CSS صفحهٔ کارت است و عمداً از site.css جداست: کارت اغلب
   پشت یک QR و روی داده همراه باز می‌شود، پس هر کیلوبایت اضافه همان‌جا
   دیده می‌شود.

   طراحی موبایل‌اول است؛ روی رایانه کارت در ستونی به عرض ۴۲۰ پیکسل
   وسط صفحه می‌نشیند، چون کارت ویزیت ذاتاً یک ستون باریک است و کشیدنش
   تا عرض نمایشگر فقط بدش می‌کند.
   ========================================================================== */

:root {
  --forest: #073B2E;
  --forest-2: #0C4E3C;
  --forest-3: #052821;
  --ink: #08241C;
  --body-c: #3E544C;
  --muted: #586E65;
  --gold: #D3A826;
  --gold-text: #8A680E;
  --gold-3: #E8CE7C;
  --gold-soft: #F3E6BE;
  --paper: #FCFDFC;
  --mist: #EDF3F0;
  --line: #DCE6E1;
  --line-dark: rgba(232, 206, 124, .22);
  --ease: cubic-bezier(.22, .7, .28, 1);
  --frame: 20px 4px 20px 4px;
  --frame-sm: 14px 3px 14px 3px;
  --sh: 0 2px 6px rgba(7, 59, 46, .07), 0 18px 44px rgba(7, 59, 46, .1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

.vc-body {
  margin: 0;
  background: var(--mist);
  color: var(--body-c);
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* روی گوشی‌هایی با بریدگی، محتوا زیر نوار وضعیت نرود */
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
}

:where(a) { color: inherit; text-decoration: none; }
:where(img) { max-width: 100%; height: auto; display: block; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ---------- قاب کارت ---------- */
.vc {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-radius: var(--frame);
  box-shadow: var(--sh);
  overflow: hidden;
  /* عرض صفر برای فرزندان گرید/فلکس: بدون این، یک نشانی بلند بدون فاصله
     کل کارت را از صفحه بیرون می‌زند. */
  min-width: 0;
}

/* ================= سر کارت ================= */
.vc__head { position: relative; padding: 2rem 1.4rem 1.5rem; text-align: center; }

.vc__name {
  margin: .9rem 0 .25rem;
  font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.vc__job { margin: 0; font-size: .97rem; font-weight: 700; color: var(--gold-text); }
.vc__dept { margin: .2rem 0 0; font-size: .86rem; color: var(--muted); }

.vc__about {
  margin: 0;
  padding: 1.1rem 1.4rem;
  font-size: .92rem;
  line-height: 2;
  color: var(--body-c);
  border-top: 1px solid var(--line);
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: anywhere;
}

/* عکس */
.vc__photo { margin-inline: auto; object-fit: cover; }
.vc__photo--round { width: 118px; height: 118px; border-radius: 50%; border: 3px solid var(--gold-3); }
.vc__photo--sm { width: 92px; height: 92px; }
.vc__photo--frame { width: 118px; height: 118px; border-radius: var(--frame); border: 2px solid var(--gold); }

/* ---------- کلاسیک ---------- */
.vc__head--classic {
  background: linear-gradient(160deg, var(--forest-2), var(--forest));
  color: #fff;
  padding-bottom: 1.8rem;
  overflow: hidden;
}
.vc__head--classic .vc__name { color: #fff; }
.vc__head--classic .vc__job { color: var(--gold-3); }
.vc__head--classic .vc__dept { color: rgba(255, 255, 255, .72); }
.vc__mark { position: absolute; inset-inline-end: -70px; bottom: -60px; width: 230px; opacity: .08; pointer-events: none; }
.vc__mark img { width: 100%; }

/* ---------- مینیمال ---------- */
.vc__head--minimal { background: var(--paper); border-bottom: 1px solid var(--line); }
.vc__rule { display: block; width: 46px; height: 3px; margin: .6rem auto .7rem; background: var(--gold); border-radius: 2px; }
.vc__head--minimal .vc__photo { border-color: var(--line); }

/* ---------- شبانه ---------- */
.vc--dark { background: var(--forest-3); }
.vc--dark .vc__about { color: rgba(255, 255, 255, .78); border-top-color: var(--line-dark); }
.vc__head--dark { background: var(--forest-3); color: #fff; }
.vc__head--dark .vc__name { color: var(--gold-3); }
.vc__head--dark .vc__job { color: #fff; }
.vc__head--dark .vc__dept { color: rgba(255, 255, 255, .62); }

/* ---------- طلایی ---------- */
.vc__head--gold { padding-top: 0; background: var(--paper); }
.vc__band { display: block; height: 96px; background: linear-gradient(135deg, var(--gold), var(--gold-3)); }
.vc__head--gold .vc__photo { margin-top: -62px; border-color: #fff; box-shadow: var(--sh); }
.vc__head--gold .vc__name { margin-top: .7rem; }

/* ---------- دوتکه ---------- */
.vc__head--split { padding: 0; }
.vc__banner { aspect-ratio: 3 / 2; overflow: hidden; background: var(--forest); }
.vc__banner img { width: 100%; height: 100%; object-fit: cover; }
.vc__plate {
  position: relative;
  margin: -2.2rem 1rem 0;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--paper);
  border-radius: var(--frame-sm);
  box-shadow: var(--sh);
  text-align: center;
}
.vc__plate .vc__name { margin-top: 0; }
.vc__head--split + .vc__about { margin-top: 1rem; border-top: 0; }

/* ---------- نشان ---------- */
.vc__head--badge { background: var(--mist); border-bottom: 1px solid var(--line); }
.vc__ring {
  display: grid; place-items: center; width: 142px; height: 142px;
  margin: 0 auto; border-radius: 50%;
  background: conic-gradient(var(--gold), var(--gold-3), var(--gold));
  padding: 5px;
}
.vc__head--badge .vc__photo--round { width: 132px; height: 132px; border: 4px solid var(--mist); }

/* ================= ردیف‌های تماس ================= */
.vc__acts { padding: 1rem 1rem .25rem; }
.vc__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
  /* minmax(0, 1fr) و نه ستون ضمنیِ auto.
     ستون ضمنی به اندازهٔ min-content فرزندهایش بزرگ می‌شود، و
     min-content هر ردیف را متنِ nowrapِ .vc__rowtext em تعیین می‌کند.
     نتیجه: روی عرض ۳۷۵، ردیف‌ها ۳۸۵ پیکسل می‌شدند در فهرستی ۳۱۱
     پیکسلی و ۷۴ پیکسل از سمت شروع بیرون می‌زدند. چون .vc خودش
     overflow:hidden دارد، صفحه افقی اسکرول نمی‌خورد و هیچ هشداری
     هم دیده نمی‌شد — فقط شمارهٔ همراه «۰۹» ابتدایش را از دست می‌داد
     و ایمیل از وسط بریده می‌شد، بی‌آنکه حتی سه‌نقطه نشان داده شود.
     با سقف صفر، ردیف به عرض فهرست محدود می‌ماند و
     text-overflow: ellipsis کار خودش را می‌کند. */
  grid-template-columns: minmax(0, 1fr);
}
.vc__list li { min-width: 0; }

.vc__list a {
  display: flex; align-items: center; gap: .7rem;
  /* ۵۶ پیکسل ارتفاع: انگشت باید بدون دقت بزند. این صفحه عملاً فقط با
     انگشت استفاده می‌شود. */
  min-height: 56px;
  padding: .55rem .8rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--frame-sm);
  transition: .25s var(--ease);
  min-width: 0;
}
.vc__list a:hover, .vc__list a:focus-visible { background: #fff; border-color: var(--gold); }

.vc__ico {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 11px 3px 11px 3px;
  color: var(--forest);
}
.vc__rowtext { flex: 1; min-width: 0; line-height: 1.6; }
/* ۰٫۷۴rem = ۱۱٫۸ پیکسل. برچسب ردیف («همراه»، «ایمیل») روی گوشی
   زیر کف خوانایی ۱۲ پیکسل می‌افتاد. */
.vc__rowtext b { display: block; font-size: .75rem; font-weight: 700; color: var(--muted); }
.vc__rowtext em {
  display: block; font-style: normal; font-size: .95rem; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vc__go { flex: none; color: var(--gold-text); }

.vc--dark .vc__list a { background: rgba(255, 255, 255, .05); border-color: var(--line-dark); }
.vc--dark .vc__list a:hover { background: rgba(255, 255, 255, .1); }
.vc--dark .vc__ico { background: var(--forest); border-color: var(--line-dark); color: var(--gold-3); }
.vc--dark .vc__rowtext b { color: rgba(255, 255, 255, .6); }
.vc--dark .vc__rowtext em { color: #fff; }

/* ================= دکمه‌ها و QR ================= */
.vc__tools { padding: .9rem 1rem 1.1rem; display: grid; gap: .6rem; }

.vc__btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .6rem 1rem;
  font-weight: 700; font-size: .95rem;
  border-radius: var(--frame-sm);
  border: 1px solid transparent;
  transition: .25s var(--ease);
}
.vc__btn--main { background: var(--forest); color: #fff; }
.vc__btn--main:hover { background: var(--forest-2); }
.vc--dark .vc__btn--main { background: var(--gold); color: var(--forest-3); }

.vc__qr { border: 1px solid var(--line); border-radius: var(--frame-sm); overflow: hidden; }
.vc__qr summary {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .5rem 1rem;
  font-weight: 700; font-size: .9rem; color: var(--forest);
  cursor: pointer; list-style: none; background: var(--mist);
}
.vc__qr summary::-webkit-details-marker { display: none; }
.vc__qrbox { padding: 1rem; text-align: center; background: #fff; }
.vc__qrbox img { margin: 0 auto; width: 200px; height: 200px; }
.vc__code {
  margin: .7rem 0 0; font-size: .75rem; color: var(--muted);
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}
.vc--dark .vc__qr { border-color: var(--line-dark); }
.vc--dark .vc__qr summary { background: rgba(255, 255, 255, .05); color: var(--gold-3); }

/* ================= پای کارت ================= */
.vc__foot {
  padding: 1.2rem 1.4rem 1.4rem;
  background: var(--forest);
  color: rgba(255, 255, 255, .7);
  text-align: center;
  font-size: .78rem;
  line-height: 1.9;
}
.vc__foot img { width: 128px; margin: 0 auto .6rem; }
.vc__foot p { margin: 0; }

/* ================= دسترس‌پذیری و چاپ ================= */
:where(a, summary):focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .vc-body { background: #fff; padding: 0; }
  .vc { box-shadow: none; max-width: none; }
  .vc__qr { display: none; }
  .vc__head--classic, .vc__head--dark, .vc__foot { background: #fff !important; color: #000 !important; }
  .vc__head--classic .vc__name, .vc__head--dark .vc__name { color: #000 !important; }
}