/* SIGMA Padel Club — Landing page styles
   แบบอนุมัติ: design/approved/landing.md — mockup B "Cream Clubhouse" + ข้อ 8 Sport Punch + 8.8 Colour Enrichment
   ทุกค่าสี/ฟอนต์/spacing มาจาก tokens.css เท่านั้น (ค่าเรขาคณิตเฉพาะจุด เช่น องศาเอียง/2-4px ตามหมายเหตุ 8.6 เขียนตรงได้)
   โหลด tokens.css ก่อนไฟล์นี้เสมอ */

/* ===== Base (mobile-first) ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-light);
  color: var(--text-on-light);
  font-family: var(--font-thai);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* กันแกนนอนแตกจากองค์ประกอบเอียง (marquee มี wrapper hidden อีกชั้น) */
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* กัน anchor มุดใต้ sticky header — ผูกกับความสูง header จริงผ่าน token */
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-3)); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
/* เนื้อหาลอยเหนือ ghost text เสมอ */
.section > .container { position: relative; z-index: 1; }

/* headline EN — Lexend Zetta ตัวพิมพ์ใหญ่ letter-spacing กว้าง */
.hd {
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.3;
}
/* eyebrow — แถบ rust ทึบเอียง (Sport Punch 8.1.6 — แทนเส้นนำหน้าเดิม) */
.eyebrow {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: var(--text-xs);
  background: var(--accent);
  color: var(--color-cream);
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  transform: rotate(var(--tilt));
  transform-origin: left center;
  margin-bottom: var(--sp-3);
}
/* เนื้อหา EN ล้วน (ไม่ใช่หัวข้อ) — ใช้ Inter ตามกฎ typography */
.en-body { font-family: var(--font-body-en); font-weight: 400; }

/* ===== ปุ่ม CTA — shadow layer แยก + สปริงกดยุบ (8.1.4 / 8.1.5) — hover ใช้ CSS transition เท่านั้น ===== */
.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--text-sm);
  text-decoration: none;
  text-align: center;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
/* shadow layer: pseudo พื้นทึบ translate offset — paint ใต้ปุ่ม (z ติดลบ) เหนือพื้นของ stacking context ที่ใกล้ที่สุด
   (.price-card ใช้ isolation, header เป็น sticky+z มี context, hero__copy มี transform จาก GSAP) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  background: var(--color-black);
  transform: translate(var(--sp-1), var(--sp-1));
  transition: transform var(--transition);
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:hover::before { transform: translate(calc(var(--sp-1) + 2px), calc(var(--sp-1) + 2px)); }
.btn:active { transform: translate(2px, 2px); }
.btn:active::before { transform: translate(var(--sp-1), var(--sp-1)); }

.btn--primary {
  background: var(--grad-btn); /* 8.8 จุด 5 — ปุ่มมีมวล */
  color: var(--color-cream);
}
.btn--primary:hover { background: var(--color-maroon); }
.btn--outline-dark {
  background: var(--bg-light); /* ทึบ — กันเงา layer โผล่ทะลุหลังปุ่ม */
  color: var(--text-on-light);
  border: 1px solid var(--color-black);
}
.btn--outline-dark:hover { background: var(--color-black); color: var(--color-cream); }
/* ปุ่มบนการ์ดดำ/พื้น rust → เงา maroon (8.1.4) */
.price-card .btn::before, .final-cta .btn::before { background: var(--color-maroon); }

/* ===== grain overlay (texture opacity ต่ำ — ไม่นับเป็นสีนอก CI) ===== */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  z-index: 1;
}

