/* =====================================================================
   iq-source-section -- بخشِ «مخزنی» روی صفحهٔ عمومی
   =====================================================================
   task-passage-hub-composition-and-two-step-add-section (۲۰۲۶-۱۱-۰۷)

   نیمهٔ عمومیِ بخشی که ادمین در نمای شماتیک ساخت.

   چرا شیتِ مستقل و نه افزودن به شیتِ ویترین: این پارشیال روی *دو*
   صفحهٔ عمومیِ کاملاً متفاوت سوار می‌شود -- `welcome_store` (ویترینِ
   فروشگاه، با پشتهٔ شیتِ سنگینِ خودش) و `passage/public/home` (صفحهٔ
   پاساژ، که فقط بوت‌استرپِ ۴ را دارد). پس قواعد باید خودکفا باشند و
   به هیچ‌کدام از آن دو تکیه نکنند.

   همهٔ قواعد زیرِ `.iq-ss` محدودند، و رنگِ تأکید از متغیرِ
   `--iq-ss-accent` می‌آید که پارشیال با رنگِ مالک (پاساژ/فروشگاه) پر
   می‌کند -- پس یک شیت، هر پالت.

   موبایل‌اول: گریدِ `auto-fill` از ۱۴۰px شروع می‌شود، یعنی در ۳۷۵px
   دو ستون و در دسکتاپ خودش پر می‌شود -- بدونِ هیچ media queryِ
   شمارشِ ستون.
   ===================================================================== */

.iq-ss {
    --iq-ss-accent: #16ACB7;
    padding: 26px 0;
}

.iq-ss-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* ── عنوانِ بخش ───────────────────────────────────────────────────── */
.iq-ss-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 19px;
    font-weight: 700;
    color: #27454a;
    margin: 0 0 16px;
    padding-inline-start: 11px;
    border-inline-start: 4px solid var(--iq-ss-accent);
    line-height: 1.6;
}

.iq-ss-title i { color: var(--iq-ss-accent); font-size: 16px; }

/* ── چیدمان‌ها ────────────────────────────────────────────────────── */
.iq-ss-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.iq-ss-wide .iq-ss-items {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* `row` = نوارِ افقیِ اسکرول‌شونده. اسکرول داخلِ خودِ نوار است، پس
   صفحه هرگز افقی اسکرول نمی‌شود (قاعدهٔ موبایلِ این پروژه). */
.iq-ss-row .iq-ss-items {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
}

.iq-ss-row .iq-ss-card {
    flex: 0 0 auto;
    width: 162px;
    scroll-snap-align: start;
}

/* `lines` = فهرستِ تک‌ستونه با کارتِ افقی. */
.iq-ss-list .iq-ss-items { grid-template-columns: 1fr; gap: 10px; }
.iq-ss-list .iq-ss-card { flex-direction: row; align-items: center; }
.iq-ss-list .iq-ss-media { width: 76px; height: 64px; flex: 0 0 76px; }
.iq-ss-list .iq-ss-body { text-align: start; }

/* ── کارت ─────────────────────────────────────────────────────────── */
.iq-ss-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8eced;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.iq-ss-card:hover {
    border-color: var(--iq-ss-accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.iq-ss-media {
    position: relative;
    width: 100%;
    height: 118px;
    background: #f4f7f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.iq-ss-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.iq-ss-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--iq-ss-accent);
    opacity: .55;
    font-size: 26px;
}

.iq-ss-body {
    padding: 10px 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1 1 auto;
}

.iq-ss-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #27454a;
    line-height: 1.7;
    /* عنوانِ بلند نباید ارتفاعِ کارت‌هایِ یک ردیف را نامساوی کند. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iq-ss-excerpt {
    font-size: 11.5px;
    color: #7a8c91;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.iq-ss-price {
    margin-top: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--iq-ss-accent);
}

.iq-ss-price small { font-size: 10.5px; font-weight: 400; opacity: .8; }

/* ── موبایل ───────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .iq-ss { padding: 18px 0; }
    .iq-ss-title { font-size: 16px; margin-bottom: 12px; }
    .iq-ss-items { gap: 10px; }
    .iq-ss-media { height: 96px; }
    .iq-ss-wide .iq-ss-items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .iq-ss-row .iq-ss-card { width: 144px; }
}