/* ═══════════════════════════════════════════════════════════════
   BLOCKS — สไตล์ของบล็อกเนื้อหาที่ใช้ซ้ำได้ทุกหน้า
   คู่กับ app/Views/partials/blocks/*.php (1 บล็อก = 1 partial = 1 หมวดในไฟล์นี้)

   กติกา: อะไรที่ "หน้าอื่นเอาไปใช้ได้" อยู่ในไฟล์นี้
          อะไรที่ "หน้าเดียวใช้" อยู่ใน page-{slug}.css
   ต้องโหลด "หลัง" onzon.css เสมอ (ใช้โทเคนสีจากที่นั่น)
   ═══════════════════════════════════════════════════════════════ */

/* คอนเทนเนอร์เนื้อหาของหน้า (กว้างเท่าหน้าแรก) */
.pg {
  width: min(1680px, 94vw);
  margin: 0 auto;
  padding: 26px 0 70px;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.4vw, 52px);
}

/* หัวข้อบล็อก — มีขีดสั้นสีเขียวนำหน้า */
/* หัวข้อบล็อก — มีใบไม้ประกบสองข้างตามดีไซน์
   ใช้ mask + สีพื้น จึงเปลี่ยนสีตามธีมได้ ไม่ต้องมีไฟล์รูป 2 เวอร์ชัน */
.blk-h {
  --leaf: #b08d4f;   /* 🎛️ สีใบไม้ */
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
}
.blk-h::before,
.blk-h::after {
  content: "";
  flex: 0 0 auto;
  width: 1.05em;   /* 🎛️ ขนาดใบไม้ */
  height: 1.05em;
  background: var(--leaf);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.5%2021C2.5%2011.6%209.4%204.5%2021.5%204.5c0%2010.4-8.2%2016.5-19%2016.5z%22%2F%3E%3Cpath%20d%3D%22M2.5%2021c4.2-5.4%208.7-8.9%2014.2-11.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M2.5%2021C2.5%2011.6%209.4%204.5%2021.5%204.5c0%2010.4-8.2%2016.5-19%2016.5z%22%2F%3E%3Cpath%20d%3D%22M2.5%2021c4.2-5.4%208.7-8.9%2014.2-11.2%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
.blk-h::before {
  transform: scaleX(-1);   /* ใบซ้ายพลิกให้หันเข้าหาข้อความ */
}

/* หัวข้อบล็อกแบบมีคำโปรยใต้หัวข้อ — ห่อด้วย .blk-head แล้วใส่ .blk-sub ต่อท้าย */
.blk-head {
  margin-bottom: 18px;
}
.blk-head .blk-h {
  margin-bottom: 4px;
}
.blk-sub {
  padding-left: calc(1.05em + 9px);   /* เยื้องให้ตรงกับข้อความหัวข้อ (ข้ามใบไม้) */
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ───────── บล็อก hero — แบนเนอร์หัวข้อหน้า ─────────
   สีตัวอักษรตั้งตายตัว ไม่ผูกกับโทเคนธีม เพราะพื้นหลังเป็นรูปสว่างคงที่ทั้งสองโหมด
   (บทเรียนจากแบนเนอร์หน้าแรก: ถ้าใช้ var(--ink) พอเป็นโหมดมืดตัวอักษรจะขาวทับรูปขาว) */
.blk-hero {
  --hero-green: #2f5f19; /* 🎛️ บรรทัดที่ 1 */
  --hero-gold: #b08d4f; /* 🎛️ บรรทัดที่ 2 */
  --hero-ink: #404040; /* 🎛️ คำโปรย */
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(240px, 20vw, 330px); /* 🎛️ ความสูงปกติ */
  overflow: hidden;
  background: var(--panel);
}
.blk-hero.is-sm {
  min-height: clamp(200px, 16vw, 260px); /* 🎛️ ความสูงแบบเตี้ย */
}
.blk-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
.blk-hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(18px, 2.4vw, 34px) 0;
  /* เยื้องซ้ายให้ตรงกับ .pg — ต้องเป็น margin ไม่ใช่ padding
     (box-sizing:border-box จะทำให้ padding กิน max-width จนข้อความถูกบีบเมื่อจอกว้างมาก) */
  margin-left: calc((100vw - min(1680px, 94vw)) / 2);
  max-width: min(700px, 54vw);
}
.blk-hero-h {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-weight: 700;
}
.blk-h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  color: var(--hero-green);
}
.blk-h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  color: var(--hero-gold);
}
.blk-hero-sub {
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  color: var(--hero-ink);
  line-height: 1.75;
  /* ภาษาไทยไม่มีช่องว่างระหว่างคำ เบราว์เซอร์จึงตัดบรรทัดกลางคำได้
     balance = เกลี่ยความยาวบรรทัดให้ใกล้กัน ไม่เหลือพยางค์เดียวห้อยบรรทัดสุดท้าย */
  text-wrap: balance;
}

