/* การ์ดแปลงที่ดิน — สไตล์ชุดเดียวที่ใช้ร่วมกันทุกหน้าที่วาดการ์ด
 *
 * คู่กับตัวเรนเดอร์กลาง `listingcard.js` — โครง HTML อยู่ที่นั่น สไตล์อยู่ที่นี่
 * ที่มาของหน้าตา: ดีไซน์หน้าแรกชุดใหม่ (2026-09-22) บล็อก `.card`
 *
 * ⚠️ **ต้องโหลดเป็นไฟล์ท้ายๆ ของหน้า** — หน้ารวมประกาศยังมีกฎ `.land-card` / `.card-media`
 *    ชุดเดิมอยู่ใน `marketplace.css` ซึ่งความจำเพาะเท่ากัน ไฟล์ที่มาทีหลังจึงเป็นตัวชนะ
 *
 * ⚠️ เคยมีสไตล์การ์ดแยกกันสามชุดตามชุดสีของแต่ละหน้า เพิ่มคลาสใหม่ทีหนึ่งต้องไล่แก้ครบสามไฟล์
 *    และมีที่ที่ลืมทุกครั้ง — ไฟล์นี้มีไว้เพื่อยุติเรื่องนั้น ห้ามเขียนสไตล์การ์ดที่อื่นอีก
 */

