/* ==========================================================================
   استایل محتوای مقاله‌های بلاگ
   این فایل هم در صفحهٔ عمومی (.ckeditor-content) و هم داخل ادیتور ادمین
   (.ck-content) لود می‌شود تا نویسنده دقیقاً همان چیزی را ببیند که منتشر می‌شود.
   ========================================================================== */

/* متغیرهای تم فقط در style.css تعریف شده‌اند و ادمین آن را لود نمی‌کند */
.ck-content {
    --light-purple: #F6F4FE;
    --purple: #6A49F2;
    --dark-purple: #32236F;
    --body-text-purple: #3E3F66;
    --dark-bg-text: #9995b1;
    --light-bg: #DFDAF3;
}

.ckeditor-content,
.ck-content {
    width: 100%;
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
    color: var(--body-text-purple);
}


/* --------------------------------------------------------------------------
   تایپوگرافی پایه
   -------------------------------------------------------------------------- */

.ckeditor-content h2,
.ck-content h2 {
    color: var(--dark-purple);
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 15px;
}

.ckeditor-content h3,
.ck-content h3 {
    color: var(--dark-purple);
    font-size: 22px;
    font-weight: 700;
    margin: 30px 0 12px;
}

.ckeditor-content h4,
.ck-content h4 {
    color: var(--dark-purple);
    font-size: 18px;
    font-weight: 600;
    margin: 25px 0 10px;
}

.ckeditor-content p,
.ck-content p {
    line-height: 2;
    margin-bottom: 15px;
}

.ckeditor-content a,
.ck-content a {
    color: var(--purple);
    text-decoration: none;
}

.ckeditor-content a:hover,
.ck-content a:hover {
    text-decoration: underline;
}

.ckeditor-content ul,
.ckeditor-content ol,
.ck-content ul,
.ck-content ol {
    padding-right: 25px;
    padding-left: 0;
    margin-bottom: 20px;
    line-height: 2;
}

.ckeditor-content li,
.ck-content li {
    margin-bottom: 6px;
}

.ckeditor-content hr,
.ck-content hr {
    border: 0;
    border-top: 1px solid var(--light-bg);
    margin: 35px 0;
    height: 0;
    background: none;
}

.ckeditor-content code,
.ck-content code {
    background-color: var(--light-purple);
    color: var(--dark-purple);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    direction: ltr;
    display: inline-block;
}

.ckeditor-content pre,
.ck-content pre {
    background-color: var(--light-purple);
    border-radius: 10px;
    padding: 18px 20px;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    margin: 25px 0;
}

.ckeditor-content pre code,
.ck-content pre code {
    background: none;
    padding: 0;
}

/* نقل‌قول ساده (بدون کلاس اختصاصی) */
.ckeditor-content blockquote,
.ck-content blockquote {
    border-right: 4px solid var(--purple);
    border-left: 0;
    background-color: var(--light-purple);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 25px 0;
    font-style: normal;
    color: var(--dark-purple);
}

.ckeditor-content blockquote p:last-child,
.ck-content blockquote p:last-child {
    margin-bottom: 0;
}

.ckeditor-content figcaption,
.ck-content figcaption {
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    color: var(--dark-bg-text);
    padding-top: 8px;
    background: none;
}

/* جدول‌های معمولی */
.ckeditor-content figure.table table,
.ck-content figure.table table {
    width: 100%;
    border-collapse: collapse;
}

.ckeditor-content figure.table td,
.ckeditor-content figure.table th,
.ck-content figure.table td,
.ck-content figure.table th {
    border: 1px solid var(--light-bg);
    padding: 10px 14px;
    text-align: right;
}

