/* =============================================================================
   style-home-hero.css — اسلایدر اصلی صفحه نخست (طرح «زرّین»)
   برگرفته از فایل نمونه SliderMainPage.html.

   - چیدمان با container query ساخته شده، نه media query؛ پس همین شیوه‌نامه هم در
     صفحه نخست و هم در پیش‌نمایش فرم پنل مدیریت (که عرض کمتری دارد) درست کار می‌کند.
   - پایه (عرض اسلایدر کمتر از ۶۴۰px): چیدمان موبایل — تصویر تمام‌عرض بالا، متن زیر آن.
     مرورگرهای قدیمی که container query ندارند هم همین چیدمان را می‌بینند.
   - از ۶۴۰px به بالا: کارت افقی — متن سمت راست، تصویر سمت چپ، قاب گوشه‌دار طلایی.
   - اسلایدها در یک خانه‌ی grid روی هم چیده می‌شوند؛ ارتفاع اسلایدر = بلندترین اسلاید.
     بنابراین با تعویض اسلاید پرش چیدمان (CLS) رخ نمی‌دهد و اگر مدیر دکمه‌های زیادی
     بگذارد، محتوا بریده نمی‌شود (اسلایدر فقط در همان حالت از ۲۵۰px بلندتر می‌شود).
   - دو تصویر برای هر اسلاید: دسکتاپ/تبلت نسبت ۲:۱ (۱۲۰۰×۶۰۰، پروفایل «home-slider») و
     موبایل نسبت ۱۶:۱۰ (۱۲۰۰×۷۵۰، پروفایل «home-slider-mobile»)؛ انتخاب با <picture> در _HeroSlider.
   ========================================================================== */

.dlj-hero {
    --hero-card: #ebebeb;               /* پس‌زمینه‌ی اسلایدر */
    --hero-gold: #f8c710;               /* طلایی اصلی — سطوح، حاشیه، نوار پیشرفت */
    --hero-gold-hover: #e6b700;         /* هاور دکمه‌ی طلایی */
    --hero-gold-deep: #7a5c00;          /* طلاییِ متن — کنتراست خوانا روی زمینه‌ی روشن */
    --hero-gold-line: rgba(248, 199, 16, .6);
    --hero-ink: #17181b;                /* عنوان‌ها */
    --hero-ink-soft: #54595f;           /* شرح */
    --hero-ink-mute: #6f757e;           /* عنوان سربرگ، شمارنده */
    --hero-line: rgba(20, 20, 20, .1);
    --hero-ease: cubic-bezier(.22, 1, .36, 1);

    container-type: inline-size;
    container-name: dlj-hero;
    display: block;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    color: var(--hero-ink);
    -webkit-font-smoothing: antialiased;
}

.dlj-hero *,
.dlj-hero *::before,
.dlj-hero *::after { box-sizing: border-box; }

.dlj-hero ::selection { background: var(--hero-gold); color: #1c1500; }

/* ---------------------------------------------------------------------------
   قاب
   ------------------------------------------------------------------------ */
.dlj-hero-frame {
    background: var(--hero-card);
    border-bottom: 1px solid var(--hero-line);
    padding-bottom: 14px;
}

.dlj-hero-shell { position: relative; }

/* قاب گوشه‌دار طلایی — امضای بصری کارت (فقط در چیدمان کارتی) */
.dlj-hero-corner {
    display: none;
    position: absolute;
    width: 22px;
    height: 22px;
    border: 0 solid var(--hero-gold);
    opacity: .9;
    pointer-events: none;
    z-index: 6;
}
.dlj-hero-corner.is-tr { top: -5px; right: -5px; border-top-width: 2px; border-right-width: 2px; }
.dlj-hero-corner.is-bl { bottom: -5px; left: -5px; border-bottom-width: 2px; border-left-width: 2px; }

/* ---------------------------------------------------------------------------
   ناحیه‌ی اسلایدها
   ------------------------------------------------------------------------ */
.dlj-hero-slider {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    background: var(--hero-card);
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}
.dlj-hero-slider.is-draggable { cursor: grab; }
.dlj-hero-slider.is-draggable:active { cursor: grabbing; }

.dlj-hero-slide {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column-reverse;      /* تصویر (آخرِ DOM) بالا می‌رود */
    align-items: stretch;
    min-width: 0;
    visibility: hidden;
}
.dlj-hero-slide.is-active { visibility: visible; z-index: 2; }
.dlj-hero-slide.is-active.is-leaving {
    z-index: 1;
    animation: dljHeroOut .4s cubic-bezier(.55, .06, .68, .19) both;
}
@keyframes dljHeroOut {
    to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -38px)); }
}

