/* ═══════════════════════════════════════════════════════════════
   หน้า "เที่ยวสุขภาพรอบสปา" (/spa_tourism)
   ต้องโหลดหลัง onzon.css และ blocks.css
   ═══════════════════════════════════════════════════════════════ */

/* ── แบนเนอร์ ── */
.tr-hero {
  /* 🎛️ ความสูงแบนเนอร์ — ค่าเดียวกับ .hm-hero หน้าแรกเป๊ะ
     (ช่องค้นหา + ชิป รวมกันแล้วยังพอดีในความสูงนี้) */
  min-height: clamp(300px, 24vw, 400px);
}
/* ⚠️ .blk-hero เป็น flex แถวนอน กล่องนี้จึงกว้างเท่าเนื้อหาเท่านั้น
   ใส่ max-width อย่างเดียวไม่พอ ต้องสั่งให้มันยืดก่อน max-width ถึงจะมีผล
   (หน้าอื่นไม่เจอเพราะมีแค่ข้อความ ไม่มีแถบค้นหาที่ต้องกว้างกว่าบรรทัดที่ยาวที่สุด)

   ⚠️ ห้ามใช้ width:100% — .blk-hero-text มี margin-left อยู่แล้ว
      100% ของจอ + margin = ล้นขอบขวา จอมือถือจะเลื่อนแนวนอนได้ทั้งหน้า
      flex:1 1 auto ยืดเท่า "ที่ว่างที่เหลือ" จึงหักลบ margin ให้เอง */
.tr-hero-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(760px, 58vw); /* 🎛️ ความกว้างกล่องข้อความ + ช่องค้นหา */
  gap: 8px;
}

/* ช่องค้นหา — แถบขาวเม็ดเดียว ทุกช่องอยู่ข้างใน คั่นด้วยเส้นบาง
   ⚠️ พื้นทึบคงที่ ไม่ใช้ var(--panel) เพราะวางทับรูปที่สว่างคงที่ทั้งสองโหมด
      (บทเรียนเดียวกับตัวอักษรในแบนเนอร์ที่ต้องใช้สีตายตัว) */
