/* ===== Services: force 2x2 card layout ===== */

.servicesPanel .servicesGrid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

/* ให้การ์ดสูงเท่ากัน (อ่านแล้วไม่เบี้ยว) */
.servicesPanel .servicesGrid .pCard{
  height: 100%;
}

/* Mobile -> 1 column */
@media (max-width: 720px){
  .servicesPanel .servicesGrid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ===== Kicker: soft-gold, sharp, premium ===== */
.servicesPanel .pKicker.kickerGold{
  color: #d6b36a;         /* soft gold */
  font-weight: 700;
  letter-spacing: .35px;
  text-transform: none;
  margin-bottom: 8px;
}

/* HERO TITLE */
.servicesHeroTitle{
  text-align: center;
}

/* บรรทัดหลัก */
.servicesHeroTitle .goldMain{
  display: block;
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 700;
  color: #d6b36a; /* gold */
  letter-spacing: .5px;
}

/* บรรทัดรอง — ทำให้เล็กลง */
.servicesHeroTitle .goldSub{
  display: block;
  margin-top: 6px;
  font-size: clamp(18px, 2.2vw, 26px); /* 👈 เล็กลงชัดเจน */
  font-weight: 500;
  color: rgba(214,179,106,.75);       /* 👈 gold อ่อน */
  letter-spacing: .3px;
}

/* HERO GOLD BUTTON */
.btnHeroGold{
  background: linear-gradient(135deg,#e7c77b,#caa24d);
  color: #111;
  border: none;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  box-shadow:
    0 10px 24px rgba(214,179,106,.35),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.btnHeroGold:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(214,179,106,.45),
    inset 0 1px 0 rgba(255,255,255,.4);
}

/* ===== HERO TITLE SPACING ===== */

.servicesHeroTitle{
  text-align: center;
  margin-bottom: 14px; /* ลดช่องว่างใต้หัวข้อ */
}

/* บรรทัดหลัก */
.servicesHeroTitle .goldMain{
  display: block;
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 700;
  color: #d6b36a;
  letter-spacing: .5px;
  line-height: 1.1;
}

/* บรรทัดรอง — ขยับขึ้น */
.servicesHeroTitle .goldSub{
  display: block;
  margin-top: 2px;          /* 👈 จากเดิมที่ห่าง ให้ชิดขึ้น */
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 500;
  color: rgba(214,179,106,.75);
  letter-spacing: .3px;
  line-height: 1.2;
}

/* ===== HERO BLOCK SPACING ===== */

.services-hero{
  padding-top: 32px;
  padding-bottom: 36px;
}

.services-hero .heroQuote{
  margin-top: 12px;
  margin-bottom: 16px;
}

.services-hero .heroActions{
  margin: 14px 0 16px; /* ลดช่องไฟบน-ล่างของปุ่ม */
}

.services-hero .services-sub{
  margin-top: 10px;
  line-height: 1.6;
}

.services-hero .services-signature{
  margin-top: 14px;
}

/* =========================
   HERO GOLD CTA — services.html ONLY
   ========================= */

.page--services .services-hero .heroActions .btn.primary{
  background: linear-gradient(
    135deg,
    #f6e1a4 0%,
    #e7c777 38%,
    #c89a38 100%
  ) !important;

  color: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,.2) !important;

  font-weight: 800 !important;
  letter-spacing: .25px !important;

  padding: 14px 34px !important;
  border-radius: 999px !important;

  box-shadow:
    0 16px 34px rgba(216,180,96,.42),
    0 2px 0 rgba(255,255,255,.14) inset !important;

  transition: all .25s ease !important;
}

/* Hover */
.page--services .services-hero .heroActions .btn.primary:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 20px 44px rgba(216,180,96,.55),
    0 2px 0 rgba(255,255,255,.18) inset !important;
}

/* =========================
   SERVICES HERO — BALANCED SPACING (final)
   ========================= */

.page--services .services-hero{
  /* ทำให้บล็อกหายใจสมดุล */
  padding: 28px 0 34px !important;
}

/* Title block */
.page--services .servicesHeroTitle{
  margin: 0 0 14px !important;
}

/* ดัน subtitle ให้ชิดหัวเรื่อง + ไม่ลอย */
.page--services .servicesHeroTitle .goldSub{
  margin-top: -4px !important;   /* ขยับขึ้นนิดนึง (สมดุลกว่า -6) */
}

/* Quote ใต้หัวเรื่อง */
.page--services .services-hero .heroQuote{
  margin: 10px auto 16px !important;
  max-width: 760px;
}