/* ───────── บล็อก text_image — ข้อความ + รูปข้าง (+ กล่องเน้นท้าย) ───────── */
/* 3 คอลัมน์แถวเดียว: รูป | ข้อความ | กล่องเน้น */
.blk-ti {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr 0.95fr;   /* 🎛️ สัดส่วน 3 คอลัมน์ (รูป | ข้อความ | กล่องเน้น)
     คอลัมน์ข้อความกว้างเกินความยาวบรรทัดจริง = เกิดช่องว่างค้างก่อนถึงกล่องขวา
     ลดตัวกลางลง กล่องขวาจะขยับเข้ามาเอง (แต่ห้ามแคบกว่าบรรทัดที่ยาวที่สุด ไม่งั้น <br> ที่กำหนดไว้จะเพี้ยน) */
  gap: clamp(16px, 2.2vw, 34px);
  align-items: center;
}
.blk-ti.is-right .blk-ti-media {
  order: 2;
}
.blk-ti-media img {
  width: 100%;
  aspect-ratio: 5 / 2;   /* 🎛️ สัดส่วนรูป (เลขหลังน้อย = เตี้ยลง) */
  object-fit: cover;
  border-radius: 16px;
  display: block;
  box-shadow: var(--shadow-sm);
}
.blk-ti-text p {
  font-size: 0.88rem;
  line-height: 1.9;
  color: var(--ink-soft);
  margin-bottom: 0.9em;
}
.blk-ti-text p:last-child {
  margin-bottom: 0;
}


/* คอลัมน์ที่ 3 — จัดกล่องข้างในให้อยู่กึ่งกลาง (กล่องแคบกว่าคอลัมน์) */
.blk-ti-aside {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ───────── กริดใช้ร่วม (card_grid + icon_cards) ───────── */
.blk-cards-grid,
.blk-icons-grid {
  --bcg-gap: clamp(12px, 1.4vw, 18px);
  --bcg-cols: 6;                       /* จำนวนคอลัมน์ตามดีไซน์ — คลาส .blk-cards--N ทับค่านี้ */

  display: grid;
  gap: var(--bcg-gap);
  justify-content: start;   /* เหลือไม่ครบแถวให้ชิดซ้าย ไม่ต้องจัดกึ่งกลาง */
  /* ⚠️ ความกว้างการ์ดคงที่เสมอ ไม่ยืดตามจำนวนใบ
     แอดมินปิดการ์ดบางใบได้ (ดู PageSpaInfoModel::isOn) เหลือใบเดียวก็ต้องเท่าตอนมีครบ
     auto-fit = คอลัมน์ที่ไม่มีการ์ดยุบหายไป การ์ดที่เหลือจึงไม่ถูกยืด
     -0.5px กันปัดเศษดันใบสุดท้ายตกบรรทัดตอนมีครบทุกใบ */
  grid-template-columns: repeat(
    auto-fit,
    minmax(0, calc((100% - (var(--bcg-cols) - 1) * var(--bcg-gap)) / var(--bcg-cols) - 0.5px))
  );
}
.blk-cards--2 { --bcg-cols: 2; }
.blk-cards--3 { --bcg-cols: 3; }
.blk-cards--4 { --bcg-cols: 4; }
.blk-cards--5 { --bcg-cols: 5; }
.blk-cards--6 { --bcg-cols: 6; }

/* ───────── บล็อก card_grid — การ์ดรูป ───────── */
.blk-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 15px;
  padding: 13px;
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}
.blk-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
}
/* หัวการ์ด — ไอคอน + หัวข้อ อยู่แถวเดียวกัน (ตามดีไซน์) */
.blk-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.blk-card-ico {
  flex: 0 0 auto;
  width: 26px;   /* 🎛️ ขนาดไอคอนหัวการ์ด */
  height: 26px;
  object-fit: contain;
  display: block;
}
.blk-card-top h3 {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.45;
}
.blk-card-media img {
  width: 100%;
  aspect-ratio: 21 / 9;   /* 🎛️ สัดส่วนรูปในการ์ด (เลขหลังน้อย = เตี้ยลง) */
  object-fit: cover;
  border-radius: 11px;
  display: block;
}
.blk-card-desc {
  margin-top: 10px;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--ink-soft);
  text-align: center;   /* ตามดีไซน์ — คำอธิบายใต้รูปจัดกึ่งกลาง */
}

/* ───────── บล็อก icon_cards — การ์ดไอคอน ───────── */
.blk-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
}
.blk-icon-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}
.blk-icon-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.blk-icon-card h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.45;
}
.blk-icon-card p {
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ───────── จอกลาง/เล็ก ───────── */
@media (max-width: 1180px) {
  .blk-cards--6, .blk-cards--5 { --bcg-cols: 3; }
  .blk-cards--4 { --bcg-cols: 2; }
}
@media (max-width: 1180px) {
  .blk-ti {
    grid-template-columns: 0.95fr 1.05fr;
  }
  .blk-ti-aside {
    grid-column: 1 / -1;
  }
  /* จอแคบ: ปิดการบังคับขึ้นบรรทัด (<br>) — จุดตัดบรรทัดถูกจูนไว้สำหรับคอลัมน์กว้างของจอใหญ่
     พอคอลัมน์แคบลง บรรทัดจะตัดคำซ้อนอีกชั้นจนยาว-สั้นสลับกันไม่สวย → ปล่อยให้ไหลเองดีกว่า */
  .blk-ti-text br {
    display: none;
  }
}
@media (max-width: 860px) {
  .blk-ti {
    grid-template-columns: 1fr;
  }
  .blk-hero-text {
    max-width: 88vw;   /* จอแคบ: ให้พื้นที่ข้อความกว้างขึ้น บรรทัดจะได้ไม่ถูกบีบจนตัดคำ */
  }
}
@media (max-width: 560px) {
  .blk-cards--6,
  .blk-cards--5,
  .blk-cards--3 {
    --bcg-cols: 2;
  }
}