.tr-search {
  display: flex;
  align-items: center;
  margin-top: 16px;
  padding: 5px 5px 5px 8px;
  background: #fffefa;
  border: 1px solid rgba(64, 64, 64, 0.18);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.tr-search-field {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  color: #b08d4f;
}
.tr-search-field input {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: #404040;
  outline: none;
}
.tr-search-field input::placeholder {
  color: rgba(64, 64, 64, 0.5);
}
/* เส้นคั่นในแถบ = border-left ของ select แต่ละตัว (ไม่ต้องใส่ element คั่นเพิ่ม) */
.tr-search-select {
  flex: 0 0 auto;
  max-width: 165px;
  padding: 8px 34px 8px 16px;
  border: 0;
  border-left: 1px solid rgba(64, 64, 64, 0.16);
  border-radius: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: #404040;
  cursor: pointer;
  /* ลูกศรวาดเอง — ลูกศรมาตรฐานของแต่ละ OS หน้าตาไม่เหมือนกันและกินที่ต่างกัน */
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23404040%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
.tr-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 6px;
  padding: 10px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

/* ชิปจังหวัดยอดนิยม — พื้นโปร่งบนรูป */
.tr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
/* "ยอดนิยม" เป็นป้ายกำกับ ไม่ใช่ชิปที่กดได้ จึงไม่มีกรอบ */
.tr-chips-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #404040;
  margin-right: 2px;
}
.tr-chip {
  padding: 6px 14px;
  border: 1px solid rgba(64, 64, 64, 0.22);
  border-radius: 999px;
  background: rgba(255, 254, 250, 0.82);
  font-size: 0.72rem;
  color: #404040;
  text-decoration: none;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.tr-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
/* หมวดที่ยังไม่มีหน้าปลายทาง — แสดงได้แต่กดไม่ได้ ไม่ปล่อยลิงก์ตาย */
.tr-chip.is-off {
  opacity: 0.62;
  cursor: default;
}

/* ── การ์ดหมวด 5 ใบ ── */
.tr-cats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 🎛️ จำนวนคอลัมน์ */
  gap: clamp(10px, 1.2vw, 16px);
}
/* หัวข้อบล็อก — ตัวหลักเข้ม + ตัวขยายเบากว่า บรรทัดเดียวกัน · ใบไม้ซ้ายข้างเดียว */
.tr-cats-h::after {
  display: none;
}
.tr-cats-h span {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-left: 3px;
}

/* การ์ดหมวด — ไอคอนซ้าย ข้อความขวา (ไม่ใช่ไอคอนบนแบบการ์ดหน้าอื่น) */
.tr-cat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
/* ⚠️ เดิมเขียนเป็น a.tr-cat:hover แต่การ์ดเป็น <article> ไม่ใช่ <a> จึงไม่เคยทำงานเลย
   ตัด a นำหน้าออก พอต่อ DB เปลี่ยนเป็น <a> ก็ยังใช้ได้เหมือนเดิม */
.tr-cat:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.tr-cat:hover .tr-cat-more {
  color: var(--accent);
}
.tr-cat-ico {
  flex: 0 0 auto;
  width: 46px; /* 🎛️ ขนาดไอคอน */
  height: 46px;
}
.tr-cat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tr-cat-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tr-cat h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
.tr-cat p {
  font-size: 0.66rem;
  line-height: 1.65;
  color: var(--ink-soft);
  flex: 1 1 auto;
  /* ตัดที่ 3 บรรทัด — การ์ดทั้งแถวสูงเท่ากัน ใบเดียวยาวจะดันทุกใบสูงตาม */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.tr-cat-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.68rem;
  color: var(--ink-soft);
}

/* ── จอกลาง/เล็ก ── */
@media (max-width: 1180px) {
  .tr-cats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* จอแคบ: ใช้สูตรความกว้างเดียวกับ .pg แล้วปล่อยให้ margin auto จัดกึ่งกลางเอง
     ⚠️ อย่าใช้ margin-left แบบคำนวณจาก 100vw ที่ .blk-hero-text ตั้งไว้ —
        100vw นับรวมแถบเลื่อนด้วย แต่พื้นที่วางจริงไม่รวม กล่องเลยเบี้ยวไปทางซ้าย
        และแถบค้นหาไม่ตรงกับการ์ดด้านล่าง */
  .tr-hero-text {
    flex: 0 0 auto;
    width: min(760px, 94vw);
    max-width: none;
    margin-inline: auto;
  }
}
@media (max-width: 820px) {
  .tr-cats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* จอแคบ แถบเม็ดเดียวยัดไม่ลง → แตกเป็นแถวซ้อนกัน คืนกรอบให้แต่ละช่อง */
  .tr-search {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    border-radius: 20px;
  }
  .tr-search-field {
    flex: 1 1 100%;
  }
  .tr-search-select {
    flex: 1 1 40%;
    max-width: none;
    border-left: 0;
    border: 1px solid rgba(64, 64, 64, 0.16);
    border-radius: 999px;
  }
  .tr-search-btn {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: center;
  }
}

/* ── หัวบล็อกที่มีลิงก์ "ดูทั้งหมด" ชิดขวา ── */
.tr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tr-head-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-top: 4px;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* ── การ์ดทริป 3 ใบ ── */
.tr-trips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 🎛️ จำนวนคอลัมน์ */
  gap: clamp(12px, 1.4vw, 20px);
}
/* ⚠️ หน้านี้รูป "มี" ขอบในรอบรูป ต่างจากการ์ดบทความหน้า /spa_knowledge ที่รูปชนขอบการ์ด
   ดีไซน์คนละแบบ อย่าไปทำให้เหมือนกัน */
