/* === SSE Slider – پایه === */

.sse-slider {
  position: relative;
  overflow: hidden;
  min-height: 400px; /* از تب Style → Height قابل تنظیم است */

  /* مدت‌ها و easingها (با المنتور می‌تونی ست‌شون کنی) */
  /* --sse-duration: مدت ترنزیشن افکت‌های ساده (ms)
     --sse-zoom-duration: مدت زوم مداوم هر اسلاید (ms)
     --sse-circle-duration: مدت افکت دایره‌ای (ms)
     --sse-zoom-ease: easing زوم
     --sse-circle-ease: easing دایره
  */
  --sse-zoom-ease: ease-out;
  --sse-circle-ease: ease-out;
}

.sse-slider-inner {
  width: 100%;
  height: 100%;
}

/* افکت‌های ساده (Fade / Slide / Zoom) از این استایل استفاده می‌کنند */
.sse-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(0) scale(1);
  transition:
    opacity var(--sse-duration, 600ms) ease,
    transform var(--sse-duration, 600ms) ease;
  z-index: 0;
}

.sse-slide-active {
  opacity: 1;
  z-index: 1;
}

.sse-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  transform: scale(1);
}

/* محتوای روی تصویر */
.sse-slide-content {
  position: relative;
  z-index: 2;
  padding: 40px;
  max-width: 100%;
}

.sse-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;           /* زیر محتوا، بالای بک‌گراند */
  background: transparent;
  pointer-events: none; /* روی کلیک‌ها اثری نداشته باشد */
}

/* Navigation */
.sse-slider-nav {
  position: absolute;
  inset-block: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;

  z-index: 5;              /* همیشه روی اسلایدها باشه */
  opacity: 0;              /* پیش‌فرض مخفی */
  transition: opacity 0.3s ease; /* فید نرم */
}

/* فقط وقتی روی اسلایدر هاور می‌کنی، دکمه‌ها دیده بشن */
.sse-slider:hover .sse-slider-nav {
  opacity: 1;
}

.sse-slider-prev,
.sse-slider-next {
  pointer-events: auto;
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

.sse-slider-dots {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;

  z-index: 5;                /* همیشه روی اسلایدها و ماسک دایره باشه */
  opacity: 0;                /* پیش‌فرض مخفی (مثل نویگیشن) */
  transition: opacity 0.3s ease;
}

/* مثل نویگیشن: با هاور روی کل اسلایدر ظاهر بشن */
.sse-slider:hover .sse-slider-dots {
  opacity: 1;
}

.sse-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
}
.sse-slider-dot-active {
  width: 18px;
  background: #fff;
}

/* === افکت‌های ساده (Fade / Slide / Zoom) === */

.sse-slider-effect-fade .sse-slide {
  transform: translateX(0) scale(1);
}

.sse-slider-effect-slide .sse-slide {
  transform: translateX(30px);
}
.sse-slider-effect-slide .sse-slide-active {
  transform: translateX(0);
}

.sse-slider-effect-zoom-in .sse-slide-bg {
  transform: scale(1.08);
}
.sse-slider-effect-zoom-in .sse-slide-active .sse-slide-bg {
  transform: scale(1);
}

.sse-slider-effect-zoom-out .sse-slide-bg {
  transform: scale(1);
}
.sse-slider-effect-zoom-out .sse-slide-active .sse-slide-bg {
  transform: scale(1.08);
}

/* === Circle Zoom – دایره + زوم مداوم، بدون Fade و بدون پریدن آخر === */

/* تو این افکت fade نمی‌خواهیم، پس opacity ثابت و transition نداریم */
.sse-slider-effect-circle-zoom .sse-slide {
  opacity: 1;
  z-index: 0;
  transition: none;
}

/* همه اسلایدها به‌صورت عادی: بدون anim، فقط آمادهٔ زوم */
.sse-slider-effect-circle-zoom .sse-slide-bg {
  clip-path: circle(150% at 50% 50%);
  transform: scale(1);
  /* زوم با transition انجام می‌شود، نه animation → آخرش دیگه نمی‌پرد عقب */
  transition: transform var(--sse-zoom-duration, 8000ms) var(--sse-zoom-ease, ease-out);
}

/* اسلاید جدیدی که قرار است نمایش داده شود */
.sse-slider-effect-circle-zoom .sse-slide-next-mask {
  z-index: 1;
}

/* روی این اسلاید:
   - transform از 1 به 1.12 می‌ره → زوم مداوم
   - همزمان animation روی clip-path → دایره‌ای باز شدن
*/
.sse-slider-effect-circle-zoom .sse-slide-next-mask .sse-slide-bg {
  transform: scale(1.12);
  animation: sse-circle-reveal var(--sse-circle-duration, 1000ms) var(--sse-circle-ease, ease-out) forwards;
}

