/* dmhouse-testimonials.css — شیوه‌نامهٔ سکشن «نظرات مشتریان» (شورت‌کد ماژول).
   ⚠ این قاعده‌ها عیناً از شیوه‌نامهٔ صفحهٔ اصلی برداشته شده‌اند و مرجعِ ظاهر همان‌جاست:
   خواسته این است که شورت‌کد بتواند جای نشانه‌گذاری ایستای صفحهٔ اصلی بنشیند بدون
   کوچک‌ترین تغییر ظاهری. پس اینجا چیزی «از روی عکس» بازنویسی نشده، کپی شده است.
   ⚠ روی خودِ صفحهٔ اصلی هر دو شیوه‌نامه بار می‌شوند و همین قاعده‌ها را با مقدار یکسان
   تعریف می‌کنند؛ بی‌ضرر است ولی یعنی اگر آنجا عوض شد، اینجا هم باید عوض شود. */

/* =========================================
   Testimonials Section Base
========================================= */
.dm-testimonials-section {
    padding: 120px 0;
    overflow: hidden;
    background-color: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.dm-testimonials-section .dm-testimonials-layout {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: center;
}

/* =========================================
   Header (Right Column)
========================================= */
.dm-testimonials-section .t-stage-col {
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.dm-testimonials-section .t-stage-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.dm-testimonials-section .t-subtitle {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent-primary);
    letter-spacing: 2px;
}

/* ⚠ این عنوان دیگر تیتر نیست بلکه پاراگراف است. قلم را پیش‌تر از قاعدهٔ سراسریِ تیترها
   می‌گرفت، پس حالا باید صریح نوشته شود؛ وگرنه به قلمِ متن تغییر می‌کرد. ارتفاع خط را
   همین کلاس از قبل داشت و وسط‌چینی از ظرفِ بالادست به ارث می‌رسد، پس همان می‌ماند. */
.dm-testimonials-section .t-title {
    font-family: 'gofteh';
    font-size: 56px;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0;
    /* ⚠ وقتی عنوان h2 چاپ شود، قاعدهٔ سراسری h2 وسط‌چینش می‌کرد؛ inherit همان رفتار پاراگراف است. */
    text-align: inherit;
}

/* بخش برجستهٔ عنوان — همان قرارداد بقیهٔ سرتیترهای سایت: فقط رنگ تأکیدی، بدون
   پس‌زمینه و بدون قلم متفاوت، تا در سکشن تیره و روشن یکسان بنشیند. */
.dm-testimonials-section .t-title__hl {
    color: var(--accent-primary);
}

.dm-testimonials-section .t-tagline {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

/* =========================================
   Display Card
========================================= */
.dm-testimonials-section .t-display-card {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 700px;
    min-height: 380px;
    /* اصلاح گردی گوشه‌ها: گوشه پایین-چپ تیز، بقیه گرد */
    border-radius: 140px 40px 40px 40px;
    display: flex;
    flex-direction: column;
    /* تنظیم پدینگ: فضای خالی در سمت چپ برای قرارگیری عکس */
    padding: 56px 56px 56px 180px;
    background-color: var(--card-bg, var(--bg-secondary));
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
    animation: fadeCard 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    transition: background-color var(--transition-slow);
}

.dm-testimonials-section.theme-dark .t-display-card {
    background-color: var(--bg-secondary) !important; /* یکپارچگی در دارک مود */
}

@keyframes fadeCard {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dm-testimonials-section .t-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 2;
}

.dm-testimonials-section .t-quote-icon {
    font-size: 60px;
    line-height: 0;
    color: var(--accent-secondary);
    opacity: 0.2;
    margin-bottom: 24px;
    display: block;
}

.dm-testimonials-section .t-quote-text {
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 40px;
    text-align: justify;
}

.dm-testimonials-section .t-author-block {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.dm-testimonials-section .t-name {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}

.dm-testimonials-section .t-role {
    font-size: 14px;
    color: var(--accent-primary);
    font-weight: 600;
}

.dm-testimonials-section .t-image-pop {
    position: absolute;
    bottom: -30px;
    left: -40px; /* قرارگیری در سمت چپ کارت */
    right: auto;
    width: 260px;
    height: 250px;
    z-index: 5;
    pointer-events: none;
}

/* ⚠ این را اسکریپت روی تصویر گوینده می‌گذارد و بدون آن، هر قاعده‌ای که display بدهد
   برنده می‌شود و عنصرِ «پنهان» کاملاً دیده می‌ماند. یک قاعدهٔ سراسری در همان شیوه‌نامه‌ای
   که اسکریپتش این خصوصیت را جابه‌جا می‌کند. */
[hidden] {
    display: none !important;
}

.dm-testimonials-section .t-image-pop img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* جلوگیری از دفرمه شدن عکس */
    object-position: center;
    border-radius: 24px; /* گوشه‌های گرد برای زیبایی بیشتر */
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.15));
}

