/* ที่ดินแนะนำ / ประกาศใกล้คุณ — ใช้ร่วมทุกหน้า (.pd-land-rail-col, .market-nearby-panel, .fb-listings-rail) */
:root{
  --fb-mini-thumb:78px;
  --fb-mini-title:13px;
  --fb-mini-sub:11px;
  --fb-mini-price:13px;
  --fb-mini-time:10px;
  --fb-mini-tag:9px;
  --fb-mini-gap:10px;
  --fb-mini-pad:10px 8px;
  /* ความกว้างคอลัมน์ rail — ให้เท่ากันทุกหน้า */
  --pd-rail-col-min:320px;
  --pd-rail-col-max:380px;
}

/* ——— การ์ด rail ——— */
.fb-listings-rail-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  box-shadow:0 10px 28px rgba(17,24,39,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  height:100%;
}
.fb-listings-rail-head{
  padding:14px 14px 10px;
  border-bottom:1px solid #f1f5f9;
  flex-shrink:0;
}
.fb-listings-rail-title{
  margin:0;
  font-size:16px;
  font-weight:1100;
  color:#0f172a;
  line-height:1.3;
}
.fb-listings-rail-sub{
  margin:5px 0 0;
  font-size:12px;
  font-weight:900;
  color:#64748b;
  line-height:1.4;
}
.fb-listing-ticker-wrap{
  flex:1 1 auto;
  min-height:min(220px, 32vh);
  max-height:none;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.fb-listing-ticker-wrap::-webkit-scrollbar{ display:none; }
.fb-listing-blocks{
  padding:10px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ——— การ์ดประกาศย่อ ——— */
.fb-listing-mini{
  display:grid;
  grid-template-columns:var(--fb-mini-thumb) minmax(0,1fr);
  grid-template-rows:auto auto auto;
  column-gap:var(--fb-mini-gap);
  row-gap:5px;
  align-items:start;
  width:100%;
  padding:var(--fb-mini-pad);
  border:1px solid #e8eaed;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  text-align:left;
  font:inherit;
  color:inherit;
  box-shadow:0 2px 10px rgba(15,23,42,.05);
  transition:border-color .12s ease, background .12s ease;
}
.fb-listing-mini:hover{
  border-color:#93c5fd;
  background:#f8fbff;
}
.fb-listing-mini.sold{ opacity:.78; }
.fb-listing-mini-thumb{
  grid-column:1;
  grid-row:1 / span 3;
  flex-shrink:0;
  width:var(--fb-mini-thumb);
  height:var(--fb-mini-thumb);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg,#e0e7ff,#f1f5f9);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:1100;
  color:#475569;
  border:1px solid #e2e8f0;
}
.fb-listing-mini-thumb.has-img{ padding:0; border:none; }
.fb-listing-mini-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.fb-listing-mini-text{
  grid-column:2;
  grid-row:1;
  flex:unset;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.fb-listing-mini-text strong{
  font-size:var(--fb-mini-title);
  font-weight:1100;
  color:#0f172a;
  line-height:1.32;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fb-listing-mini-text small{
  font-size:var(--fb-mini-sub);
  font-weight:850;
  color:#64748b;
  line-height:1.35;
}
.fb-listing-mini-price{
  grid-column:2;
  grid-row:2;
  width:auto;
  max-width:none;
  padding-left:0;
  margin-top:2px;
  font-size:var(--fb-mini-price);
  font-weight:1000;
  color:#15803d;
  white-space:normal;
  text-align:left;
  line-height:1.28;
}
.fb-listing-mini-time{
  grid-column:2;
  grid-row:3;
  width:auto;
  padding-left:0;
  font-size:var(--fb-mini-time);
  color:#94a3b8;
  font-weight:850;
  line-height:1.28;
}
.fb-listing-mini-broker,
.fb-listing-mini-land,
.fb-listing-mini-house,
.fb-listing-mini-condo,
.fb-listing-mini-type,
.fb-listing-mini-promo{
  display:inline-block;
  margin-top:3px;
  margin-right:4px;
  font-size:var(--fb-mini-tag);
  font-weight:1000;
  border-radius:999px;
  padding:2px 7px;
}
.fb-listing-mini-broker{
  color:#7c3aed;
  background:#f5f3ff;
  border:1px solid #ddd6fe;
}
.fb-listing-mini-land{
  color:#166534;
  background:#dcfce7;
  border:1px solid #bbf7d0;
}
.fb-listing-mini-house{
  color:#1d4ed8;
  background:#dbeafe;
  border:1px solid #bfdbfe;
}
.fb-listing-mini-condo{
  color:#6d28d9;
  background:#ede9fe;
  border:1px solid #ddd6fe;
}
.fb-listing-mini-type{
  color:#475569;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
}
.fb-listing-mini-promo{
  color:#1e40af;
  background:#dbeafe;
  border:1px solid #93c5fd;
}
.fb-listing-mini-more{
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:10px 12px;
  font-size:12px;
  font-weight:900;
  color:#64748b;
  text-align:center;
  background:#f8fafc;
}

/* ——— คอลัมน์ sidebar ——— */
.pd-land-rail-col{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:var(--pd-rail-col-max);
  justify-self:stretch;
}
@media(min-width:900px){
  .pd-land-rail-col{
    position:sticky;
    top:calc(var(--pd-top-bar-h, 56px) + 10px);
    height:calc(100vh - var(--pd-top-bar-h, 56px) - 20px);
    max-height:calc(100vh - var(--pd-top-bar-h, 56px) - 20px);
  }
}
.pd-land-rail-col .fb-listings-rail-card{
  flex:1;
  height:100%;
}
.pd-land-rail-col .pd-land-rail-empty{
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  border-radius:14px;
  padding:12px;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  line-height:1.45;
  text-align:center;
}
@media(max-width:1099px){
  :root{
    --fb-mini-thumb:70px;
    --pd-rail-col-min:280px;
    --pd-rail-col-max:100%;
  }
  .pd-land-rail-col{
    position:static;
    max-height:none;
    order:3;
  }
  .pd-land-rail-col .fb-listing-ticker-wrap{
    max-height:min(320px, 42vh);
  }
}

/* fallback composer ใน listing-rail-open (หน้าที่ไม่มี LandLinkGoFbComment) */
.pd-rail-open-composer{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}
.pd-rail-open-composer textarea{
  width:100%;
  min-height:56px;
  padding:10px 12px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  font:inherit;
  resize:vertical;
}
.pd-rail-open-composer button{
  align-self:flex-end;
  padding:8px 14px;
  border:none;
  border-radius:10px;
  background:#1e4ed8;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}