/* ===== shadow-box — hard shadow เป็น layer แยก translate ได้ (8.1.4) ===== */
.shadow-box { position: relative; }
.shadow-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: var(--color-black);
  /* fallback var = offset เต็ม (--sp-3 ตาม 8.1.4) เมื่อไม่มี JS / ปิด motion — GSAP tween --sh-x/--sh-y ตอน load */
  transform: translate(var(--sh-x, var(--sp-3)), var(--sh-y, var(--sp-3)));
}
.shadow-box > .media { position: relative; z-index: 1; }
.shadow-box--black::before  { background: var(--color-black); }   /* hero (8.1.4) */
.shadow-box--green::before  { background: var(--color-green); }   /* คู่ duotone แถว 1 (8.8 จุด 6) */
.shadow-box--maroon::before { background: var(--color-maroon); }  /* คู่ duotone แถว 2 (8.8 จุด 6) */

/* ===== media container — คุม aspect-ratio + เผื่อภาพสูงเกิน 20% สำหรับ parallax ===== */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.media img {
  position: absolute;
  top: -10%;            /* ภาพสูง 120% ของ container — กันเห็นขอบตอน parallax เลื่อน */
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}
.media__label {
  position: absolute;
  left: var(--sp-3); bottom: var(--sp-3); right: var(--sp-3);
  font-family: var(--font-thai);
  font-weight: 300;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--cream-60);
  border: 1px dashed var(--cream-40);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  background: var(--black-60);
  z-index: 2;
}
.media--map { border: 1px dashed var(--cream-40); }
/* กรอบตัดเฉียงมุมล่างขวา — courts + map (8.2) */
.media--cut {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sp-4)), calc(100% - var(--sp-4)) 100%, 0 100%);
}
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-4x3  { aspect-ratio: 4 / 3; }

/* ----- Treatment ภาพ stock ต่อ slot (approved doc ข้อ 3 + duotone 8.8 จุด 6) -----
   ชั้นซ้อน: img → duotone (เฉพาะ court-wide) → overlay gradient (::before, z1) → grain (::after) → label (z2) */
.media--hero::before,
.media--court-wide::before,
.media--lounge::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
/* Hero: ภาพ B&W คอนทราสต์สูงอยู่แล้ว — ห้าม grayscale/darken/tint เพิ่ม (8.8 สั่งคงเดิม)
   source 2:3 crop เข้า slot 4:5 → ภาพสูง 110% พอ (parallax hero อยู่ระดับการ์ด ไม่ใช่ใน container) */
.media--hero img {
  top: -5%;
  height: 110%;
  object-position: 50% 35%;   /* กันหัวแร็กเก็ต+ลูก (บนสุดของเฟรม) หลุด crop */
  filter: contrast(1.05);
}
.media--hero::before {
  background: linear-gradient(180deg, transparent 55%, var(--black-60) 100%);
}
/* Courts แถว 1: B&W ดาร์กโทน + duotone เขียว (8.8 จุด 6) */
.media--court-wide img {
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.25) brightness(0.68);
}
.media--court-wide .media__duotone {
  position: absolute;
  inset: 0;
  background: var(--color-green);
  mix-blend-mode: color;
  opacity: 0.45;
  pointer-events: none;
}
.media--court-wide::before {
  background: linear-gradient(180deg, var(--black-60) 0%, transparent 40%, var(--black-60) 100%);
}
/* Courts แถว 2: คงโทนอุ่นเดิม (duotone rust ธรรมชาติ — 8.8 ไม่เติม layer) */
.media--lounge img {
  object-position: 50% 30%;   /* ภาพ portrait ใน slot 16:9 — ล็อกแถบใบหน้า+รอยยิ้ม+หัวแร็กเก็ต */
  filter: contrast(1.1) brightness(0.9) saturate(0.85);
}
.media--lounge::before {
  background: linear-gradient(200deg, transparent 50%, var(--black-60) 100%);
}

