/* 1. جعل الأعداد كتلية مستقلة واصطفاف كل عددين بجانب بعضهما */
.page_issue_archive .issues_list .row, 
#main-content .issues_list .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
}

.page_issue_archive .issues_list .row > div,
.page_issue_archive .issues_list [class*="col-"] {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

/* 2. إصلاح الهيكل الداخلي: جعل العنوان أسفل الغلاف وليس بجانبه */
.page_issue_archive .media,
.page_issue_archive .obj_issue_summary,
.page_issue_archive .issue-summary {
    display: flex !important;
    flex-direction: column !important; /* تحويل الترتيب ليكون عمودياً (فوق بعض) */
    align-items: center !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 1px solid #e3e3e3 !important;
    border-radius: 8px !important;
    padding: 20px !important;
    height: 100% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04) !important;
}

/* 3. إلغاء المحاذاة الجانبية لجهات الغلاف والنصوص الافتراضية للبوتستراب */
.page_issue_archive .media-left, 
.page_issue_archive .media-right, 
.page_issue_archive .media-body {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* ترتيب المسافة: الغلاف في الأعلى ثم مسافة تلوها العناوين */
.page_issue_archive .media-left {
    margin-bottom: 15px !important;
}

/* 4. ضبط مقاسات الأغلفة لتكون متناسقة ومتساوية */
.page_issue_archive .media-left img,
.page_issue_archive .cover img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
}

/* 5. التوافق مع الهواتف الذكية (صف واحد تلقائي في الشاشات الصغيرة) */
@media (max-width: 575px) {
    .page_issue_archive .issues_list .row > div,
    .page_issue_archive .issues_list [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}