/* ═══════════════════════════════════════════════════════════════
   หน้า "อัตลักษณ์อีสาน 20 จังหวัด" (/isan_identity)
   ต้องโหลดหลัง onzon.css และ blocks.css
   ═══════════════════════════════════════════════════════════════ */

/* ── แบนเนอร์ — ข้อความซ้าย + แผนที่ขวา (เต็มความกว้างจอ) ──
   สีตัวอักษรตั้งตายตัว ไม่ผูกโทเคนธีม เพราะพื้นเป็นภาพ/พื้นครีมคงที่ */
.ii-hero {
  --hero-green: #2f5f19;
  --hero-gold: #b08d4f;
  --hero-ink: #404040;
  /* พื้นหลังเป็นภาพสีน้ำโทนครีม (1736x362) — มีลายใบไม้ซ้าย · สมุนไพรกลาง · เรือริมน้ำขวา
     ตัวอักษรในแบนเนอร์ใช้สีเข้มคงที่อยู่แล้ว จึงอ่านออกทั้งสองโหมด */
  background: #fdfbf6;
  border-bottom: 1px solid var(--hair);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* 🎛️ ความสูงแบนเนอร์ — หน้าแรกใช้ clamp(300px, 24vw, 400px)
     หน้านี้เผื่อไว้มากกว่าเพราะมีแผนที่ ซึ่งสัดส่วนล็อกไว้เกือบจัตุรัส
     แผนที่จะโตได้แค่ไหน ขึ้นกับค่านี้ค่าเดียว (กว้างขึ้น = สูงขึ้นเสมอ) */
  --hero-h: clamp(340px, 28vw, 460px);
  min-height: var(--hero-h);
  isolation: isolate;   /* กันไม่ให้ z-index ของชั้นพื้นหลังไปโผล่หลังหัวเว็บ */
}

/* พื้นหลังแบนเนอร์ — รูปสัดส่วน 4.8:1 แต่แบนเนอร์เตี้ยกว่านั้น
   ใช้ cover คือยอมให้รูปถูกซูมจนขอบซ้าย-ขวาโดนครอป (ลายใบไม้ซ้าย / เรือขวา หายบางส่วน)
   แลกกับการเต็มพื้นที่ ไม่มีแถบว่างบน-ล่าง */
.ii-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* 🎛️ ตำแหน่งครอป — center คือกลางรูป · ปรับเป็น 20%/80% เพื่อเลือกโชว์ฝั่งซ้าย/ขวา */
  background: url("../images/bg-banner-isan-identity.png") center / cover no-repeat;
}
.ii-hero-in {
  width: min(1680px, 94vw);
  margin: 0 auto;
  min-height: var(--hero-h);
  padding: clamp(10px, 1.2vw, 18px) 0;
  flex: 0 0 auto;   /* .ii-hero เป็น flex แล้ว — ห้ามให้ยืด ไม่งั้น margin:0 auto จะไม่จัดกึ่งกลาง */
  display: grid;
  grid-template-columns: 1fr 1.1fr;   /* 🎛️ ข้อความ | แผนที่ */
  gap: clamp(18px, 2.4vw, 40px);
  align-items: center;
}
.ii-hero-text h1 {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  font-weight: 700;
  margin-bottom: 12px;
}
.ii-hero-text .blk-h1 {
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  color: var(--hero-green);
}
.ii-hero-text .blk-h2 {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  color: var(--hero-gold);
}
.ii-hero-text .blk-hero-sub {
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  line-height: 1.9;
  color: var(--hero-ink);
}