.tr-trip {
  display: flex;
  flex-direction: column;
  padding: 10px;   /* 🎛️ ขอบในรอบรูป */
  background: var(--bg);
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
  border: 1px solid var(--hair);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.tr-trip-media {
  position: relative;
  overflow: hidden;   /* กันรูปที่ซูมตอน hover ล้นออกนอกกรอบมน */
  border-radius: 10px 10px 0 0;
}
/* ยกการ์ดขึ้นพร้อมซูมรูปเล็กน้อย — ให้รู้ว่ากดได้ (ตอนต่อ DB จะเปลี่ยนเป็น <a>) */
.tr-trip:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.tr-trip:hover .tr-trip-media img {
  transform: scale(1.05);
}
.tr-trip-media img {
  width: 100%;
  aspect-ratio: 32 / 9; /* 🎛️ สัดส่วนรูปการ์ดทริป — แบนตามแบบ ช่วยลดความสูงการ์ด */
  object-fit: cover;
  border-radius: 10px 10px 0 0;   /* 🎛️ มุมบนมน มุมล่างตรง */
  display: block;
  transition: transform 0.4s;
}
/* ไอคอนวงกลมลอยมุมซ้ายบนของรูป */
.tr-trip-ico {
  position: absolute;
  top: 8px;
  left: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  /* พื้นทึบคงที่ ไม่ใช้โทเคน เพราะวางทับรูปที่สว่างคงที่ทั้งสองโหมด */
  background: #fffefa;
  color: #b08d4f;
  box-shadow: var(--shadow-sm);
}
.tr-trip-ico svg {
  width: 18px;
  height: 18px;
}
.tr-trip-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 5px 2px;
}
.tr-trip h3 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
.tr-trip-lead {
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.tr-trip-list {
  list-style: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 1px;
}
.tr-trip-list li {
  position: relative;
  padding-left: 12px;
  font-size: 0.65rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.tr-trip-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}
.tr-trip-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--hair);
}
.tr-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  color: var(--ink-faint);
}

/* ── ไทม์ไลน์ตัวอย่างเส้นทาง 1 วัน ── */
/* การ์ดใบเดียวครอบทั้งบล็อก — หัวข้อ+ไทม์ไลน์ซ้าย รูปขวา */
.tr-tl-row {
  display: grid;
  grid-template-columns: 2.3fr 1fr; /* 🎛️ (หัวข้อ+ไทม์ไลน์) | รูป */
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
  padding: clamp(14px, 1.4vw, 18px);
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.tr-tl-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.tr-tl-main .blk-head {
  margin-bottom: clamp(10px, 1.2vw, 16px);
}
.tr-tl-steps {
  --tl-gap: clamp(6px, 0.8vw, 12px); /* ใช้ทั้ง gap และคำนวณตำแหน่งจุดบนเส้น */
  list-style: none;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--tl-gap);
}
/* เส้นเชื่อมพาดหลังวงกลม — วงกลมมีพื้นทึบจึงเจาะเส้นให้ขาดเองโดยไม่ต้องคำนวณระยะ
   ⚠️ top ต้องเท่ากับ (padding-บน + ครึ่งหนึ่งของขนาดวงกลม) ถ้าแก้ค่าใดค่าหนึ่งต้องแก้ตามกัน */
