/**
 * إصلاح مقاسات البنرات — يُحمَّل بعد asrar-skin.css ليحلّ التعارض بين home.css (contain) وasrar-skin.css (cover + نسب ثابتة).
 * المبدأ: كل بنر يحترم نسبة صورته الفعلية (--k-r-d للكمبيوتر، --k-r-m للجوال) بلا قص ولا تمدد.
 * القيم الافتراضية تُستخدم فقط إن لم تتوفر أبعاد الصورة.
 */
/* ── بنر ثابت ── */
.k-banner-block .k-b-panel picture,
.k-banner-block .k-slide-item picture {
    display: block;
    width: 100%;
}

.k-banner-block[data-layout="fixed_1"] .k-b-img,
.k-banner-block .k-single-banner .k-b-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--k-r-d, 3) !important;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--k-lav-soft, #EDE4F5);
}

/* ── سلايدر: إطار واحد ثابت النسبة، والشرائح تملؤه (لا قفز ارتفاع) ── */
.k-banner-block .k-banner-slider {
    aspect-ratio: var(--k-r-d, 3);
    height: auto;
}

.k-banner-block .k-banner-slider .k-slider-track {
    position: absolute;
    inset: 0;
    height: 100%;
}

.k-banner-block .k-banner-slider .k-slide-item,
.k-banner-block .k-banner-slider .k-slide-item:first-child {
    position: absolute;
    inset: 0;
    height: 100%;
}

.k-banner-block .k-banner-slider .k-b-panel,
.k-banner-block .k-banner-slider picture {
    display: block;
    height: 100%;
    width: 100%;
}

.k-banner-block .k-banner-slider .k-slide-img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--k-lav-soft, #EDE4F5);
}

/* ── شبكات متعددة الصور ── */
.k-banner-block .k-banner-grid-equal--uniform .k-b-img--uniform {
    object-fit: contain !important;
    object-position: center !important;
    background: var(--k-lav-soft, #EDE4F5);
}

.k-banner-block .k-banner-masthead .k-b-img--uniform {
    object-fit: contain !important;
    object-position: center !important;
    min-height: 0;
    aspect-ratio: auto;
}

/* ── هيرو: إطار بنسبة الصور بدل 21/9 ثابتة ── */
.k-hero-editorial .k-hero-slides {
    aspect-ratio: var(--k-r-d, 21 / 9);
    max-height: 560px;
}

.k-hero-editorial,
.k-hero-editorial .k-hero-slides { background: var(--k-lav-soft, #EDE4F5) !important; }
.k-hero-editorial::after { display: none; }

.k-hero-editorial .k-hero-slide-img,
.k-banner-zone--hero img {
    background: var(--k-lav-soft, #EDE4F5) !important;
    object-fit: contain !important;
    max-height: none !important;
    min-height: 0 !important;
}

/* ── الجوال ── */
@media (max-width: 768px) {
    .k-banner-block[data-layout="fixed_1"] .k-b-img,
    .k-banner-block .k-single-banner .k-b-img {
        aspect-ratio: var(--k-r-m, var(--k-r-d, 3)) !important;
    }

    .k-banner-block .k-banner-slider {
        aspect-ratio: var(--k-r-m, var(--k-r-d, 3));
    }

    .k-hero-editorial .k-hero-slides {
        aspect-ratio: var(--k-r-m, var(--k-r-d, 4 / 3));
        max-height: none;
    }

    .k-hero-editorial .k-hero-slide-img,
    .k-banner-zone--hero img {
        max-height: none;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .k-banner-block .k-slide-item { transition: none; }
}

/* ── الجوال: إلغاء الارتفاع الموحّد الثابت (--k-banner-mobile-height في home.css) ──
   كان يفرض ~180px على كل بنر فتظهر أشرطة فارغة أو يضيع جزء من الصورة. */
@media (max-width: 768px) {
    .k-banner-block .k-single-banner .k-b-panel,
    .k-banner-block .k-banner-grid-equal__cell .k-b-panel,
    .k-banner-block .k-banner-grid-equal--uniform .k-banner-grid-equal__cell--uniform .k-b-panel,
    .k-banner-block .k-banner-masthead .k-b-panel {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }

    .k-banner-block .k-single-banner .k-b-img,
    .k-banner-block .k-banner-grid-equal .k-b-img--uniform,
    .k-banner-block .k-banner-masthead .k-b-img--uniform {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: var(--k-r-m, var(--k-r-d, 3)) !important;
        object-fit: contain !important;
    }

    .k-banner-block .k-banner-slider {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: var(--k-r-m, var(--k-r-d, 3));
    }

    .k-banner-block .k-banner-slider .k-slide-item,
    .k-banner-block .k-banner-slider .k-slide-item:first-child {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
    }

    .k-banner-block .k-banner-slider .k-slide-item .k-b-panel {
        display: block !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .k-banner-block .k-banner-slider .k-slide-item .k-slide-img {
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}