/* Circle Reveal – فقط clip-path، transform دست نمی‌خوره */
@keyframes sse-circle-reveal {
  from {
    clip-path: circle(0% at 50% 50%);
  }
  to {
    clip-path: circle(150% at 50% 50%);
  }
}

/* === Blog Grid === */

.sse-posts-grid {
  display: grid;
  gap: 24px;
}
.sse-grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sse-grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.sse-grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 991px) {
  .sse-grid-cols-3, .sse-grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 767px) {
  .sse-grid-cols-2, .sse-grid-cols-3, .sse-grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

.sse-post-card {
  background: #fff;
  overflow: hidden;              /* مهم: باکس کلّی کلیپ کند */
  border-radius: 10px;           /* با المنتور override می‌شود */
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

/* قاب تصویر – این باکس مرز نهایی Zoom است */
.sse-post-card-thumb {
  position: relative;
  display: block;
  overflow: hidden;              /* هرچی img زوم بشه، از این باکس بیرون دیده نمی‌شه */
  /* ارتفاع / نسبت تصویر از طریق المنتور ست می‌شود (Image Height یا Aspect Ratio) */
}

/* خود تصویر داخل قاب */
.sse-post-card-thumb img {
  position: absolute;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100% !important;        /* مهم: ارتفاع حتماً برابر قاب بشه */
  max-width: none;                /* جلو مزاحمت max-width:100% رو می‌گیره */
  object-fit: cover;              /* دیفالت: مثل بک‌گراند cover */
  display: block;
  transform-origin: center center;
  transition: transform 0.5s ease;
}

/* افکت زوم روی هاور */
.sse-post-card:hover .sse-post-card-thumb img {
  transform: scale(1.1);
}

.sse-post-card-body {
  padding: 18px 18px 20px;
}

.sse-post-card-title {
  margin: 0 0 8px;
  font-size: 18px;
}
.sse-post-card-title a {
  text-decoration: none;
  color: inherit;
}

.sse-post-card-meta {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}

.sse-post-card-excerpt {
  font-size: 14px;
  color: #555;
}

/* Read More زیر متن */
.sse-post-card-readmore {
  margin-top: 12px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.sse-post-card-readmore:hover {
  background: #333;
}

/* حالت پایه: همیشه نمایش (اگر کلاس خاصی ست نشود) */
.sse-post-card-readmore {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* حالت ۱: Always – همیشه دیده شود */
.sse-readmore-mode-always .sse-post-card-readmore {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* حالت ۲: فقط روی هاور کارت دیده شود */
.sse-readmore-mode-card-hover .sse-post-card-readmore {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.sse-readmore-mode-card-hover .sse-post-card:hover .sse-post-card-readmore {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ======================
   SSE Image Carousel
   ====================== */

.sse-carousel {
  position: relative;
  overflow: hidden;
}

.sse-carousel-track {
  display: flex;
  transition: transform 0.45s ease;
}

/* تعداد ستون‌ها از متغیر CSS که PHP ست می‌کند */
.sse-carousel-item {
  flex: 0 0 calc(100% / var(--sse-visible-desktop, 3));
  padding: 0 10px; /* با کنترل Items Gap اوورراید می‌شود */
}

@media (max-width: 991px) {
  .sse-carousel-item {
    flex-basis: calc(100% / var(--sse-visible-tablet, 2));
  }
}

@media (max-width: 767px) {
  .sse-carousel-item {
    flex-basis: calc(100% / var(--sse-visible-mobile, 1));
  }
}

.sse-carousel-item-inner {
  position: relative;
  overflow: hidden;
  /* Border-radius از کنترل Box Radius روی همین کلاس ست می‌شود */
}

.sse-carousel-item-image {
  position: relative;
  overflow: hidden;
  height: 260px; /* پیش‌فرض؛ با Image Height در المنتور عوض می‌شود */
}

.sse-carousel-item-image img {
  display: block;
  width: 100%;
  height: 100%;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease;
}

/* Overlay */
.sse-carousel-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;       /* پیش‌فرض: پایین */
  justify-content: flex-start; /* پیش‌فرض: چپ */
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.35s ease,
    visibility 0.35s ease,
    background 0.35s ease;
}

.sse-carousel-item-content {
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* Visibility: always / hover */
.sse-carousel-visibility-hover .sse-carousel-item-overlay {
  opacity: 0;
  visibility: hidden;
}

.sse-carousel-visibility-hover .sse-carousel-item-inner:hover .sse-carousel-item-overlay {
  opacity: 1;
  visibility: visible;
}

.sse-carousel-visibility-always .sse-carousel-item-overlay {
  opacity: 1;
  visibility: visible;
}

/* Vertical Align (با prefix_class روی ویجت) */
.sse-carousel-valign-top .sse-carousel-item-overlay {
  align-items: flex-start;
}

.sse-carousel-valign-middle .sse-carousel-item-overlay {
  align-items: center;
}

.sse-carousel-valign-bottom .sse-carousel-item-overlay {
  align-items: flex-end;
}

/* Horizontal Align */
.sse-carousel-align-left .sse-carousel-item-overlay {
  justify-content: flex-start;
}

.sse-carousel-align-center .sse-carousel-item-overlay {
  justify-content: center;
}

.sse-carousel-align-right .sse-carousel-item-overlay {
  justify-content: flex-end;
}

/* متن هم‌راستا با محور افقی */
.sse-carousel-align-left .sse-carousel-item-content {
  text-align: left;
  align-items: flex-start;
}

.sse-carousel-align-center .sse-carousel-item-content {
  text-align: center;
  align-items: center;
}

.sse-carousel-align-right .sse-carousel-item-content {
  text-align: right;
  align-items: flex-end;
}

/* Typography پایه */
.sse-carousel-item-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.sse-carousel-item-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Button داخل اورلی */
.sse-carousel-item-button {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 13px;
  text-decoration: none;
  border-radius: 999px;
  background: #ffffff;
  color: #111111;
}

/* دکمه‌های ناوبری */
.sse-carousel-prev,
.sse-carousel-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.4);
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
}

.sse-carousel-prev {
  left: 6px;
}

.sse-carousel-next {
  right: 6px;
}

/* === Hover Box === */
.sse-hover-box {
  position: relative;
  overflow: hidden;
  border-radius: 16px; /* در صورت نیاز می‌تونی بعداً کنترل جدا براش بذاری */
}

/* قاب تصویر – روی این عنصر height یا aspect-ratio از المنتور ست می‌شود */
.sse-hover-box-image {
  position: relative;
  overflow: hidden;
  height: 260px; /* ارتفاع پیش‌فرض – با Image Height یا Aspect Ratio اوورراید می‌شود */
}

/* خود تصویر داخل قاب */
.sse-hover-box-image img {
  width: 100%;
  height: 100%;
  display: block;
  /* object-fit از کنترل Image Fit می‌آید */
  transition: transform 0.5s ease;
}

/* پنل متنی که روی تصویر می‌آد */
.sse-hover-box-panel {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%); /* از پایین اسلاید می‌شود بالا */
  padding: 18px 20px;
  border-radius: 16px 16px 0 0;     /* با Panel Radius اوورراید می‌شود */
  color: #fff;
  background: rgba(0,0,0,0.7);      /* با Panel Background اوورراید می‌شود */
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    visibility 0.3s ease,
    background-color 0.3s ease;
}

.sse-hover-box-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sse-hover-box-icon {
  font-size: 20px;
}

.sse-hover-box-title {
  margin: 0;
  font-size: 18px;
}

.sse-hover-box-text {
  font-size: 14px;
}

.sse-hover-box-button {
  align-self: flex-start;
  margin-top: 4px;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  text-decoration: none;
  font-size: 13px;
}

/* افکت هاور – زوم تصویر و ظاهر شدن پنل */
.sse-hover-box:hover .sse-hover-box-image img {
  transform: scale(1.08);
}

.sse-hover-box:hover .sse-hover-box-panel {
  opacity: 1;
  visibility: visible;
}

/* -------- تراز افقی پنل: چپ / وسط / راست -------- */

/* مرکز (پیش‌فرض) */
.sse-hover-panel-align-center .sse-hover-box-panel {
  left: 50%;
  right: auto;
  transform: translate(-50%, 100%);
}

.sse-hover-panel-align-center .sse-hover-box:hover .sse-hover-box-panel {
  transform: translate(-50%, 0);
}

/* چپ */
.sse-hover-panel-align-left .sse-hover-box-panel {
  left: 0;
  right: auto;
  transform: translate(0, 100%);
}

.sse-hover-panel-align-left .sse-hover-box:hover .sse-hover-box-panel {
  transform: translate(0, 0);
}

/* راست */
.sse-hover-panel-align-right .sse-hover-box-panel {
  right: 0;
  left: auto;
  transform: translate(0, 100%);
}

.sse-hover-panel-align-right .sse-hover-box:hover .sse-hover-box-panel {
  transform: translate(0, 0);
}

/* هم‌راستاسازی محتوا داخل پنل */
.sse-hover-panel-align-left .sse-hover-box-panel-inner {
  text-align: left;
  align-items: flex-start;
}

.sse-hover-panel-align-center .sse-hover-box-panel-inner {
  text-align: center;
  align-items: center;
}

.sse-hover-panel-align-right .sse-hover-box-panel-inner {
  text-align: right;
  align-items: flex-start;
}

html[dir="rtl"] .sse-carousel .sse-carousel-track {
  direction: ltr;
  flex-direction: row;
}

html[dir="rtl"] .sse-carousel .sse-carousel-item,
html[dir="rtl"] .sse-carousel .sse-carousel-item * {
  direction: rtl;
}