/* แผนที่ในแบนเนอร์ */
.ii-hero-map {
  position: relative;
  display: grid;
  place-items: center;
}
.ii-hero-map svg {
  width: 100%;
  height: auto;
  /* คอลัมน์ขวากว้างเหลือเฟือ ตัวจำกัดจริงคือความสูงแบนเนอร์
     ผูกกับ --hero-h ไปเลย → แก้ความสูงแบนเนอร์ที่เดียว แผนที่ขยับตามเอง
     (อย่าใช้ height:100% — กริดความสูง auto ไม่มีค่าให้อ้างอิง แผนที่จะกางเป็นขนาดจริง) */
  max-height: calc(var(--hero-h) - 40px);
  display: block;
}
.ii-hero-map path {
  fill: var(--accent);
  fill-opacity: 0.24;
  stroke: #fdfbf6;
  stroke-width: 2.5;
  stroke-linejoin: round;
  cursor: pointer;
  transition:
    fill-opacity 0.2s,
    fill 0.2s;
}
.ii-hero-map path:nth-child(3n) {
  fill-opacity: 0.38;
}
.ii-hero-map path:nth-child(3n + 1) {
  fill-opacity: 0.16;
}
.ii-hero-map path:hover {
  fill-opacity: 0.62;
}
.ii-hero-map path.is-on {
  fill: var(--hero-gold);
  fill-opacity: 0.95;
}
/* ชื่อจังหวัดบนแผนที่ (ชั้น .isan-map-labels ในไฟล์ SVG) */
.ii-hero-map .isan-map-labels text {
  font-family: inherit;
  font-size: 21px;          /* 🎛️ หน่วยตาม viewBox (1000x951) ไม่ใช่ px บนจอ */
  font-weight: 600;
  fill: #2f4a1a;
  paint-order: stroke;      /* วาดเส้นขอบก่อนตัวอักษร → ได้ขอบขาวรอบตัวอักษร อ่านง่ายบนพื้นเขียว */
  stroke: rgba(253, 251, 246, 0.85);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

/* ป้ายชื่อจังหวัดตอนชี้ (โครงเดียวกับแผนที่หน้าแรก) */
.ii-map-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0;
  transition: opacity 0.15s;
  box-shadow: var(--shadow-sm);
}
.ii-map-tip.is-below {
  transform: translate(-50%, 12px);
}
.ii-map-tip.is-on {
  opacity: 1;
}

/* ── แถบเลือกจังหวัด ── */
.ii-filter-head .blk-h {
  margin-bottom: 12px;
}
.ii-filter-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 1.6vw, 26px);
}
.ii-chips {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
/* ตัวคั่นบรรทัดในแถบชิป — กว้างเต็มแถวแต่สูง 0 ดันชิปที่เหลือลงบรรทัดใหม่
   ใช้แทนการนับความกว้างเอง เพราะชื่อจังหวัดยาวไม่เท่ากัน
   ตอนค้นหา JS จะซ่อนตัวนี้ ไม่งั้นผลค้นหาจะถูกหั่นเป็นสองแถวโดยไม่จำเป็น */
.ii-chips-break {
  flex: 1 0 100%;
  height: 0;
}
.ii-chip {
  padding: 7px 15px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.ii-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ii-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.ii-search {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: clamp(180px, 18vw, 240px);
  padding: 8px 14px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-faint);
}
.ii-search input {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--ink);
  outline: none;
}
.ii-search input::placeholder {
  color: var(--ink-faint);
}

