/* =========================================================
   FOS7TY MEDIA — كروت + هيرو بصور <img> حقيقية
   (srcset / lazy loading / بدون إزاحة في التصميم)
   كل المُحدِّدات تحت .fos7ty-* فمش بتتسرب للثيم.
   ========================================================= */

/* الكارت: صندوق الصورة بنسبة 16:10 زي مقاس fos7ty-card (640×400) */
.fos7ty-card .fos7ty-card-image {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--fos7ty-border, #e5e9ec);
}

.fos7ty-card .fos7ty-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: var(--fos7ty-border, #e5e9ec);
}

/* الشارة فوق الصورة */
.fos7ty-card .fos7ty-card-image .fos7ty-badge {
    z-index: 2;
}

/* الهيرو: ارتفاعه زي ما كان (content-driven) + min-height بتاع frontend.css،
   والصورة بتغطي الصندوق بـ object-fit من غير أي تغيير في الارتفاع */
.fos7ty-hero {
    position: relative;
    overflow: hidden;
}

.fos7ty-hero .fos7ty-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* التغطية والمحتوى فوق الصورة (الصورة z-index: 0) */
.fos7ty-hero .fos7ty-hero-overlay,
.fos7ty-hero .fos7ty-hero-content {
    z-index: 2;
}