/* ==========================================================================
   فضای جانگهدارنده تصویر مقاله (Article image placeholder)
   --------------------------------------------------------------------------
   وقتی یک مقاله تصویر شاخص ندارد، به جای عکس پیش‌فرض نامرتبط یا جای خالی
   بی‌طراحی، این ساختار نمایش داده می‌شود: هم‌اندازه با تصویر واقعی و با
   لوگوی سایت در مرکز آن.

   قواعد زیر عمداً فقط «رنگ و مرکزچیني» را تعیین می‌کنند و ابعاد را از
   کلاس‌های همان بخش سایت (blog-image ،article-main-image ،popular-post-image_blog و ...)
   به ارث می‌برند تا جانگهدارنده دقیقاً جای تصویر واقعی را پر کند.
   ========================================================================== */

.article-image-placeholder {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--light-gray, #f8fafc);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .95) 0%, rgba(0, 0, 0, .045) 100%);
    border: 1px solid var(--border-color, #e5e7eb);
}

/* کارت‌هایی (صفحه اول، لیست مقالات، مقالات مرتبط) که ارتفاعشان را خود تصویر
   تعیین می‌کند و ارتفاع ثابتی در CSS ندارند؛ نسبت ۳:۲ متناسب با تصاویر
   پیش‌فرض فعلی سایت است. وقتی والد ارتفاع ثابت داشته باشد (مثلاً در موبایل)
   این نسبت نادیده گرفته می‌شود و height:100% حاکم می‌شود. */
.article-image-placeholder--card {
    aspect-ratio: 3 / 2;
    min-height: 160px;
}

/* بندانگشتی‌های کوچک سایدبار و ویجت‌ها (۸۰×۸۰): قاب و گردیِ والد کافی است */
.article-image-placeholder--compact {
    border-width: 0;
    border-radius: 0;
}

/* انتخابگرها با دو کلاس نوشته شده‌اند تا از قواعدی مانند
   «.content-card-image img» یا «.popular-post-image_blog img» که width/height/object-fit
   را روی هر <img> داخل آن بخش تحمیل می‌کنند، قوی‌تر باشند؛ در غیر این صورت
   لوگو کشیده یا بریده می‌شد. */
.article-image-placeholder .article-image-placeholder__logo {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
    opacity: .85;
}

.article-image-placeholder--compact .article-image-placeholder__logo {
    max-width: 62%;
    max-height: 62%;
}

.article-image-placeholder .article-image-placeholder__icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--primary-theme-color, #dc2626);
    opacity: .45;
}

.article-image-placeholder--compact .article-image-placeholder__icon {
    font-size: 1.1rem;
}