/* ============================================================
   MJ Listing — Shared styles for Blog, Classic, Grid, Modern Grid
   ============================================================ */

/* ---- Shared wrapper ---- */
.mjl-wrap {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    direction: rtl;
}

/* ---- Section header ---- */
.mjl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    border-bottom: 3px solid #e5e7eb;
    padding-bottom: 10px;
    position: relative;
}
.mjl-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    right: 0;
    width: 60px;
    height: 3px;
    background: #dc2626;
}
.mjl-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #111827;
}
.mjl-more {
    font-size: 12px;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}
.mjl-more:hover { color: #dc2626; }

/* ---- Category badge ---- */
.mjl-cat {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: #dc2626;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    margin-bottom: 6px;
    line-height: 1.6;
}

/* ---- Meta ---- */
.mjl-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: #9ca3af;
    flex-wrap: wrap;
    margin-top: 4px;
}
.mjl-meta a { color: #9ca3af; text-decoration: none; }
.mjl-meta a:hover { color: #dc2626; }
.mjl-meta-author { color: #6b7280; font-weight: 600; }

/* ---- Post title ---- */
.mjl-post-title {
    display: block;
    font-weight: 700;
    color: #111827;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.2s;
}
.mjl-post-title:hover { color: #dc2626; }

/* ---- Excerpt ---- */
.mjl-excerpt {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.7;
    margin-top: 6px;
}

/* ---- Read more ---- */
.mjl-read-more {
    display: inline-block;
    font-size: 12px;
    color: #dc2626;
    text-decoration: none;
    font-weight: 600;
    margin-top: 6px;
}
.mjl-read-more:hover { text-decoration: underline; }

/* ---- Thumbnail ---- */
.mjl-thumb {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
}
.mjl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.mjl-thumb:hover img { transform: scale(1.04); }
.mjl-no-zoom:hover img,
.mjl-no-zoom img { transform: none !important; }

/* ---- Divider between items ---- */
.mjl-divider {
    border: none;
    border-top: 1px solid #f3f4f6;
    margin: 12px 0;
}

/* ============================================================
   BLOG LISTINGS
   ============================================================ */

/* Blog 1 — صورة فوق، محتوى تحت، عمودي */
.mjl-blog-1 .mjl-items { display: flex; flex-direction: column; gap: 20px; }
.mjl-blog-1 .mjl-item { display: flex; flex-direction: column; gap: 10px; }
.mjl-blog-1 .mjl-thumb { aspect-ratio: 16/9; }
.mjl-blog-1 .mjl-post-title { font-size: 16px; }

/* Blog 2 — صورة يمين + محتوى يسار، أفقي */
.mjl-blog-2 .mjl-items { display: flex; flex-direction: column; gap: 16px; }
.mjl-blog-2 .mjl-item { display: flex; gap: 12px; align-items: flex-start; }
.mjl-blog-2 .mjl-thumb { width: 120px; height: 80px; flex-shrink: 0; }
.mjl-blog-2 .mjl-content { flex: 1; min-width: 0; }
.mjl-blog-2 .mjl-post-title { font-size: 14px; }

/* Blog 3 — عنوان فوق ثم صورة ثم تفاصيل */
.mjl-blog-3 .mjl-items { display: flex; flex-direction: column; gap: 20px; }
.mjl-blog-3 .mjl-item { display: flex; flex-direction: column; gap: 8px; }
.mjl-blog-3 .mjl-thumb { aspect-ratio: 16/9; order: 2; }
.mjl-blog-3 .mjl-title-wrap { order: 1; }
.mjl-blog-3 .mjl-meta { order: 3; }
.mjl-blog-3 .mjl-excerpt { order: 4; }
.mjl-blog-3 .mjl-post-title { font-size: 18px; }

/* Blog 4 — بطاقات grid 2 أعمدة */
.mjl-blog-4 .mjl-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.mjl-blog-4 .mjl-item { display: flex; flex-direction: column; gap: 8px; }
.mjl-blog-4 .mjl-thumb { aspect-ratio: 4/3; }
.mjl-blog-4 .mjl-post-title { font-size: 14px; }

/* Blog 5 — صورة كبيرة فوق + محتوى مع read more */
.mjl-blog-5 .mjl-items { display: flex; flex-direction: column; gap: 24px; }
.mjl-blog-5 .mjl-item { display: flex; flex-direction: column; gap: 10px; }
.mjl-blog-5 .mjl-thumb { aspect-ratio: 16/8; }
.mjl-blog-5 .mjl-post-title { font-size: 18px; }
.mjl-blog-5 .mjl-excerpt { font-size: 14px; }

/* ============================================================
   CLASSIC LISTINGS
   ============================================================ */

/* Classic 1 — صورة كاملة العرض فوق + محتوى + read more */
.mjl-classic-1 .mjl-items { display: flex; flex-direction: column; gap: 24px; }
.mjl-classic-1 .mjl-item { display: flex; flex-direction: column; gap: 10px; }
.mjl-classic-1 .mjl-thumb { aspect-ratio: 16/9; }
.mjl-classic-1 .mjl-post-title { font-size: 20px; }
.mjl-classic-1 .mjl-excerpt { font-size: 14px; }

/* Classic 2 — صورة يمين + محتوى يسار كبير */
.mjl-classic-2 .mjl-items { display: flex; flex-direction: column; gap: 20px; }
.mjl-classic-2 .mjl-item { display: flex; gap: 16px; align-items: flex-start; }
.mjl-classic-2 .mjl-thumb { width: 200px; height: 130px; flex-shrink: 0; }
.mjl-classic-2 .mjl-content { flex: 1; min-width: 0; }
.mjl-classic-2 .mjl-post-title { font-size: 17px; }
.mjl-classic-2 .mjl-excerpt { font-size: 13px; }

/* Classic 3 — صورة overlay عنوان فوق الصورة + باقي تحت */
.mjl-classic-3 .mjl-items { display: flex; flex-direction: column; gap: 20px; }
.mjl-classic-3 .mjl-item { display: flex; flex-direction: column; gap: 10px; }
.mjl-classic-3 .mjl-thumb-overlay { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16/9; }
.mjl-classic-3 .mjl-thumb-overlay img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.mjl-classic-3 .mjl-thumb-overlay:hover img { transform: scale(1.04); }
.mjl-classic-3 .mjl-thumb-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 14px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
.mjl-classic-3 .mjl-thumb-caption .mjl-post-title { color: #fff; font-size: 15px; }
.mjl-classic-3 .mjl-post-title { font-size: 17px; }
.mjl-classic-3 .mjl-excerpt { font-size: 13px; }

/* ============================================================
   GRID LISTINGS
   ============================================================ */

/* Grid 1 — بطاقات متساوية N أعمدة، صورة فوق */
.mjl-grid-1 .mjl-items { display: grid; gap: 16px; }
.mjl-grid-1 .mjl-item { display: flex; flex-direction: column; gap: 8px; }
.mjl-grid-1 .mjl-thumb { aspect-ratio: 4/3; }
.mjl-grid-1 .mjl-post-title { font-size: 14px; }

/* Grid 2 — بطاقات N أعمدة، عنوان فوق ثم صورة ثم ملخص */
.mjl-grid-2 .mjl-items { display: grid; gap: 16px; }
.mjl-grid-2 .mjl-item { display: flex; flex-direction: column; gap: 8px; }
.mjl-grid-2 .mjl-thumb { aspect-ratio: 4/3; order: 2; }
.mjl-grid-2 .mjl-title-wrap { order: 1; }
.mjl-grid-2 .mjl-meta { order: 3; }
.mjl-grid-2 .mjl-excerpt { order: 4; }
.mjl-grid-2 .mjl-post-title { font-size: 14px; }

/* ============================================================
   MODERN GRID LISTINGS
   ============================================================ */

/* Shared modern grid */
.mjl-mg .mjl-mg-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
}
.mjl-mg .mjl-mg-item-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
.mjl-mg .mjl-mg-item-inner .mjl-mg-thumb {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%;
    width: 100%;
}
.mjl-mg .mjl-mg-thumb {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 6px;
}
.mjl-mg .mjl-mg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}
.mjl-mg .mjl-mg-thumb:hover img { transform: scale(1.05); }
.mjl-mg .mjl-no-zoom:hover img,
.mjl-mg .mjl-no-zoom img { transform: none !important; }
.mjl-mg .mjl-mg-body {
    padding: 10px 12px 12px;
}
.mjl-mg .mjl-mg-body .mjl-post-title { font-size: 14px; }

/* overlay body inside item */
.mjl-mg .mjl-mg-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 40px 12px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    border-radius: 0 0 6px 6px;
}
.mjl-mg .mjl-mg-overlay .mjl-post-title { color: #fff; font-size: 14px; }
.mjl-mg .mjl-mg-overlay .mjl-meta { color: rgba(255,255,255,0.7); }
.mjl-mg .mjl-mg-overlay .mjl-meta a { color: rgba(255,255,255,0.7); }
.mjl-mg .mjl-mg-overlay .mjl-cat { margin-bottom: 4px; }

/* No thumbnail placeholder */
.mjl-mg .mjl-mg-no-thumb {
    background: #1f2937;
    height: 100%;
}

/* MG-1: خبر كبير يسار + [خبر كبير + 2 صغار] يمين */
.mjl-mg-1 .mjl-mg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 4px;
    height: 420px;
}
.mjl-mg-1 .mjl-mg-item-1 { grid-row: 1 / 3; grid-column: 1; }
.mjl-mg-1 .mjl-mg-item-2 { grid-row: 1; grid-column: 2; }
.mjl-mg-1 .mjl-mg-item-3 { grid-row: 2; grid-column: 2; }
.mjl-mg-1 .mjl-mg-item { height: 100%; }
.mjl-mg-1 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-2: خبر كبير يسار + 4 صغار يمين (2×2) */
.mjl-mg-2 .mjl-mg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 440px;
}
.mjl-mg-2 .mjl-mg-item-1 { grid-row: 1 / 3; grid-column: 1; }
.mjl-mg-2 .mjl-mg-item-2 { grid-row: 1; grid-column: 2; }
.mjl-mg-2 .mjl-mg-item-3 { grid-row: 2; grid-column: 2; }
.mjl-mg-2 .mjl-mg-item { height: 100%; }
.mjl-mg-2 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-3: grid متساوي overlay */
.mjl-mg-3 .mjl-mg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mjl-mg-3 .mjl-mg-item { height: 220px; }
.mjl-mg-3 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-4: grid متساوي 4 أعمدة overlay */
.mjl-mg-4 .mjl-mg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mjl-mg-4 .mjl-mg-item { height: 180px; }
.mjl-mg-4 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-5: كبير وسط + 2 جانبي */
.mjl-mg-5 .mjl-mg-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 4px;
    height: 380px;
}
.mjl-mg-5 .mjl-mg-item { height: 100%; }
.mjl-mg-5 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-11: كبير وسط + 2 يسار + 2 يمين */
.mjl-mg-11 .mjl-mg-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 380px;
    gap: 4px;
    align-items: stretch;
}
.mjl-mg-11-col {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 380px;
}
.mjl-mg-11-center {
    grid-template-rows: 1fr;
}
.mjl-mg-11 .mjl-mg-item {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    height: 100%;
    min-height: 0;
}
.mjl-mg-11 .mjl-mg-item-inner {
    height: 100%;
}
.mjl-mg-11 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-6: خبر كبير فوق + 4 تحته */
.mjl-mg-6 .mjl-mg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 260px 180px;
    gap: 4px;
}
.mjl-mg-6 .mjl-mg-item-1 { grid-column: 1 / 5; }
.mjl-mg-6 .mjl-mg-item { height: 100%; }
.mjl-mg-6 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-7: صفين — صف 1: 2 كبير، صف 2: 3 صغير */
.mjl-mg-7 .mjl-mg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 240px 180px;
    gap: 4px;
}
.mjl-mg-7 .mjl-mg-item-1 { grid-column: 1 / 3; }
.mjl-mg-7 .mjl-mg-item-2 { grid-column: 3; }
.mjl-mg-7 .mjl-mg-item { height: 100%; }
.mjl-mg-7 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-8: كبير يسار + كبير وسط + 3 يمين */
.mjl-mg-8 .mjl-mg-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    height: 420px;
}
.mjl-mg-8 .mjl-mg-item-1 { grid-row: 1 / 4; grid-column: 1; }
.mjl-mg-8 .mjl-mg-item-2 { grid-row: 1 / 3; grid-column: 2; }
.mjl-mg-8 .mjl-mg-item-3 { grid-row: 3; grid-column: 2; }
.mjl-mg-8 .mjl-mg-item-4 { grid-row: 1; grid-column: 3; }
.mjl-mg-8 .mjl-mg-item-5 { grid-row: 2; grid-column: 3; }
.mjl-mg-8 .mjl-mg-item-6 { grid-row: 3; grid-column: 3; }
.mjl-mg-8 .mjl-mg-item { height: 100%; }
.mjl-mg-8 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-9: كبير يسار + 4 وسط (2×2) + 2 يمين */
.mjl-mg-9 .mjl-mg-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    height: 400px;
}
.mjl-mg-9 .mjl-mg-item-1 { grid-row: 1 / 3; grid-column: 1; }
.mjl-mg-9 .mjl-mg-item-2 { grid-row: 1; grid-column: 2; }
.mjl-mg-9 .mjl-mg-item-3 { grid-row: 2; grid-column: 2; }
.mjl-mg-9 .mjl-mg-item-4 { grid-row: 1; grid-column: 3; }
.mjl-mg-9 .mjl-mg-item-5 { grid-row: 2; grid-column: 3; }
.mjl-mg-9 .mjl-mg-item-6 { grid-row: 1; grid-column: 4; }
.mjl-mg-9 .mjl-mg-item-7 { grid-row: 2; grid-column: 4; }
.mjl-mg-9 .mjl-mg-item { height: 100%; }
.mjl-mg-9 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* MG-10: صفين — صف 1: 2 كبير، صف 2: 4 صغير */
.mjl-mg-10 .mjl-mg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 240px 180px;
    gap: 4px;
}
.mjl-mg-10 .mjl-mg-item-1 { grid-column: 1 / 3; }
.mjl-mg-10 .mjl-mg-item-2 { grid-column: 3 / 5; }
.mjl-mg-10 .mjl-mg-item { height: 100%; }
.mjl-mg-10 .mjl-mg-thumb { height: 100%; aspect-ratio: unset; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    /* Blog 4 → 1 col */
    .mjl-blog-4 .mjl-items { grid-template-columns: 1fr; }

    /* Classic 2 thumb smaller */
    .mjl-classic-2 .mjl-thumb { width: 140px; height: 95px; }

    /* Grid → 2 cols */
    .mjl-grid-1 .mjl-items,
    .mjl-grid-2 .mjl-items { grid-template-columns: repeat(2, 1fr) !important; }

    /* MG-1, MG-2: stack */
    .mjl-mg-1 .mjl-mg-grid,
    .mjl-mg-2 .mjl-mg-grid { grid-template-columns: 1fr; height: auto; }
    .mjl-mg-1 .mjl-mg-item-1,
    .mjl-mg-2 .mjl-mg-item-1 { grid-row: auto; grid-column: auto; }
    .mjl-mg-1 .mjl-mg-item,
    .mjl-mg-2 .mjl-mg-item { height: 200px; }

    /* MG-3 → 2 cols */
    .mjl-mg-3 .mjl-mg-grid { grid-template-columns: repeat(2, 1fr); }

    /* MG-4 → 2 cols */
    .mjl-mg-4 .mjl-mg-grid { grid-template-columns: repeat(2, 1fr); }
    .mjl-mg-4 .mjl-mg-item { height: 160px; }

    /* MG-5 → stack */
    .mjl-mg-5 .mjl-mg-grid { grid-template-columns: 1fr; height: auto; }
    .mjl-mg-5 .mjl-mg-item { height: 200px; }

    /* MG-11 → stack */
    .mjl-mg-11 .mjl-mg-grid { grid-template-columns: 1fr; height: auto; }
    .mjl-mg-11-col { height: auto; }
    .mjl-mg-11 .mjl-mg-item { height: 200px; flex: unset; }

    /* MG-6 → 2 cols */
    .mjl-mg-6 .mjl-mg-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 200px 160px 160px; }
    .mjl-mg-6 .mjl-mg-item-1 { grid-column: 1 / 3; }

    /* MG-7 → stack */
    .mjl-mg-7 .mjl-mg-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
    .mjl-mg-7 .mjl-mg-item-1,
    .mjl-mg-7 .mjl-mg-item-2 { grid-column: auto; }
    .mjl-mg-7 .mjl-mg-item { height: 200px; }

    /* MG-8 → stack */
    .mjl-mg-8 .mjl-mg-grid { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
    .mjl-mg-8 .mjl-mg-item-1,
    .mjl-mg-8 .mjl-mg-item-2,
    .mjl-mg-8 .mjl-mg-item-3 { grid-row: auto; grid-column: auto; }
    .mjl-mg-8 .mjl-mg-item { height: 200px; }

    /* MG-9 → 2 cols */
    .mjl-mg-9 .mjl-mg-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; height: auto; }
    .mjl-mg-9 .mjl-mg-item-1 { grid-row: auto; grid-column: 1 / 3; height: 220px; }
    .mjl-mg-9 .mjl-mg-item { height: 160px; }

    /* MG-10 → 2 cols */
    .mjl-mg-10 .mjl-mg-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 200px 160px 160px; }
    .mjl-mg-10 .mjl-mg-item-1,
    .mjl-mg-10 .mjl-mg-item-2 { grid-column: auto; }
}

