/* 
 * ملف CSS لجعل جميع الصور متجاوبة تلقائياً
 * تم تحديثه بتاريخ 4 يونيو 2025
 */

/* قواعد عامة لجميع الصور */
img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* قواعد خاصة للصور داخل الحاويات */
.image-container img,
.product-image img,
.service-image img,
.team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* قواعد للصور التي تحتاج إلى الحفاظ على النسبة */
.aspect-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 75%; /* نسبة 4:3 */
    overflow: hidden;
}

.aspect-ratio-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* قواعد للصور الصغيرة مثل الأيقونات */
.icon-image {
    width: auto;
    height: auto;
    max-height: 2rem;
    max-width: 2rem;
}

/* قواعد للشعار */
.logo-image {
    max-height: 3rem;
    width: auto;
    object-fit: contain;
}

/* قواعد للصور البانر الكبيرة */
.banner-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

/* قواعد للصور في معرض المنتجات */
.product-gallery-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain !important;
}

/* قواعد خاصة لصور أنظمة الحضور والانصراف ZKT */
.attendance-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain !important;
}

/* قواعد خاصة لصور أنظمة الانتركوم */
.intercom-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain !important;
}

/* قواعد خاصة لصور الكاميرات الداخلية */
.indoor-camera-image {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain !important;
}

/* تعديلات للشاشات الصغيرة */
@media (max-width: 768px) {
    .product-gallery-image,
    .attendance-image,
    .intercom-image,
    .indoor-camera-image {
        max-height: 200px;
    }
    
    .banner-image {
        max-height: 300px;
    }
}

/* تعديلات للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .product-gallery-image,
    .attendance-image,
    .intercom-image,
    .indoor-camera-image {
        max-height: 180px;
    }
    
    .banner-image {
        max-height: 200px;
    }
}

/* تعديلات لضمان عرض الصور بشكل صحيح في جميع الحاويات */
.product-image-container {
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f8f8f8;
    position: relative;
    padding: 1rem;
    margin: 0;
}

/* تعديلات لفصل النص عن الصورة */
.product-content {
    padding: 1.5rem;
    background-color: #ffffff;
    margin-top: 0;
}

/* إزالة التداخل بين النص والصورة */
.product-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
}

.product-description {
    margin-bottom: 1rem;
    color: #666;
}

/* تعديلات للشاشات الصغيرة */
@media (max-width: 768px) {
    .product-image-container {
        height: 200px;
    }
}

/* تعديلات للشاشات الصغيرة جداً */
@media (max-width: 480px) {
    .product-image-container {
        height: 180px;
    }
}

/* تعديلات لجعل أول سطر من وصف المنتج بالخط الغامق */
.product-description-bold {
    font-weight: 900;
    color: #333;
    display: block;
    margin-bottom: 0.5rem;
}