/* =========================
   Section Layout & Spacing
   (Fixed for sticky navbar, no hero bleed, better centering)
   ========================= */

/* ความสูง navbar ไว้ใช้ชดเชยเวลาสกรอลไป anchor */
:root {
  --nav-h: 88px;
}

/* โครงสร้างพื้นฐานของทุก section (หลัง Hero)
   - ใช้ padding-top เพื่อกัน margin collapse ของหัวข้อแรก
   - พื้นหลังขาวเพื่อไม่ให้เห็นปลายสีฟ้าของ Hero */
.section-placeholder {
  display: block;
  padding: clamp(48px, 6vw, 96px) 20px clamp(64px, 8vw, 120px);
  min-height: auto;
  background: var(--white);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* กล่องคอนเทนต์กลางหน้า */
.section-content {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

/* ============ Reveal ============ */
.section-animate {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.section-placeholder.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

/* ============ Typography ============ */
.section-placeholder h2,
.section-placeholder .section-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 16px;
  /* กัน margin-top collapse */
  text-align: center;
  color: var(--text);
}

.section-placeholder p,
.section-placeholder .section-subtext {
  text-align: center;
  color: var(--text);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* ============ Card layout ============ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .section-placeholder .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* ======== Section-specific ======== */

/* ไม่ให้เห็นเส้นสีน้ำเงินของ Hero และจัด Services ให้อยู่กลางจอจริง ๆ */
#services {
  background: var(--white);
  margin-top: -8px;
  /* กลบปลาย Hero สีฟ้า */
  min-height: calc(100vh - var(--nav-h));
  display: grid;
  place-items: center;
  /* จัดหัวข้อ+การ์ดให้อยู่กึ่งกลางแนวตั้ง */
  padding-top: clamp(24px, 3vw, 48px);
  /* เผื่อช่องว่างเล็กน้อยด้านบน */
  position: relative;
  /* สร้าง stacking context */
  isolation: isolate;
  /* กันชนชั้น z-index ให้แน่นอน */

  /* ใช้ grid เพื่อจัดกึ่งกลางแนวตั้ง/แนวนอน */
  justify-items: center;
  /* กึ่งกลางแนวนอนของบล็อกด้านใน */
  /* ลด padding-top ลงเพื่อไม่ให้ดูย้อย และเผื่อด้านล่างสำหรับแชท */
  padding-bottom: clamp(72px, 6vw, 120px);

}

#about,
#why,
#contact {
  background: var(--white);
}


/* แผ่นปิดตะเข็บสีขาวทับปลาย Hero ไม่ให้เห็นเส้นน้ำเงิน */
#services::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -32px;
  /* ดึงขึ้นไปทับปลาย Hero */
  height: 32px;
  /* ถ้ายังเห็นเส้น เพิ่มเป็น 40px ได้ */
  background: var(--white);
  z-index: 1;
  /* ให้อยู่เหนือ Hero แน่ๆ */
  pointer-events: none;
}


/* ยกคอนเทนต์ของ services ให้อยู่เหนือแผ่นปิด */
#services .section-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  /* เท่ากับ services grid */
  margin: 0 auto;
}

/* ถ้าจอเล็ก/เนื้อหายาว ให้เริ่มชิดบนนิดหน่อยเพื่อไม่ถูกบีบ */
@media (max-width: 768px) {
  #services {
    align-content: start;
    padding-top: clamp(32px, 6vh, 56px);
  }
}