/* ===== Header (พื้นครีม → โลโก้ดำตามกฎ CI — โลโก้ห้ามเอียง/ใส่เอฟเฟกต์) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-light);
  border-bottom: 1px solid var(--black-15);
  transition: box-shadow var(--transition);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
}
.site-header__logo img {
  height: var(--logo-h);
  width: auto;
  transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1); /* ≈ expo.out ตาม 8.4 */
}
.site-header .btn { padding: var(--sp-2) var(--sp-4); font-size: var(--text-xs); }
.site-header.is-scrolled { box-shadow: 0 var(--sp-1) var(--sp-2) var(--black-15); }
.site-header.is-scrolled .site-header__logo img { height: calc(var(--logo-h) * 0.85); }
/* กลุ่มขวาของ header: lang-switch + ปุ่มจอง (9.1) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* ===== Language switch (approved doc 9.1 — ทุกค่าจาก token) ===== */
.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none; /* มือถือแคบ: lang-switch ห้ามหด (ปุ่มจองย่อ padding แทน) */
}
.lang-switch__btn {
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-xs);
  background: transparent;
  border: 0;
  color: var(--black-60);
  padding: var(--sp-2);
  line-height: 1;
  transition: color var(--transition);
}
.lang-switch__btn:hover { color: var(--color-black); }
.lang-switch__btn.is-active {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: var(--sp-1);
}
.lang-switch__sep { color: var(--black-15); font-size: var(--text-xs); }
@media (max-width: 767.98px) {
  /* tap target ≥40px — เพิ่ม padding-block ตัวอักษรขนาดเดิม (9.1) */
  .lang-switch__btn { padding-block: calc((40px - var(--text-xs)) / 2); }
  .site-header__actions { gap: var(--sp-3); }
}
@media (min-width: 768px) {
  .site-header__actions { gap: var(--sp-4); }
}
/* scroll progress bar (8.2) — decoration ทำงานเมื่อ motion เปิดเท่านั้น */
.scroll-progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ===== Hero (ครีมแบนเดิมตาม 8.8 — slogan แน่น การ์ดเอียง เส้นทแยง rust) ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-6) var(--sp-7);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: var(--sp-5); }
.hero__slogan {
  font-size: var(--text-slogan);  /* 8.9: token แยกจาก final CTA — กัน slogan ล้น fold */
  letter-spacing: 0.02em;
  line-height: 1.05;              /* 8.9 */
  color: var(--text-on-light);
  margin-bottom: var(--sp-4);
}
/* word-level reveal mask (8.4) — inline-block ไม่เปลี่ยนการตัดคำ, no-JS อ่านครบ */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.w  { display: inline-block; }
/* chunk ของแถบ BETTER. ห้าม clip — glow + มุมแถบเอียงต้องพ้นกล่อง (em reveal ด้วย autoAlpha ไม่ใช่พุ่งจาก mask) */
.wm--em { overflow: visible; }
/* "BETTER." — แถบ rust ทึบเอียง + glow static (8.2 + 8.8) */
.hero__em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding-inline: var(--sp-2);
  transform: rotate(var(--tilt));
  color: var(--color-cream);
}
.hero__em .em-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 0 var(--sp-4) var(--rust-35); /* glow static — ห้าม animate */
  transform-origin: left center;
}
.hero__em .em-txt { position: relative; }
.hero__sub {
  font-size: var(--text-lg);
  max-width: 36ch;
  margin-bottom: var(--sp-5);
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.hero__media { position: relative; }
.hero__frame { transform: rotate(2deg); } /* 8.2: การ์ดภาพเอียง */
/* 8.9: label ภาพ hero ยุบเป็นแถบบางบรรทัดเดียวชิดล่างสุด (label ภาพ courts คงเดิม) */
.hero__media .media__label {
  left: 0; right: 0; bottom: 0;
  border: 0;
  border-top: 1px dashed var(--cream-40);
  border-radius: 0;
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* กันจอแคบสุดเท่านั้น — ข้อความหลักต้องไม่โดนตัดที่ desktop */
}
/* เส้นทแยง rust วิ่งหลังการ์ดภาพ (8.2 — decoration) */
.hero__diag {
  position: absolute;
  top: 44%;
  right: -6%;
  width: 40%;
  height: var(--sp-2);
  background: var(--accent);
  transform: rotate(-24deg);
  z-index: 0;
  pointer-events: none;
}
.hero__badge {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  right: var(--sp-3);
  background: var(--color-green);
  color: var(--color-cream);
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-xs);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  transform: rotate(-3deg); /* 8.1.6 */
  z-index: 3;
}

