/* =========================================================================
   ab-hero — هیرو «درباره ما» · طرح Zaban-Negar-About.dc.html
   بردکرامب + چیپ + عنوان گرادیانتی + متن + دکمه‌ها | عکس ۴:۵ با دو بج شناور
   وابسته به: zn-base.css ، ab-base.css   ·   تعامل: zn-effects.js
   ========================================================================= */

.zn-scope .abhr.ab-sec {
  overflow: hidden;
  padding-block: var(--ab-py, clamp(40px, 6vw, 84px));
}
.zn-scope .abhr.is-wash {
  background:
    radial-gradient(760px 440px at 84% -12%, var(--zn-wash1), transparent 60%),
    radial-gradient(620px 400px at 6% 108%, var(--zn-wash2), transparent 62%),
    var(--zn-bg0);
}

.zn-scope .abhr-split {
  display: grid;
  grid-template-columns: var(--abhr-cols, 1.12fr .88fr);
  gap: var(--abhr-gap, 44px);
  align-items: center;
}
.zn-scope .abhr-txt { min-width: 0; }

/* ---------- بردکرامب ---------- */
.zn-scope .abhr-crumb {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-size: var(--abhr-crumb-fs, 12.5px);
  font-weight: 600;
  color: var(--abhr-crumb-c, var(--zn-t5));
}
.zn-scope .abhr-crumb a { color: var(--abhr-crumb-c, var(--zn-t5)); transition: color .2s ease; }
.zn-scope .abhr-crumb a:hover { color: var(--abhr-crumb-c-h, var(--zn-soft)); }
.zn-scope .abhr-crumb .sep { opacity: .8; }
.zn-scope .abhr-crumb .cur { color: var(--abhr-crumb-cur, var(--zn-soft)); }

/* ---------- عنوان ---------- */
.zn-scope .abhr-h1 {
  margin: var(--abhr-h1-mt, 18px) 0 0;
  font-size: var(--abhr-h1-fs, clamp(34px, 5vw, 56px));
  font-weight: 900;
  line-height: 1.25;
  color: var(--abhr-h1-c, var(--zn-t1));
}
/* بخش گرادیانتی عنوان. تکیه بر background-clip:text — در همهٔ مرورگرهای
   امروزی پشتیبانی می‌شود و در نبودش متن با رنگ ارثی دیده می‌ماند. */
.zn-scope .abhr-h1 .grad {
  background: var(--abhr-grad, linear-gradient(120deg, var(--zn-crim), var(--zn-rose) 55%, var(--zn-gold)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.zn-scope .abhr-lead {
  margin: var(--abhr-lead-mt, 20px) 0 0;
  font-size: var(--abhr-lead-fs, 15.5px);
  line-height: var(--abhr-lead-lh, 2.1);
  color: var(--abhr-lead-c, var(--zn-t4));
  max-width: var(--abhr-lead-w, 54ch);
}
.zn-scope .abhr-lead p { margin: 0 0 12px; color: inherit; font: inherit; }
.zn-scope .abhr-lead p:last-child { margin-bottom: 0; }

.zn-scope .abhr-acts {
  display: flex; flex-wrap: wrap;
  gap: var(--abhr-btn-gap, 12px);
  margin-top: var(--abhr-acts-mt, 26px);
}

/* ---------- ستون تصویر ---------- */
.zn-scope .abhr-img { position: relative; min-width: 0; }

.zn-scope .abhr-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--abhr-frame-r, 26px);
  aspect-ratio: var(--abhr-ratio, 4 / 5);
  background: var(--zn-img);
  border: 1px solid rgba(var(--zn-line), .14);
  box-shadow: var(--abhr-frame-sh, 0 30px 70px rgba(120, 55, 30, .24));
}
.zn-scope .abhr-frame img,
.zn-scope .abhr-frame .zn-img-ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* سایهٔ تیرهٔ پایین عکس تا بج پایین خوانا بماند. */
.zn-scope .abhr-frame::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--abhr-scrim, linear-gradient(0deg, rgba(20, 10, 6, .5), transparent 55%));
  pointer-events: none;
}

