/* ==========================================================================
   بنر تمام‌عرض 16:9 (Full-bleed Hero Banner)
   - فول‌بلید واقعی (خارج از هر کانتینر با padding/max-width)
   - دو حالت نمایش تصویر:
       1) .cover → پر کردن کادر (ممکن است بخشی کراپ شود)  ✅ پیشنهاد شده
       2) .fit   → نمایش کامل بدون برش (ممکن است حاشیه بیفتد)
   - ریسپانسیو با سقف ارتفاع در دستگاه‌های کوچک‌تر
   - سازگار با مرورگرهای قدیمی‌تر (fallback بدون aspect-ratio)
   ========================================================================== */

/* فول‌بلید واقعی: از محدودیت کانتینرها عبور کن و عرض کامل ویوپورت را بگیر */
.banner-hero{
  position: relative;
  /* ترفند فول‌بلید: تبدیل عرض بخش به 100vw حتی اگر داخل container باشد */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;

  overflow: hidden;         /* جلوگیری از اسکرول افقی */
  background: #fff;         /* پس‌زمینه سفید؛ در صورت نیاز تغییر بده */
}

/* جعبه‌ی نسبت ثابت 16:9 با سقف ارتفاع (برای کنترل ارتفاع در دسکتاپ) */
.banner-hero .ratio-box{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;     /* نسبت 16:9 روی مرورگرهای مدرن */
  max-height: 420px;        /* ← سقف ارتفاع در دسکتاپ؛ دلخواه: 360-480px */
}

/* پشتیبان برای مرورگرهایی که aspect-ratio ندارند */
@supports not (aspect-ratio: 16 / 9){
  .banner-hero .ratio-box::before{
    content: "";
    display: block;
    padding-top: 56.25%;    /* 16:9 = 9/16 → 9 / 16 * 100 */
  }
  .banner-hero .slides{
    position: absolute;     /* ریل اسلاید را داخل نسبت ثابت قرار می‌دهد */
    inset: 0;
  }
}

/* ریل اسلایدها (برای اسلایدر ساده یا ثابت یک اسلاید) */
.banner-hero .slides{
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform .6s ease;  /* در صورت اسلاید خودکار */
}

/* هر اسلاید تمام‌عرض و تمام‌ارتفاع فضای نسبت‌دار را بگیرد */
.banner-hero .slide{
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

/* ===== حالت پیشنهادی: پر کردن کادر (بدون فاصله سفید) =====
   اگر می‌خواهی هیچ حاشیه/نوار سفیدی نباشد و تصویر فریم را پر کند:
   - در HTML کلاس «cover» را روی .banner-hero بگذار:
     <section class="banner-hero cover"> ... </section>
*/
.banner-hero.cover img{
  position: absolute !important;
  inset: 0 !important;           /* بالا/پایین/چپ/راست = 0 */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;  /* پر کردن؛ اضافه‌ها کراپ می‌شود */
  display: block !important;
  max-width: none !important;    /* خنثی کردن محدودیت‌های سراسری img */
}

/* ===== حالت جای‌گیری کامل: بدون کراپ =====
   اگر می‌خواهی کل تصویر 100% دیده شود (بدون برش):
   - در HTML کلاس «fit» را روی .banner-hero بگذار:
     <section class="banner-hero fit"> ... </section>
   * توجه: اگر نسبت تصویر 16:9 نباشد، ممکن است حاشیه دیده شود.
*/
.banner-hero.fit img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* بدون برش؛ ممکن است فاصله بماند */
  display: block !important;
  background: #0000;             /* در صورت تمایل کادر خالی را رنگ‌دهی کن */
  max-width: none !important;
}

/* ===== سقف ارتفاع در نمایشگرهای کوچک‌تر (ریسپانسیو) =====
   اعداد را بر اساس سلیقه‌ی UI خود تنظیم کن.
*/
@media (max-width: 1024px){
  .banner-hero .ratio-box{ max-height: 360px; }
}
@media (max-width: 768px){
  .banner-hero .ratio-box{ max-height: 240px; }
}
@media (max-width: 480px){
  .banner-hero .ratio-box{ max-height: 180px; }
}

/* ==========================================================================
   نکته‌های کاربردی:
   - اگر بعد از آپلود هنوز حاشیه می‌بینی، احتمالاً خروجیِ فایل خودِ تصویر
     دارای نوار سفید است. برای استانداردسازی، هنگام آپلود با Intervention Image
     از fit(1280,720) استفاده کن تا خروجی بدون نوار ذخیره شود.
   - اگر بنر زیر container با padding افتاده و باز هم «کمی» فاصله دیدی،
   مطمئن شو بنر بیرون از container اصلی صفحه قرار دارد (قبل از .container/.wrap).
   - برای دور زدن کش مرورگر، لینک را با ?v=TIMESTAMP صدا بزن:
     <link rel="stylesheet" href="/css/auth-banner.css?v=20250901_06">
   ========================================================================== */