/* ===== Marquee strip — เทปสนาม rust เอียง (8.1.2) ===== */
.marquee-wrap {
  position: relative;
  z-index: 3;               /* ทับรอยต่อเฉียงของ section ข้างเคียง */
  overflow: hidden;         /* ครอบแถบ 110vw — กัน overflow-x แตก */
  padding-block: var(--sp-4);
  pointer-events: none;
}
.marquee {
  width: 110vw;
  margin-left: -5vw;
  transform: rotate(var(--tilt));
  background: var(--accent);
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll 20s linear infinite; /* fallback ไม่มี JS — เมื่อ GSAP คุม จะปิดผ่าน .marquee--js */
}
.marquee--js .marquee__track { animation: none; }
.marquee__text {
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-base);
  color: var(--color-cream);
  padding-block: var(--sp-2);
}
@keyframes marquee-scroll {
  to { transform: translateX(-50%); }
}

/* ===== Section base + เส้นเฉียงคั่น (8.1.1 — ห้ามใช้กับ Header/Footer) ===== */
.section { padding-block: var(--sp-7); }
.section__head { margin-bottom: var(--sp-6); }
.section__title { font-size: var(--text-2xl); }
.section--dark {
  background: var(--bg-primary);
  color: var(--text-on-dark);
}
.section--dark .section__title { color: var(--color-white); }
.section--green {
  background: var(--color-green);
  color: var(--color-cream);
}
.section--green .section__title { color: var(--color-white); }
/* พื้น gradient ตามตาราง 8.8 (4 จุดที่อนุมัติเท่านั้น — ครีม/Footer แบนเดิม) */
#why     { background: var(--grad-why), var(--color-black); }
#pricing { background: var(--grad-price); }
#contact { background: var(--grad-loc), var(--color-black); }

.section--cut {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--cut));
  padding-block: calc(var(--sp-7) + var(--cut));
}
.section--cut-l { clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
.section--cut-r { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut))); }

/* ===== Ghost outline text (8.1.3) ===== */
.section--ghost { position: relative; overflow: hidden; }
.ghost {
  position: absolute;
  top: var(--sp-5);
  left: -2%;
  z-index: 0;
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--text-ghost);
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 2px var(--black-08);
  transform: rotate(var(--tilt));
  pointer-events: none;
  user-select: none;
}
.section--dark .ghost,
.section--green .ghost { -webkit-text-stroke-color: var(--cream-08); }
.section--cut .ghost { top: calc(var(--sp-5) + var(--cut)); }

/* ===== Why padel — เลขยักษ์ 01-03 ล้นขอบการ์ด (8.2) ===== */
.why-grid { display: grid; gap: var(--sp-4); padding-top: var(--sp-5); /* ที่ว่างให้เลขล้นขอบบน */ }
.why-card {
  position: relative;
  background: var(--bg-surface); /* ทึบเดิมตาม 8.8 — ห้ามฝืนเติม gradient */
  border: 1px solid var(--cream-15);
  border-left: 4px solid var(--color-green);
  border-radius: var(--radius);
  padding: 0 var(--sp-4) var(--sp-5);
  transition: transform var(--transition), border-color var(--transition);
}
.why-card:nth-child(2) { border-left-color: var(--accent); }
.why-card:nth-child(3) { border-left-color: var(--color-maroon); }