/* ---------- بج‌های شناور ---------- */
.zn-scope .abhr-b1 {
  position: absolute;
  top: var(--abhr-b1-top, -16px);
  left: var(--abhr-b1-left, -14px);
  display: flex; align-items: center; gap: 11px;
  background: var(--abhr-b1-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--abhr-b1-c, #FFF);
  border-radius: var(--abhr-b1-r, 16px);
  padding: var(--abhr-b1-p, 11px 16px);
  box-shadow: var(--abhr-b1-sh, 0 16px 36px rgba(225, 29, 72, .36));
  animation: ab-badgepop var(--abhr-b1-dur, 4.6s) ease-in-out infinite;
  z-index: 2;
}
.zn-scope .abhr-b1 .k { font-size: var(--abhr-b1-k-fs, 11px); font-weight: 700; opacity: .9; }
.zn-scope .abhr-b1 .v { font-size: var(--abhr-b1-v-fs, 19px); font-weight: 900; }

.zn-scope .abhr-b2 {
  position: absolute;
  bottom: var(--abhr-b2-bottom, -18px);
  right: var(--abhr-b2-right, -14px);
  background: var(--abhr-b2-bg, var(--zn-glass-85));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--zn-line), .16);
  border-radius: var(--abhr-b2-r, 18px);
  padding: var(--abhr-b2-p, 16px 20px);
  box-shadow: var(--zn-cardsh);
  animation: zn-float var(--abhr-b2-dur, 5s) ease-in-out infinite;
  z-index: 2;
}
.zn-scope .abhr-b2 .k { font-size: var(--abhr-b2-k-fs, 11px); font-weight: 700; color: var(--abhr-b2-k-c, var(--zn-t5)); }
.zn-scope .abhr-b2 .v { margin-top: 2px; font-size: var(--abhr-b2-v-fs, 19px); font-weight: 900; color: var(--abhr-b2-v-c, var(--zn-soft)); }

/* ---------- واکنش‌گرا ----------
   زیر ۹۰۰ پیکسل طرح اصلی ستون‌ها را می‌شکند و ترتیب را عوض می‌کند تا
   عکس بین عنوان و متن بنشیند. همان ترتیب اینجا با order بازسازی شده. */
@media (max-width: 900px) {
  .zn-scope .abhr-split { display: flex; flex-direction: column; gap: 24px; align-items: stretch; }
  .zn-scope .abhr-txt { display: contents; }
  .zn-scope .abhr-crumb { order: 1; margin-bottom: 8px; }
  .zn-scope .abhr-chipwrap { order: 2; align-self: flex-start; }
  .zn-scope .abhr-h1 { order: 3; margin-top: 14px; }
  .zn-scope .abhr-img { order: 4; margin: 6px 0 2px; }
  .zn-scope .abhr-lead { order: 5; max-width: none; }
  .zn-scope .abhr-acts { order: 6; }

  .zn-scope .abhr-frame { aspect-ratio: var(--abhr-ratio-m, 16 / 11); }
  .zn-scope .abhr-b1 { top: 10px; left: 10px; }
  .zn-scope .abhr-b2 { bottom: 10px; right: 10px; }
}

@media (max-width: 700px) {
  .zn-scope .abhr-h1 { font-size: var(--abhr-h1-fs-m, 34px); }
  .zn-scope .abhr-b1 { padding: 9px 13px; gap: 8px; }
  .zn-scope .abhr-b1 .v { font-size: 16px; }
  .zn-scope .abhr-b2 { padding: 12px 15px; }
  .zn-scope .abhr-b2 .v { font-size: 16px; }
}

@media (max-width: 560px) {
  .zn-scope .abhr-acts a { flex: 1; text-align: center; }
}