/* =============================================================================
   اصلاحات اختصاصی نسخه موبایل - دپارتمان شایان
   =============================================================================
   این فایل هیچ اثری روی نسخه دسکتاپ ندارد: تمام قوانین داخل
   @media (max-width: 768px) قرار دارند و بعد از style.css لود می‌شوند تا با
   همان اولویت CSS (specificity برابر + ترتیب لود بعدی) جایگزین قوانین قبلی
   شوند. تمام رنگ‌ها، سایه‌ها، شعاع گوشه‌ها و transition ها از همان متغیرهای
   CSS تعریف‌شده در style.css (:root) خوانده می‌شوند - هیچ رنگ جدیدی اضافه
   نشده است.
   ============================================================================= */

@media (max-width: 768px) {

    /* -------------------------------------------------------------------
       0) ایمنی کلی - جلوگیری قطعی از اسکرول افقی و بریده‌شدن محتوا
       ------------------------------------------------------------------- */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .container {
        padding: 0 16px;
    }

    /* جلوگیری از اینکه فیلدهای فرم (select/input) گرید یا فلکس را
       عریض‌تر از صفحه کنند - یک باگ شناخته‌شده CSS Grid/Flexbox */
    .field-group,
    .form-input,
    .form-select,
    .search-grid,
    .search-grid-row2,
    .diamond-col,
    .diamond-grid {
        min-width: 0;
    }

    /* -------------------------------------------------------------------
       1) دکمه گرد «درباره ما» - بالا سمت چپ هدر (مطلق، مثل لوگو)، مستقل از
          چیدمان فلکس هدر تا هیچ اثری روی موقعیت آیکون‌های سمت راست نگذارد.
       ------------------------------------------------------------------- */
    .about-link-mobile {
        display: flex !important;
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid var(--color-border);
        background: var(--color-bg-alt);
        color: var(--color-brand);
        flex-shrink: 0;
        z-index: 5;
        padding: 0;
    }

    .about-link-mobile:hover,
    .about-link-mobile.active {
        border-color: var(--color-brand);
    }

    /* حالا که کنار لوگو خالی شده، هدر ساده‌تر و فشرده‌تر است.
       نکته مهم: ارتفاع هدر باید کل ستون لوگو+متن را در خودش جا بدهد،
       وگرنه چون لوگو دقیقاً وسط این جعبه (top:50%) قرار می‌گیرد، وقتی
       محتوا از ارتفاع جعبه بلندتر باشد نیمه‌ی بالایی لوگو از بالای هدر
       بیرون می‌زند (و از دید کاربر که هدر چسبان به بالای صفحه است پنهان
       می‌شود) و نیمه‌ی پایینی متن هم روی خط جداکننده‌ی نوار آمار زیر هدر
       می‌افتد. با افزایش ارتفاع، هم لوگو کامل و کمی پایین‌تر دیده می‌شود
       و هم متن قبل از رسیدن به آن خط، فاصله‌ی کافی دارد. */
    .header-inner-centered {
        padding: 10px 16px;
        min-height: 124px;
    }

    /* -------------------------------------------------------------------
       2) عنوان «دپارتمان شایان» - نمایش کامل، یک‌خط، وسط‌چین، کمی بزرگ‌تر
          و بولدتر از قبل، بدون بیرون‌زدگی از قاب هدر
       ------------------------------------------------------------------- */
    .brand-logo-center {
        max-width: min(75%, 240px);
        top: 50%;
    }

    .brand-logo-center .logo-mark-img,
    .brand-logo-center .logo-mark-empty {
        width: 60px;
        height: 60px;
    }

    .brand-logo-center span {
        font-size: clamp(0.95rem, 4.4vw, 1.15rem);
        font-weight: 700;
        /* این فونت (Noto Nastaliq Urdu) حلقه‌ها و دنباله‌های عمودی بلندی
           دارد و چون با background-clip:text رنگ می‌شود، هر بخشی که بیرون
           از جعبه‌ی خط (line-box) بیفتد، به‌جای بریده‌شدن ساده، کاملاً
           نامرئی می‌شود - دقیقاً همان چیزی که ظاهرش شبیه «افتادن روی خط»
           است. مقدار ۲.۲ (هم‌ارز نسخه دسکتاپ) این فضای عمودی را تضمین
           می‌کند؛ مقدار قبلی ۱.۹ برای این فونت کافی نبود. */
        line-height: 2.2;
        white-space: nowrap;
        /* هرگز بریده/سه‌نقطه نشود؛ در بدترین حالت متن کمی از عرض جعبه
           نامرئی خودش بیرون می‌زند اما همیشه کامل و خوانا می‌ماند */
        overflow: visible;
        text-overflow: unset;
        max-width: none;
    }

    /* -------------------------------------------------------------------
       4) هاب سه‌لوزی صفحه اصلی -> Timeline افقی مینیمال
          سه لوزی همیشه در یک ردیف، کاملاً داخل عرض صفحه، فاصله‌ی مساوی و
          کم بین آن‌ها، خط افقی دقیقاً از پشت مرکز هر سه رد می‌شود و متن
          فارسی به‌طور کامل داخل هر لوزی جا می‌شود.
       ------------------------------------------------------------------- */
    .diamond-hub {
        padding: 22px 0 8px;
        /* روی دسکتاپ overflow:hidden برای برش دایره‌های محو تزئینی لازم
           است؛ اما چون این دایره‌ها در موبایل مخفی می‌شوند (خط بعدی) و
           پنل کشویی حالا با position:absolute ممکن است پایین‌تر از
           کادر diamond-hub برود، در موبایل باید visible باشد وگرنه پنل
           باز بریده می‌شود. */
        overflow: visible;
        isolation: auto;
    }

    .diamond-hub::before,
    .diamond-hub::after {
        display: none;
    }

    .diamond-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 3vw, 18px);
        /* عرض گرید دقیقاً به اندازه محتوای خودش (سه لوزی + فاصله‌ها) است،
           نه کل عرض کانتینر - همین باعث می‌شود خط افقی هم به لوزی‌ها
           نزدیک بماند و هم فاصله‌ی هر سه لوزی همیشه کاملاً مساوی باشد */
        width: max-content;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
        position: relative;
    }

    /* خط افقی - فقط به اندازه‌ی عرض واقعی ردیف لوزی‌ها (نه کل صفحه) */
    .diamond-grid::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 2px;
        left: 2px;
        height: 2px;
        transform: translateY(-50%);
        background: linear-gradient(90deg,
            transparent,
            color-mix(in srgb, var(--color-brand) 65%, transparent) 10%,
            color-mix(in srgb, var(--color-brand) 65%, transparent) 90%,
            transparent);
        z-index: 0;
    }

    /* عرض هر ستون دقیقاً و صریحاً برابر خودِ لوزی تعیین می‌شود (نه بر
       اساس محتوای داخل پنل کشویی). این نکته کلیدی‌ست: بدون این خط، فرم
       جست‌وجو/لیست مشاوران داخل پنل کشویی (که حتی در حالت بسته هم عرض
       واقعی‌اش در محاسبه‌ی چیدمان دخیل می‌شود) باعث می‌شد ستون «جست‌وجو»
       خیلی عریض‌تر از دو ستون دیگر شود، فاصله‌ها را نامساوی کند و کل
       ردیف را از عرض صفحه بیرون بزند. با این width صریح، هر سه ستون
       همیشه دقیقاً هم‌اندازه و مساوی‌فاصله می‌مانند.
       position:relative لازم است تا پنل کشویی هرکدام دقیقاً نسبت به
       همان ستون/دکمه‌ی خودش (نه کل ردیف) موقعیت‌دهی شود - هر لوزی، پنل
       زیر خودش را باز می‌کند. */
    .diamond-col {
        flex: 0 0 auto;
        z-index: 1;
        min-width: 0;
        width: clamp(82px, 24vw, 104px);
        position: relative;
    }

    /* وقتی پنل یک ستون باز است، آن ستون را در بالای ستون‌های دیگر قرار
       می‌دهد تا پنل کشویی همیشه روی لوزی‌های کناری بیفتد نه زیر آن‌ها */
    .diamond-col:has(.diamond-rail.is-open) {
        z-index: 40;
    }

    .diamond-trigger {
        width: 100%;
        height: clamp(82px, 24vw, 104px);
    }

    .diamond-shape {
        inset: 11px;
        border-radius: 14px;
    }

    .diamond-content {
        gap: 0;
        /* پدینگ درصدی، عرض متن را به میانه‌ی لوزی محدود می‌کند تا برچسب
           دو-خطی هم همیشه داخل لبه‌های چرخیده‌ی لوزی بماند و بیرون نزند */
        padding: 0 19%;
    }

    .diamond-icon {
        display: none;
    }

    .diamond-label {
        font-size: clamp(0.6rem, 2.5vw, 0.72rem);
        line-height: 1.2;
        font-weight: 800;
        text-align: center;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* پنل کشویی به‌جای اینکه هم‌عرض با ستون باریک خودش باشد (که برای فرم
       جست‌وجو/لیست مشاوران بیش از حد تنگ می‌شد)، دقیقاً زیر همان دکمه‌ی
       خودش باز می‌شود (نه زیر وسط کل ردیف). عرض آن با vw محدود شده تا
       همیشه داخل عرض صفحه بماند و هیچ‌وقت باعث اسکرول افقی نشود؛ برای
       ستون‌های کناری (مشاوران/دسته‌بندی‌ها) هم به‌جای وسط‌چین‌شدن دقیق
       زیر دکمه (که باعث بیرون‌زدن از لبه‌ی صفحه می‌شد)، لبه‌ی پنل نزدیک
       لبه‌ی همان دکمه می‌ماند و پنل به سمت مرکز صفحه باز می‌شود؛ در نتیجه
       همیشه کامل و بدون بریدگی داخل صفحه‌ی موبایل دیده می‌شود. */
    .diamond-rail {
        position: absolute;
        top: 100%;
        width: min(88vw, 340px);
        max-width: calc(100vw - 24px);
        z-index: 30;
        box-sizing: border-box;
    }

    /* ستون وسط (جست‌وجوی پیشرفته): دقیقاً زیر و وسط‌چین همان دکمه */
    .diamond-col[data-diamond="search"] .diamond-rail {
        left: 50%;
        transform: translateX(-50%);
    }

    /* ستون راست (مشاوران) - در چیدمان RTL نزدیک لبه‌ی راست صفحه است؛
       لبه‌ی راست پنل نزدیک لبه‌ی راست دکمه می‌ماند و پنل به‌سمت چپ/مرکز
       صفحه باز می‌شود تا از لبه‌ی راست صفحه بیرون نزند */
    .diamond-col[data-diamond="advisors"] .diamond-rail {
        inset-inline-start: -8px;
        inset-inline-end: auto;
    }

    /* ستون چپ (دسته‌بندی‌ها) - نزدیک لبه‌ی چپ صفحه؛ لبه‌ی چپ پنل نزدیک
       لبه‌ی چپ دکمه می‌ماند و پنل به‌سمت راست/مرکز صفحه باز می‌شود */
    .diamond-col[data-diamond="categories"] .diamond-rail {
        inset-inline-end: -8px;
        inset-inline-start: auto;
    }

    .diamond-panel {
        padding: 16px 14px;
        border-radius: 16px;
        box-sizing: border-box;
    }

    /* فلش/مثلث اتصال‌دهنده‌ی پنل به لوزی، برای ستون‌های کناری هم نزدیک
       همان سمتی می‌ماند که پنل به دکمه متصل است (نه همیشه وسط پنل) */
    .diamond-col[data-diamond="advisors"] .diamond-panel::before {
        inset-inline-start: 24px;
        inset-inline-end: auto;
        transform: rotate(45deg);
    }

    .diamond-col[data-diamond="categories"] .diamond-panel::before {
        inset-inline-start: auto;
        inset-inline-end: 24px;
        transform: rotate(45deg);
    }

    .diamond-col[data-diamond="search"] .search-grid,
    .diamond-col[data-diamond="search"] .search-grid-row2 {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .diamond-col[data-diamond="categories"] .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* -------------------------------------------------------------------
       5) کاهش فاصله‌های اضافی (Margin/Padding) بخش‌های اصلی صفحه برای
          چیدمانی فشرده‌تر و حرفه‌ای‌تر
       ------------------------------------------------------------------- */
    .section {
        padding: 32px 0;
    }

    .section-head {
        margin-bottom: 18px;
    }

    .section-head h2 {
        font-size: 1.3rem;
    }

    .listing-grid,
    .listing-grid-3 {
        gap: 12px;
    }

    .site-footer {
        padding: 36px 0 18px;
        margin-top: 36px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 22px;
    }

    .thunderstack-credit {
        padding: 14px 16px;
        margin-top: 16px;
    }

    /* -------------------------------------------------------------------
       6) ایمنی متن - هیچ متنی نباید از باکس خودش بریده یا بیرون بزند
       ------------------------------------------------------------------- */
    .diamond-panel-head h3,
    .diamond-panel-sub,
    .category-card span,
    .footer-brand-name {
        overflow-wrap: break-word;
        word-break: break-word;
    }
}