/* Property portal: home search, results grid, detail page.
   Extends style.css and uses the same tokens. */

/* ==========================================================================
   1. Home — search panel sitting on the navy band
   ========================================================================== */
.phero{background:var(--paper);color:var(--ink);padding-block:clamp(34px,5vw,56px) 0}
.phero-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--gut)}
.phero h1{color:var(--ink);max-width:18ch;font-size:clamp(1.75rem,4vw,2.85rem)}
.phero p{color:var(--ink-2);max-width:56ch;margin-top:12px;font-size:clamp(.95rem,1.3vw,1.08rem)}
.phero-pad{height:0}

.psearch{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-md);margin-top:clamp(20px,3vw,28px);
  margin-bottom:0;position:relative;z-index:2;
}
.ps-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);padding:6px 6px 0}
.ps-tab{
  appearance:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:12px 22px;font-size:.95rem;font-weight:700;color:var(--ink-3);cursor:pointer;
  transition:color var(--t),border-color var(--t);
}
.ps-tab:hover{color:var(--ink)}
.ps-tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.ps-body{padding:clamp(14px,2vw,20px)}
.ps-grid{display:grid;gap:12px;grid-template-columns:1.6fr 1fr 1fr 1fr auto;align-items:end}
.ps-grid .fl > span{margin-bottom:2px}
.ps-grid .btn{height:44px;padding-inline:26px}
@media (max-width:1050px){.ps-grid{grid-template-columns:1fr 1fr 1fr}.ps-grid .ps-go{grid-column:1/-1}}
@media (max-width:620px){.ps-grid{grid-template-columns:1fr 1fr}.ps-grid .ps-wide{grid-column:1/-1}}
.ps-more{margin-top:12px;font-size:.85rem;font-weight:600;color:var(--brand);text-decoration:none;display:inline-block}
.ps-more:hover{text-decoration:underline}

/* area tiles */
.atiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.atile{
  display:flex;flex-direction:column;gap:4px;padding:20px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.atile:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.atile b{font-size:1.02rem;font-weight:700;color:var(--ink)}
.atile span{font-size:.85rem;color:var(--ink-3)}
.atile.is-empty{opacity:.62}

/* type chips */
.tchips{display:flex;flex-wrap:wrap;gap:9px}
.tchip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  background:var(--card);border:1px solid var(--line-2);text-decoration:none;
  font-size:.9rem;font-weight:600;color:var(--ink-2);transition:all var(--t);
}
.tchip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.tchip i{font-style:normal;color:var(--ink-3);font-size:.82rem;font-variant-numeric:tabular-nums}

/* ==========================================================================
   2. Sample-listing notice — must be impossible to miss
   ========================================================================== */
.demo-banner{
  background:var(--warn-soft);border:1px solid var(--warn);border-radius:var(--r);
  padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);margin-bottom:clamp(20px,2.6vw,28px);
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
}
.demo-banner svg{width:22px;height:22px;color:var(--warn);flex:none;margin-top:2px}
.demo-banner > div{min-width:0}   /* without this the grid child refuses to wrap on a phone */
.demo-banner b{display:block;color:var(--ink);font-size:.98rem;font-weight:700;margin-bottom:3px}
.demo-banner p{margin:0;font-size:.9rem;color:var(--ink-2);max-width:78ch}
@media (max-width:560px){.demo-banner{grid-template-columns:1fr}.demo-banner svg{display:none}}

.lc-demo{
  position:absolute;inset-block-start:10px;inset-inline-end:10px;
  background:var(--warn);color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  padding:4px 9px;border-radius:4px;text-transform:uppercase;
}
html[lang="th"] .lc-demo,html[lang="zh"] .lc-demo{text-transform:none;letter-spacing:.01em;font-size:.72rem}
.lcard.is-demo{border-style:dashed}

/* ==========================================================================
   3. Filters (results page)
   ========================================================================== */
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(14px,1.8vw,20px);margin-bottom:20px}
.f-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.fl{display:grid;gap:5px;min-width:0}
.fl > span{font-size:.76rem;font-weight:700;color:var(--ink-3)}
.fl select,.fl input{
  width:100%;font:inherit;font-size:.92rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px;height:44px;
  transition:border-color var(--t),box-shadow var(--t);
}
.fl select{appearance:none;padding-inline-end:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2378849A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px}
.fl select:focus,.fl input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.f-range{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.f-wide{grid-column:span 2}
.f-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.f-foot .fl{max-width:220px}
.f-acts{display:flex;gap:9px;align-items:center;margin-inline-start:auto}
@media (max-width:620px){.f-wide{grid-column:span 1}.f-acts{width:100%}.f-acts .btn{flex:1}}

.lcount{font-size:.88rem;color:var(--ink-2);margin:0 0 16px;font-weight:600}

/* ==========================================================================
   4. Results grid
   ========================================================================== */
.lgrid{display:grid;gap:clamp(12px,1.8vw,20px);grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.lcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--t),box-shadow var(--t),transform var(--t)}
.lcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.lcard.is-sold{opacity:.7}
.lc-media{position:relative;display:block;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.lc-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.3,.7,.4,1)}
.lcard:hover .lc-media img{transform:scale(1.04)}
.lc-noimg{width:100%;height:100%;background:var(--paper-3)}
.lc-badge{position:absolute;inset-block-start:10px;inset-inline-start:10px;font-size:.68rem;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:4px;
  background:rgba(255,255,255,.95);color:var(--ink-2);box-shadow:0 1px 3px rgba(16,24,40,.2)}
