/* ============================================================
   TarardProp — มุมมองตามอุปกรณ์
   ------------------------------------------------------------
   โหลดท้ายสุด (หลัง base/components/layout) จึง override ได้ทุกกฎ

   ช่วงความกว้าง:
     ≥1200px       เดสก์ท็อป  — คอนเทนเนอร์เต็ม, ช่องค้นหา 4 คอลัมน์
     1024–1199px   เดสก์ท็อปเล็ก / แล็ปท็อปใหญ่
     768–1023px    แท็บเล็ต      — ช่องค้นหา 2 คอลัมน์
     480–767px     สมาร์ทโฟนใหญ่
     ≤479px        สมาร์ทโฟนเล็ก
   ============================================================ */

:root { --pad-x: 1rem; }

/* ---------- แถบเมนู: กันข้อความตัดบรรทัด ---------- */
/* เมนูเลื่อนแนวนอนได้ แต่ไม่ต้องตัดคำว่า "หน้าแรก" ให้เป็น 2 บรรทัด */
.site-header nav { scrollbar-width: none; -ms-overflow-style: none; }
.site-header nav::-webkit-scrollbar { display: none; }

/* ============================================================
   DESKTOP — ≥ 1200px
   ============================================================ */
@media (min-width: 1200px) {
  :root { --pad-x: 1.5rem; }

  /* ช่องค้นหาในหน้าแรก: 4 ช่องวางแถวเดียว ไม่กินพื้นที่แนวตั้ง */
  .hero-search .form-grid { grid-template-columns: repeat(4, 1fr); }

  /* การ์ดประกาศ: 4 คอลัมน์พอดีกับคอนเทนเนอร์ */
  .prop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ---------- หมวดหมู่ประเภท (หน้าแรก) ---------- */
  /* ต้องประกาศหลัง .prop-grid เพราะหน้าแรกใช้ทั้งสองคลาส
     และค่าจาก .prop-grid (4 คอลัมน์) จะทับ .cat-grid ถ้าเรียงผิดลำดับ
     เดสก์ท็อป: 5 ประเภทวางครบแถว */
  .prop-grid.cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
}

/* ============================================================
   เดสก์ท็อปเล็ก / แล็ปท็อปใหญ่ — 1024–1199px
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1199px) {
  .wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }

  .hero-search .form-grid { grid-template-columns: repeat(2, 1fr); }
  .prop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prop-grid.cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   TABLET — 768–1023px
   ============================================================ */
@media (max-width: 1023px) {
  .wrap { padding-left: var(--pad-x); padding-right: var(--pad-x); }

  .hero { padding: 1.6rem 0; }
  .hero h1 { font-size: 1.5rem; }

  /* ช่องค้นหา 2 คอลัมน์ (ยังพอดีกับนิ้วสองข้าง) */
  .hero-search .form-grid { grid-template-columns: repeat(2, 1fr); }

  /* การ์ดประกาศ 2 คอลัมน์ */
  .prop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  /* หมวดหมู่ประเภท: 3 คอลัมน์ (2+3) */
  .prop-grid.cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }


/* ============================================================
   SMARTPHONE — ≤ 767px
   ============================================================ */
