/* Container */
.vhs{--gap:28px; --thumb:180px; --radius:20px; --shadow:0 10px 30px rgba(0,0,0,.08);}
.vhs *{box-sizing:border-box}
.vhs .vhs-inner{
  display:grid;
  grid-template-columns: var(--thumb) 1fr;   /* چپ = بندانگشتی‌ها ، راست = استیج */
  grid-template-areas: "thumbs stage";
  gap:var(--gap);
  align-items:center;
}

/* Stage (big slide) */
.vhs-stage{ grid-area: stage; position:relative; min-height:420px }
.vhs-slide{
  position:absolute;
  opacity:0;
  transform:translateX(30px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;   /* NEW: جلوی کلیک روی اسلایدهای مخفی را بگیر */
  z-index:0;             /* NEW: لایه پایین‌تر برای اسلایدهای مخفی */
}
.vhs-slide.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;   /* NEW: فقط اسلاید فعال قابل کلیک باشد */
  z-index:2;             /* NEW: اسلاید فعال را بیا بالا */
}
article.vhs-slide {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.vhs-media{width:100%; height:100%; display:flex; align-items:center; justify-content:center}
.vhs-media img{max-width:100%; max-height:520px; border-radius:var(--radius); display:block}

/* Content */
.vhs-content{padding-inline:4px;}
.vhs-title{margin:0 0 10px; font-size:32px; line-height:48px; font-weight:800}
.vhs-desc{color:#151B0B; font-size:14px; line-height:1.9}
.vhs-actions{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.vhs-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600; border:1px solid transparent}
.vhs-btn.primary{background:#88B04B; color:#fff; border-radius:100px; font-size:14px; font-weight:400}
/* استایل هاور برای دکمه‌های primary */
.vhs-btn.primary:hover {background-color: #fff;color: #88B04B;border-color: #88B04B; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: scale(1.05); transition: all 0.3s ease;}


.vhs-btn.ghost{background:#e2e8f0; color:#1e293b; border-color:#cbd5e1}

/* Thumbs column */
.vhs-thumbs{ grid-area: thumbs; width:var(--thumb); height:100%; position:relative; overflow:hidden }
.vhs-thumbs-rail{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:12px; transition:transform .45s ease }
.vhs-thumb{ cursor:pointer }
.vhs-thumb img{ width:64px; height:64px; object-fit:cover; display:block }
.vhs-thumb.is-active img{ border-color:#88B04B; width:104px; height:104px }

/* RTL flip if needed */
.vhs[data-rtl="1"] .vhs-inner{direction:rtl}
.vhs[data-rtl="1"] .vhs-title{text-align:right}
.vhs[data-rtl="1"] .vhs-desc{text-align:right}

@media only screen and (max-width: 600px) {
	article.vhs-slide {
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
}
	.vhs-content{height:100px;}
	.vhs-media img { margin-top: -60px; margin-bottom: -30px;}
	.vhs-thumb img {width: 48px;height: 48px;}
	.vhs-thumb.is-active img {width: 72px;height: 72px;}
	.vhs-title{font-size:22px;}
	.vhs-thumbs {display: flex;align-items: center;justify-content: center;align-content: center;height:450px;}
	.vhs .vhs-inner{gap:0px;display: flex;flex-direction: row;justify-content: center;}
	button.vhs-thumb.is-active {padding: 0px;}
	.vhs-thumbs-rail {gap: 40px;height: 450px;position:relative;width: 90px;}
	.vhs-slide{ display: flex;flex-direction: column;gap: 0px;justify-content: flex-end;align-content: center;align-items: center; gap:0px;}
	.vhs-stage {width: 450px;}}