/* hover มีแรง (8.1.5): ยกการ์ด + shadow layer ดันสวนทิศ + ขอบ rust — CSS ล้วน ห้าม GSAP */
.why-card::before,
.price-card::before,
.testi-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: var(--radius);
  transform: translate(0, 0);
  transition: transform var(--transition);
}
.why-card::before  { background: var(--cream-15); }
.price-card::before { background: var(--green-deep); }
.testi-card::before { background: var(--black-15); }
.why-card:hover, .price-card:hover, .testi-card:hover {
  transform: translate(-4px, -4px);
  border-color: var(--accent);
}
.price-card--promo:hover { transform: rotate(-1.5deg) translate(-4px, -4px); }
.why-card:hover::before, .price-card:hover::before, .testi-card:hover::before { transform: translate(4px, 4px); }
.community-events .event { transition: transform var(--transition); }
.community-events .event:hover { transform: translate(-4px, -4px); }

.why-card__num-wrap {
  display: block;
  overflow: hidden;                    /* mask ให้เลขพุ่งขึ้น (8.4) */
  margin-top: calc(-1 * var(--sp-5)); /* เลขล้นขอบบนการ์ด */
  margin-bottom: var(--sp-2);
  line-height: 1;
}
.why-card__num {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--text-num);  /* เลข oversized */
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
}
.why-card__title-en {
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-base);
  color: var(--color-white);
  display: block;
  margin-bottom: var(--sp-1);
}
.why-card h3 {
  font-family: var(--font-thai);
  font-weight: 500;
  font-size: var(--text-lg);
  color: var(--color-cream);
  margin-bottom: var(--sp-2);
}
.why-card p { color: var(--cream-60); font-size: var(--text-sm); }

/* ===== Courts — สลับภาพ/ข้อความบนครีมแบนเดิม ===== */
.court-row {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
  margin-bottom: var(--sp-6);
}
.court-row:last-child { margin-bottom: 0; }
.court-row__text h3 {
  font-family: var(--font-thai);
  font-weight: 500;
  font-size: var(--text-xl);  /* 8.2 */
  margin-bottom: var(--sp-2);
}
.court-row__text p { max-width: 48ch; }

/* ===== Pricing — การ์ดดำบนพื้นเขียว gradient ===== */
.price-grid { display: grid; gap: var(--sp-4); }
.price-card {
  position: relative;
  isolation: isolate;            /* stacking context — ให้เงา layer ของปุ่มข้างในอยู่เหนือพื้นการ์ด */
  background: var(--color-black);
  border: 1px solid transparent; /* รองรับ hover ขอบ rust */
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform var(--transition), border-color var(--transition);
}
.price-card--promo {
  outline: 3px solid var(--accent);            /* 8.2: หนาขึ้นจาก 2px */
  transform: rotate(-1.5deg);                  /* 8.2 */
  box-shadow: 0 0 var(--sp-6) var(--rust-20);  /* glow static (8.8) — ห้าม animate */
}
.price-card__tag {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: var(--sp-4);
  background: var(--accent);
  color: var(--color-cream);
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-xs);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius);
  transform: rotate(-3deg); /* 8.1.6 */
}
.price-card__name {
  font-family: var(--font-headline);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--text-base);
  color: var(--color-white);
}
.price-card__amount {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--text-num);  /* 8.2: เลข oversized */
  letter-spacing: 0.02em;
  color: var(--color-cream);
  line-height: 1;
  text-shadow: var(--sp-1) var(--sp-1) 0 var(--accent); /* เงาเฉียง rust — static ห้าม animate */
}
.price-card__amount--promo { font-size: var(--text-2xl); } /* การ์ดกลางเป็นข้อความไทย ไม่ใช่ตัวเลข — คงสเกลอ่านง่าย */
.price-card__num { display: inline-block; } /* ให้ scale punch ได้ */
.price-card__amount small {
  font-family: var(--font-thai);
  font-weight: 300;
  font-size: var(--text-sm);
  color: var(--cream-60);
  letter-spacing: normal;
  text-shadow: none;
}
.price-card__desc { color: var(--cream-60); font-size: var(--text-sm); flex: 1; }
.price-note { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--cream-60); }

