/* ==========================================================================
   property-mobile.css — چیدمان موبایل صفحهٔ نمایش ملک (تا 1023px — همان مرز موبایل/تبلت responsive.css)
   --------------------------------------------------------------------------
   تنها منبع حقیقتِ چیدمان موبایل این صفحه است. دسکتاپ (≥ 1024px) هیچ قاعده‌ای
   از این فایل نمی‌گیرد و برعکس، هیچ‌جا هم دست‌نخورده می‌ماند.

   ⚠ علت اصلی «به‌هم‌ریختگی» نسخهٔ قبلی (باگ واقعی، نه سلیقه):
      در property.css، جعبهٔ چیدمان دسکتاپ این است:
          .pd-layout { display:grid; grid-template-columns:…; align-items:start; }
      نسخهٔ قبلی موبایل، فقط display را به flex و جهت را به column عوض می‌کرد
      ولی align-items:start را ریست نمی‌کرد. در یک فلکسِ ستونی، align-items:start
      یعنی «هر آیتم به اندازهٔ محتوای خودش، چسبیده به لبه» → کارت‌ها به‌جای
      تمام‌عرض بودن، shrink-to-fit می‌شدند (کارت مشخصات فقط ۲۱۴px، گرید مشخصات
      ۸۳px+۸۳px، گالری ۴۶۹px و سرریز). نتیجه: ستونی نامرتب از کارت‌های
      ناهم‌عرض — همان «شلوغ و بی‌نظم»ی که در موبایل دیده می‌شد.
      این‌بار align-items:stretch صریح ست شده است.

   ترتیب بخش‌ها در موبایل (با order؛ گالری/کارت‌ها همه آیتم فلکس می‌شوند چون
   دو ستون دسکتاپ با display:contents باز می‌شوند):
      گالری ← قیمت ← توضیحات ← مشخصات ← امکانات ← نقشه ← مشاور
   (سرصفحه: بردکرامب ← عنوان ← متادیتا، بالای همه و مشترک با دسکتاپ)

   ⚠ نکتهٔ تم: لایهٔ تم (includes/theme.php → theme_darkify_css) بعد از این فایل
   و با !important روی .pd-* تزریق می‌شود؛ پس اینجا روی پس‌زمینه/رنگ/بوردر
   کارت‌ها با آن نمی‌جنگیم و همهٔ رنگ‌ها از توکن‌های --tm-* با fallback روشن
   می‌آیند.

   ⚠ نوار شناور پایین (pd-sticky-cta) و تب‌بار سراسری عمداً دست‌نخورده‌اند؛
   اینجا فقط «جای‌گذاری» نوار تنظیم می‌شود، نه طراحی‌اش.
   ========================================================================== */