@media (max-width: 600px) {
    /* Blog 2 thumb smaller */
    .mjl-blog-2 .mjl-thumb { width: 90px; height: 65px; }

    /* Classic 2 → stack */
    .mjl-classic-2 .mjl-item { flex-direction: column; }
    .mjl-classic-2 .mjl-thumb { width: 100%; height: auto; aspect-ratio: 16/9; }

    /* Grid → 1 col */
    .mjl-grid-1 .mjl-items,
    .mjl-grid-2 .mjl-items { grid-template-columns: 1fr !important; }

    /* Blog 4 stays 1 col */
    .mjl-blog-4 .mjl-items { grid-template-columns: 1fr; }

    /* MG-3 → 1 col */
    .mjl-mg-3 .mjl-mg-grid { grid-template-columns: 1fr; }

    /* MG-4 → 1 col */
    .mjl-mg-4 .mjl-mg-grid { grid-template-columns: 1fr; }

    /* MG-6 → 1 col */
    .mjl-mg-6 .mjl-mg-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .mjl-mg-6 .mjl-mg-item-1 { grid-column: auto; }

    /* MG-9 → 1 col */
    .mjl-mg-9 .mjl-mg-grid { grid-template-columns: 1fr; }
    .mjl-mg-9 .mjl-mg-item-1 { grid-column: auto; }

    /* MG-10 → 1 col */
    .mjl-mg-10 .mjl-mg-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .mjl-mg-10 .mjl-mg-item-1,
    .mjl-mg-10 .mjl-mg-item-2 { grid-column: auto; }
}