/* =====================================================
   HERO SWIPER (LCP SAFE & CLEAN)
===================================================== */

.heroSwiper {
    position: relative;
    overflow: hidden;
    background-color: #f8f8f8;
    border-bottom: 1px solid #ddd;
    aspect-ratio: 4.8 / 1;
}


/* مرکزسازی اسلاید */
.heroSwiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* تصویر هیرو */
.heroSwiper img {
    object-fit: cover;
    border-radius: 0.75rem;
    transform: translateZ(0);
}

/* Lazy fade فقط برای تصاویر غیر اول */
.heroSwiper img[data-swiper-lazy] {
    opacity: 0;
}

.heroSwiper img.is-loaded {
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

/* اسلاید اول = بدون transition */
.heroSwiper .swiper-slide:first-child img {
    opacity: 1 !important;
    transition: none !important;
}

/* =====================================================
   HERO CAPTION
===================================================== */

.hero-caption {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    z-index: 2;
    color: #fff;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

/* =====================================================
   SWIPER CONTROLS
===================================================== */
.swiper-button-common:hover {
    background-color: #28a745;
    color: #fff;
}

/* Pagination */
.swiper-pagination-bullet {
    background: #ccc;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background: #28a745;
    opacity: 1;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 768px) {
  .heroSwiper{
    aspect-ratio:auto;
}

.heroSwiper img{
    width:100%;
    height:auto;
}

    .hero-title {
        font-size: 1.8rem;
    }
}
.heroSwiper {
    /* ✅ جلوگیری از Reflow با contain */
    contain: layout style paint;
    
    /* ✅ استفاده از will-change برای بهینه‌سازی */
    will-change: transform;
    
    /* ✅ کاهش محاسبات چیدمان */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.swiper-slide {
    /* ✅ ایزوله کردن هر اسلاید */
    contain: layout style paint;
    
    /* ✅ جلوگیری از تغییر اندازه ناگهانی */
    flex-shrink: 0;
    width: 100%;
    height: auto;
}

.swiper-wrapper {
    /* ✅ استفاده از transform برای حرکت */
    will-change: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ✅ جلوگیری از Reflow هنگام لود تصاویر */
.heroSwiper img{
    contain: layout style paint;
    width: 100%;
    height: auto;
    display: block;
}