/* ============================================================================
   هرکجا | MTheme — صفحات لیست/جستجو (listing.css)
   مشترک بین: Home/submenu · Search/Index · Home/PostIndex (load-more)
   ============================================================================ */

/* ---------- هدر صفحه ---------- */
/* ⚠️ نکتهٔ مهم (کاربر: «/Search/Index ظاهرش بهم ریخته … حتی تو نمای کامپیوتر»):
   قبلاً اینجا `overflow: visible` گذاشته شده بود تا منوی دسته‌بندی
   (.cat-select-menu) که absolute است بریده نشود. اما همین visible باعث می‌شد
   شبه‌عنصرهای هالهٔ پس‌زمینهٔ هدر (.ambient::before با right:-120px و
   .ambient::after با left:-120px) از قاب بیرون بزنند و کل صفحه ۱۲۰px
   سرریز افقی بگیرد → اسکرول افقی و به‌هم‌ریختگی در موبایل و دسکتاپ.

   راه‌حل: overflow هدر همان hidden بماند (هاله‌ها بریده می‌شوند که مطلوب است)
   و در عوض منوی دسته‌بندی با یک لایهٔ portal-مانند آزاد شود — چون منو
   position: absolute دارد و والدش (.search-bar) position: relative است،
   با overflow: hidden روی هدر بریده می‌شد. پس فقط در حالتِ باز (.open)
   هدر را visible می‌کنیم؛ وقتی منو بسته است هدر hidden می‌ماند و
   هیچ سرریزی وجود ندارد. */
.page-hero { padding-block: 40px 28px; position: relative; overflow: hidden; }
/* فقط در لحظهٔ باز بودن منو، قاب هدر آزاد می‌شود */
.page-hero:has(.cat-select.open),
.page-hero:has(.cat-select-menu:not([hidden])) { overflow: visible; }
.page-hero:has(.cat-select.open),
.page-hero:has(#searchPageCatSelectBtn) { z-index: 90; }
.page-hero .search-bar-inline .cat-select-menu { z-index: 8020; }
.page-hero h1 { font-size: clamp(1.5rem, 4vw, 2.3rem); margin: 8px 0 0; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--brand); }
.crumbs i { font-size: 0.65rem; opacity: 0.6; }

/* ---------- سر لیست ---------- */
.listing-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; flex-wrap: wrap; }
.listing-head h2 { font-size: clamp(1.2rem, 3vw, 1.6rem); margin: 0; }
.listing-count { color: var(--muted); font-size: 0.85rem; background: var(--bg-soft); padding: 5px 14px; border-radius: 30px; font-weight: 600; }

/* ---------- گرید ---------- */
.hz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hz-grid-col { min-width: 0; }

/* ---------- کارت محصول (App-like) ---------- */
.hz-card {
  display: block; height: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.hz-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }

.hz-card-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); }
.hz-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.hz-card:hover .hz-card-img img { transform: scale(1.06); }