/* ── มิติอัตลักษณ์ — การ์ด 8 ใบ ── */
.ii-dims-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);   /* 🎛️ จำนวนคอลัมน์ */
  gap: clamp(8px, 1vw, 14px);
}
.ii-dim {
  display: flex;
  flex-direction: column;
  align-items: center;   /* ไอคอน · หัวข้อ · คำอธิบาย · ปุ่ม จัดกึ่งกลางทั้งหมด */
  text-align: center;
  gap: 6px;
  padding: 14px 13px 0;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s,
    border-color 0.25s,
    box-shadow 0.25s;
}
.ii-dim:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
.ii-dim-ico {
  width: 34px;
  height: 34px;
}
.ii-dim-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ii-dim h3 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
.ii-dim p {
  font-size: 0.68rem;
  line-height: 1.65;
  color: var(--ink-soft);
  flex: 1 1 auto;
}
.ii-dim-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 0.65rem;
  color: var(--ink-soft);
}
/* align-items:center ของการ์ดจะบีบลูกให้กว้างเท่าเนื้อหา — รูปต้องสั่ง stretch คืน */
.ii-dim-media {
  align-self: stretch;
}
.ii-dim-media img {
  width: calc(100% + 26px);
  margin: 0 -13px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ── นำอัตลักษณ์สู่การออกแบบสปา ── */
.ii-apply-row {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;   /* 🎛️ การ์ดจังหวัด | แนวทาง 5 ขั้น */
  gap: clamp(14px, 1.8vw, 26px);
  align-items: stretch;
}

/* การ์ดจังหวัด (เนื้อหาจาก DB · JS สลับ) */
.ii-prov {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;   /* ข้อความอยู่ครึ่งขวา ปล่อยครึ่งซ้ายให้เห็นรูป */
  min-height: 210px;           /* 🎛️ ความสูงขั้นต่ำ (ปกติถูกยืดเท่าการ์ดแนวทาง 5 ขั้นอยู่แล้ว) */
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* รูปปกกางเต็มการ์ด แล้ววางข้อความทับ */
.ii-prov-media {
  position: absolute;
  inset: 0;
  background: var(--panel-2);
}
/* ม่านไล่จางจากขวา — ให้ข้อความอ่านออกโดยยังเห็นรูปฝั่งซ้าย
   ใช้โทเคน --panel จึงสลับตามโหมดสว่าง/มืดเองโดยไม่ต้องแยกกฎ */
.ii-prov-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* ⚠️ ช่วงทึบต้องกว้างอย่างน้อยเท่า .ii-prov-body ไม่งั้นข้อความฝั่งซ้าย
     จะไปทับลายในรูปปกซึ่งมีทั้งตัวอักษรและภาพจัด → อ่านไม่ออก
     แก้ความกว้าง .ii-prov-body เมื่อไหร่ ต้องขยับจุด 52% นี้ตามด้วย */
  background: linear-gradient(
    270deg,
    var(--panel) 0%,
    var(--panel) 52%,
    color-mix(in srgb, var(--panel) 88%, transparent) 68%,
    color-mix(in srgb, var(--panel) 45%, transparent) 84%,
    transparent 100%
  );
}

/* ⚠️ display ในกฎคลาสชนะ [hidden]{display:none} ของเบราว์เซอร์
   ต้องประกาศเองไม่งั้น JS สั่ง hidden แล้วยังเห็นไอคอนรูปแตกอยู่ */
.ii-prov-media img[hidden],
.ii-prov-blank[hidden] {
  display: none;
}
.ii-prov-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* จังหวัดที่ยังไม่มีรูปปก → อักษรย่อบนพื้นไล่สี */
/* จังหวัดที่ยังไม่มีรูปปก — วางเฉพาะฝั่งซ้าย (พื้นที่ที่ปกติเป็นรูป) และต้องอยู่
   เหนือม่านไล่จาง ไม่งั้นโดนม่านทึบกลบจนการ์ดว่างเปล่า */
.ii-prov-blank {
  position: absolute;
  inset: 0 auto 0 0;
  width: 48%;
  z-index: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-wash), var(--panel));
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--accent);
  opacity: 0.55;
}
.ii-prov-body {
  position: relative;
  z-index: 2;   /* เหนือทั้งม่านและตัวแทนรูป */
  width: min(64%, 360px);   /* 🎛️ ความกว้างแถบข้อความ */
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}
/* eyebrow + ชื่อจังหวัด บรรทัดเดียวกัน · ชิดขวา · ตัดบรรทัดได้ถ้าจอแคบ */
.ii-prov-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.ii-prov-eyebrow {
  font-size: 0.7rem;
  color: var(--ink-faint);
}
.ii-prov-body h3 {
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);   /* 🎛️ ขนาดชื่อจังหวัด */
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
.ii-prov-body p {
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.ii-swatch {
  list-style: none;
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.ii-swatch li {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--hair);
}
.ii-prov-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 15px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.ii-prov-meta {
  font-size: 0.68rem !important;
  color: var(--ink-faint) !important;
  line-height: 1.7 !important;
}

/* แนวทาง 5 ขั้น */
.ii-steps {
  padding: clamp(14px, 1.6vw, 20px);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.ii-steps-h {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hair);
  margin-bottom: 12px;
}
.ii-steps-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
/* ไม่มีกรอบการ์ดแล้ว — แยกแต่ละขั้นด้วยเส้นคั่นแนวตั้งที่ .ii-steps-arrow แทน */
.ii-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;   /* ไอคอน · หัวข้อ · คำอธิบาย จัดกึ่งกลาง */
  text-align: center;
  gap: 5px;
  padding: 2px 9px 0;
}
/* ไอคอน + หัวข้อ อยู่บรรทัดเดียวกัน */
.ii-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.ii-step-ico {
  flex: 0 0 auto;
  width: 20px;   /* 🎛️ ขนาดไอคอน */
  height: 20px;
}
.ii-step-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ii-step h4 {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.4;
}
.ii-step p {
  font-size: 0.66rem;
  line-height: 1.6;
  color: var(--ink-soft);
  flex: 1 1 auto;
  margin-bottom: 8px;
}
/* align-items:center ของคอลัมน์จะบีบลูกให้กว้างเท่าเนื้อหา — รูปต้องสั่ง stretch คืน */
.ii-step-media {
  align-self: stretch;
}
.ii-step-media img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--hair);
  aspect-ratio: 16 / 9;   /* 🎛️ สัดส่วนรูป */
  object-fit: cover;
  display: block;
}
/* เส้นคั่นระหว่างขั้น — ลากเต็มความสูง แล้วให้ลูกศรนั่งทับตรงกลาง
   ลูกศรต้องมีพื้นสี --panel เท่าพื้นแผง เพื่อ "เจาะ" เส้นให้ขาดตรงตัวมันเอง */
