.hnf-slider-outer,
.hnf-slider-outer * {
    box-sizing: border-box;
}

.hnf-slider-outer {
    max-width: 1100px;
    margin: 20px auto;
    font-family: 'Yekan Bakh', Tahoma, sans-serif;
    position: relative;
    overflow: hidden; /* هیچ اسکرول‌باری از خود کامپوننت بیرون نمی‌زند */
}

.hnf-slider-wrap {
    position: relative;
}

.hnf-slider-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    position: relative;
    direction: ltr;
    scroll-behavior: auto !important; /* برخی قالب‌ها scroll-behavior:smooth سراسری تنظیم می‌کنند که با اسکرول فریم‌به‌فریم ما تداخل و کندی/کندجهش ایجاد می‌کرد */
    touch-action: pan-y;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hnf-slider-viewport::-webkit-scrollbar {
    display: none;               /* Chrome/Safari/Edge جدید */
    height: 0;
}

.hnf-slider-viewport:active {
    cursor: grabbing;
}

.hnf-slider-track {
    display: flex;
    direction: ltr;
    width: max-content;
}

/* ارتفاع کارت همیشه یک مقدار ثابت و قطعی است (نه auto) تا فرزندانِ height:100% رفتار قابل‌پیش‌بینی داشته باشند */
.hnf-card {
    flex: 0 0 auto;
    display: flex;
    direction: ltr;
    width: var(--hnf-card-width, 380px) !important;
    height: var(--hnf-card-height, 130px) !important;
    max-width: none !important;
    background: var(--hnf-bg, #ffffff);
    border: 1px solid var(--hnf-border, #ececec);
    border-radius: var(--hnf-radius, 16px);
    box-shadow: var(--hnf-shadow, 0 6px 16px rgba(0,0,0,0.06));
    overflow: hidden;
    margin: 0 calc(var(--hnf-card-gap, 10px) / 2);
}

/* تصویر: بخش مستطیلی کارت، عرض به‌صورت درصدی از کل کارت (متناسب با تصاویر مستطیلی سایت) */
.hnf-card-img {
    flex: 0 0 var(--hnf-img-ratio, 45%) !important;
    width: var(--hnf-img-ratio, 45%) !important;
    height: 100% !important;
    max-width: none !important;
}

.hnf-card-img img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center var(--hnf-img-pos, top) !important;
    display: block;
    margin: 0 !important;
    -webkit-user-drag: none;
}

/* اطلاعات پست: باقی‌مانده‌ی عرض کارت. حالا که فونت عنوان به‌صورت خودکار خودش را با کادر
   تطبیق می‌دهد (fitCardTitles در JS)، محتوا با خیال راحت وسط‌چین می‌شود تا در کارت‌های
   بلندتر هم فضای خالی زیاد بالا/پایین دیده نشود و ترکیب عنوان+خلاصه+لینک متعادل بماند */
.hnf-card-content {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    height: 100%;
    direction: rtl;
    text-align: right;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    overflow: hidden;
}

.hnf-card-title {
    font-weight: bold;
    font-size: var(--hnf-title-font-size, clamp(10px, calc(var(--hnf-card-height, 130px) * 0.115), 26px));
    color: var(--hnf-title-color, #1f1f1f);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.hnf-card-excerpt {
    font-size: var(--hnf-excerpt-font-size, clamp(10.5px, calc(var(--hnf-card-height, 130px) * 0.08), 16px));
    color: var(--hnf-excerpt-color, #666666);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: var(--hnf-excerpt-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hnf-card-link {
    align-self: flex-start;
    color: var(--hnf-link-color, #df2027);
    font-weight: bold;
    font-size: clamp(10.5px, calc(var(--hnf-card-height, 130px) * 0.075), 15px);
    text-decoration: none;
    border-bottom: 1px dashed var(--hnf-link-color, #df2027);
    margin-top: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- فلش‌های ناوبری --- */
.hnf-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    padding: 0;
    border: none;
    color: #1f1f1f;
}

.hnf-arrow svg { width: 16px; height: 16px; }

.hnf-arrow-prev { left: 4px; }
.hnf-arrow-next { right: 4px; }

.hnf-arrows-circle .hnf-arrow {
    background: rgba(255,255,255,0.92);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.hnf-arrows-square .hnf-arrow {
    background: rgba(255,255,255,0.92);
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.hnf-arrows-minimal .hnf-arrow {
    background: transparent;
    color: var(--hnf-link-color, #df2027);
}

.hnf-arrow:hover { filter: brightness(0.96); }
.hnf-arrow:disabled { opacity: 0.3; cursor: default; }

/* --- افکت درخشش زیر اسلاید (شبیه Flow) --- */
.hnf-flow-effect .hnf-slider-wrap { position: relative; }

.hnf-flow-effect .hnf-slider-wrap::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: -16px;
    height: 26px;
    background: radial-gradient(ellipse at center, var(--hnf-link-color, #df2027) 0%, transparent 72%);
    filter: blur(18px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
}

/* --- نمایش واکنش‌گرا بر اساس نوع دستگاه (هماهنگ با بریک‌پوینت‌های ۴گانه‌ی اندازه‌ی کارت) --- */
@media (max-width: 599px) {
    .hnf-hide-mobile { display: none !important; }
}
@media (min-width: 600px) and (max-width: 991px) {
    .hnf-hide-tablet { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hnf-hide-laptop { display: none !important; }
}
@media (min-width: 1200px) {
    .hnf-hide-desktop { display: none !important; }
}

/* --- بهینه‌سازی موبایل: اندازه‌ی کارت اکنون از تنظیمات پنل ادمین می‌آید (نه مقدار ثابت اینجا) --- */
@media (max-width: 599px) {
    .hnf-slider-outer { margin: 12px auto; }

    .hnf-card { margin: 0 6px; }

    .hnf-card-content {
        padding: 8px 10px;
        gap: 2px;
    }

    .hnf-card-excerpt { display: none; } /* در کارت کوچک موبایل، فضا اولویت با عنوان کامل است */

    .hnf-arrow { width: 26px; height: 26px; }
    .hnf-arrow svg { width: 12px; height: 12px; }
    .hnf-arrow-prev { left: 0; }
    .hnf-arrow-next { right: 0; }
}