.hz-card-body { padding: 15px 16px 17px; }
.hz-card-body h5 { font-size: 1rem; margin: 0; color: var(--ink); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hz-card-loc { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8rem; margin-bottom: 8px; }
.hz-card-loc i { color: var(--brand); }

/* ---------- Load more ---------- */
.load-more-wrap { text-align: center; margin-top: 40px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) { .hz-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .hz-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* موبایل: کارتها افقی اسکرول/گرید دوستونه — خوانا و تاچفرندلی */
  .hz-card-body { padding: 12px 13px 14px; }
  .hz-card-body h5 { font-size: 0.92rem; }
  .hz-card-loc { font-size: 0.74rem; }
}
@media (max-width: 480px) {
  .hz-grid { gap: 12px; }
  .hz-card { border-radius: 16px; }
}

/* ============================================================================
   رفع اسکرول افقی موبایل در گرید کارت‌ها (صفحه Search / submenu / postcategory)
   ----------------------------------------------------------------------------
   علت ریشه‌ای:
     ۱) آیتم‌های گرید (.hz-grid > *) هیچ min-width:0 نداشتند. در CSS Grid،
        عرض پیش‌فرض ستون minmax(auto, 1fr) است — یعنی «auto» می‌تواند از
        ۱fr بزرگ‌تر شود اگر محتوا جا نشود. محتوای ما = تصویر با عرض طبیعی +
        عنوان بلند فارسی که نمی‌شکند → ستون پهن می‌شد و صفحه اسکرول افقی می‌خورد.
     ۲) .hz-card h5 هیچ استایل/شکستنی نداشت → متن بلند فارسی بدون فاصله
        (مثل «هنرستان غیردولتی نقش و نگار رشت») گرید را می‌کشید.
     ۳) .col-lg-4 / .col-md-6 / .items کلاس‌های بوت‌استرپ باقی‌مانده‌اند که در
        MTheme تعریف ندارند؛ پس هیچ کنترلی روی عرضشان نبود.
   راه‌حل: محدودکردن ستون (min-width:0 روی آیتم + minmax(0,1fr) روی گرید)
          و شکستن صحیح عنوان — نه overflow-x:hidden.
   ============================================================================ */

/* ستون‌های گرید هرگز از ظرف بزرگ‌تر نشوند */
.hz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hz-grid > * { min-width: 0; max-width: 100%; }

/* کارت و اجزای داخلی */
.hz-card { max-width: 100%; }
.hz-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hz-card-body { min-width: 0; }

/* عنوان کارت — قبلاً هیچ استایلی نداشت */
.hz-card h5,
.hz-card .hz-card-title {
    margin: 0;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.85;
    color: var(--ink);
    /* شکستن درست متن فارسی بلند بدون بیرون‌زدگی از کارت */
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* آدرس/محل — یک خط با سه‌نقطه، بدون پهن‌کردن کارت */
.hz-card-loc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: var(--muted);
    font-size: .8rem;
    margin-bottom: 8px;
    min-width: 0;
}
.hz-card-loc i { flex-shrink: 0; margin-top: 5px; }
.hz-card-loc span,
.hz-card-loc { overflow-wrap: anywhere; }

/* برچسب روی تصویر نباید از کارت بیرون بزند */
.p-badge.on-image { max-width: calc(100% - 20px); }

/* کلاس‌های باقی‌مانده بوت‌استرپ — خنثی و محدود به عرض ظرف */
.hz-grid > .items,
.hz-grid > .col-lg-4,
.hz-grid > .col-md-6 { flex: 0 0 auto; width: 100%; max-width: 100%; }

/* ---------------------------------------------------------------------------
   موبایل: یک ستون (نه دو ستون تنگ که عنوان را می‌شکند) — با اندازه‌گیری
   --------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .hz-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================================
   فیلتر موقعیت + مدال انتخاب موقعیت (صفحه /Search/Index)
   ----------------------------------------------------------------------------
   کاربر: «سرچ بر اساس موقعیت هم داشته باشم و وقتی روی موقعیت زد یه مدال
   زیبا باز شه موقعیت خودش رو تایید کنه». پالت برند سبز #006a0d + اکسن #ee8d1a.
   ============================================================================ */

.search-loc-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 50px; padding: 0 18px;
    border: 1px solid rgba(22,40,63,.12);
    border-radius: 50px; background: #fff;
    color: var(--ink-soft); font-weight: 700; font-size: .88rem;
    cursor: pointer; flex-shrink: 0; white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
}
.search-loc-btn:hover { border-color: rgba(0,106,13,.4); color: var(--brand); }
.search-loc-btn.is-on {
    background: var(--brand-soft); border-color: rgba(0,106,13,.45); color: var(--brand);
}
.search-loc-btn i { font-size: .9rem; }

/* ---------- backdrop ---------- */
.loc-modal-backdrop {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(16,26,40,.45);
    backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    opacity: 0; transition: opacity .22s ease;
}
.loc-modal-backdrop[hidden] { display: none; }
.loc-modal-backdrop.is-open { opacity: 1; }

/* ---------- کارت مدال ---------- */
.loc-modal {
    width: 100%; max-width: 560px;
    max-height: 88vh; overflow-y: auto;
    background: #fff; border-radius: 22px;
    box-shadow: 0 26px 70px rgba(16,26,40,.26);
    padding: 22px;
    transform: translateY(14px) scale(.98);
    transition: transform .26s cubic-bezier(.2,.8,.3,1);
}
.loc-modal-backdrop.is-open .loc-modal { transform: translateY(0) scale(1); }