/* ===== Community — ครีมแบนเดิม + testimonial ===== */
.community-intro {
  max-width: 60ch;
  margin-bottom: var(--sp-6);
  font-size: var(--text-xl);  /* 8.2 */
  font-weight: 500;
}
.testi-grid { display: grid; gap: var(--sp-4); padding-top: var(--sp-3); /* ที่ให้เครื่องหมายคำพูดล้นขอบ */ }
.testi-card {
  position: relative;
  background: var(--cream-soft);
  border: 1px solid var(--black-15);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
}
/* เครื่องหมายคำพูดยักษ์ (8.2) */
.testi-card__quote {
  position: absolute;
  top: calc(-1 * var(--sp-3));
  left: var(--sp-3);
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--accent);
  pointer-events: none;
}
.testi-card p { margin-bottom: var(--sp-3); }
.testi-card footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.testi-card .avatar {
  width: var(--sp-5); height: var(--sp-5);
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-cream);
  display: grid;
  place-items: center;
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--text-xs);
  flex: none;
}
.testi-card:nth-child(2) .avatar { background: var(--accent); }
.testi-card:nth-child(3) .avatar { background: var(--color-maroon); }
.testi-card cite {
  font-style: normal;
  font-size: var(--text-sm);
}
/* name = ชื่อ (บรรทัดบน) / role = บทบาท (บรรทัดล่าง เล็ก จาง) — แยก class เพื่อรองรับ data-i18n ต่อชิ้น */
.testi-card__role { display: block; color: var(--black-60); font-size: var(--text-xs); }
.testi-note { margin-top: var(--sp-4); font-size: var(--text-xs); color: var(--black-60); }
.community-events {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--black-15);
  padding-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}
.community-events .event {
  display: grid;
  gap: var(--sp-1);
}
.community-events .event__day {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-xs);
  color: var(--accent);
}
.community-events .event h3 { font-family: var(--font-thai); font-weight: 500; }
.community-events .event p { font-size: var(--text-sm); color: var(--black-60); }

/* ===== Location — ดำ + grad-loc ===== */
.location__grid { display: grid; gap: var(--sp-5); }
.contact-list { list-style: none; display: grid; gap: var(--sp-4); }
.contact-list .label {
  font-family: var(--font-headline);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: var(--text-xs);
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-1);
}
.contact-list .value {
  color: var(--text-on-dark);
  font-size: var(--text-lg);  /* 8.2 */
  font-weight: 500;
}
/* ลิงก์โซเชียล + ไอคอน inline SVG (stroke: currentColor — สีตามตัวอักษร ไม่มีสีนอก token) */
.contact-list .soc {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  transition: color var(--transition);
}
.contact-list .soc:hover { color: var(--accent); }
.contact-list .soc svg { width: 1.25em; height: 1.25em; flex: none; }

/* ===== Final CTA — grad-cta เต็มจอ ขอบบนเฉียง (bg แยก layer เพื่อ wipe เฉียง) ===== */
.final-cta {
  position: relative;
  z-index: 2;
  overflow: hidden;
  color: var(--color-cream);
  text-align: center;
  margin-top: calc(-1 * var(--cut));
  padding-block: calc(var(--sp-7) + var(--cut)) var(--sp-7);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); /* ขอบบนเฉียง (8.2) */
}
.final-cta__bg {
  position: absolute;
  inset: 0;
  background: var(--grad-cta);  /* 8.8 จุด 4 — แสดงเต็มเสมอเมื่อไม่มี JS / ปิด motion */
}
.final-cta__content { position: relative; z-index: 2; }
.final-cta__title {
  font-size: var(--text-hero-xl);  /* 8.2 */
  letter-spacing: 0.14em;
  color: var(--color-cream);
  margin-bottom: var(--sp-3);
}
.final-cta p {
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: var(--sp-5);
}
.final-cta .btn {
  background: var(--color-black);
  color: var(--color-cream);
  padding: var(--sp-4) var(--sp-6);  /* 8.2: ปุ่มใหญ่ขึ้น */
}
.final-cta .btn:hover { background: var(--color-maroon); }