.dm-testimonials-section.theme-dark .t-image-pop img {
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.5));
}

/* ⚠ حالتِ جایگزینِ لوگو آزموده و کنار گذاشته شد. نظری که تصویر گوینده ندارد، حالا یک
   آواتار کدی می‌گیرد (نه لوگو): یک نیم‌تنهٔ توخالی بدون هیچ پس‌زمینه، هم‌قد عکس گوینده،
   با خط دور طلایی‌مسی و خطوط تزئینی ظریف داخلش (برش‌خورده به شکل خود آواتار).
   نسخه‌های قبلی (دیسک پرجزئیات، سپس کاشی رنگی) به درخواست کارفرما کنار گذاشته شدند.
   ⚠ جایگاه و اندازه دقیقاً همان کادر عکس (کل t-image-pop)، پس مثل عکس در گوشهٔ پایین‌چپ کمی
   زیر لبهٔ کارت می‌رود؛ کارت overflow: hidden دارد و همان بخش بریده می‌شود. */
.dm-testimonials-section .t-avatar {
    --av-line: rgba(184, 115, 51, .35);
    position: absolute;
    inset: 0;
    display: block;
}

.dm-testimonials-section.theme-dark .t-avatar {
    --av-line: rgba(245, 214, 143, .3);
}

.dm-testimonials-section .t-avatar__figure {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.dm-testimonials-section .t-avatar__lines {
    fill: none;
    stroke: var(--av-line);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.dm-testimonials-section .t-avatar__outline {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

/* دو نسخهٔ آقا و خانم هر دو در نشانه‌گذاری‌اند؛ کلاس is-female (سرور + اسکریپت) یکی را نشان می‌دهد. */
.dm-testimonials-section .t-avatar__v--f,
.dm-testimonials-section .t-avatar.is-female .t-avatar__v--m {
    display: none;
}

.dm-testimonials-section .t-avatar.is-female .t-avatar__v--f {
    display: inline;
}

/* =========================================
   Tracks Column (Left Column)
========================================= */
.dm-testimonials-section .t-tracks-col {
    position: relative;
    height: 600px;
    overflow: hidden;
    /* ایجاد افکت محو شدگی در بالا و پایین */
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.dm-testimonials-section .tracks-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    height: 100%;
}

.dm-testimonials-section .logo-track-wrapper {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.dm-testimonials-section .logo-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
    width: 100%;
}

.dm-testimonials-section .logo-track-wrapper.up .logo-track {
    animation: scrollUp 40s linear infinite;
}

.dm-testimonials-section .logo-track-wrapper.down .logo-track {
    animation: scrollDown 45s linear infinite;
}

.dm-testimonials-section .logo-track-wrapper:hover .logo-track {
    animation-play-state: paused;
}

@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-33.33%);
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(-33.33%);
    }
    100% {
        transform: translateY(0);
    }
}

.dm-testimonials-section .logo-item {
    background-color: var(--bg-secondary);
    border-radius: 20px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
    opacity: 0.4;
    filter: grayscale(100%);
}

.dm-testimonials-section .logo-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-fast);
}

.dm-testimonials-section .logo-item:hover,
.dm-testimonials-section .logo-item.is-active {
    opacity: 1;
    filter: grayscale(0%);
    border-color: var(--accent-secondary);
    background-color: var(--bg-primary);
    transform: scale(1.05);
    z-index: 10;
    box-shadow: var(--card-shadow);
}

.dm-testimonials-section.theme-dark .logo-item img {
    filter: grayscale(100%) brightness(200%) contrast(100%);
}

.dm-testimonials-section.theme-dark .logo-item:hover img,
.dm-testimonials-section.theme-dark .logo-item.is-active img {
    filter: grayscale(0%) brightness(100%);
}

/* =========================================
   Floating Thumb & Modal
========================================= */
.dm-testimonials-section .t-floating-thumb {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 190px;
    border-radius: 16px;
    overflow: hidden;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--border-color);
}

.dm-testimonials-section .t-floating-thumb.is-visible {
    opacity: 1;
}

.dm-testimonials-section .t-floating-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-testimonials-section .thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.dm-testimonials-section .t-video-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    display: none;
}

.dm-testimonials-section .t-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 47, 0.9);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.dm-testimonials-section .t-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    animation: modalPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes modalPop {
    to {
        transform: scale(1);
    }
}

.dm-testimonials-section .t-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.dm-testimonials-section .t-close-btn:hover {
    background: var(--accent-primary);
    transform: rotate(90deg);
}

.dm-testimonials-section .t-video-wrapper {
    width: 100%;
    height: 100%;
}

.dm-testimonials-section .t-modal-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================
   Responsive Logic