/* --- تصویر (موبایل: ۱۶:۱۰ تمام‌عرض) --- */
.dlj-hero-media {
    --hero-media-r: 0px;
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 320px;
    overflow: hidden;
    border-radius: var(--hero-media-r);
    background: #dcdcdc;
}
.dlj-hero-picture { display: block; width: 100%; height: 100%; }
.dlj-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}
.dlj-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(20, 20, 20, .12);
    border-radius: var(--hero-media-r);
    pointer-events: none;
}

/* پرده‌برداری تصویر از چپ به راست + بزرگ‌نمایی ملایم */
.dlj-hero-slide.is-active .dlj-hero-media { animation: dljHeroReveal 1s cubic-bezier(.7, 0, .25, 1) both; }
@keyframes dljHeroReveal {
    from { clip-path: inset(0 100% 0 0 round var(--hero-media-r, 0px)); }
    to { clip-path: inset(0 0 0 0 round var(--hero-media-r, 0px)); }
}
.dlj-hero-slide.is-active .dlj-hero-media img { animation: dljHeroZoom 1.5s var(--hero-ease) both; }
@keyframes dljHeroZoom { from { transform: scale(1.18); } to { transform: scale(1); } }

/* خط طلایی که هم‌زمان با پرده‌برداری روی تصویر جارو می‌کشد */
.dlj-hero-sweep {
    position: absolute;
    top: -6%;
    bottom: -6%;
    left: -8px;
    width: 2px;
    background: var(--hero-gold);
    opacity: 0;
}
.dlj-hero-slide.is-active .dlj-hero-sweep { animation: dljHeroSweep 1s cubic-bezier(.7, 0, .25, 1) .06s both; }
@keyframes dljHeroSweep {
    0% { left: -8px; opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: calc(100% + 6px); opacity: 0; }
}

.dlj-hero-tag {
    position: absolute;
    bottom: 10px;
    right: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(17, 18, 20, .75);
    border: 1px solid var(--hero-gold-line);
    color: var(--hero-gold);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* --- متن --- */
/* ستونی: اگر اسلاید دیگری بلندتر باشد (مثلاً دکمه‌های بیشتر)، دکمه‌ها پایین کادر
   می‌نشینند و فاصله‌ی اضافه میان شرح و دکمه‌ها می‌افتد، نه زیر دکمه‌ها */
.dlj-hero-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    padding: 16px 18px 6px;
}

.dlj-hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: .02em;
    color: var(--hero-ink-mute);
}
.dlj-hero-kicker-line {
    flex: 0 0 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--hero-gold);
}
.dlj-hero-slide.is-active .dlj-hero-kicker { animation: dljHeroFadeUp .6s var(--hero-ease) .12s both; }

.dlj-hero-title {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.55;
    color: var(--hero-ink);
    overflow-wrap: anywhere;
}
/* کلمه‌ی کلیدی (میان دو ستاره در پنل): متن تیره + هایلایت ماژیکی طلایی */
.dlj-hero-title em {
    font-style: normal;
    box-shadow: inset 0 -.34em 0 rgba(248, 199, 16, .42);
}
.dlj-hero-mask { display: block; overflow: hidden; padding: .05em 0 .16em; margin: -.05em 0 -.16em; }
.dlj-hero-mask-inner { display: block; }
.dlj-hero-slide.is-active .dlj-hero-mask-inner { animation: dljHeroRise .85s var(--hero-ease) .2s both; }
@keyframes dljHeroRise { from { transform: translateY(125%); } to { transform: translateY(0); } }

.dlj-hero-desc {
    margin: 6px 0 0;
    max-width: 60ch;
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--hero-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dlj-hero-slide.is-active .dlj-hero-desc { animation: dljHeroFadeUp .7s var(--hero-ease) .34s both; }
@keyframes dljHeroFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- دکمه‌ها (۱ تا ۶) --- */
.dlj-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
}
.dlj-hero-slide.is-active .dlj-hero-actions { animation: dljHeroFadeUp .7s var(--hero-ease) .48s both; }