@media (max-width: 1023px) {

  /* ==================================================================
     ۰) بوم صفحه — تمام‌عرض، بدون پدینگ جانبی؛ فاصلهٔ هر بلوک با margin خودش
        (تا گالری بتواند واقعاً لبه‌به‌لبه باشد)
     ================================================================== */
  body.page-property .pd-wrap.pd-wrap {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
    /* جای نوار شناور قیمت (که بالای تب‌بار می‌نشیند) تا آخرین کارت‌ها زیر
       آن پنهان نشوند؛ ۷۰px تب‌بار سراسری از style.css می‌آید. */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    overflow-x: clip;
  }
  /* هیچ متن بلندی از کادر بیرون نزند. عمداً break-word (نه anywhere) تا
     کلمه‌ها از وسط شکسته نشوند و عنوان/مقدارها سالم بمانند. */
  body.page-property .pd-wrap.pd-wrap :is(.pd-title, .pd-crumb, .pd-desc, .pd-amen span,
      .pd-meta li, .pi-row, .pi-row b, .pc-name, .pds-price b, .pd-sub span) {
    overflow-wrap: break-word;
  }

  /* ==================================================================
     ۱) گالری — تمام‌عرض لبه‌به‌لبه + نوار بندانگشتی اسکرولی
     ================================================================== */
  body.page-property .pd-gallery.pd-gallery {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  body.page-property .pd-main-img.pd-main-img,
  body.page-property .pd-main-video.pd-main-video {
    width: 100%;
    height: min(64vw, 320px);   /* در ۳۲۰px: ۲۰۵px · در ۴۳۰px: ۲۷۵px */
    border-radius: 0;
    display: block;
    object-fit: cover;
  }
  /* پردهٔ گرادیان پای تصویر: شمارنده/نقطه‌ها/بزرگ‌نمایی روی هر عکسی خوانا بمانند */
  body.page-property .pd-main.pd-main { position: relative; }
  body.page-property .pd-main.pd-main::after {
    content: '';
    position: absolute; inset-inline: 0; bottom: 0; height: 38%;
    background: linear-gradient(to top, rgba(8, 12, 24, .55), rgba(8, 12, 24, 0));
    pointer-events: none;
    z-index: 2;
  }
  body.page-property .pd-main-img.pd-main-img { position: relative; z-index: 1; }
  body.page-property .pd-zoom-btn.pd-zoom-btn {
    bottom: 10px; left: 10px; z-index: 5;
    border: 0; padding: 6px 12px; min-height: 36px; font-size: .75rem;
  }
  body.page-property .watchlist-btn.watchlist-btn {
    top: 10px; left: 10px; width: 40px; height: 40px; z-index: 5;
  }
  body.page-property .pd-badge.pd-badge { top: 10px; right: 10px; z-index: 5; font-size: .72rem; }
  body.page-property .pd-dots.pd-dots { bottom: 8px; z-index: 5; }

  body.page-property .pd-strip.pd-strip {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; padding: 10px 16px 2px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.page-property .pd-strip.pd-strip::-webkit-scrollbar { display: none; }
  body.page-property .pd-tile.pd-tile {
    flex: 0 0 84px; width: 84px; height: 62px;
    border-radius: 10px; border: 2px solid transparent;
    scroll-snap-align: start;
    opacity: .72;
    transition: opacity .2s ease, border-color .2s ease;
  }
  body.page-property .pd-tile.pd-tile.active {
    border-color: var(--brand, #5b45e8);
    opacity: 1;
  }

  /* ==================================================================
     ۲) سرصفحه — بردکرامب یک‌خطی (با «…») + عنوان + یک خط متادیتا
     ================================================================== */
  body.page-property .pd-crumb.pd-crumb {
    margin: 14px 16px 5px;
    font-size: .74rem;
    color: var(--tm-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* مسیر طولانی به‌جای اسکرول افقی، کوتاه می‌شود */
  }
  body.page-property .pd-title-row.pd-title-row {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 8px; margin: 0 16px;
  }
  body.page-property .pd-title.pd-title { font-size: 1.34rem; line-height: 1.55; margin: 0; }
  body.page-property .pd-status-chip.pd-status-chip {
    align-self: flex-start; flex-shrink: 0;
    font-size: .72rem; padding: 4px 11px;
  }
  /* متادیتا: یک خط تمیز با جداکنندهٔ «·» به‌جای سه چیپ بوردری (کم‌شلوغ‌تر) */
  body.page-property .pd-sub.pd-sub {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 0;
    margin: 9px 16px 0;
    font-size: .78rem;
    color: var(--tm-muted, #64748b);
  }
  body.page-property .pd-sub.pd-sub > span {
    display: inline-flex; align-items: center; gap: 5px;
    min-width: 0; max-width: 100%;
  }
  body.page-property .pd-sub.pd-sub > span:not(:last-child) { margin-inline-end: 9px; }
  body.page-property .pd-sub.pd-sub > span:not(:last-child)::after {
    content: '·';
    margin-inline-start: 9px;
    opacity: .55;
  }
  body.page-property .pd-sub.pd-sub > span i { font-size: .92em; opacity: .8; }

  /* ==================================================================
     ۳) چیدمان تک‌ستونه — ⚠ align-items:stretch ریست اصلی همین‌جاست
        (بدون آن، کارت‌ها shrink-to-fit و نامرتب می‌شوند)
     ================================================================== */
  body.page-property .pd-layout.pd-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* ← رفع باگ ریشه‌ای نسخهٔ قبلی */
    gap: 12px;
    margin-top: 14px;
  }
  /* بازکردن دو ستون دسکتاپ: فرزندانشان آیتم همین فلکس می‌شوند */
  body.page-property .pd-main-col.pd-main-col,
  body.page-property .pd-aside.pd-aside { display: contents; }

  /* ترتیب نمایش اطلاعات ملک در موبایل.
     ⚠ نکتهٔ مهم: هر فرزندی که order نداشته باشد خودکار order:0 می‌گیرد و به
     "ابتدای" صفحه می‌پرد. قبلاً کارت‌های «گفت‌وگوی درون‌سایت» و «وقت بازدید»
     ترتیب نداشتند و بالای گالری می‌افتادند (دلیل به‌هم‌ریختگی ترتیب اطلاعات).
     حالا همهٔ بخش‌ها ترتیب صریح دارند و خط پایانی (order:50) هر بخش تازهٔ
     ناشناخته‌ای را به انتهای صفحه می‌فرستد، نه ابتدای آن. */
  body.page-property .pd-layout.pd-layout > * { order: 50; }
  body.page-property .pd-gallery.pd-gallery    { order: 1; }
  body.page-property .pd-price-box.pd-price-box { order: 2; }
  /* توضیحات ملک + ردیف مشخصات (متراژ/خواب/سال ساخت/دسته/آدرس) داخل همان کارت */
  body.page-property .pd-sec-desc.pd-sec-desc   { order: 3; }
  body.page-property .pd-sec-amen.pd-sec-amen   { order: 5; }
  /* کارت مشاور: مشاور + درخواست مشاوره + وقت بازدید همه در همین کارت */
  body.page-property .pd-sec-consult.pd-sec-consult { order: 8; }
  /* نقشهٔ ملک زیر کارت «مشاور این ملک» می‌نشیند (قبلاً بالای آن بود) */
  body.page-property .pd-sec-map.pd-sec-map     { order: 9; }
  body.page-property .pd-sec-chat.pd-sec-chat   { order: 10; }  /* گفت‌وگوی درون‌سایت */

  /* کارت استاندارد: یک حاشیهٔ کنار (۱۶px)، یک شعاع گوشه (۱۶px)، یک ریتم عمودی
     (gap فلکس بالا). margin بالا/پایین صفر است تا فاصلهٔ عمودی دو برابر نشود. */
  body.page-property .pd-card.pd-card,
  body.page-property .pd-price-box.pd-price-box {
    width: auto;
    margin: 0 16px;
    border-radius: 16px;
  }
  body.page-property .pd-card.pd-card { padding: 15px; }
  body.page-property .pd-card.pd-card h3 { font-size: 1.12rem; margin: 0 0 10px; }

  /* ==================================================================
     ۴) جعبهٔ قیمت — اولین کارت بعد از گالری، برجسته ولی تخت
     ================================================================== */
  body.page-property .pd-price-box.pd-price-box { padding: 16px 15px; }
  body.page-property .pd-price-box.pd-price-box .lbl { font-size: .74rem; }
  body.page-property .pd-price-box.pd-price-box .val {
    font-size: clamp(1.1rem, 5.2vw, 1.35rem);
    line-height: 1.5;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
  }
  body.page-property .pd-price-box.pd-price-box .val small { font-size: .78rem; }
  body.page-property .pd-price-box.pd-price-box .pd-install.pd-install { margin-top: 12px; gap: 8px; }
  body.page-property .pd-price-box.pd-price-box .pd-install .pi-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: .85rem; padding: 9px 11px;
  }
  body.page-property .pd-price-box.pd-price-box .pd-install .pi-row b { font-size: .9rem; white-space: nowrap; }

  /* ==================================================================
     ۵) توضیحات
     ================================================================== */
  body.page-property .pd-desc.pd-desc {
    font-size: .94rem;
    line-height: 1.95;         /* دیوار متن نسازیم */
    color: var(--tm-muted, #475569);
    white-space: normal;
    margin: 0;
  }

  /* ==================================================================
     ۶) مشخصات — ردیف‌های تراز «برچسب راست / مقدار چپ» با جداکنندهٔ مویی
        (جای کاشی‌های ۲ستونهٔ ناهم‌تراز را گرفت)
     ================================================================== */
  body.page-property .pd-meta.pd-meta { display: block; margin: 0; padding: 0; }
  body.page-property .pd-meta.pd-meta li {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--tm-border, rgba(148, 163, 184, .3));
    font-size: .9rem;
    background: none;
    border-radius: 0;
    min-width: 0;
  }
  body.page-property .pd-meta.pd-meta li:first-child { padding-top: 0; }
  body.page-property .pd-meta.pd-meta li:last-child { padding-bottom: 0; border-bottom: 0; }
  body.page-property .pd-meta.pd-meta li b {
    display: inline-block;
    font-size: .82rem;
    font-weight: 700;
    opacity: .72;
    white-space: nowrap;
  }
  body.page-property .pd-meta.pd-meta li span {
    font-size: .94rem;
    font-weight: 700;
    min-width: 0;
  }
  /* شناسهٔ ملک (#۱۲۳) لاتین است: ترتیب کاراکترها و ارقام هم‌عرض */
  body.page-property .pd-meta.pd-meta li span[dir="ltr"] {
    direction: ltr;
    font-variant-numeric: tabular-nums;
  }

  /* ==================================================================
     ۷) امکانات — دو ستون سبک، بدون بوردر (شلوغی بصری کم شود)
     ================================================================== */
  body.page-property .pd-amen.pd-amen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  body.page-property .pd-amen.pd-amen span {
    display: flex; align-items: flex-start; gap: 7px;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    background: var(--tm-input, #f1f5f9);
    color: var(--tm-muted, #475569);
    font-size: .85rem;
    line-height: 1.55;
    min-width: 0;
  }
  body.page-property .pd-amen.pd-amen span i { flex: 0 0 auto; margin-top: 2px; }
  body.page-property .pd-amen-empty { font-size: .85rem; }

  /* ==================================================================
     ۸) نقشه
     ================================================================== */
  body.page-property .pd-sec-map.pd-sec-map #propMap { height: 220px; border-radius: 12px; }

  /* ==================================================================
     ۹) مشاور ملک
     ================================================================== */
  body.page-property .pd-consultant.pd-consultant { gap: 12px; }
  /* بلوک مشاور در موبایل هم وسط‌چین می‌ماند (سبز/طلاییِ سابقه و امتیاز حفظ می‌شود) */
  body.page-property .pd-consultant.pd-consultant--center { gap: .5rem; }
  body.page-property .pd-consultant.pd-consultant .pc-avatar {
    width: 48px; height: 48px; font-size: 1.15rem; flex-shrink: 0;
  }
  body.page-property .pd-consultant.pd-consultant .pc-name { font-size: .98rem; }
  body.page-property .pd-consultant.pd-consultant .pc-exp { font-size: .76rem; }
  body.page-property .pd-sec-consult.pd-sec-consult .pd-request.pd-request {
    width: 100%; min-height: 48px; border-radius: 12px;
  }

  /* ==================================================================
     ۱۰) املاک مرتبط
     ================================================================== */
  body.page-property .related-title.related-title {
    margin: 22px 16px 10px;
    font-size: 1.18rem;
  }
  /* املاک مشابه: «دقیقاً» همان کارت «مقالات مرتبط» — یک ردیف افقی با تصویر
     کوچک کنار و اطلاعات کامل. کاروسل ۳کارتهٔ قبلی هر کارت را ۳۱٪ عرض
     می‌کرد، عنوان را یک‌خطی و متراژ/آدرس/مشاور را پنهان می‌کرد.
     (دسکتاپ دست‌نخورده است؛ این قواعد فقط داخل همین بریک‌پوینت اعمال می‌شوند.) */
  body.page-property .related-grid.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-inline: 16px;
    grid-auto-rows: auto;
    overflow: visible;
  }
  body.page-property .related-grid.related-grid .prop-card {
    flex: none;
    flex-direction: row;
    align-items: stretch;
    border-radius: 14px;
    height: auto;
    min-height: 96px;
  }
  body.page-property .related-grid.related-grid .prop-media {
    flex: 0 0 104px;
    width: 104px;
    height: auto;
    min-height: 96px;
  }
  body.page-property .related-grid.related-grid .prop-media img { height: 100%; }
  /* بدنِ کارت کنار تصویر: همان فاصله‌های کارت مقالهٔ مرتبط */
  body.page-property .related-grid.related-grid .prop-body {
    padding: 10px 12px;
    gap: .3rem;
    justify-content: center;
  }
  body.page-property .related-grid.related-grid .prop-name { font-size: .95rem; line-height: 1.7; }
  /* اطلاعات مهم برمی‌گردند: متراژ/سال، آدرس و مشاور */
  body.page-property .related-grid.related-grid .prop-meta { display: flex; font-size: .78rem; gap: .5rem; }
  body.page-property .related-grid.related-grid .prop-location { display: flex; font-size: .78rem; }
  body.page-property .related-grid.related-grid .prop-consultant { display: flex; font-size: .78rem; }
  body.page-property .related-grid.related-grid .prop-snippet { font-size: .76rem; line-height: 1.85; -webkit-line-clamp: 2; }
  body.page-property .related-grid.related-grid .prop-cat-badge { font-size: .68rem; padding: .24rem .58rem; }
  body.page-property .related-grid.related-grid .prop-price { font-size: .85rem; }
  body.page-property .related-grid.related-grid .prop-price .prop-price-val { font-size: .9rem; }
  body.page-property .related-grid.related-grid .prop-view-badge { font-size: .66rem; padding: .22rem .55rem; }

  /* مقالات مرتبط: کارت فشردهٔ افقی — تصویر ۱۶:۹ تمام‌عرض، کارت را بیش از حد
     بزرگ می‌کرد؛ حالا بندانگشتی کوچک + عنوان و دو خط خلاصه. */
  body.page-property .rel-art-grid.rel-art-grid { grid-template-columns: 1fr; gap: 10px; padding-inline: 16px; }
  body.page-property .rel-art-card.rel-art-card { flex-direction: row; border-radius: 14px; }
  body.page-property .rel-art-card.rel-art-card .rel-art-media { flex: 0 0 92px; aspect-ratio: auto; min-height: 84px; }
  body.page-property .rel-art-card.rel-art-card .rel-art-body { padding: 10px 12px; gap: .3rem; }
  body.page-property .rel-art-card.rel-art-card .rel-art-title { font-size: .92rem; line-height: 1.7; }
  body.page-property .rel-art-card.rel-art-card .rel-art-excerpt { font-size: .78rem; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* ==================================================================
     ۱۱) لایت‌باکس
     ================================================================== */
  body.page-property .pd-lbox.pd-lbox .pd-lbox-stage.pd-lbox-stage { width: 100%; }
  body.page-property .pd-lbox.pd-lbox .pd-lbox-media.pd-lbox-media img,
  body.page-property .pd-lbox.pd-lbox .pd-lbox-media.pd-lbox-media video { max-height: 72vh; border-radius: 10px; }
  body.page-property .pd-lbox.pd-lbox .pd-lbox-nav.pd-lbox-nav { width: 44px; height: 44px; }
  body.page-property .pd-lbox.pd-lbox .pd-lbox-prev.pd-lbox-prev { right: 8px; }
  body.page-property .pd-lbox.pd-lbox .pd-lbox-next.pd-lbox-next { left: 8px; }
  body.page-property .pd-lbox.pd-lbox .pd-lbox-close.pd-lbox-close { top: .6rem; left: .6rem; position: fixed; }
  body.page-property .pd-lbox.pd-lbox .pd-lbox-count.pd-lbox-count { margin-top: .7rem; }

  /* ==================================================================
     ۱۲) مودال درخواست مشاوره — کشوی پایین
     ================================================================== */
  body.page-property .consult-modal.consult-modal { align-items: flex-end; padding: 0; }
  body.page-property .consult-modal.consult-modal .consult-card.consult-card {
    width: 100%;
    border-radius: 22px 22px 0 0;
    max-height: 88dvh;
    overflow-y: auto;
    padding: 1.5rem 1.15rem calc(1.2rem + env(safe-area-inset-bottom));
    animation: pdSheetUp .28s cubic-bezier(.32, .72, 0, 1);
  }
  @keyframes pdSheetUp {
    from { transform: translateY(24px); opacity: .4; }
    to { transform: translateY(0); opacity: 1; }
  }
  body.page-property .consult-modal.consult-modal .consult-card h3 { font-size: 1.3rem; }
  body.page-property .consult-modal.consult-modal .consult-submit.consult-submit { min-height: 48px; }

  /* ==================================================================
     ۱۳) نوار شناور پایین (pd-sticky-cta) — فقط جای‌گذاری
        ⚠ طراحی خود نوار در property.css است و عمداً دست‌نخورده می‌ماند.
        پایینِ آن روی تب‌بار سراسری (~۷۰px) می‌نشیند.
     ================================================================== */
  body.page-property .pd-wrap.pd-wrap > .pd-sticky-cta.pd-sticky-cta {
    right: 12px; left: 12px; width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    z-index: 80;
  }
  body.page-property .pd-wrap.pd-wrap > .pd-sticky-cta.pd-sticky-cta .pds-price small { color: var(--brand, #5b45e8); }
  /* دکمه‌های شناور سراسری (نشان‌کردن/تماس) روی همین نوار می‌افتادند:
     در این صفحه پنهان می‌شوند — نشان‌کردن داخل گالری است و «تماس» با
     دکمهٔ درخواست مشاوره پوشش داده می‌شود. */
  body.page-property .watchlist-fab,
  body.page-property .contact-fab { display: none !important; }
}

/* ==========================================================================
   ۱۴) صفحات خیلی باریک (≤ 380px)
   ========================================================================== */
@media (max-width: 380px) {
  body.page-property .pd-amen.pd-amen { grid-template-columns: 1fr; }
  body.page-property .pd-title.pd-title { font-size: 1.24rem; }
  body.page-property .pd-tile.pd-tile { flex-basis: 76px; width: 76px; height: 56px; }
}

/* ==========================================================================
   ۱۵) حرکت کاهش‌یافته
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.page-property .consult-modal.consult-modal .consult-card.consult-card { animation: none; }
  body.page-property .pd-tile.pd-tile { transition: none; }
}