/* ===============================
   Design Tokens & Base
=================================*/
:root{
  /* Colors */
  --ink:#0b1220;
  --muted:#94a3b8;
  --line:#e5e7eb;
  --soft:#ffffff;
  --card:#ffffff;
  --gold:#d4af37;
  --gold-2:#c39a1f;

  /* Ribbon (ปรับคู่สีได้ตามต้องการ) */
  --popular-start:#fff8e1; /* บ้านยอดนิยม: ทองอ่อน */
  --popular-end:#ffe082;   /* → ทองเข้ม */
  --promo-start:#fee2e2;   /* โปรโมชัน: ชมพูอ่อน */
  --promo-end:#ef4444;     /* → แดงสด */

  /* Layout */
  --max:1400px;
}

*{ box-sizing:border-box; }
html, body{ margin:0; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}

/* ===============================
   HERO
=================================*/
.hero-v2{position:relative;height:70vh;min-height:460px;color:#fff;overflow:hidden;isolation:isolate;}
.hero-v2__bg{position:absolute;inset:0;background:radial-gradient(80% 90% at 70% 20%,rgba(212,175,55,.18),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55))
,url('../img/bg/luxury-beachfront-villa-with-infinity-pool.jpg') center/cover no-repeat;transform:scale(1.04);filter:saturate(105%) contrast(102%);z-index:-1;}
.hero-v2__inner{position:absolute;left:clamp(20px,6vw,80px);bottom:clamp(96px,18vh,140px);max-width:min(680px,82vw);}.hero-v2__eyebrow{display:inline-flex;gap:12px;align-items:center;font-weight:700;letter-spacing:.18em;font-size:.85rem;color:var(--gold);text-transform:uppercase;}
.hero-v2__eyebrow::before{content:"";width:44px;height:2px;background:var(--gold);border-radius:2px;}
.hero-v2__title{margin:.4rem 0 .25rem;font-size:clamp(32px,6vw,64px);line-height:1.12;font-weight:800;background:linear-gradient(90deg,#fff,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(212,175,55,.35);}
.hero-v2__title span{opacity:.9;font-weight:700;}.hero-v2__desc{margin-top:.4rem;font-size:clamp(14px,2.2vw,18px);color:#e5e7eb;opacity:.9;}


/* Arrow */
.hero-v2__arrow{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  background:none; border:none; cursor:pointer;
  animation: arrowFloat 2s infinite ease-in-out;
}
.hero-v2__arrow svg{ stroke:#d1d5db; opacity:.7; transition:opacity .2s ease; }
.hero-v2__arrow:hover svg{ opacity:1; transform:translateY(2px); transition:.18s ease; }
.hero-v2__arrow span{
  font-weight:700; font-size:.9rem; letter-spacing:.4px;
  color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45);
}
@keyframes arrowFloat{ 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,6px)} }

.projects-v2{
  padding: clamp(56px,8vw,110px) 20px;
  background:#f7f7f8; color:var(--ink); text-align:center;
}
.projects-v2 h2{ font-size: clamp(24px,4vw,36px); margin:0 0 .25rem; }
.projects-v2 p{ color:#475569; max-width:860px; margin:0 auto; }

@media (max-width:640px){
  .hero-v2{ min-height:420px; }
  .hero-v2__inner{ bottom:120px; }
}

/* ===============================
  Toolbar
=================================*/
.toolbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.toolbar .inner {
  max-width: var(--max);
  margin: auto;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr; /* มือถือ: 1 คอลัมน์ */
  gap: 10px;
}
.bottom { display: flex; gap: 10px; }

/* search */
.search {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 12px 16px; min-height: 48px;
}
.search input {
  flex: 1; border: none; outline: none;
  background: transparent; font-size: 16px;
}

/* select */
.select {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 12px 14px; min-height: 48px;
}
.select select {
  border: none; outline: none; background: transparent; font-weight: 700;
}

/* button */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 12px 14px; font-weight: 700;
}
.btn:hover { background: #f7f7f7; }

/* มือถือ */
@media (max-width: 600px) {
  .search input { font-size: 14px; }
  .search, .select, .btn { padding: 8px 10px; min-height: 40px; }
}

/* คอม */
@media (min-width: 601px) {
  .toolbar .inner {
    grid-template-columns: 1fr auto auto; /* search + select + clear */
    align-items: center;
  }
  .bottom { display: contents; } /* เอา select + clear ออกมาเรียงต่อ search */
}


/* ===============================
  Filter Chips (แบบเรียบ)
=================================*/
.filter{ background:#fff; border-bottom:none; }
.chips{
  max-width:var(--max); margin:auto;
  padding:12px 16px 10px;
  display:flex; gap:10px; overflow:auto;
}
.chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#111;
  font-weight:700; white-space:nowrap; cursor:pointer;
  transition: background .12s, transform .12s, box-shadow .12s, border-color .12s;
}
.chip:hover{ background:#f9fafb; transform: translateY(-1px); }
.chip.active{
  border-color: var(--gold);
  background: linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#0b1220; box-shadow: 0 8px 18px rgba(212,175,55,.25);
}

/* ===============================
  Grid & Cards
=================================*/
.catalog{ background:var(--soft); padding:24px 0 6px; }
.container{ max-width:var(--max); margin:auto; padding:0 20px; }
.grid{
  display:grid; gap:28px;
}
@media (min-width:700px){  .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.card{
  position:relative; display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:22px;
  overflow:hidden; box-shadow:0 10px 28px rgba(2,6,23,.10);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card__media{ position:relative; aspect-ratio:16/10; background:#0b1220; overflow:hidden; }
.card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .2s ease, box-shadow .2s ease; }
.card:hover .card__media img{ transform:scale(1.05); }

.card__meta{ padding:14px 16px 35px; }
.card__title{ margin:0 0 6px; font-size:1.12rem; line-height:1.35; font-weight:800; }
.card__desc{ margin:0; color:#475569; }
.taglist{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.taglist span{
  font-size:.82rem; font-weight:700; color:#0b1220;
  background:#f3f4f6; border:1px solid #e5e7eb; padding:6px 12px; border-radius:999px;
}

.ribbon-stack{ position:absolute; left:14px; top:14px; display:flex; gap:8px; flex-wrap:wrap; z-index:2; }
.ribbon{
  padding:8px 12px; border-radius:999px; font-size:.8rem; font-weight:900; letter-spacing:.2px; color:#0b1220;
  background:rgba(255,255,255,.92); border:1px solid #fff; backdrop-filter:saturate(140%) blur(4px);
  box-shadow:0 10px 22px rgba(2,6,23,.12);
}

.more{
  position:absolute; right:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; font-weight:800; font-size:.9rem;
  background:#fff; border:1px solid var(--line); color:#0b1220;
  box-shadow:0 10px 22px rgba(2,6,23,.12); text-decoration:none;
  transition:background .2s ease, transform .25s ease;
}
.more:hover{ background:#f7f7f7; transform:translateX(2px); }
.card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-color:var(--gold); }

/* ===============================
   Pager
=================================*/
.pager{ background:#fff; border-top:1px solid var(--line); margin-top:8px; }
.pager__inner{
  max-width:var(--max); margin:auto; padding:16px 16px;
  display:flex; align-items:center; justify-content:center; gap:10px;flex-wrap:wrap;
}
.pager__btn, .pager__num{
  min-width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:#fff; font-weight:700; cursor:pointer;
}
.pager__btn{ transition:.15s transform,.15s background; }
.pager__btn:hover{ background:#f7f7f7; transform:translateY(-1px); }
.pager__btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.pager__num.active{ border-color:var(--gold); box-shadow:0 10px 22px rgba(212,175,55,.18); }
.pager__info{ color:#334155; font-weight:700; margin-left:6px; }
.ellipsis{ color:#94a3b8; padding:0 6px; }
/* Tablet (iPad) */
@media (max-width:1024px) {
  .pager__btn, .pager__num {
    min-width:38px;
    height:38px;
    font-size:0.95rem;
  }
  .pager__info {
    font-size:0.9rem;
  }
}

/* Mobile (โทรศัพท์) */
@media (max-width:600px) {
  .pager__inner {
    gap:6px;
  }
  .pager__btn, .pager__num {
    min-width:34px;
    height:34px;
    font-size:0.85rem;
  }
  .pager__info {
    display:block;
    width:100%;
    text-align:center;
    margin-top:8px;
    font-size:0.85rem;
  }
}

/* ===== Image Card ===== */
.imgcard{
  position:relative; display:block; overflow:hidden; border-radius:18px;
  text-decoration:none; color:inherit; background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.imgcard__media{ aspect-ratio:16/10; background:#0b1220; }
.imgcard__media img{ width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s ease; }

.imgcard__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:14px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.65) 100%);
  color:#fff;
}
.imgcard__title{ margin:0 0 4px; font-weight:800; font-size:1.02rem; }
.imgcard__sub{ margin:0; opacity:.9; font-weight:600; font-size:.92rem; }

@media (hover:hover){
  .imgcard:hover{
    transform: translateY(-6px);
    box-shadow:0 16px 36px rgba(0,0,0,.14);
    border-color: rgba(212,175,55,.35); 
  }
  .imgcard:hover .imgcard__media img{
    transform: scale(1.06);
    filter: brightness(1.05) saturate(106%);
  }
}
.imgcard .ribbon-stack{ position:absolute; left:12px; top:12px; display:flex; gap:8px; }


#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  background: #3f3f3f;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background 0.3s;
  z-index: 999;
}
#backToTop:hover {
  background: #555;
}