/* موبایل با سه دکمه یا بیشتر: شبکه‌ی مرتب دوستونی؛ دکمه‌ی تنهای آخر تمام‌عرض می‌شود */
.dlj-hero-actions.is-many { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dlj-hero-actions.is-many .dlj-hero-btn { min-width: 0; }
.dlj-hero-actions.is-many .dlj-hero-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

.dlj-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--hero-ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.dlj-hero-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dlj-hero-btn > svg { flex: 0 0 auto; }

/* طلایی — توپر */
.dlj-hero-btn.is-gold { background: var(--hero-gold); color: #1c1500; font-weight: 800; }
.dlj-hero-btn.is-gold:hover {
    background: var(--hero-gold-hover);
    color: #1c1500;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -8px rgba(230, 183, 0, .55);
}

/* سفید */
.dlj-hero-btn.is-white {
    background: #fff;
    color: var(--hero-ink);
    border-color: rgba(20, 20, 20, .12);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.dlj-hero-btn.is-white:hover {
    color: var(--hero-ink);
    border-color: var(--hero-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(20, 20, 20, .35);
}

/* خط‌دار — فقط حاشیه‌ی طلایی */
.dlj-hero-btn.is-outline { background: transparent; border-color: var(--hero-gold-line); color: var(--hero-gold-deep); }
.dlj-hero-btn.is-outline:hover {
    background: rgba(248, 199, 16, .16);
    border-color: var(--hero-gold);
    color: var(--hero-gold-deep);
    transform: translateY(-2px);
}

.dlj-hero-btn:active { transform: translateY(0) scale(.97); box-shadow: none; }

.dlj-hero-btn:focus-visible,
.dlj-hero-arrow:focus-visible,
.dlj-hero-dot:focus-visible { outline: 2px solid var(--hero-gold-deep); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   نوار کنترل زیر اسلایدر
   ------------------------------------------------------------------------ */
.dlj-hero-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px 0;
}

.dlj-hero-counter { display: flex; align-items: baseline; gap: 7px; flex: 0 0 auto; min-width: 64px; }
.dlj-hero-cur { display: inline-block; min-width: 24px; color: var(--hero-gold-deep); font-weight: 800; font-size: 16px; }
.dlj-hero-sep { color: var(--hero-ink-mute); }
.dlj-hero-total { color: var(--hero-ink-mute); font-size: 12px; }

.dlj-hero-dots { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; gap: 6px; }
.dlj-hero-dot {
    position: relative;
    flex: 0 1 26px;
    min-width: 10px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.dlj-hero-dot::before {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    top: 11px;
    height: 2px;
    background: rgba(20, 20, 20, .16);
    transition: background .25s;
}
.dlj-hero-dot:hover::before { background: rgba(20, 20, 20, .34); }
.dlj-hero-dot-fill {
    position: absolute;
    right: 0;
    top: 11px;
    width: 100%;
    height: 2px;
    background: var(--hero-gold);
    transform: scaleX(0);
    transform-origin: right;
}

.dlj-hero-nav { display: flex; flex: 0 0 auto; gap: 8px; }
.dlj-hero-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(20, 20, 20, .18);
    background: transparent;
    color: var(--hero-ink-soft);
    font: inherit;
    cursor: pointer;
    transition: color .25s, border-color .25s, background .25s, transform .25s var(--hero-ease);
}
.dlj-hero-arrow:hover { color: var(--hero-gold-deep); border-color: var(--hero-gold); background: rgba(248, 199, 16, .12); transform: translateY(-1px); }
.dlj-hero-arrow:active { transform: scale(.92); }

/* ---------------------------------------------------------------------------
   چیدمان کارتی: عرض اسلایدر ۶۴۰px و بیشتر (تبلت / دسکتاپ)
   ------------------------------------------------------------------------ */
@container dlj-hero (min-width: 640px) {
    .dlj-hero-frame { background: transparent; border-bottom: 0; padding-bottom: 0; }
    .dlj-hero-corner { display: block; }

    .dlj-hero-slider {
        border: 1px solid var(--hero-line);
        border-radius: 16px;
        /* سایه‌ی لطیف برای عمق روی صفحه‌ی روشن */
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 24px 55px -34px rgba(20, 20, 20, .35);
    }

    .dlj-hero-slide { flex-direction: row; align-items: center; gap: 20px; padding: 20px; }
    .dlj-hero-slide.is-active.is-leaving { animation-duration: .55s; }

    /* تصویر دسکتاپ همیشه دقیقاً ۲:۱ است (عرض دو برابر ارتفاع)؛ ارتفاع از عرض به دست می‌آید و
       اگر متن اسلایدی بلندتر باشد، تصویر در میانه‌ی ارتفاع کارت می‌نشیند */
    .dlj-hero-media {
        --hero-media-r: 14px;
        flex: 0 0 340px;
        align-self: center;
        width: auto;
        aspect-ratio: 2 / 1;
        max-height: none;
    }
    .dlj-hero-tag { right: 10px; }

    .dlj-hero-content { display: block; padding: 0; }
    .dlj-hero-title { margin-top: 8px; font-size: 22px; }
    .dlj-hero-desc { margin-top: 8px; line-height: 2; }

    .dlj-hero-actions { gap: 10px; margin-top: 14px; padding-top: 0; }
    .dlj-hero-actions.is-many { display: flex; }
    .dlj-hero-actions.is-many .dlj-hero-btn:last-child:nth-child(odd) { grid-column: auto; }
    .dlj-hero-btn { min-height: 40px; }

    .dlj-hero-controls { gap: 16px; padding: 15px 4px 0; }
    .dlj-hero-counter { min-width: 76px; }
    .dlj-hero-dot { flex-basis: 36px; height: 18px; }
    .dlj-hero-dot::before,
    .dlj-hero-dot-fill { top: 8px; }
    .dlj-hero-arrow { width: 38px; height: 38px; }
}

/* دسکتاپ — ارتفاع فایل نمونه (۲۵۰px): تصویر ۴۱۶×۲۰۸ (۲:۱) کل ارتفاع کارت را پر می‌کند */
@container dlj-hero (min-width: 900px) {
    .dlj-hero-slider { min-height: 250px; }
    .dlj-hero-slide { gap: 30px; padding: 20px 24px; }
    .dlj-hero-media { flex-basis: 416px; }
    .dlj-hero-title { font-size: 27px; }
    .dlj-hero-desc { font-size: 13.5px; -webkit-line-clamp: 2; }
    .dlj-hero-btn { padding: 10px 18px; font-size: 13px; border-radius: 10px; }
    /* چهار دکمه یا بیشتر: کمی فشرده‌تر تا در یک یا دو ردیف جا شوند */
    .dlj-hero-actions.is-compact .dlj-hero-btn { min-height: 36px; padding: 7px 13px; font-size: 12.5px; }
}

/* نمایشگر پهن — ارتفاع ۲۸۰px، تصویر ۴۷۶×۲۳۸ (۲:۱) */
@container dlj-hero (min-width: 1100px) {
    .dlj-hero-slider { min-height: 280px; }
    .dlj-hero-media { flex-basis: 476px; }
    .dlj-hero-title { font-size: 29px; }
}

/* نمایشگرهای بسیار پهن (Full HD و بالاتر): ارتفاع ۳۱۰px، تصویر ۵۳۶×۲۶۸ (۲:۱) */
@container dlj-hero (min-width: 1400px) {
    .dlj-hero-slider { min-height: 310px; }
    .dlj-hero-slide { gap: 40px; padding: 20px 28px; }
    .dlj-hero-media { flex-basis: 536px; }
    .dlj-hero-title { font-size: 31px; }
    .dlj-hero-desc { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   جای‌گیری در صفحه نخست
   ------------------------------------------------------------------------ */
.dlj-hero--home { position: relative; z-index: 1; }

@media (max-width: 767px) {
    /* نوار استوری‌ها (margin-top:-15px) روی پایین قاب می‌نشیند؛ جایش کنار گذاشته شده است */
    .dlj-hero--home .dlj-hero-frame { padding-bottom: 30px; }
}

/* هم‌تراز با نوار استوری‌ها و بخش‌های صفحه (حاشیه ۵٪ از هر طرف) */
@media (min-width: 768px) {
    .dlj-hero--home { width: 90%; margin: 24px auto 6px; }
}

/* ---------------------------------------------------------------------------
   پیش‌نمایش فرم پنل مدیریت: پویانمایی فقط با دکمه‌ی «پخش» اجرا می‌شود
   ------------------------------------------------------------------------ */
.dlj-hero--preview:not(.is-playing) .dlj-hero-slide,
.dlj-hero--preview:not(.is-playing) .dlj-hero-slide * { animation: none !important; }
.dlj-hero--preview .dlj-hero-controls { pointer-events: none; }
.dlj-hero--preview .dlj-hero-dot:first-child .dlj-hero-dot-fill { transform: scaleX(.45); }

@media (prefers-reduced-motion: reduce) {
    .dlj-hero *,
    .dlj-hero *::before,
    .dlj-hero *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
    }
}