/* index2 page-only rules (start empty, add when fixing) */
/* pages/index2.css
   Page-only stabilizer for index2.html
   (safe: scope with body/page class if youมี)
*/

/* ✅ กัน header fixed แล้ว content ไม่ถูกทับ */
main { padding-top: 72px; }

/* ✅ กู้ container พื้นฐาน (ถ้าใน layout ยังไม่นิ่ง) */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* ✅ กัน section/hero สูงผิดจนดัน layout แปลก */
.hero, section { height: auto; min-height: auto; }

/* ✅ กัน text จม/ซ้อนเพราะ line-height เพี้ยน */
body { line-height: 1.6; }

/* pages/index2.css - safety for this page only */
.topbar .social .iconbtn svg { width: 20px !important; height: 20px !important; }
.topbar .social .iconbtn { width: 40px !important; height: 40px !important; }

/* page safety for header */
.siteHeader, .siteHeader * { box-sizing: border-box; }
.siteHeader .navInner { overflow: hidden; }

/* ================================
   PAGE FIX: index2 HERO LAYOUT
   ================================ */

/* กัน main ล้นขอบ */
main.wrap{
  max-width: 100%;
  overflow-x: hidden;
}

/* HERO section */
.hero{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Grid หลักของ hero */
.heroGrid{
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 16px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;

  box-sizing: border-box;
  width: 100%;
}

/* Responsive: บนจอแคบให้เป็นคอลัมน์เดียว */
@media (max-width: 900px){
  .heroGrid{
    grid-template-columns: 1fr;
  }
}

/* Text side */
.heroText{
  min-width: 0;              /* กัน flex/grid ดันล้น */
}

/* Quote card */
.quoteCard{
  min-width: 0;
  box-sizing: border-box;
}

/* Banner image */
.banner{
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}

.banner img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ================================
   INDEX2 – RESTORE CARD GRID (2x2)
   ================================ */

/* 1) กันการ์ด/เฟรมทับตัวอักษร: ยก z-index ของข้อความใน card */
#services .card, 
#index2Cards .card,
.sectionCards .card,
.cardsGrid .card{
  position: relative;
  overflow: hidden;
}

#services .card * , 
#index2Cards .card *,
.sectionCards .card *,
.cardsGrid .card *{
  position: relative;
  z-index: 1;
}

/* ถ้ามีพื้น/เฟรมที่เป็นชิ้นทับตัวอักษร (มักมาจาก ::before/::after) */
#services .card::before,
#services .card::after,
#index2Cards .card::before,
#index2Cards .card::after,
.sectionCards .card::before,
.sectionCards .card::after,
.cardsGrid .card::before,
.cardsGrid .card::after{
  content: none !important;
}

/* 2) คืนค่า Layout: 4 การ์ด = 2 คอลัมน์ */
#services .cardsGrid,
#index2Cards .cardsGrid,
.sectionCards .cardsGrid,
.cardsGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* 3) ระยะหายใจใน card (กันหัวข้อโดนทับ) */
#services .card,
#index2Cards .card,
.sectionCards .card,
.cardsGrid .card{
  padding: 18px 18px 16px;
  border-radius: var(--r-xl, 22px);
  background: var(--card-glass, rgba(18,20,24,.55));
  border: 1px solid var(--card-border, rgba(201,168,106,.18));
  box-shadow: var(--shadow-card, 0 18px 50px rgba(0,0,0,.55));
}

/* 4) ปุ่มใน card: ขอบทอง + กดแล้วทอง */
#services .card .cardBtn,
#index2Cards .card .cardBtn,
.sectionCards .card .cardBtn,
.cardsGrid .card .cardBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft, rgba(201,168,106,.25));
  color: var(--text-main, rgba(245,246,248,.92));
  background: transparent;
  text-decoration: none;
}

#services .card .cardBtn:hover,
#services .card .cardBtn:focus-visible,
#index2Cards .card .cardBtn:hover,
#index2Cards .card .cardBtn:focus-visible,
.sectionCards .card .cardBtn:hover,
.sectionCards .card .cardBtn:focus-visible,
.cardsGrid .card .cardBtn:hover,
.cardsGrid .card .cardBtn:focus-visible{
  border-color: var(--gold, #c9a86a);
  background: rgba(201,168,106,.12);
  outline: none;
}

/* 5) มือถือ: 1 คอลัมน์ */
@media (max-width: 720px){
  #services .cardsGrid,
  #index2Cards .cardsGrid,
  .sectionCards .cardsGrid,
  .cardsGrid{
    grid-template-columns: 1fr;
  }
}

/* ถ้ามีชิ้นเฟรม/ก้อน overlay ทับหัวข้อ */
.frame, .cardFrame, .glassFrame, .leftFrame{
  position: static !important;
}

/* ======================================
   INDEX2 – SERVICES CARDS (restore 2x2)
   ====================================== */

#services .grid2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

/* card = ลิงก์ทั้งใบ (กัน underline + กันเฟรมทับ) */
#services .card.cardLink{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border-radius: var(--r-xl);
  background: var(--card-glass);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--text-main);
  position: relative;
  overflow: hidden;
}

/* กัน pseudo/เฟรมแปลก ๆ ที่อาจมาทับตัวหนังสือจากไฟล์อื่น */
#services .card.cardLink::before,
#services .card.cardLink::after{
  content: none !important;
}