/* ⚠️ top ต้องเท่ากับครึ่งหนึ่งของ .tr-tl-ico พอดี ถ้าแก้ขนาดวงกลมต้องแก้ค่านี้ตาม */
.tr-tl-steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--hair);
}
/* จุดคั่นกลางระหว่างวงกลมสองอัน — ขอบขวาของแต่ละขั้นคือกึ่งกลางช่องว่างพอดี */
.tr-tl-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  right: calc(var(--tl-gap) / -2);
  transform: translateX(50%);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #b08d4f;
}
.tr-tl-step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 0 4px;
}
.tr-tl-ico {
  display: grid;
  place-items: center;
  width: 54px; /* 🎛️ ขนาดวงกลมไทม์ไลน์ — แก้แล้วต้องแก้ top ของเส้น/จุดด้วย */
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--panel);
  color: #b08d4f;
}
.tr-tl-ico svg {
  width: 25px;
  height: 25px;
}
.tr-tl-step h3 {
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.45;
}
.tr-tl-step p {
  font-size: 0.63rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* ⚠️ รูปต้อง absolute — ถ้าปล่อยเป็น block ที่ height:100% ในกริดที่ยังไม่รู้ความสูง
   เบราว์เซอร์จะเอาความสูงจริงของไฟล์รูปมาคิดความสูงแถว รูปแนวตั้งใบเดียวก็ดันแถวสูงพรวด
   จนเหลือช่องว่างใต้ไทม์ไลน์ · พอ absolute แล้วไทม์ไลน์เป็นตัวกำหนดความสูง รูปยืดตาม */
.tr-tl-media {
  position: relative;
  min-height: 190px;   /* กันการ์ดแบนเกินไปตอนไทม์ไลน์เตี้ย */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.tr-tl-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tr-tl-note {
  margin-top: 10px;
  font-size: 0.64rem;
  color: var(--ink-faint);
}

@media (max-width: 1180px) {
  .tr-tl-row {
    grid-template-columns: 1fr;
  }
  .tr-tl-media {
    /* ไม่ใช้ order:-1 แล้ว — รูปจะไปอยู่เหนือหัวข้อที่ตอนนี้ย้ายเข้ามาในการ์ด */
    aspect-ratio: 21 / 9;
    min-height: 0;
  }
}
@media (max-width: 820px) {
  .tr-trips-grid {
    grid-template-columns: 1fr;
  }
  /* จอแคบ: ไม่หักเป็นคอลัมน์ แต่ดันปุ่มลงไปเสมอบรรทัดคำโปรย (align-items:flex-end)
     ได้ใช้ที่ว่างข้างคำโปรย และปุ่มถอยห่างจากการ์ดด้านล่างไปหนึ่งบรรทัดเต็ม
     flex-wrap เผื่อไว้ — จอที่แคบมากจนหัวข้อยาวเกิน ปุ่มจะตกลงมาเองแล้วยังชิดขวา */
  /* จอแคบ: ปุ่มไปเสมอบรรทัดคำโปรย ได้ใช้ที่ว่างข้างคำโปรย และถอยห่างจากการ์ดหนึ่งบรรทัด
     ⚠️ align-items:flex-end เล็งไปที่ "ก้นกล่องรวม margin" ไม่ใช่ก้นข้อความ
        ถ้าไม่ย้าย margin-bottom ของ .blk-head ออกมาไว้ที่ .tr-head ปุ่มจะไหลลงไปจ่อการ์ดพอดี */
  .tr-head {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 18px;
  }
  .tr-head .blk-head {
    margin-bottom: 0;
  }
  .tr-head-more {
    margin-left: auto;
    padding-top: 0;
  }
  /* จอแคบเรียงไทม์ไลน์ลงแนวตั้ง เส้นแนวนอนจึงต้องปิด
     ⚠️ ต้องสั่ง align-items ใหม่ด้วย — ค่า flex-start ของกฎหลักคุมแกนนอนทันทีที่เป็นคอลัมน์
        ทำให้แต่ละขั้นกว้างเท่าเนื้อหาแล้วเยื้องไม่เท่ากันเป็นขั้นบันได */
  .tr-tl-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  /* แนวตั้งอ่านง่ายกว่าถ้าไอคอนอยู่ซ้าย ข้อความชิดซ้าย (ไม่ใช่กึ่งกลางแบบแนวนอน) */
  .tr-tl-step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
    padding: 0;
  }
  .tr-tl-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
  }
  .tr-tl-ico svg {
    width: 21px;
    height: 21px;
  }
  /* เรียงแนวตั้งแล้ว ทั้งเส้นเชื่อมและจุดคั่นบนเส้นต้องหายไปทั้งคู่
     (เดิมซ่อนแค่เส้น จุดเลยค้างลอยอยู่ข้างการ์ด) */
  .tr-tl-steps::before,
  .tr-tl-step:not(:last-child)::after {
    display: none;
  }
}

/* ── การ์ดเส้นทางกดเข้าไปดูได้แล้ว (เดิมเป็น <article>) ──
   ⚠️ ต้อง color: inherit ไม่งั้นสีลิงก์ของเบราว์เซอร์ทับหัวข้อกับข้อความในการ์ดทั้งใบ */
a.tr-trip,
a.tr-head-more {
  text-decoration: none;
  color: inherit;
}
a.tr-trip:focus-visible,
a.tr-head-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}