@media (max-width: 767px) {
  :root { --pad-x: 1rem; }

  /* ---------- แถบเมนูบน: ย้ายเมนูลงบรรทัดใหม่ เลื่อนแนวนอนได้ ---------- */
  .site-header .wrap { flex-wrap: wrap; gap: .5rem .6rem; padding-top: .6rem; padding-bottom: .6rem; }

  .site-header nav {
    order: 3; width: 100%; flex: none;
    margin-left: 0; padding-bottom: .15rem;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; -ms-overflow-style: none;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header .nav-link { flex-shrink: 0; padding: .45rem .65rem; font-size: .82rem; white-space: nowrap; }

  /* ปุ่มฝั่งขวา (ธีม/เข้าสู่ระบบ/ลงประกาศ) กระชับลง */
  .site-header .btn { padding: .42rem .65rem; font-size: .8rem; }
  .site-header .btn-sm { padding: .38rem .55rem; }
  .site-header .btn .fa-solid { font-size: .8rem; }

  /* ---------- HERO ---------- */
  .hero { padding: 1.4rem 0; }
  .hero h1 { font-size: 1.28rem; line-height: 1.4; margin-bottom: .35rem; }
  .hero p { font-size: .88rem; }

  /* ช่องค้นหา 1 คอลัมน์ — ช่องกว้าง แตะง่าย */
  .hero-search { padding: .7rem .8rem; border-radius: .8rem; }
  .hero-search .form-grid { grid-template-columns: 1fr; gap: .5rem; }
  .hero-search .label { font-size: .72rem; }

  /* กัน iOS ซูมเว็บอัตโนมัติเวลาโฟกัส (ฟอนต์ < 16px ทำให้ซูม) */
  .input, select.input, textarea.input,
  input[type="search"], input[type="text"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="password"] { font-size: 16px !important; }

  /* ---------- กริดประกาศ: 1 คอลัมน์เต็มความกว้าง ---------- */
  .prop-grid { grid-template-columns: 1fr; gap: .9rem; }

  /* หมวดหมู่ประเภท: 2 คอลัมน์ (เหลือ 1 ใบเต็มแถว) — กดง่ายกว่าย่อเป็นชิปเล็ก */
  .prop-grid.cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }

  /* ---------- หัวข้อส่วน ---------- */
  .section { padding: 1.4rem 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .section-head h2 { font-size: 1.08rem; }
  .page-head { flex-direction: column; align-items: stretch; gap: .6rem; }
  .page-head h1 { font-size: 1.25rem; }
  .page-head .btn { width: 100%; }

  /* ---------- ชิปกรอง: เลื่อนแนวนอนแทนการตัดบรรทัด ---------- */
  .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chip-row::-webkit-scrollbar { display: none; }

/* ---------- หน้าเข้าสู่ระบบ / สมัครสมาชิก ---------- */
@media (max-width: 767px) {
  .auth-wrap { margin: 1.2rem auto; padding: 0 1rem; }
  .auth-card { padding: 1.3rem 1.1rem; }
  .auth-card h1 { font-size: 1.2rem; }
}

/* ---------- ส่วนท้ายเว็บ ---------- */
@media (max-width: 767px) {
  .site-footer .wrap { padding: 1.8rem var(--pad-x) !important; gap: 1.4rem !important; }
  .site-footer h3 { font-size: .95rem; }
}

/* ---------- ผู้ช่วย AI ---------- */
@media (max-width: 767px) {
  .ai-fab { width: 54px; height: 54px; font-size: 1.25rem; right: .9rem; bottom: .9rem; }
  .ai-panel {
    right: 0; left: 0; bottom: 0; width: 100%;
    height: 86vh; max-height: 100vh;
    border-radius: 1rem 1rem 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
  }
  .ai-page { padding: 1rem var(--pad-x) 1.5rem; }
  .ai-chat { height: 74vh; }
}

/* ---------- แถบด้านข้าง (สมาชิก/หลังบ้าน): ย้ายขึ้นบนสุด ---------- */
@media (max-width: 767px) {
  .ap-layout { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .admin-sidebar { width: 100% !important; position: static !important; }
  .admin-sidebar-box { padding: .5rem !important; }
  .admin-sidebar nav { display: flex; gap: .3rem; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admin-sidebar nav::-webkit-scrollbar { display: none; }
  .admin-sidebar .side-link { flex-shrink: 0; }
  .admin-sidebar .side-desc { display: none; }
  .admin-sidebar .side-lbl { font-size: .8rem; }
  .admin-sidebar .grp-label { display: none; }

  /* หน้าค้นหา: ตัวกรองขึ้นบน ผลลัพธ์ล่าง */
  .search-layout { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .filter-bar { position: static !important; }
}

/* ============================================================
   SMARTPHONE เล็ก — ≤ 479px
   ============================================================ */
@media (max-width: 479px) {
  .hero h1 { font-size: 1.15rem; }
  .hero-search .input, .hero-search select.input { padding: .5rem .65rem; }

  /* ปุ่มลงประกาศบนแถบบน: ให้เต็มความกว้าง */
  .site-header .btn-primary { flex: 1; }

  .card { padding: .85rem !important; }
  .chip { font-size: .78rem; padding: .3rem .55rem; }

  /* ผู้ช่วย AI: ลดส่วนหัวลง ให้พื้นที่แชทมากขึ้น */
  .ai-panel { height: 90vh; }
}

/* ============================================================
   SMARTPHONE แคบ — ≤ 380px
   ปรับขนาดโลโก้/ปุ่มในแถบหัว (เมนูอยู่ในลิ้นชักอยู่แล้ว)
   ============================================================ */
@media (max-width: 380px) {
  .hd-logo-img { width: 28px; height: 28px; }
  .hd-logo-txt { font-size: 1.05rem; }
  .hd-burger { width: 38px; height: 38px; }
  .theme-toggle { width: 38px; height: 38px; }
}

/* ============================================================
   อุปกรณ์สัมผัส — เพิ่มพื้นที่กด / กัน hover ค้าง
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .btn, .chip, .ai-sample, .theme-toggle { min-height: 42px; }
  .ai-fab { min-height: 54px; }
  .nav-link { min-height: 38px; display: inline-flex; align-items: center; }

  .prop-card:hover, .kpi:hover, .ai-result:hover { transform: none; }

  /* กัน iOS ซูมชั่วคราวเวลาแตะข้อความ */
  a, button, .chip, .nav-link, .btn { touch-action: manipulation; }
}

/* ============================================================
   พิมพ์เอกสาร
   ============================================================ */
@media print {
  .site-header, .site-footer, .ai-fab, .ai-panel,
  .filter-bar, .admin-sidebar, .hero-search { display: none !important; }
  body { background: #fff; }
  .card, .prop-card { border: 1px solid #ccc; box-shadow: none; }
}

  .chip { flex-shrink: 0; }

  /* ---------- ฟอร์ม: 2 คอลัมน์ → 1 คอลัมน์ ---------- */
  .form-grid, .form-grid-3, .detail-grid { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* ---------- ปุ่ม ---------- */
  .btn { padding: .55rem .85rem; font-size: .87rem; }
  .btn-lg { padding: .7rem 1rem; font-size: .95rem; }
  .btn-block { width: 100%; }

  /* ---------- สถิติ ---------- */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem !important; }
  .kpi { padding: .7rem .75rem; }
  .kpi-val { font-size: 1.35rem; }
}

  /* ตารางยาว ๆ เลื่อนแนวนอนได้ ไม่ล้นจอ */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll > .table { min-width: 520px; }
}