========================================= */
@media (max-width: 992px) {
    .dm-testimonials-section {
        padding: 80px 0;
        height: auto;
    }

    .dm-testimonials-section .dm-testimonials-layout {
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 0 24px;
    }

    .dm-testimonials-section .t-stage-col {
        order: 1;
    }

    .dm-testimonials-section .t-title {
        font-size: 38px;
    }

    /* اصلاح پدینگ کارت در موبایل */
    .dm-testimonials-section .t-display-card {
        margin: 0 auto;
        padding: 40px 24px; /* حذف پدینگ اضافی پایین */
        border-radius: 40px;
        text-align: center;
    }

    .dm-testimonials-section .t-quote-text {
        text-align: center;
        font-size: 16px;
        margin-bottom: 30px;
    }

    .dm-testimonials-section .t-author-block {
        align-items: center;
        margin-bottom: 0;
    }

    /* آواتار جایگزین در ستون تکی: زیر نام، وسط‌چین، و پایینش کمی زیر لبهٔ کارت (مثل دسکتاپ).
       ⚠ ظرف فقط وقتی آواتارِ دیدنی دارد جابه‌جا می‌شود (با has)، تا چیدمان عکس گوینده
       دقیقاً همان قبلی بماند. margin منفی پایین پدینگ ۴۰ پیکسلی کارت را خنثی می‌کند تا
       آواتار به لبه برسد و بخشی از آن بریده شود. */
    .dm-testimonials-section .t-image-pop:has(.t-avatar:not([hidden])) {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 210px;
        margin-top: 20px;
        margin-bottom: -48px;
    }

    /* آواتار کل کادر را می‌گیرد و خودِ SVG نیم‌تنه را وسط و به پایین می‌چسباند. */
    .dm-testimonials-section .t-avatar {
        inset: 0;
    }

    /* --- کدهای جدید برای رفع مشکل بیرون‌زدگی و تداخل عکس --- */
    .dm-testimonials-section .t-image-pop {
        position: relative; /* خارج کردن از حالت شناور مطلق */
        bottom: -40px;
        /*right: auto;*/
        /*transform: none; !* حذف ترنسلیت اضافی *!*/
        /*width: 100%;*/
        /*max-width: 220px;*/
        /*height: 220px;*/
        /*margin: 30px auto 0 auto; !* ایجاد فاصله مناسب از متن بالای خود *!*/
        /*display: block;*/
    }

    .dm-testimonials-section .t-image-pop img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 24px;
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
    }

    .dm-testimonials-section.theme-dark .t-image-pop img {
        filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.4));
    }

    /* ----------------------------------------------------- */
    .dm-testimonials-section .t-tracks-col {
        order: 2;
        height: 400px;
    }

    .dm-testimonials-section .tracks-container {
        gap: 12px;
    }

    .dm-testimonials-section .logo-item {
        height: 100px;
        padding: 10px;
    }

    .dm-testimonials-section .t-floating-thumb {
        display: none !important;
    }
}

/* پیام پیکربندی، فقط برای مدیر. */
.dmts-missing {
    margin: 16px auto;
    max-width: 900px;
    padding: 12px 16px;
    border: 1px dashed var(--border-color, #e2e8f0);
    border-radius: 12px;
    font-size: 14px;
    color: var(--text-secondary, #4a5568);
}

/* ⚠ نسخهٔ «متن + نوار» همان سکشن است بدون کارت نظر؛ ستون سرتیتر باید در ارتفاع
   وسط بنشیند وگرنه کنار ریل‌های بلند لوگو به بالا می‌چسبد. */
.dm-testimonials-section--brands .t-stage-col {
    justify-content: center;
}

/* ⚠ نسخهٔ «متن + نوار»: ستون متن نصف عرض ستون نوارهاست، برخلاف نسخهٔ کارتی که ستون
   متن پهن‌تر است. دلیلش محتواست — آنجا یک کارت نظر کامل در ستون متن می‌نشیند، اینجا
   فقط یک سرتیتر کوتاه، و نوارهای لوگو هرچه پهن‌تر باشند بهتر خوانده می‌شوند.
   ⚠⚠ حتماً داخل یک پرسش‌رسانهٔ «از این عرض به بالا»: نسخهٔ اول این قاعده بی‌قید بود و
   چون ویژگی سلکتورش با قاعدهٔ موبایلِ مرجع برابر است و پایین‌تر از آن نوشته شده، در
   موبایل هم برنده می‌شد و ستون‌ها زیر هم نمی‌رفتند. */
@media (min-width: 993px) {
    .dm-testimonials-section--brands .dm-testimonials-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }
}

/* ⚠ نسخهٔ «فقط نوارها» حذف شد. هر قالبی که این سکشن را می‌خواهد، کل سکشن را از همین
   ماژول می‌گیرد؛ پوستهٔ دست‌ساز دور نوارها بود که فاصله‌ها را دوبار حساب می‌کرد. */