/* hero-slider.css — استایل مشترک اسلایدر (صفحهٔ اصلی: .hs--home | سایر صفحات و پیش‌نمایش پنل: .hs--compact)
   فقط از متغیرهای --hero-1/2/3 استفاده می‌کند و برای هر کدام مقدار پیش‌فرض دارد؛ به رنگ‌های هیچ صفحه‌ای وابسته نیست. */

@property --hero-1 { syntax:'<color>'; inherits:true; initial-value:#1E8BE6 }
@property --hero-2 { syntax:'<color>'; inherits:true; initial-value:#2447C8 }
@property --hero-3 { syntax:'<color>'; inherits:true; initial-value:#3B2DB0 }

.hs { position:relative; color:#fff; font-family:inherit; --dot-ms:6500ms }
.hs[hidden] { display:none !important }
.hs-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap }
.hs-track { display:grid; touch-action:pan-y; user-select:none; -webkit-user-select:none; min-height:var(--hs-track-min,0) }

/* ---- اسلاید ---- */
.hs-slide { grid-area:1/1; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,5vw,64px); align-items:center; min-height:var(--hs-slide-min,360px); opacity:0; visibility:hidden; transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s linear .9s }
.hs-slide.is-active { opacity:1; visibility:visible; transform:none; transition-delay:0s }
.hs--slide .hs-slide[data-pos="before"] { transform:translateX(56px) }
.hs--slide .hs-slide[data-pos="after"] { transform:translateX(-56px) }
.hs-slide.img-right .hs-media { order:-1 }
.hs-slide.lay-text, .hs-slide.lay-cover, .hs-slide.no-media { grid-template-columns:1fr }
.hs-slide.lay-text { text-align:center; justify-items:center }
.hs-slide.lay-text .hs-btns { justify-content:center }
.hs-slide.lay-text .hs-desc { margin-inline:auto }
.hs-slide.lay-cover .hs-text { max-width:620px }
.hs-slide.no-media .hs-text { max-width:720px }

.hs-kicker { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:5px 14px; border-radius:999px; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.3); font-size:12.5px; font-weight:600 }
.hs-kicker::before { content:""; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,#FF8AC0,#C77DFF); flex:none }
.hs-title { font-size:clamp(26px,3.6vw,44px); line-height:1.5; font-weight:800; margin:16px 0 12px; color:inherit; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.hs-title a { color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 100% 100%/0 2px no-repeat; transition:background-size .35s }
.hs-title a:hover { background-size:100% 2px }
.hs-desc { font-size:clamp(14px,1.5vw,16.5px); line-height:2; color:rgba(255,255,255,.9); max-width:540px; margin:0 0 26px; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden }
.hs-desc a { color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:4px }
.hs-btns { display:flex; flex-wrap:wrap; gap:12px }
.hs-btn { display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 24px; border-radius:999px; font-weight:700; font-size:14.5px; text-decoration:none; color:#fff; border:1.5px solid rgba(255,255,255,.72); transition:background .25s,color .25s,transform .25s }
.hs-btn:hover { background:#fff; color:var(--hero-2,#2447C8); transform:translateY(-2px) }
.hs-btn.solid { background:#fff; color:var(--hero-2,#2447C8); border-color:#fff }
.hs-btn.solid:hover { background:#F1F4FF }
.hs-btn svg { width:18px; height:18px; flex:none; transition:transform .25s }
.hs-btn:hover svg { transform:translateX(-4px) }

/* متن تیره (برای پس‌زمینه‌های روشن) */
.hs-slide.tx-dark { color:#14193A }
.hs-slide.tx-dark .hs-desc { color:rgba(20,25,58,.82) }
.hs-slide.tx-dark .hs-kicker { background:rgba(20,25,58,.08); border-color:rgba(20,25,58,.2) }
.hs-slide.tx-dark .hs-btn { color:#14193A; border-color:rgba(20,25,58,.6) }
.hs-slide.tx-dark .hs-btn:hover { background:#14193A; color:#fff }
.hs-slide.tx-dark .hs-btn.solid { background:#14193A; color:#fff; border-color:#14193A }

/* ---- رسانه ---- */
.hs-media { position:relative; display:flex; justify-content:center; align-items:center }
.hs-media.has-cover::before { content:none }
.hs-frame { position:relative; display:block; width:fit-content; max-width:min(100%,520px); border:0; border-radius:0; background:none; box-shadow:none; overflow:visible }
.hs-frame img { display:block; width:auto; max-width:100%; height:auto; max-height:440px; object-fit:contain; border-radius:0; filter:drop-shadow(0 22px 22px rgba(8,16,80,.28)) drop-shadow(0 6px 8px rgba(8,16,80,.16)) }

.hs-illus { width:min(100%,460px); height:auto; filter:drop-shadow(0 26px 30px rgba(8,16,80,.35)) }
.hs-illus svg { width:100%; height:auto; display:block }

/* لایهٔ پس‌زمینهٔ تمام‌عرض برای چیدمان «تصویر پس‌زمینه» */
.hs-bg { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.hs-bglayer { position:absolute; inset:0; opacity:0; transition:opacity .9s ease }
.hs-bglayer.is-on { opacity:1 }
.hs-bglayer img { width:100%; height:100%; object-fit:cover; display:block }
.hs-bglayer::after { content:""; position:absolute; inset:0; background:linear-gradient(to left,rgba(8,14,70,.84) 0%,rgba(8,14,70,.5) 55%,rgba(8,14,70,.22) 100%) }
.hs-bglayer.tx-dark::after { background:linear-gradient(to left,rgba(255,255,255,.86) 0%,rgba(255,255,255,.55) 55%,rgba(255,255,255,.2) 100%) }

/* ---- کنترل‌ها ---- */
.hs-controls { display:flex; align-items:center; gap:14px; margin-top:30px }
.hs-controls[hidden], .hs-nav[hidden], .hs-dots[hidden] { display:none !important }
.hs-nav { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; padding:0; color:#fff; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.5); cursor:pointer; transition:background .25s,color .25s,transform .25s }
.hs-nav:hover { background:#fff; color:var(--hero-2,#2447C8); transform:scale(1.06) }
.hs-nav svg { width:20px; height:20px }
.hs-dots { display:flex; align-items:center; gap:8px }
.hs-dot { position:relative; width:10px; height:10px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.4); overflow:hidden; cursor:pointer; transition:width .4s cubic-bezier(.2,.7,.2,1) }
.hs-dot::after { content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:right }
.hs-dot[aria-current="true"] { width:44px }
.hs-dot[aria-current="true"]::after { animation:hsDot var(--dot-ms,6500ms) linear forwards }
.hs.is-held .hs-dot[aria-current="true"]::after { animation-play-state:paused }
.hs--static .hs-dot[aria-current="true"]::after { animation:none; transform:scaleX(1) }
@keyframes hsDot { to { transform:scaleX(1) } }
.hs :focus-visible { outline:2px solid #fff; outline-offset:3px; border-radius:8px }

/* ---- نسخهٔ صفحهٔ اصلی (روی گرادیان هدر؛ پس‌زمینه را خودِ صفحه می‌دهد) ---- */
.hs--home { max-width:1180px; margin:0 auto; padding:calc(var(--hdr-h,84px) + 28px) 20px clamp(100px,11vw,150px); --hs-track-min:360px }

/* ---- نسخهٔ فشرده (سایر صفحات / پیش‌نمایش پنل) ---- */
.hs--compact { max-width:1068px; width:calc(100% - 32px); margin:16px auto 0; border-radius:26px; overflow:hidden; isolation:isolate; padding:clamp(20px,3.5vw,36px) clamp(18px,4vw,44px) 24px; --hs-slide-min:210px;
  background:linear-gradient(135deg,var(--hero-1,#1E8BE6) 0%,var(--hero-2,#2447C8) 55%,var(--hero-3,#3B2DB0) 100%); box-shadow:0 18px 40px rgba(36,71,200,.22); transition:--hero-1 .9s,--hero-2 .9s,--hero-3 .9s }
.hs--compact::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(380px 260px at 90% 0,rgba(255,255,255,.18),transparent 62%),radial-gradient(340px 240px at 5% 100%,rgba(240,69,143,.3),transparent 66%) }
.hs--compact .hs-title { font-size:clamp(20px,2.8vw,30px); margin:12px 0 8px }
.hs--compact .hs-desc { font-size:14px; line-height:1.9; margin-bottom:16px; -webkit-line-clamp:3 }
.hs--compact .hs-slide { gap:clamp(18px,3vw,36px) }
.hs--compact .hs-frame { max-width:min(100%,380px) }
.hs--compact .hs-frame img { max-height:300px }
.hs--compact .hs-illus { width:min(100%,260px) }
.hs--compact .hs-btn { height:40px; padding:0 18px; font-size:13.5px }
.hs--compact .hs-controls { margin-top:16px }
.hs--compact .hs-nav { width:36px; height:36px }
.hs--compact .hs-nav svg { width:17px; height:17px }

/* ---- حرکت ---- */
@media (prefers-reduced-motion:no-preference) {
  .hs-slide.is-active .hs-text > * { animation:hsUp .85s cubic-bezier(.2,.7,.2,1) both }
  .hs-slide.is-active .hs-text > :nth-child(2) { animation-delay:.08s }
  .hs-slide.is-active .hs-text > :nth-child(3) { animation-delay:.16s }
  .hs-slide.is-active .hs-text > :nth-child(4) { animation-delay:.24s }
  .hs-slide.is-active .hs-media { animation:hsIn 1s cubic-bezier(.2,.7,.2,1) both }
  .hs-slide.is-active .hs-illus { animation:hsFloat 7s ease-in-out 1s infinite; will-change:transform }
  .hs-slide.is-active .hs-frame { animation:hsFloatSoft 8s ease-in-out 1s infinite; will-change:transform }
  .hs.is-offscreen .hs-illus, .hs.is-offscreen .hs-frame { animation-play-state:paused }
}
/* خارج از دید: نوار پیشرفتِ اسلاید هم متوقف شود */
.hs.is-offscreen .hs-dot[aria-current="true"]::after { animation-play-state:paused }
@media (prefers-reduced-motion:reduce) { .hs-dot[aria-current="true"]::after { animation:none; transform:scaleX(1) } .hs-slide { transition:none } }
@keyframes hsUp { from { opacity:0; transform:translateY(22px) } to { opacity:1; transform:none } }
@keyframes hsIn { from { opacity:0; transform:translateX(-30px) scale(.95) } to { opacity:1; transform:none } }
@keyframes hsFloatSoft { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes hsFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }

/* ---- واکنش‌گرا ---- */
@media (max-width:900px) {
  .hs--home { padding-top:calc(var(--hdr-h,68px) + 12px); --hs-track-min:0 }
  .hs-slide { grid-template-columns:1fr; gap:22px; min-height:0; text-align:center }
  .hs-slide .hs-media, .hs-slide.img-right .hs-media { order:-1 }
  .hs-frame { max-width:min(100%,380px) }
  .hs-frame img { max-height:320px }
  .hs-illus { width:min(78%,300px) }
  .hs-desc { margin-inline:auto }
  .hs-btns, .hs-controls { justify-content:center }
  .hs-title { margin-top:12px }
  .hs--compact { width:calc(100% - 24px); margin-top:12px }
  .hs--compact .hs-frame { max-width:min(100%,300px) }
}
@media (max-width:560px) {
  .hs--home { padding-inline:16px }
  .hs-btn { height:44px; padding:0 20px }
  .hs-nav { width:40px; height:40px }
}

/* ---- موبایل: چیدمان جمع‌وجورتر (تصویر ۲۰٪ کوچک‌تر، فاصله‌های عمودی ۳۰٪ کمتر) ----
   عنوان، توضیحات و سربرگ بدون تغییر؛ ارتفاع دکمه‌ها از ۴۰px کمتر نمی‌شود (اندازهٔ مناسب لمس) */
@media (max-width:760px) {
  /* تصویر کتاب: ۲۰٪ کوچک‌تر */
  .hs-frame { max-width:min(100%,304px) }
  .hs-frame img { max-height:256px }
  .hs-illus { width:min(62%,240px) }
  .hs--compact .hs-frame { max-width:min(100%,240px) }
  .hs--compact .hs-frame img { max-height:240px }
  .hs--compact .hs-illus { width:min(100%,208px) }

  /* فاصله‌های عمودی: ۳۰٪ کمتر (پایین‌ترین فاصله جای موج را نگه می‌دارد) */
  .hs--home { padding-top:calc(var(--hdr-h,68px) + 8px); padding-bottom:78px }
  .hs-slide { gap:15px }
  .hs-title { margin:8px 0 8px }
  .hs-desc { margin-bottom:18px }
  .hs-btns { gap:8px }
  .hs-controls { margin-top:21px }
  .hs--compact { padding-top:14px; padding-bottom:17px }
  .hs--compact .hs-slide { gap:13px }
  .hs--compact .hs-title { margin:8px 0 6px }
  .hs--compact .hs-desc { margin-bottom:11px }
  .hs--compact .hs-controls { margin-top:11px }

  /* برچسب (همخوانی فعال): کمی کوچک‌تر */
  .hs-kicker { font-size:11.5px; padding:4px 12px; gap:6px }
  .hs-kicker::before { width:6px; height:6px }

  /* دکمه: کمی کم‌ارتفاع‌تر، همچنان مناسب لمس */
  .hs-btn { height:42px }
}

/* ---- دسکتاپ و تبلت: بخش آبی کوتاه‌تر (حدود ۱۰ تا ۱۵٪)؛ موبایل (≤۷۶۰px) بدون تغییر ---- */
@media (min-width:761px) {
  .hs--home { padding-bottom:clamp(60px,7.5vw,108px) }
}
@media (min-width:901px) {
  .hs--home { --hs-track-min:320px }
  .hs--home .hs-slide { min-height:320px }
}
@media (min-width:761px) and (max-width:900px) {
  .hs--home { padding-top:calc(var(--hdr-h,68px) + 4px); padding-bottom:56px }
  .hs--home .hs-slide { gap:12px }
  .hs--home .hs-title { margin:8px 0 8px }
  .hs--home .hs-desc { margin-bottom:16px }
}