.land-card{position:relative;background:#fff;border:1px solid var(--line,#e6eaf0);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.15s;color:#0b1f3a}
.land-card:hover{box-shadow:0 12px 32px rgba(11,31,58,.14);transform:translateY(-2px)}
.land-card[data-href]{cursor:pointer}

/* ---------- ตะแกรงการ์ดของหน้ารวมประกาศ (listings.html · class="land-grid") ----------
 * ⚠️ **ต้องมีกฎนี้ — เคยไม่มีเลย** หน้ารวมประกาศใช้ชื่อคลาส `land-grid` แต่กฎตะแกรงใน marketplace.css
 *    ชื่อ `.listing-grid` (หน้าแรกใช้ `.grid-3` ใน home.css) ชื่อไม่ตรงกัน → ตะแกรงเป็น block ธรรมดา
 *    การ์ดแต่ละใบกว้างเต็มจอ 768px ขึ้นไป (วัดจริง 1024px: การ์ดกว้าง 969 สูง 970 · 1440px: กว้าง 1180)
 *    รูป 4:3 ขยายใหญ่เท่าจอ ผู้ซื้อบนแท็บเล็ตต้องปัดผ่านรูปทีละใบ
 * ⚠️ ใช้ minmax(0,1fr) ไม่ใช่ 1fr — ค่า 1fr ห้ามคอลัมน์แคบกว่าเนื้อหาที่ยาวที่สุด การ์ดจึงดันตะแกรงล้นจอ
 *    3 → 2 → 1 คอลัมน์ ตรงกับ .grid-3 หน้าแรก (1023 / 767) ให้สองหน้าหน้าตาเหมือนกัน */
.land-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* ข้อความโหลด/ไม่พบผล/ข้อความผิดพลาดต้องกินทั้งแถว ไม่ใช่ถูกยัดอยู่ในคอลัมน์แรก */
.land-grid > :not(.land-card){grid-column:1/-1}
@media (max-width:1023px){ .land-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .land-grid{grid-template-columns:1fr;gap:12px} }

.card-media{position:relative;aspect-ratio:4/3;background:#dde5df;overflow:hidden;height:auto}
.card-media img{display:block;width:100%;height:100%;object-fit:cover}
/* ไม่มีรูป = พื้นลายเส้นแทน ไม่ใช่ไอคอนรูปแตกหรือช่องว่าง */
.fallback-land{position:absolute;inset:0;background:#0b1f3a}
.fallback-land::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(58deg,rgba(229,199,107,.16) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(148deg,rgba(229,199,107,.12) 0 1px,transparent 1px 48px);
}

.card-badges{position:absolute;left:12px;top:12px;display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600;color:#fff;background:#0b1f3a}
/* ⚠️ เขียวเข้ม ไม่ใช่เขียวสด — ขาวบน #1ca45c ได้ 3.22:1 (ตก AA) · บน #15803d ได้ 5.02:1
 *    เหตุผลเต็มอยู่ที่ .badge-verified ใน home.css */
.badge-verified{background:#15803d}
.badge-basic{background:#8a6d1f}
/* ประกาศเด่น — พื้นขาวขอบทอง ไม่ใช้สีเขียว (สีของ "ตรวจสอบโดย NJ") และไม่ใช้ทองทึบ (สีของ "ข้อมูลเบื้องต้น")
 * ⚠️ เป็นพื้นที่ที่เจ้าของจ่ายเอง ห้ามทำให้ดูเหมือนป้ายรับรอง · ข้อความ #6b4500 บนขาว 8.5:1 ผ่าน AA */
.badge-featured{background:#fff;color:#6b4500;border:1px solid #d9a21b;padding:3px 7px}
.photo-count{position:absolute;right:12px;top:12px;background:rgba(11,31,58,.72);color:#e5c76b;font-size:12px;padding:4px 8px;border-radius:6px}

.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.card-price{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-price b{font-size:24px;font-weight:700}
.card-price span{font-size:13px;color:#646f84}
.card-title{margin:0;font-size:15px;font-weight:600;line-height:1.4}
.card-title a{color:inherit}
.card-desc{font-size:13px;color:#4a5568}
.card-tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;padding:4px 8px;border-radius:6px;font-size:13px;background:#f2f6fb;color:#4a5568}
.tag-orange{background:#fff4e5;color:#b45309}
.tag-green{background:#e8f7ee;color:#15803d}
/* ---------- ล้างกฎการ์ดรุ่นเก่าใน marketplace.css ที่ยังรั่วเข้ามาในหน้ารวมประกาศ ----------
 * ⚠️ หน้ารวมประกาศ (listings.html) โหลด marketplace.css ก่อนไฟล์นี้ ซึ่งยังมีสไตล์การ์ดรุ่นเก่าอยู่ และ
 *    ไฟล์นี้เขียนทับได้เฉพาะ "ช่องที่ตัวเองประกาศ" ช่องที่รุ่นเก่าตั้งไว้แต่ไฟล์นี้ไม่ได้พูดถึงจึงค้างอยู่
 *    ผลที่เห็นบนแท็บเล็ต/จอคอม (วัดจริงที่ 768–1440px):
 *      · `.card-tags{position:absolute;left:12px;top:12px}` ลอยทับป้าย "ขาย" "ตรวจสอบโดย NJ" บนรูปพอดี
 *        (ในรุ่นใหม่ .card-tags เป็นแถวในเนื้อการ์ด ไม่ใช่ป้ายบนรูป)
 *      · `.card-tags span{background:navy;color:#fff;font-size:10px}` ความจำเพาะสูงกว่า .tag จึงชนะ
 *        → ชิปเนื้อที่/ผังสี/เอกสารสิทธิ์กลายเป็นกล่องน้ำเงินตัวขาว 10px เล็กและเข้มผิดชุดสี
 *      · `.photo-count{bottom:10px}` + top:12px จากไฟล์นี้ → ป้ายจำนวนรูปถูกยืดสูงเกือบทั้งรูป (236px)
 *      · `.card-zone{margin-top:8px}` ทำให้ป้ายผังสีต่ำกว่าชิปข้างๆ
 *    ⚠️ ห้ามลบกฎเหล่านี้เพราะ "ดูซ้ำซ้อน" — ถ้าวันหนึ่งตัดการ์ดรุ่นเก่าออกจาก marketplace.css ได้หมดค่อยลบ */
.land-card .card-tags{position:static;left:auto;top:auto}
.land-card .card-tags span.tag{
  background:#f2f6fb;color:#4a5568;font-size:13px;font-weight:400;padding:4px 8px;border-radius:6px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.land-card .card-tags span.card-zone{
  background:#f2f6fb;color:#4a5568;font-size:13px;font-weight:400;padding:4px 8px;border-radius:6px;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.land-card .card-tags span.tag-orange{background:#fff4e5;color:#b45309}
.land-card .card-tags span.tag-green{background:#e8f7ee;color:#15803d}
.land-card .photo-count{bottom:auto}
.land-card .card-zone{margin-top:0}
.land-card .card-price{line-height:1.35;margin-bottom:0}

.card-foot{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #eef1f5;padding-top:10px;margin-top:4px;font-size:12px;color:#646f84}
.card-foot .score{font-weight:600;color:#15803d;white-space:nowrap}
.card-foot .score.is-low{color:#b45309}

/* ⚠️ รหัสทรัพย์ต้องเห็นบนการ์ด ไม่ใช่ซ่อนไว้ใน data-id — ผู้ซื้อทักไลน์มาว่า "สนใจแปลงนึงในเว็บ"
 *    โดยไม่บอกว่าแปลงไหน ทีมจับคู่กลับไม่ได้ เจ้าของที่ดินจึงไม่เคยรู้ว่ามีคนสนใจแปลงตัวเอง */
.card-foot b{color:#0b1f3a;font-weight:600}

/* ป้ายผังสี — สีมาจาก NJVocab.ZONE_HEX ผ่าน inline style ของ listingcard.js
   ⚠️ ไม่มี zoneColor = ยังไม่ได้ตรวจ ต้องไม่ขึ้นป้ายอะไรเลย ห้ามขึ้นป้าย "ไม่มีผังสี" */
.card-zone{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:#f2f6fb;font-size:13px;color:#4a5568}
.card-zone i{width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.3);flex:none}

/* ป้ายบันไดการตรวจสอบ 2 ระดับ (verified.js) — สไตล์ฐานอยู่ใน verified.css ที่นี่แค่จัดแถว
   ⚠️ ป้ายนี้ **ไม่ได้แทนที่** ป้ายเขียว/ทองบนรูป สองอย่างตอบคนละคำถาม
      ป้ายบนรูป = "รังวัดแล้วหรือยัง" · ป้ายนี้ = "ตรวจไปแล้วกี่ระดับจาก 2" */
.card-marks{display:flex;gap:6px;flex-wrap:wrap}
.card-marks:empty{display:none}

/* ---------- แถวติดต่อท้ายการ์ด ----------
 * ⚠️ ดีไซน์ชุดใหม่ไม่ได้วาดแถวนี้ไว้ แต่เจ้าของสั่งให้คงไว้ (22 ก.ย. 69) — เป็นจุดรับลีดจริง
 *    จึงเขียนใหม่ด้วยโทเคนชุดเดียวกับการ์ด ไม่ได้ยกสไตล์เดิมจาก marketplace.css มาทั้งก้อน
 * ⚠️ ปุ่มติดต่อทั้งสี่ต้องมี `data-contact` เสมอ ไม่งั้นลีดไม่ถูกนับและคลิกจะทะลุไปหน้ารายละเอียด */
.card-agent{
  display:flex;align-items:center;gap:10px;
  border-top:1px solid #eef1f5;padding-top:10px;margin-top:2px;
}
.agent-avatar{
  width:32px;height:32px;flex:none;border-radius:50%;background:#f2f6fb;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:#0b1f3a;letter-spacing:.02em;
}
.card-agent > div{flex:1;min-width:0;display:grid;gap:1px}
.card-agent b{font-size:12.5px;font-weight:600}
.card-agent small{font-size:11.5px;color:#646f84}
.contact-mini{display:flex;gap:6px;flex:none}
.contact-mini a{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2,#d5dce6);
  display:grid;place-items:center;font-size:13px;color:#0b1f3a;background:#fff;
}
.contact-mini a:hover{border-color:#0b1f3a;background:#f2f6fb}
.contact-mini a:focus-visible{outline:2px solid #b08a26;outline-offset:2px}
.contact-mini .line{color:#15803d}

/* ปุ่มบันทึก (save.js) และปุ่มเทียบแปลง (compare.js) ถูกยัดเข้าไปใน .card-media หลังการ์ดถูกวาด
 * ⚠️ **ห้ามเขียนทับตำแหน่ง/หน้าตาของสองปุ่มนี้ที่นี่** — ดีไซน์วาดปุ่ม ♡ กลม ๆ ไว้มุมขวาบน
 *    แต่ปุ่มจริงเป็นเม็ดยาที่มี **ข้อความ** กำกับ ("บันทึก" → "บันทึกแล้ว") ซึ่งเป็นข้อบังคับ:
 *    สถานะต้องต่างทั้งสีและข้อความ เพราะคนตาบอดสีแยกแดง-เทาไม่ออก (ดู save.css)
 *    บีบให้เหลือไอคอนกลมเมื่อไหร่ = ถอดข้อความนั้นทิ้ง · สไตล์อยู่ที่ compare.css / save.css ที่เดียว
 */

/* ---------- การ์ดแนวนอนบนมือถือ ----------
 * รูป 4:3 เต็มความกว้าง × การ์ดหลายใบ = ต้องปัดนิ้วผ่านรูปอย่างเดียวเกือบสองพันพิกเซล
 * จึงสลับเป็นการ์ดแนวนอน รูปเล็กซ้าย ข้อความขวา ตามที่ดีไซน์กำหนด */
@media (max-width:767px){
  /* ⚠️ minmax(0,1fr) + min-width:0 บน .card-body — ไม่ใส่ ราคา/วันอัปเดตดันเนื้อหาให้กว้างกว่าคอลัมน์
     แล้วล้นออกนอกการ์ดที่จอ 320px (วัดจริง: ราคาต่อตร.ว. ล้น 16px · "อัปเดต …" ล้น 5–12px) */
  .land-card.is-compact{display:grid;grid-template-columns:120px minmax(0,1fr)}
  .land-card.is-compact .card-body{min-width:0}
  .land-card.is-compact .card-price{flex-wrap:wrap;column-gap:8px;row-gap:3px}
  .land-card.is-compact .card-title,
  .land-card.is-compact .card-foot{overflow-wrap:anywhere}
  .land-card.is-compact .card-media{aspect-ratio:auto;height:100%;min-height:112px}
  /* เว้นที่ท้ายการ์ดให้ปุ่มบันทึก/เทียบที่ลอยอยู่มุมล่างขวา ไม่งั้นมันทับบรรทัดรหัสทรัพย์
     ซึ่งเป็นบรรทัดที่ทีมใช้จับคู่ผู้ซื้อกับเจ้าของ (เจอจริงตอนวัดบนจอ 375px)
     ⚠️ ตัวเลข 58px = ความสูงปุ่มบันทึก 44px + ช่องไฟบนล่าง — **วัดจากของจริงที่ 360px**
        ไม่ใช่ตัวเลขที่เดา · ลดลงเมื่อไหร่ปุ่มจะทับแถวไอคอนติดต่อที่อยู่เหนือมันพอดี */
  .land-card.is-compact .card-body{padding:10px 12px 58px;gap:3px}
  .land-card.is-compact .card-price b{font-size:18px}
  .land-card.is-compact .card-desc,
  .land-card.is-compact .card-tags,
  .land-card.is-compact .photo-count,
  .land-card.is-compact .card-badges .badge:not(.badge-verified):not(.badge-basic):not(.badge-featured){display:none}

  /* ปุ่มบันทึก/เทียบบนการ์ดแนวนอน — ช่องรูปเหลือกว้าง 120px วางปุ่มทับไม่ได้
   * ⚠️ **ห้ามซ่อนปุ่มทั้งสองบนมือถือ** ผู้ซื้อที่ดินส่วนใหญ่เปิดจากมือถือ ซ่อนแล้วเท่ากับ
   *    ตัดฟีเจอร์ "เก็บแปลงที่สนใจ" กับ "เทียบแปลง" ออกจากคนกลุ่มใหญ่ที่สุด
   * วิธี: ปลดตำแหน่งอ้างอิงออกจากช่องรูป ให้ปุ่มไปเกาะขอบล่างขวาของทั้งการ์ดแทน
   * (ช่องรูปเริ่มที่ขอบซ้ายของการ์ดพอดี ป้ายมุมซ้ายบนจึงยังอยู่ที่เดิมเป๊ะ) */
  .land-card.is-compact .card-media{position:static;overflow:visible}
  .land-card.is-compact .card-badges{left:6px;top:6px}
  .land-card.is-compact .njsave-btn,
  .land-card.is-compact .njcmp-btn{bottom:8px;font-size:11px;padding:5px 9px 5px 7px}
  .land-card.is-compact .njsave-btn{left:auto;right:92px}
  .land-card.is-compact .njcmp-btn{right:8px}

  /* แถวติดต่อบนการ์ดแนวนอน — ช่องข้อความกว้างจริงแค่ ~200px ที่จอ 360px
   * จึงเหลือเฉพาะไอคอนติดต่อ 4 ปุ่ม ตัดรูปโปรไฟล์กับชื่อ "ทีมที่ดินชัวร์" ทิ้ง
   * (วันอัปเดตยังอยู่ในแถว .card-foot ด้านบนเหมือนเดิม ไม่ได้หายไปไหน)
   * ⚠️ **ตัดปุ่มติดต่อให้เหลือบางปุ่มไม่ได้** — เบอร์สำนักงานกับเบอร์มือถือต้องมาคู่กันเสมอ
   *    (กติกาข้อ 6) ถ้าที่ไม่พอให้ย่อขนาดปุ่ม ไม่ใช่ตัดปุ่มทิ้ง
   * ⚠️ ไอคอนติดต่ออยู่แถวล่างซ้าย ปุ่มบันทึก/เทียบอยู่แถวล่างขวา — วัดที่ 360px แล้วไม่ชนกัน */
  /* ช่องข้อความแคบ — วางรหัสทรัพย์กับคะแนนคนละบรรทัด ไม่งั้นข้อความซ้ายไหลอ้อมข้อความขวา
     แล้วอ่านออกมาเป็น "รหัส OP-050 [ข้อมูลพร้อม 52/100] · อัปเดตเมื่อวาน" ซึ่งสลับที่กัน */
  .land-card.is-compact .card-foot{flex-direction:column;align-items:flex-start;gap:2px}

  .land-card.is-compact .card-agent{border:0;padding:0;margin-top:6px;gap:6px}
  .land-card.is-compact .agent-avatar,
  .land-card.is-compact .card-agent > div{display:none}
  .land-card.is-compact .contact-mini a{width:28px;height:28px;font-size:12px}
  .land-card.is-compact .card-title{font-size:13px}
  .land-card.is-compact .card-badges{left:6px;top:6px}
  .land-card.is-compact .badge{font-size:10.5px;padding:3px 6px}
  /* ป้ายระดับการตรวจสอบต้องเห็นบนการ์ดมือถือด้วย (เจ้าของสั่ง 1 ต.ค. 69 · เดิมซ่อนทั้งแถว)
     ชื่อระดับ 2 ยาว จึงย่อตัวอักษรและให้ขึ้นบรรทัดใหม่ในช่องข้อความ ⚠️ ห้ามกลับไปซ่อน .card-marks */
  .land-card.is-compact .card-marks{margin-top:2px}
  .land-card.is-compact .njv-badge{font-size:10px;padding:2px 7px;line-height:1.5}
  .land-card.is-compact .njv-badge b{font-size:10.5px}
  .land-card:not(.is-compact) .card-media{aspect-ratio:16/9}
}

/* ---------- จอแคบมาก (≤360px) — iPhone SE · Android เล็ก ----------
 * รูป 120px กินเกือบครึ่งการ์ด ข้อความขวาเหลือราว 150px ย่อรูปลงเหลือ 100px ให้ข้อความหายใจได้ */
@media (max-width:360px){
  .land-card.is-compact{grid-template-columns:100px minmax(0,1fr)}
  .land-card.is-compact .card-body{padding-left:10px;padding-right:10px}
  .land-card.is-compact .card-price b{font-size:17px}
}