/* ปุ่มทอง: เว้นก่อน/หลังให้พอดี */
.page--services .services-hero .heroActions{
  margin: 10px 0 18px !important;
}

/* บล็อกข้อความกลาง (services-sub) */
.page--services .services-hero .services-sub{
  margin: 8px auto 14px !important;
  max-width: 760px;
  line-height: 1.65 !important;
}

/* ประโยค signature */
.page--services .services-hero .services-signature{
  margin: 10px auto 18px !important;
  max-width: 760px;
}

/* CTA Row ล่าง: ระยะห่างกำลังดี */
.page--services .services-hero .ctaRow{
  margin-top: 14px !important;
  gap: 12px !important;
}

/* =========================
   SERVICES PAGE — GOLD CARD BORDER STANDARD
   Scope: services.html only
   ========================= */

.page--services .card,
.page--services .hero__card,
.page--services .pCard,
.page--services .panel .card,
.page--services .panel .pCard {
  border: 1px solid rgba(212, 175, 95, 0.55); /* Soft Gold */
  box-shadow:
    0 0 0 1px rgba(212, 175, 95, 0.15) inset,
    0 12px 28px rgba(0, 0, 0, 0.55);
  border-radius: 16px;
}

/* กันกรณีการ์ดบางใบมี border เดิมแรงเกิน */
.page--services .card::before,
.page--services .pCard::before{
  border-color: rgba(212, 175, 95, 0.45);
}

/* =========================
   SERVICES — Card border overlaps button (FINAL FIX)
   ========================= */

/* 1) การ์ดต้องเป็น container ที่คุมทุก layer */
.page--services .productGrid .pCard{
  position: relative;
  isolation: isolate;
}

/* 2) กรอบทอง (pseudo-element) ให้อยู่ "นอก" content */
.page--services .productGrid .pCard::before{
  inset: -1px;                 /* ดันกรอบออกไปนอก */
  pointer-events: none;        /* ❗ ห้ามบังคลิก */
  z-index: 0;
}

/* 3) เนื้อหาการ์ด ต้องอยู่ใน layer หน้า + มี safe space */
.page--services .productGrid .pBody{
  position: relative;
  z-index: 2;
  padding-bottom: 26px;        /* ❗ กันปุ่มชนกรอบ */
}

/* 4) ปุ่มอยู่หน้าสุด + safe hit-area */
.page--services .productGrid .pBtn,
.page--services .productGrid .btn{
  position: relative;
  z-index: 3;
}

/* =========================
   SERVICES HERO CTA — iPhone SE/6S overlap fix
   Scope: services.html only
   ========================= */

/* บังคับให้ container จัดวางเป็นแถวเดียวและไม่ดัน/ซ้อน */
.page--services .services-hero .heroActions{
  display: flex;
  justify-content: center;
  padding: 0 16px;            /* กันชนขอบจอ */
}

/* ปุ่มยาว: ให้ตัดบรรทัดได้ + ไม่ล้น */
.page--services .services-hero .heroActions .btn.primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  max-width: 100%;
  white-space: normal;         /* ✅ allow wrap */
  overflow-wrap: anywhere;      /* ✅ กันคำยาวล้น */
  line-height: 1.2;

  padding: 12px 18px;          /* ปรับให้สมดุลกับจอเล็ก */
}

/* iPhone SE / 6S และจอเล็ก */
@media (max-width: 375px){
  .page--services .services-hero .heroActions{
    padding: 0 14px;
  }

  .page--services .services-hero .heroActions .btn.primary{
    width: 100%;               /* ✅ เต็มแถว = ไม่มีทางซ้อน */
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* กันเคสจอเล็กมาก / ซูม */
@media (max-width: 340px){
  .page--services .services-hero .heroActions .btn.primary{
    font-size: 13px;
    padding: 11px 12px;
  }
}

/* =========================================
   SERVICES: Card button iPhone safe (COPY SHOP)
   - Fix: card buttons touch edges on iPhone SE / 6S
   Scope: services.html only
   ========================================= */

/* ให้ padding body ของการ์ดเท่ากับ shop */
.page--services .productGrid .pBody{
  padding: 16px 16px 18px;
}

/* กันกรณี CSS ตัวอื่นทำให้ปุ่มเพี้ยน (เหมือน shop) */
.page--services .productGrid .pCard .btn,
.page--services .productGrid .pCard .pBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  max-width: 100%;
}

/* Small phones: force full width inside card (SE/6S) — copy shop */
@media (max-width: 390px){
  .page--services .productGrid .pCard .btn,
  .page--services .productGrid .pCard .pBtn{
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    box-sizing: border-box;
  }
}