﻿/* اتجاه RTL اختياري */
.rt-content {
    direction: rtl;
    text-align: right;
}

    /* صور داخل المحتوى */
    .rt-content img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    /* ✅ جدول ريسبونسيف */
    .rt-content table {
        width: 100% !important;
        border-collapse: collapse;
        table-layout: fixed; /* توزيع أعمدة متساوي وتقص القص الزائد */
    }

        .rt-content table td,
        .rt-content table th {
            padding: 6px;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #e3e3e3; /* اختياري */
        }

        /* لو CKEditor خزّن عرض/ارتفاع inline، اجبر المحتوى يتناسب */
        .rt-content table,
        .rt-content table * {
            max-width: 100% !important;
            height: auto;
        }

/* 🚀 موبايل: حوّل الصفوف إلى خلايا مكدّسة (Stacked) */
@media (max-width: 768px) {
    .rt-content table,
    .rt-content table tbody,
    .rt-content table tr,
    .rt-content table td,
    .rt-content table th {
        display: block;
        width: 100% !important;
    }

        .rt-content table tr {
            margin-bottom: 12px;
        }

        .rt-content table td,
        .rt-content table th {
            border: none; /* شكلاً أنظف على الموبايل */
            padding: 8px 0;
        }
}

/* اختياري: لو تبي تبقي ترويسات الجدول مميزة على الموبايل */
@media (max-width: 768px) {
    .rt-content table thead {
        display: none;
    }
    /* نخفي العناوين */
    .rt-content table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        margin-bottom: 4px;
    }
}
@media (max-width: 768px) {
    .rt-content table {
        display: block !important;
    }

        .rt-content table thead, .rt-content table tfoot, .rt-content table colgroup {
            display: none !important;
        }

        .rt-content table tbody {
            display: grid !important;
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .rt-content table tr {
            display: contents !important;
        }
        /* يمرر الخلايا للشبكة */
        .rt-content table td, .rt-content table th {
            display: block !important;
            width: 100% !important;
            border: none !important;
        }
}
/* أساسيات عامة */
.rt-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* صور CKEditor (figure.image) */
.rt-content .image {
    margin: 0 auto 10px;
}

    /* لو CKEditor أعطى عرض ثابت للـ figure (image_resized)، خليه يتمدّد */
    .rt-content .image.image_resized {
        width: 100% !important;
    }

/* ولو أعطى عرض/ارتفاع inline للـ <img> نفسه، تجاهله على الموبايل */
@media (max-width: 576px) {
    .rt-content img[style*="width"] {
        width: 100% !important;
    }

    .rt-content img[width] {
        width: 100% !important;
    }

    .rt-content img[height] {
        height: auto !important;
    }

    /* اجبر figure يأخذ كامل السطر */
    .rt-content .image {
        display: block !important;
        width: 100% !important;
    }
}

/* إن كانت الصور داخل جدول: حوّل الجدول إلى تكديس على الموبايل */
@media (max-width: 576px) {
    .rt-content table,
    .rt-content tbody,
    .rt-content tr,
    .rt-content td {
        display: block !important;
        width: 100% !important;
    }

        .rt-content table colgroup, .rt-content thead {
            display: none !important;
        }

        .rt-content td img {
            width: 100% !important;
            height: auto !important;
        }
}