.ii-steps-arrow {
  position: relative;
  flex: 0 0 auto;
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 20px;
  color: var(--ink-faint);
}
.ii-steps-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--hair);
}
/* ⚠️ ห้ามใช้ padding เจาะช่อง — box-sizing:border-box ทั่วโปรเจคจะกินเข้าไปในกล่อง svg
   จนลูกศรถูกบีบเหลือสูง 2px · ใช้ box-shadow spread แทน ไม่แตะกล่อง */
.ii-steps-arrow svg {
  position: relative;
  background: var(--panel);
  box-shadow: 0 0 0 5px var(--panel);
}

/* ── จอกลาง/เล็ก ── */
@media (max-width: 1280px) {
  .ii-dims-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  /* จอแคบกว่านี้ชิป 10 ตัวแรกไม่พอลงบรรทัดเดียวอยู่แล้ว
     ถ้ายังบังคับขึ้นบรรทัดใหม่จะเหลือแถวสั้น ๆ ค้างกลางกลุ่ม → ปล่อยให้ไหลต่อกันไปเลย */
  .ii-chips-break {
    display: none;
  }
}
@media (max-width: 1080px) {
  .ii-hero-in {
    grid-template-columns: 1fr;
  }
  .ii-hero-map {
    order: -1;
  }
  .ii-apply-row {
    grid-template-columns: 1fr;
  }
  .ii-steps-row {
    flex-wrap: wrap;
  }
  .ii-step {
    flex: 1 1 calc(33% - 24px);
  }
}
@media (max-width: 720px) {
  .ii-filter-body {
    flex-direction: column;
  }
  .ii-search {
    width: 100%;
  }
  .ii-dims-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ii-steps-row {
    flex-direction: column;
  }
  .ii-step {
    flex: 1 1 auto;
  }
  .ii-steps-arrow {
    transform: rotate(90deg);
    align-self: center;
  }
}