/* ===== Footer — ดำแบนเดิม โลโก้ขาว (ตั้งใจนิ่ง — จุดพักปิดหน้า ตาม 8.8) ===== */
.site-footer {
  background: var(--color-black);
  color: var(--text-on-dark);
  padding-block: var(--sp-5);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}
.site-footer__logo img { height: var(--logo-h-footer); width: auto; }
.site-footer small { color: var(--cream-40); font-size: var(--text-xs); }

/* ===== Desktop ===== */
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr; /* 8.9: คืนน้ำหนักให้ฝั่งภาพ (เดิม 1.1fr 0.9fr) */
    align-items: center;
    gap: var(--sp-6);
  }
  .hero__actions { flex-direction: row; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .court-row { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .court-row--flip .court-row__text { order: 2; }
  .court-row--flip .shadow-box { order: 1; }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
  .community-events { grid-template-columns: repeat(3, 1fr); }
  .location__grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  .section { padding-block: calc(var(--sp-7) + var(--sp-5)); }
  .section--cut { padding-block: calc(var(--sp-7) + var(--sp-5) + var(--cut)); }
  .final-cta { padding-block: calc(var(--sp-7) + var(--sp-5) + var(--cut)) calc(var(--sp-7) + var(--sp-5)); }

  /* ===== 8.9 Hero Fit (desktop ≥1024px) ===== */
  /* hero ทั้งก้อนจบใน viewport แรกพอดี (จอเตี้ยพิเศษปล่อยสูงกว่าจอได้ตาม min-height) */
  .hero {
    min-height: calc(100svh - var(--header-h));
    padding-block: var(--sp-5);
  }
  /* การ์ดภาพ height-driven — ภาพเป็น mass หลักของ hero, ratio 4:5 เดิม (crop/parallax ข้อ 3 ไม่ต้องคิดใหม่) */
  .hero__media .media {
    height: min(calc(100svh - var(--header-h) - (2 * var(--sp-5))), 660px);
    aspect-ratio: 4 / 5;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
  }
  /* shadow layer ต้อง match ขนาดการ์ดจริง — frame หดตามการ์ด (::before ใช้ inset: 0 ของ frame)
     ไม่งั้น frame กว้างเต็มคอลัมน์แล้วเงากว้างเกินภาพ */
  .hero__frame {
    width: fit-content;
    margin-inline: auto;
  }
}

/* ===== prefers-reduced-motion: ปิด motion ฝั่ง CSS ทั้งหมด (GSAP ปิดผ่าน matchMedia ใน main.js) ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }  /* marquee หยุดสนิท (8.4) */
  .btn, .btn::before,
  .why-card, .why-card::before,
  .price-card, .price-card::before,
  .testi-card, .testi-card::before,
  .community-events .event,
  .site-header,
  .site-header__logo img { transition: none; }
}

/* ===== 9.3 Typography โหมด EN — เนื้อความ (Kanit) → Inter / หัวข้อ Lexend Zetta คงเดิม ===== */
html[lang="en"] body { font-family: var(--font-body-en); }
/* override จุดที่ประกาศ --font-thai เจาะจง (grep ครบ) + selector เนื้อความที่ inherit */
html[lang="en"] .media__label,
html[lang="en"] .price-card__amount small,
html[lang="en"] .why-card h3,
html[lang="en"] .court-row__text h3,
html[lang="en"] .community-events .event h3,
html[lang="en"] .testi-card,
html[lang="en"] .contact-list .value { font-family: var(--font-body-en); }
/* weight mapping: Kanit 500 (h3 / intro / emphasis) → Inter 600 (ไฟล์ SemiBold โหลดไว้แล้ว) */
html[lang="en"] .why-card h3,
html[lang="en"] .court-row__text h3,
html[lang="en"] .community-events .event h3,
html[lang="en"] .community-intro,
html[lang="en"] .contact-list .value { font-weight: 600; }