html[lang="th"] .lc-badge,html[lang="zh"] .lc-badge{text-transform:none;letter-spacing:.01em;font-size:.74rem}
.lc-badge.now{background:var(--good);color:#fff}
.lc-badge.sold{background:var(--crit);color:#fff}
.lc-badge.big{position:static;font-size:.8rem;padding:6px 14px}
.lc-body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:4px;flex:1}
.lc-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.lc-price b{font-size:1.3rem;font-weight:800;color:var(--ink);line-height:1.2;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lc-price b.por{font-size:1.02rem;font-weight:700;color:var(--ink-2)}
.lc-price span{font-size:.8rem;color:var(--ink-3)}
.lc-title{font-size:.96rem;font-weight:600;line-height:1.4;margin:2px 0 0}
.lc-title a{text-decoration:none;color:var(--ink)}
.lc-title a:hover{color:var(--brand)}
.lc-loc{font-size:.84rem;color:var(--ink-2);margin:0}
.lc-specs{display:flex;flex-wrap:wrap;gap:5px 13px;list-style:none;padding:0;margin:7px 0 0;
  font-size:.83rem;color:var(--ink-2)}
.lc-specs li{position:relative}
.lc-specs li + li::before{content:"";position:absolute;inset-inline-start:-7px;top:.55em;
  width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.lc-ref{margin-top:auto;padding-top:10px;font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}

.lempty{text-align:center;padding:clamp(38px,6vw,70px) 24px;border:1px dashed var(--line-2);
  border-radius:var(--r);background:var(--paper-2)}
.lempty h3{margin-bottom:.5em}
.lempty p{color:var(--ink-2);max-width:58ch;margin:0 auto 1.4em}

.pager{display:flex;gap:6px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pg{min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-sm);text-decoration:none;color:var(--ink-2);
  font-size:.9rem;font-weight:600;font-variant-numeric:tabular-nums;transition:all var(--t)}
.pg:hover{border-color:var(--brand);color:var(--brand)}
.pg.is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ==========================================================================
   5. Detail page
   ========================================================================== */
.lhead{background:var(--paper);border-bottom:1px solid var(--line);padding-block:clamp(18px,2.6vw,30px)}
.lback{font-size:.86rem;font-weight:600;color:var(--ink-2);text-decoration:none;display:inline-block;margin-bottom:12px}
.lback:hover{color:var(--brand)}
.lhead-row{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.lhead h1{font-size:clamp(1.4rem,3vw,2.1rem);max-width:26ch}
.lhead-loc{margin:7px 0 0;color:var(--ink-2);font-size:.93rem}

.ldetail{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start}
@media (max-width:900px){.ldetail{grid-template-columns:1fr}}

.gal{margin-bottom:30px}
.gal-main{margin:0;border-radius:var(--r);overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}
.gal-main img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gal-none{aspect-ratio:3/2;border-radius:var(--r);border:1px dashed var(--line-2);background:var(--paper-2)}
.gal-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:4px}
.gt{flex:none;width:100px;border:2px solid transparent;border-radius:var(--r-sm);overflow:hidden;
  background:none;padding:0;cursor:pointer;transition:border-color var(--t),opacity var(--t);opacity:.8}
.gt img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gt:hover{opacity:1}
.gt.is-on{border-color:var(--brand);opacity:1}

.lblock{margin-bottom:30px}
.lblock h2{font-size:clamp(1.15rem,2vw,1.4rem);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ltext p{color:var(--ink-2)}
.lauto{font-size:.82rem;color:var(--ink-3);margin-top:1em}

.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0;background:var(--card)}
.sp{padding:13px 16px;border-inline-end:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp dt{font-size:.74rem;color:var(--ink-3);margin:0 0 2px;font-weight:600}
.sp dd{margin:0;font-size:.94rem;font-weight:600;color:var(--ink)}

.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:9px 18px;list-style:none;padding:0;margin:0}
.feat li{position:relative;padding-inline-start:24px;font-size:.92rem;color:var(--ink-2)}
.feat li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;width:14px;height:14px;
  border-radius:4px;background:var(--brand-soft)}
.feat li::after{content:"";position:absolute;inset-inline-start:4px;top:.72em;width:5px;height:2px;
  border-radius:1px;background:var(--brand)}

/* enquiry sidebar */
.enq{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.2vw,24px);position:sticky;top:80px;box-shadow:var(--shadow)}
@media (max-width:900px){.enq{position:static}}
.enq-price{display:flex;flex-direction:column;gap:3px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pv{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pv b{font-size:1.72rem;font-weight:800;line-height:1.15;letter-spacing:-.025em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pv b.por{font-size:1.15rem;color:var(--ink-2)}
.pv span{font-size:.83rem;color:var(--ink-3)}
.enq-nofee{font-size:.82rem;color:var(--ink-2);margin:12px 0 18px;line-height:1.6;
  background:var(--good-soft);border-radius:var(--r-sm);padding:10px 12px}
.enq h3{font-size:1.05rem;margin-bottom:6px}
.enq-body{font-size:.88rem;color:var(--ink-2);margin-bottom:16px}
.enq .form{gap:13px}
.enq .btn{width:100%}
.enq .form-privacy{margin-top:2px;font-size:.75rem}
.enq-chat{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.enq-chat .btn{flex:1}