.loc-modal-head {
    display: flex; align-items: flex-start; gap: 13px;
    padding-bottom: 16px; margin-bottom: 18px;
    border-bottom: 1px solid #eef1f6;
}
.loc-modal-ico {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand), var(--accent, #ee8d1a));
    color: #fff; font-size: 1.05rem;
}
.loc-modal-head h3 { margin: 0 0 4px; font-size: 1.06rem; font-weight: 800; color: var(--ink); }
.loc-modal-head p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.8; }
.loc-modal-x {
    margin-inline-start: auto; flex: 0 0 auto;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid #e6eaf1; background: #fff;
    color: #94a3b8; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .18s, border-color .18s;
}
.loc-modal-x:hover { color: #c0392b; border-color: rgba(192,57,43,.35); }

/* ---------- مراحل ---------- */
.loc-modal-steps { margin-bottom: 18px; }
.loc-step {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.loc-step-n {
    width: 21px; height: 21px; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand);
    font-size: .72rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.loc-step-t { font-size: .88rem; font-weight: 700; color: var(--ink); }
.loc-step-cur {
    margin-inline-start: auto; font-size: .76rem; font-weight: 700;
    color: var(--brand); background: var(--brand-soft);
    padding: 3px 11px; border-radius: 999px;
}

/* ---------- چیپ‌ها ---------- */
.loc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.loc-chips-scroll { max-height: 168px; overflow-y: auto; padding-inline-end: 4px; }
.loc-chips-empty { font-size: .8rem; color: var(--muted); }
.loc-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid rgba(22,40,63,.11); background: #fff;
    color: var(--ink-soft); font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: all .18s ease;
}
.loc-chip:hover { border-color: rgba(0,106,13,.4); color: var(--brand); background: rgba(0,106,13,.04); }
.loc-chip.is-active {
    background: linear-gradient(135deg, var(--brand), #00871a);
    border-color: transparent; color: #fff;
    box-shadow: 0 5px 14px rgba(0,106,13,.26);
}
.loc-chip em {
    font-style: normal; font-size: .68rem; font-weight: 700;
    background: rgba(22,40,63,.06); color: var(--muted);
    border-radius: 999px; padding: 1px 7px;
}
.loc-chip.is-active em { background: rgba(255,255,255,.24); color: #fff; }

/* ---------- پاصفحه مدال ---------- */
.loc-modal-foot {
    display: flex; gap: 9px; justify-content: flex-start;
    padding-top: 16px; border-top: 1px solid #eef1f6;
}
.loc-btn-reset, .loc-btn-apply {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 22px; border-radius: 12px;
    font-size: .86rem; font-weight: 700; cursor: pointer;
    transition: all .2s ease;
}
.loc-btn-reset { background: #fff; border: 1px solid #e6eaf1; color: var(--ink-soft); }
.loc-btn-reset:hover { border-color: rgba(192,57,43,.35); color: #c0392b; }
.loc-btn-apply {
    background: linear-gradient(135deg, var(--brand), var(--accent, #ee8d1a));
    border: none; color: #fff;
    box-shadow: 0 8px 20px rgba(0,106,13,.24);
}
.loc-btn-apply:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(0,106,13,.3); }

@media (max-width: 620px) {
    .search-loc-btn { height: 46px; padding: 0 14px; font-size: .82rem; }
    .loc-modal { padding: 17px; border-radius: 18px; max-height: 92vh; }
    .loc-modal-head h3 { font-size: .98rem; }
    .loc-chip { font-size: .78rem; padding: 7px 12px; }
    .loc-btn-reset, .loc-btn-apply { flex: 1; justify-content: center; padding: 10px 14px; }
}

/* ============================================================================
   نوار جستجوی صفحه /Search/Index — نمای موبایل
   ----------------------------------------------------------------------------
   کاربر: «/Search/Index ظاهرش بهم ریخته تو نمای موبایل و حتی تو نمای کامپیوتر»

   چرا مشکل داشت: قاعدهٔ موبایلِ موجود در home.css برای فرمِ صفحهٔ اصلی نوشته
   شده (.search-field + .search-select + .search-submit). فرم این صفحه ساختار
   دیگری دارد — دو تا .search-field (یکیشان .search-cat)، یک .search-loc-btn
   و یک .search-submit — و .search-cat/.search-loc-btn هیچ قاعدهٔ موبایلی
   نداشتند. نتیجه: هر عنصر یک ردیفِ جدای بلند می‌شد و نوار جستجو به ۲۶۵px
   باد می‌کرد (به‌جای ~۲۰۰px) و selectِ دسته‌بندی پنهان می‌ماند.

   ⚠️ فقط داخل همین @media و فقط برای .search-bar-inline — ظاهر دسکتاپ
      و صفحهٔ اصلی دست‌نخورده است.
   ============================================================================ */
@media (max-width: 760px) {

    /* فرم به دو ردیف منطقی می‌نشیند: [فیلد جستجو] و [موقعیت + دسته‌بندی] */
    .search-bar.search-bar-inline {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-radius: 22px;
        padding: 10px;
        gap: 8px;
    }

    /* ردیف ۱ — فیلد متن، تمام عرض */
    .search-bar-inline .search-field:not(.search-cat) {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
        height: 48px;
        padding: 0 14px;
        border-radius: 14px;
    }
    .search-bar-inline .search-field:not(.search-cat) input {
        font-size: .88rem;
        min-width: 0;
    }

    /* ردیف ۲ — دکمهٔ موقعیت و کادر دسته‌بندی، کنار هم */
    /* موقعیت و دسته‌بندی نصف-نصف، در یک ردیف. عرض پایهٔ ۰ لازم است وگرنه
       محتوایشان (متن «رشت، گیلان» و برچسب «دسته‌بندی») جمعشان از ۱۰۰٪
       می‌گذرد و wrap می‌خورند به دو ردیف. */
    .search-bar-inline .search-loc-btn {
        order: 2;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        height: 46px;
        padding: 0 8px;
        font-size: .78rem;
        border-radius: 12px;
        justify-content: center;
        overflow: hidden;
    }
    .search-bar-inline .search-loc-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }

    .search-bar-inline .search-cat {
        order: 3;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        height: 46px;
        padding: 0 10px;
        border-radius: 12px;
        background: var(--bg-soft);
        border: 1px solid var(--border);
    }
    /* ⚠️ انتخابگر دسته‌بندی (partial مشترک: .cat-select > .cat-select-btn) در
       موبایل باید تمام عرض سلول خودش را بگیرد — قبلاً فقط به اندازهٔ متن بود
       و بقیهٔ ردیف خالی می‌ماند. */
    .search-bar-inline .search-cat .cat-select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
    /* ⚠️ space-between فلش را به سمت چپِ خالی پرت می‌کرد؛ gap طبیعی کافی است */
    .search-bar-inline .search-cat .cat-select-btn {
        width: 100%;
        min-width: 0;
        justify-content: flex-start;
        gap: 7px;
        padding: 0 2px;
        font-size: .8rem;
        background: transparent;
        border: 0;
    }
    .search-bar-inline .search-cat .cat-select-btn i {
        font-size: .62rem;
        opacity: .6;
        flex-shrink: 0;
    }
    .search-bar-inline .search-cat .cat-select-btn span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* منوی کشویی دسته‌بندی در موبایل */
    .search-bar-inline .search-cat .cat-select-menu {
        min-width: 100%;
        max-width: calc(100vw - 40px);
    }

    /* ردیف ۳ — دکمهٔ جستجو، تمام عرض */
    .search-bar-inline .search-submit {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        height: 48px;
        justify-content: center;
        border-radius: 14px;
    }

    /* نتیجهٔ Live Search زیر کل نوار، نه داخل ردیفها */
    .search-bar-inline .live-results {
        top: calc(100% + 8px);
        border-radius: 16px;
    }

    /* جلوگیری از سرریز افقی صفحه (منوی موبایل و مدالها) */
    html, body { overflow-x: hidden; }
    .page-hero { padding-block: 26px 20px; }
    .page-hero h1 { font-size: 1.35rem; }
}