.ckeditor-content figure.table th,
.ck-content figure.table th {
    background-color: var(--light-purple);
    color: var(--dark-purple);
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   تصاویر: چیدمان و ترازبندی (RTL)
   -------------------------------------------------------------------------- */

.ckeditor-content figure.image,
.ck-content figure.image {
    display: table;
    margin: 1.5rem auto;
    max-width: 100%;
    clear: both;
}

.ckeditor-content figure.image img,
.ckeditor-content img,
.ck-content figure.image img {
    max-width: 100%;
    height: auto;
}

.ckeditor-content figure.image img,
.ck-content figure.image img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

/* تصویر درون‌خطی */
.ckeditor-content .image-inline img,
.ck-content .image-inline img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* شناور به چپ/راست */
.ckeditor-content figure.image.image-style-align-left,
.ck-content figure.image.image-style-align-left {
    float: left;
    margin: 0.5rem 1.5rem 1.5rem 0;
    max-width: 50%;
}

.ckeditor-content figure.image.image-style-align-right,
.ck-content figure.image.image-style-align-right {
    float: right;
    margin: 0.5rem 0 1.5rem 1.5rem;
    max-width: 50%;
}

/* «کنار متن» در چیدمان راست‌به‌چپ یعنی شناور به چپ */
.ckeditor-content figure.image.image-style-side,
.ck-content figure.image.image-style-side {
    float: left;
    margin: 0.5rem 1.5rem 1.5rem 0;
    max-width: 50%;
}

.ckeditor-content figure.image.image-style-align-center,
.ck-content figure.image.image-style-align-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* بلوک تراز شده به چپ/راست (بدون شناوری متن) */
.ckeditor-content figure.image.image-style-block-align-left,
.ck-content figure.image.image-style-block-align-left {
    float: none;
    margin-left: auto;
    margin-right: 0;
}

.ckeditor-content figure.image.image-style-block-align-right,
.ck-content figure.image.image-style-block-align-right {
    float: none;
    margin-left: 0;
    margin-right: auto;
}

/* عرض دستی (resize) از استایل inline خود المان می‌آید */
.ckeditor-content figure.image_resized,
.ck-content figure.image_resized {
    display: block;
    box-sizing: border-box;
}

.ckeditor-content figure.image_resized img,
.ck-content figure.image_resized img {
    width: 100%;
}


/* --------------------------------------------------------------------------
   ردیف دو ستونه: متن در یک ستون، تصویر در ستون دیگر
   ساخت: جدول ۱×۲ بسازید و از منوی Style گزینهٔ «ردیف دو ستونه» را بزنید.
   (نسخهٔ div برای زمانی است که با sourceEditing/htmlEmbed نوشته شود)
   -------------------------------------------------------------------------- */

.ckeditor-content .art-row,
.ck-content .art-row {
    margin: 30px 0;
    clear: both;
}

.ckeditor-content .art-row table,
.ck-content .art-row table {
    width: 100%;
    border: 0;
    table-layout: fixed;
    border-collapse: collapse;
}

.ckeditor-content .art-row tbody,
.ck-content .art-row tbody {
    display: block;
}

.ckeditor-content .art-row tr,
.ckeditor-content div.art-row,
.ck-content .art-row tr,
.ck-content div.art-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

.ckeditor-content .art-row td,
.ckeditor-content div.art-row > div,
.ck-content .art-row td,
.ck-content div.art-row > div {
    flex: 1 1 300px;
    border: 0 !important;
    padding: 0;
    background: none;
    vertical-align: middle;
}

.ckeditor-content .art-row figure.image,
.ckeditor-content .art-row img,
.ck-content .art-row figure.image,
.ck-content .art-row img {
    display: block;
    float: none;
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.ckeditor-content .art-row p:last-child,
.ck-content .art-row p:last-child {
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   کارت‌ها — هم‌زبان با استایل story_box سایت
   -------------------------------------------------------------------------- */

.ckeditor-content .art-cards,
.ck-content .art-cards {
    margin: 30px 0;
    clear: both;
}

.ckeditor-content .art-cards table,
.ck-content .art-cards table {
    width: 100%;
    border: 0;
    table-layout: fixed;
    border-collapse: separate;
}

.ckeditor-content .art-cards tbody,
.ck-content .art-cards tbody {
    display: block;
}

.ckeditor-content .art-cards tr,
.ckeditor-content div.art-cards,
.ck-content .art-cards tr,
.ck-content div.art-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: stretch;
}

.ckeditor-content .art-cards td,
.ckeditor-content div.art-cards > div,
.ckeditor-content .art-card,
.ck-content .art-cards td,
.ck-content div.art-cards > div,
.ck-content .art-card {
    flex: 1 1 260px;
    background-color: #ffffff;
    border: 0 !important;
    border-radius: 10px;
    box-shadow: 0 4px 30px #EDE9FE;
    padding: 22px 25px;
}

.ckeditor-content .art-cards td,
.ckeditor-content div.art-cards > div,
.ck-content .art-cards td,
.ck-content div.art-cards > div {
    text-align: center;
}

/* کارت تکی */
.ckeditor-content .art-card,
.ck-content .art-card {
    display: block;
    margin: 25px 0;
    clear: both;
}

.ckeditor-content .art-cards h3,
.ckeditor-content .art-cards h4,
.ckeditor-content .art-card h3,
.ckeditor-content .art-card h4,
.ck-content .art-cards h3,
.ck-content .art-cards h4,
.ck-content .art-card h3,
.ck-content .art-card h4 {
    color: var(--dark-purple);
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px;
}

.ckeditor-content .art-cards p:last-child,
.ckeditor-content .art-card p:last-child,
.ck-content .art-cards p:last-child,
.ck-content .art-card p:last-child {
    margin-bottom: 0;
}

.ckeditor-content .art-cards img,
.ck-content .art-cards img {
    float: none;
    margin: 0 auto 15px;
}


/* --------------------------------------------------------------------------
   جعبه‌های نکته / هشدار / مهم — نوار تأکید در سمت راست (RTL)
   -------------------------------------------------------------------------- */

.ckeditor-content .art-note,
.ckeditor-content .art-warning,
.ckeditor-content .art-important,
.ck-content .art-note,
.ck-content .art-warning,
.ck-content .art-important {
    display: block;
    border-left: 0;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 25px 0;
    font-style: normal;
    clear: both;
}

.ckeditor-content .art-note,
.ck-content .art-note {
    background-color: var(--light-purple);
    border-right: 4px solid var(--purple);
    color: var(--dark-purple);
}

.ckeditor-content .art-warning,
.ck-content .art-warning {
    background-color: #FFF7E6;
    border-right: 4px solid #F0A400;
    color: #6B4B00;
}

.ckeditor-content .art-important,
.ck-content .art-important {
    background-color: #FDEDEF;
    border-right: 4px solid #E0405B;
    color: #7A1725;
}

.ckeditor-content .art-note p:last-child,
.ckeditor-content .art-warning p:last-child,
.ckeditor-content .art-important p:last-child,
.ck-content .art-note p:last-child,
.ck-content .art-warning p:last-child,
.ck-content .art-important p:last-child {
    margin-bottom: 0;
}

.ckeditor-content .art-note h3,
.ckeditor-content .art-warning h3,
.ckeditor-content .art-important h3,
.ck-content .art-note h3,
.ck-content .art-warning h3,
.ck-content .art-important h3 {
    color: inherit;
    font-size: 18px;
    margin: 0 0 10px;
}


/* --------------------------------------------------------------------------
   پاراگراف شاخص و تصویر تمام‌عرض
   -------------------------------------------------------------------------- */

.ckeditor-content .art-lead,
.ck-content .art-lead {
    font-size: 19px;
    font-weight: 500;
    line-height: 2;
    color: var(--dark-purple);
    margin-bottom: 25px;
}

/* پنل مقاله ۶۰px پدینگ افقی دارد؛ این کلاس تصویر را تا لبهٔ پنل باز می‌کند */
.ckeditor-content .art-full,
.ck-content .art-full {
    max-width: none;
    width: auto;
    margin-right: -60px;
    margin-left: -60px;
    float: none;
    clear: both;
}

.ckeditor-content .art-full img,
.ck-content .art-full img {
    width: 100%;
    border-radius: 0;
}


/* --------------------------------------------------------------------------
   موبایل
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    .ckeditor-content figure,
    .ck-content figure {
        margin: 1rem 0;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    .ckeditor-content figure.image img,
    .ck-content figure.image img {
        width: 100%;
    }

    .ckeditor-content .art-row tr,
    .ckeditor-content div.art-row,
    .ckeditor-content .art-cards tr,
    .ckeditor-content div.art-cards,
    .ck-content .art-row tr,
    .ck-content div.art-row,
    .ck-content .art-cards tr,
    .ck-content div.art-cards {
        flex-direction: column;
    }

    .ckeditor-content .art-full,
    .ck-content .art-full {
        margin-right: -20px;
        margin-left: -20px;
    }

    .ckeditor-content h2,
    .ck-content h2 {
        font-size: 23px;
    }

    .ckeditor-content h3,
    .ck-content h3 {
        font-size: 19px;
    }
}