/* kicker / title / text */
#services .card .kicker{
  color: var(--text-soft);
  font-size: 13px;
  letter-spacing: .02em;
}

#services .card h3{
  margin: 0;
  line-height: 1.2;
}

#services .card p{
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
}

/* ให้ปุ่มอยู่ล่างสุดของการ์ดเสมอ */
#services .card .cardAction{
  margin-top: auto;
  padding-top: 10px;
}

/* ปุ่มเดิมแบบกรอบทอง + hover ทอง (ใช้ span.btnGhost ที่นิกี้มีอยู่แล้ว) */
#services .btnGhost{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--gold-soft);
  color: var(--text-main);
  background: transparent;
}

#services .card.cardLink:hover .btnGhost{
  border-color: var(--gold);
  background: rgba(201,168,106,.12);
}

/* hover ทั้งใบให้ดู “ยก” นิด ๆ แบบเดิม */
#services .card.cardLink:hover{
  border-color: rgba(201,168,106,.35);
  transform: translateY(-1px);
}

/* มือถือ: 1 คอลัมน์ */
@media (max-width: 720px){
  #services .grid2{
    grid-template-columns: 1fr;
  }
}

#services a{ text-decoration: none; }
#services a:hover{ text-decoration: none; }

#services{ position: relative; z-index: 1; }
#services .card *{ position: relative; z-index: 1; }

/* ===== index2 page tuning ===== */

/* ข้อความยาว/lead */
.hero .lead{
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 58ch;
}

/* หัวข้อย่อย/บรรทัดทอง */
.goldline{
  color: var(--gold);
  font-size: 14px;
  letter-spacing: .02em;
}

/* Kicker above headings: never overlap */
.kicker{
  display: block;
  margin: 0 0 8px 0;
  line-height: 1.2;
  position: static;
}

/* Safe padding for content sections */
.wrap{
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 420px){ /* iPhone SE */
  .wrap{
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Fix kicker overlap */
#services .kicker{
  display:block;
  margin: 0 0 10px 0;
  line-height: 1.2;
}
#services h3{
  margin-top: 6px;
}

/* ================================
   INDEX2: CTA buttons (small phones)
   iPhone SE / 6s safe layout
   ================================ */

/* ปกติ: อยู่แถวเดียว + มีช่องว่าง */
.page--index2 .ctaRow{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;         /* กันล้น */
  align-items: center;
}

/* จอเล็กมาก: ให้เรียงเป็นแนวตั้ง ไม่ซ้อนกัน */
@media (max-width: 375px){
  .page--index2 .ctaRow{
    flex-direction: column;
    align-items: stretch;  /* ให้ปุ่มกว้างเต็ม */
    gap: 10px;
  }

  .page--index2 .ctaRow .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 12px 16px;    /* กดง่าย */
    white-space: normal;   /* กันข้อความดันล้น */
  }
}

/* ======================================
   INDEX2: Services header padding safe
   กันหัวข้อชนขอบทุกหน้าจอ
   ====================================== */

/* ให้ section มี padding เท่ากับ card spacing (ใช้ 18px แบบเดียวกับ wrap) */
.page--index2 #services{
  padding-left: 18px;
  padding-right: 18px;
}

/* มือถือเล็ก: ลดนิดให้พอดีจอ */
@media (max-width: 768px){
  .page--index2 #services{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* กันบรรทัดขวา (Heart Stillness Healing) หลุด/ดันชนขอบ */
.page--index2 #services > div:first-child{
  flex-wrap: wrap;
}

/* ======================================
   INDEX2: Services header top spacing
   กัน kicker ชนกรอบ banner
   ====================================== */

.page--index2 #services .kicker{
  margin-top: 12px;   /* ระยะห่างจากกรอบบน */
}

/* มือถือเล็ก: เพิ่มอีกนิดให้หายอึดอัด */
@media (max-width: 768px){
  .page--index2 #services .kicker{
    margin-top: 16px;
  }
}

Step 2) โค้ดที่ต้องใส่

/* ======================================
   INDEX2: Card kicker to gold
   เปลี่ยนตัวอักษรเล็กบนขอบการ์ดเป็นสีทอง
   ====================================== */

/* เฉพาะการ์ดใน section services */
.page--index2 #services .card .kicker{
  color: var(--gold) !important;
  letter-spacing: 0.04em;      /* ให้ดูพรีเมียมขึ้นนิด */
  font-weight: 600;
}

/* ถ้ามี opacity เดิมติดอยู่ ให้บังคับชัด */
.page--index2 #services .card .kicker{
  opacity: 1 !important;
}

/* ✅ FORCE: Kicker in 4 cards -> Gold (locked) */
body.page--index2 #services .grid2 a.card.cardLink .kicker,
body.page--index2 #services .grid2 a.card .kicker,
body.page--index2 #services .kicker{
  color: #c9a86a !important;   /* ใช้ HEX ตรงๆ กัน var โดนทับ */
  opacity: 1 !important;
  font-weight: 650;
  letter-spacing: .04em;
}

/* ✅ Contact card chat icon -> Gold */
.page--index2 #contact .lineCtaTitle svg{
  color: #c9a86a !important;
}

/* ✅ Contact section: "Connect gently" -> Gold */
.page--index2 #contact .contactHead .small{
  color: #c9a86a !important;
}