/* components.css — ชิ้นส่วนหน้าจอ
 * ห้ามมีค่า hex / radius px / ชื่อฟอนต์ในไฟล์นี้ — อ้างจาก tokens.css เท่านั้น
 * breakpoint: sm 640px / md 768px / lg 1024px (DESIGN.md ข้อ 3)
 */

/* ================= Hero (DESIGN.md ข้อ 7) ================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;  /* สำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก svh (DESIGN.md ข้อ 5) */
  height: 100svh;
}

/* ---------- Navbar ---------- */

/* ระยะขอบซ้ายขวาเท่า .container (1.25rem → sm 2rem → md 2.5rem) ขอบซ้ายจึงตรงกันทั้งหน้า / ระยะบน 1.5rem → md 2rem */
.hero__nav {
  padding: 1.5rem var(--space-2) 0;
}

.hero__nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.hero__nav a {
  display: inline-block;
  color: var(--color-text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  transition: opacity var(--dur-hover) var(--ease-soft);
}

.hero__nav a:hover {
  opacity: 0.7;
}

/* ---------- หัวเรื่อง ---------- */

.hero__heading-wrap {
  overflow: hidden;
  width: 100%;
  margin-top: 1.5rem;
}

.hero__title {
  font-size: 14vw;
  white-space: nowrap;
  text-align: center;
}

/* ---------- แถบล่าง ---------- */

/* อยู่บนสุดของ Hero เสมอ: แถบล่าง (30) > gradient ขอบล่าง (20) > รูป (10) — DESIGN.md ข้อ 7 */
.hero__bottom {
  position: relative;
  z-index: 30;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-1);
  padding: 0 var(--space-2) 1.75rem;
}

.hero__tagline {
  max-width: 160px;
  color: var(--color-text);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  line-height: 1.375;
  font-size: var(--fs-micro);
}

/* ---------- พอร์ตเทรต ---------- */

/* ชั้นนอก: จัดกึ่งกลาง / ชั้นกลาง: FadeIn + แสงเรือง / ชั้นใน: Magnet
   แยกชั้นเพราะทั้งสามอย่างใช้ transform — ถ้าอยู่ชั้นเดียวกันจะเขียนทับกัน */
.hero__portrait {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 280px;
  transform: translate(-50%, -50%);
  pointer-events: none; /* ไม่บังการคลิกปุ่มที่อยู่ใต้รูปบนจอเล็ก */
}

.hero__portrait-fade {
  position: relative;
}

/* แสงเรืองหลังตัวคน กันเสื้อสีดำกลืนกับพื้น — z-index ต่ำกว่ารูป */
.hero__portrait-fade::before {
  content: "";
  position: absolute;
  inset: -10% -30%;
  z-index: -1;
  background: radial-gradient(ellipse 45% 55% at 50% 60%, rgba(215, 226, 234, 0.14) 0%, transparent 70%);
}

/* gradient ขอบล่าง: กลบส่วนล่างของรูปที่ชนแถบล่าง เฉพาะ 640–1023px (DESIGN.md ข้อ 7) */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    z-index: 20;
    background: linear-gradient(to top, var(--color-bg), transparent);
    pointer-events: none;
  }
}

/* จอแคบกว่า 360px (รวมมือถือทั่วไปที่ซูม 200%): ซ่อนข้อความมุมซ้ายล่าง เหลือปุ่ม Contact Me ชิดขวา
   พื้นที่เท่านี้ปุ่มสำคัญกว่าประโยคบรรยาย (DESIGN.md ข้อ 7) — ใช้ max-width เพราะเป็นข้อยกเว้นเฉพาะจอเล็กสุด */
@media (max-width: 359px) {
  .hero__tagline {
    display: none;
  }

  .hero__bottom .contact-button {
    margin-left: auto;
  }
}

/* ================= Magnet (DESIGN.md ข้อ 14) ================= */

[data-magnet] {
  transition: transform 0.6s ease-in-out; /* ตอนเคอร์เซอร์ออก */
}

/* will-change เฉพาะอุปกรณ์ที่ Magnet ทำงานจริง (มีเมาส์ + ไม่เปิด reduced-motion)
   มือถือ/จอสัมผัส Magnet ปิดอยู่ ไม่ต้องจองหน่วยความจำ layer ของรูปพอร์ตเทรต */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-magnet] {
    will-change: transform;
  }
}

[data-magnet].is-magnet-active {
  transition: transform 0.3s ease-out;    /* ตอนเคอร์เซอร์เข้า */
}

/* ================= ContactButton (DESIGN.md ข้อ 14) ================= */

.contact-button {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  background: var(--grad-cta);
  box-shadow: var(--shadow-cta);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 0.75rem 2rem;
  font-size: 0.875rem; /* ต่ำสุด 14px (DESIGN.md ข้อ 14) */
}

/* เส้นขาวรอบใน — ห้ามใช้ outline เพราะ outline สงวนไว้ให้ :focus-visible */
.contact-button::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid var(--color-white);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

/* ================= Marquee (DESIGN.md ข้อ 8) ================= */

.marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-6) var(--space-4);
}

/* แถวจัดกึ่งกลาง — ชุดรูป 3 รอบกว้างกว่าจอ จึงล้นออกเท่ากันทั้งซ้ายและขวา */
.marquee__row {
  display: flex;
  justify-content: center;
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-1);
}

.marquee__set {
  display: flex;
  gap: var(--space-1);
}

.marquee__tile {
  flex: 0 0 auto;
  width: 420px;
  height: 270px;
  border-radius: var(--radius-tile);
  object-fit: cover;
}

/* พื้นสีเข้มระหว่างรูปโหลด — ชื่อคลาสคงจากช่วงที่ยังเป็นกล่อง placeholder ตอนนี้รูปจริงครบ 12 รูปแล้ว */
.marquee__tile--placeholder {
  background-color: var(--color-placeholder);
}

/* จอง layer เฉพาะตอน Marquee อยู่ใกล้จอ — sections.js (Marquee) ใส่/ถอดคลาส marquee--active ด้วย IntersectionObserver
   แถวละ ~7764×270px ถ้าจองค้างไว้ตลอดจะกินหน่วยความจำทั้งหน้า / reduced-motion: JS ไม่ใส่คลาส จึงไม่จองเลย (DESIGN.md ข้อ 8) */
.marquee--active .marquee__track {
  will-change: transform;
}

/* ================= Breakpoints ================= */

@media (min-width: 640px) {
  .hero__heading-wrap {
    margin-top: 1rem;
  }

  .hero__title {
    font-size: 15vw;
  }

  .hero__nav {
    padding-inline: var(--space-3);
  }

  .hero__bottom {
    padding-inline: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .hero__tagline {
    max-width: 220px;
  }

  .hero__portrait {
    top: auto;
    bottom: 0;
    width: 300px; /* ย่อจาก 360px กันชนแถบล่าง — DESIGN.md ข้อ 7 */
    transform: translateX(-50%);
  }

  .contact-button {
    padding: 0.875rem 2.5rem;
    font-size: 0.875rem;
  }

  .marquee {
    padding-top: var(--space-7);
  }
}

@media (min-width: 768px) {
  /* เมนูและแถบล่างกว้างสุด 90rem เท่า .container (DESIGN.md ข้อ 4, 7) — สูตรเดียวกับ layout.css */
  .hero__nav {
    padding: var(--space-3) max(var(--space-4), calc((100% - 90rem) / 2 + var(--space-4))) 0;
  }

  .hero__nav a {
    font-size: 1.125rem;
  }

  .hero__heading-wrap {
    margin-top: -1.25rem;
  }

  .hero__title {
    font-size: 16vw;
  }

  .hero__bottom {
    padding: 0 max(var(--space-4), calc((100% - 90rem) / 2 + var(--space-4))) var(--space-4);
  }

  .hero__tagline {
    max-width: 260px;
  }

  .hero__portrait {
    width: 380px; /* ย่อจาก 440px กันชนแถบล่าง — DESIGN.md ข้อ 7 */
  }

  .contact-button {
    padding: 1rem 3rem;
    font-size: 1rem;
  }

  .marquee {
    padding-top: 10rem;
  }
}

@media (min-width: 1024px) {
  .hero__nav a {
    font-size: 1.4rem;
  }

  /* เพดาน 280px (= 17.5vw ที่จอ 1600px) — จอกว้างกว่านี้ตัวอักษรไม่โตต่อ (DESIGN.md ข้อ 7) */
  .hero__title {
    font-size: min(17.5vw, 280px);
  }

  .hero__portrait {
    width: 520px;
  }
}

/* ================= About (DESIGN.md ข้อ 9) ================= */

.about {
  position: relative;
  min-height: 100vh;  /* สำรองสำหรับเบราว์เซอร์ที่ไม่รู้จัก svh (DESIGN.md ข้อ 5) */
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* เนื้อหาอยู่เหนือไอคอนประดับเสมอ ถ้าชนกันข้อความยังอ่านได้ */
.about__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about__title {
  font-size: var(--fs-display);
}

.about__text {
  max-width: 560px;
  margin-top: var(--space-4);
  color: var(--color-text);
  font-weight: 500;
  line-height: 1.625;
  font-size: var(--fs-lead);
}

/* เฉพาะระยะห่าง — หน้าตาปุ่มมาจาก .contact-button */
.about__cta {
  margin-top: var(--space-5);
}

/* ---------- ไอคอนประดับ 4 มุม (รูป WebP พื้นใส 440×440 — DESIGN.md ข้อ 9) ---------- */

.about__deco {
  position: absolute;
  aspect-ratio: 1;
}

.about__deco.fade-in {
  transition-duration: 0.9s; /* ไอคอนประดับใช้ 0.9s ไม่ใช่ 0.7s ตามค่าเริ่มต้นของ FadeIn */
}

/* ตำแหน่งแนวนอนอ้างขอบกล่องเนื้อหา (อยู่ในกรอบ 90rem เดียวกับเนื้อหา) ไม่ใช่ขอบ section
   --deco-x = ค่า % เดิมในตาราง DESIGN.md ข้อ 9 คิดจากความกว้างกล่องเนื้อหา / แนวตั้ง (top/bottom %) ยังอ้างความสูง section */
.about__deco--browser,
.about__deco--database {
  left: calc(var(--container-pad) + (100% - 2 * var(--container-pad)) * var(--deco-x));
}

.about__deco--bot,
.about__deco--mobile {
  right: calc(var(--container-pad) + (100% - 2 * var(--container-pad)) * var(--deco-x));
}

.about__deco--browser {
  top: 4%;
  --deco-x: 0.01;
  width: 120px;
}

.about__deco--bot {
  top: 4%;
  --deco-x: 0.01;
  width: 120px;
}

/* 2 อันล่างซ่อนบนจอต่ำกว่า sm เพราะชนข้อความ */
.about__deco--database {
  display: none;
  bottom: 8%;
  --deco-x: 0.03;
  width: 100px;
}

.about__deco--mobile {
  display: none;
  bottom: 8%;
  --deco-x: 0.03;
  width: 130px;
}

/* ================= Services (DESIGN.md ข้อ 10) ================= */

.services {
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.services__title {
  text-align: center;
  font-size: var(--fs-display);
  margin-bottom: var(--space-5);
}

.services__list {
  max-width: 64rem;
  margin-inline: auto;
  list-style: none;
}

/* มือถือ: เลขอยู่บรรทัดบน ชื่อ + คำอธิบายอยู่บรรทัดล่าง */
.service-item {
  padding-block: var(--space-3);
}

.service-item + .service-item {
  border-top: 1px solid var(--color-rule-dark);
}

.service-item__number {
  display: block;
  flex-shrink: 0;
  font-weight: 900;
  font-size: var(--fs-number);
  line-height: 1;
  color: var(--color-text-dark);
}

.service-item__body {
  margin-top: var(--space-1);
}

.service-item__title {
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--fs-item);
}

.service-item__desc {
  max-width: 42rem;
  margin-top: var(--space-1);
  font-weight: 300;
  line-height: 1.625;
  font-size: var(--fs-body);
  opacity: 0.6;
}

/* ================= About + Services: Breakpoints ================= */

@media (min-width: 640px) {
  .about__text {
    margin-top: 3.5rem;
  }

  .about__cta {
    margin-top: 5rem;
  }

  .about__deco--browser {
    --deco-x: 0.02;
    width: 160px;
  }

  .about__deco--bot {
    --deco-x: 0.02;
    width: 160px;
  }

  .about__deco--database {
    display: block;
    --deco-x: 0.06;
    width: 140px;
  }

  .about__deco--mobile {
    display: block;
    --deco-x: 0.06;
    width: 170px;
  }

  .services__title {
    margin-bottom: 5rem;
  }

  /* sm ขึ้นไป: เลขซ้าย / ชื่อ + คำอธิบายขวา */
  .service-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .service-item__body {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .about__text {
    margin-top: var(--space-5);
  }

  .about__cta {
    margin-top: var(--space-6);
  }

  .about__deco--browser {
    --deco-x: 0.04;
    width: 210px;
  }

  .about__deco--bot {
    --deco-x: 0.04;
    width: 210px;
  }

  .about__deco--database {
    --deco-x: 0.10;
    width: 180px;
  }

  .about__deco--mobile {
    --deco-x: 0.10;
    width: 220px;
  }

  .services__title {
    margin-bottom: 7rem;
  }

  .service-item {
    padding-block: 3rem;
  }
}

/* 1024–1279px: ไอคอนบน 2 อันทับหัวเรื่อง → ย่อลง 25% และดันเข้ามุม (DESIGN.md ข้อ 9) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .about__deco--browser {
    top: 2%;
    --deco-x: 0.01;
    width: 157.5px;
  }

  .about__deco--bot {
    top: 2%;
    --deco-x: 0.01;
    width: 157.5px;
  }
}

/* ไอคอนที่ยังทับหัวเรื่องหรือย่อหน้า — main.js (AboutDecoGuard) เป็นคนใส่คลาสนี้ */
.about__deco.about__deco--hidden {
  display: none;
}

/* ================= Projects (DESIGN.md ข้อ 11) ================= */

/* ดันขึ้นทับขอบล่างของ Services */
.projects {
  position: relative;
  z-index: 10;
  margin-top: -2.5rem;
  background-color: var(--color-bg);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.projects__title {
  text-align: center;
  font-size: var(--fs-display);
  margin-bottom: var(--space-5);
}

/* ---------- การ์ดซ้อน sticky ---------- */

/* กล่องครอบการ์ด — การ์ดติดอยู่ในกล่องนี้ แล้วใบถัดไปเลื่อนขึ้นมาทับ
   min-height (ไม่ใช่ height คงที่) + กล่องว่างท้ายกล่องสูง 35vh เพื่อให้มีระยะค้างเสมอแม้การ์ดสูง
   ใช้กล่องว่างแทน padding-bottom เพราะ sticky ค้างได้แค่ในพื้นที่เนื้อหา ไม่นับ padding */
.project-slot {
  min-height: 85vh;
}

.project-slot::after {
  content: "";
  display: block;
  height: 35vh;
}

.project-card {
  position: sticky;
  top: calc(6rem + var(--card-index, 0) * 28px);
  padding: 1rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-card);
  background-color: var(--color-bg);
  transform-origin: top center;
  will-change: transform;
}

/* แถวบน มือถือ: เลขบรรทัดบน / หมวด + ชื่อ + คำอธิบายเต็มความกว้าง / ปุ่ม Live Demo ใต้คำอธิบาย — แบบเดียวกับ Services (DESIGN.md ข้อ 10, 11) */
.project-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.project-card__number {
  font-weight: 900;
  font-size: var(--fs-number);
  line-height: 1;
  color: var(--color-text);
}

.project-card__info {
  align-self: stretch;
  min-width: 0;
}

.project-card__category {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-body);
  opacity: 0.6;
}

.project-card__title {
  font-weight: 500;
  text-transform: uppercase;
  font-size: var(--fs-item);
}

.project-card__desc {
  margin-top: var(--space-1);
  font-weight: 300;
  line-height: 1.625;
  font-size: var(--fs-body);
  opacity: 0.6;
}

.project-card__live {
  margin-left: auto;
}

/* ---------- แถวล่าง: รูปผลงาน (WebP 3 รูปต่อการ์ด) ---------- */

/* มือถือ: แสดงเฉพาะรูปขวา — ซ่อนคอลัมน์ซ้าย (รูปซ้ายบน/ซ้ายล่าง) เพราะกล่องเตี้ยจนดูไม่ออกว่าเป็นหน้าอะไร (DESIGN.md ข้อ 11)
   รูปมี loading="lazy" — รูปที่ display: none เบราว์เซอร์ไม่โหลด */
.project-card__media {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.project-card__column {
  display: none;
  gap: var(--space-1);
}

.project-card__image {
  width: 100%;
  border-radius: var(--radius-box); /* มุมด้านใน ≈ มุมการ์ด − ระยะขอบ — ค่าเท่าการ์ดทำให้กล่องเตี้ยเป็นแคปซูล (DESIGN.md ข้อ 11) */
  background-color: var(--color-placeholder); /* พื้นสีเข้มระหว่างรูปโหลด */
  object-fit: cover;
}

/* มือถือ: รูปขวาสูง 220px (DESIGN.md ข้อ 11) */
.project-card__image--tall {
  height: 220px;
}

/* ================= LiveProjectButton / ปุ่มโปร่ง (DESIGN.md ข้อ 14) ================= */

/* .ghost-button ใช้หน้าตาเดียวกัน: ปุ่ม "สอบถาม" ใน Price และปุ่มช่องทางติดต่อ */
.live-project-button,
.ghost-button {
  display: inline-block;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 0.75rem 2rem;
  font-size: 0.875rem; /* ต่ำสุด 14px (DESIGN.md ข้อ 14) */
  transition: background-color var(--dur-hover) var(--ease-soft);
}

.live-project-button:hover,
.ghost-button:hover {
  background-color: rgba(215, 226, 234, 0.1);
}

/* ================= Projects: Breakpoints ================= */

@media (min-width: 640px) {
  .projects {
    margin-top: -3rem;
  }

  .projects__title {
    margin-bottom: 5rem;
  }

  .project-card {
    padding: 1.5rem;
  }

  /* sm ขึ้นไป: แถวบนเป็นแนวนอน เลข / หมวด + ชื่อ + คำอธิบาย / ปุ่ม Live Demo ชิดขวา */
  .project-card__top {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
  }

  .project-card__info {
    flex: 1 1 12rem;
    align-self: auto;
  }

  .project-card__column {
    display: grid;
  }

  /* sm ขึ้นไป: grid 2 คอลัมน์ ซ้าย 40% (2 รูปซ้อน) / ขวา 60% (1 รูปสูงเต็ม) */
  .project-card__media {
    grid-template-columns: 2fr 3fr;
  }

  /* อิงความสูงจอ (vh) — จอเตี้ยหดเอง การ์ดจึงพอดีจอบนโน้ตบุ๊ก / เพดาน 230 และ 340px คงไว้สำหรับจอสูง */
  .project-card__image--top {
    height: clamp(110px, 14vh, 230px);
  }

  .project-card__image--bottom {
    height: clamp(140px, 20vh, 340px);
  }

  /* ยืดสูงเต็มเท่าคอลัมน์ซ้าย — height: 0 กันไม่ให้สัดส่วนรูป (จาก width/height ใน HTML) ดันความสูงแถว แล้ว min-height: 100% ยืดเต็มแถว (DESIGN.md ข้อ 11) */
  .project-card__image--tall {
    height: 0;
    min-height: 100%;
  }

  .live-project-button,
  .ghost-button {
    padding: 0.875rem 2.5rem;
    font-size: 0.875rem;
  }
}

@media (min-width: 768px) {
  .projects {
    margin-top: -3.5rem;
  }

  .projects__title {
    margin-bottom: 7rem;
  }

  .project-card {
    top: calc(8rem + var(--card-index, 0) * 28px);
    padding: var(--space-3);
  }

  .live-project-button,
  .ghost-button {
    font-size: 1rem;
  }
}

/* การ์ดแบบเรียงต่อกันธรรมดา (ไม่ติด sticky ไม่ย่อ) — ใช้ 2 กรณี:
   1) มีการ์ดใบใดสูงเกินจอ → ProjectStack ใส่ .project-slot--static ให้ทั้ง 3 ใบพร้อมกัน
   2) reduced-motion → ทุกใบ */
.project-slot--static {
  min-height: 0;
}

.project-slot--static::after {
  display: none;
}

.project-slot--static:not(:last-child) {
  margin-bottom: var(--space-3);
}

.project-slot--static .project-card {
  position: static;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .project-slot {
    min-height: 0;
  }

  .project-slot::after {
    display: none;
  }

  .project-slot:not(:last-child) {
    margin-bottom: var(--space-3);
  }

  .project-card {
    position: static;
    will-change: auto;
  }
}

/* ================= Price (DESIGN.md ข้อ 12) ================= */

.price__title {
  text-align: center;
  font-size: var(--fs-display);
  margin-bottom: var(--space-5);
}

/* มือถือ: คอลัมน์เดียว / md ขึ้นไป: 3 ใบเรียงแนวนอน */
.price__cards {
  display: grid;
  gap: var(--space-2);
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  border: 1px solid var(--color-rule-light);
  border-radius: var(--radius-box);
}

/* ใบกลางเป็นใบเน้น: เส้นขอบเต็มความเข้ม (การยกขึ้น 12px อยู่ใน breakpoint md) */
.price-card--featured {
  border-color: var(--color-border);
}

.price-card__name {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-body);
}

.price-card__from {
  margin-top: var(--space-2);
  font-size: var(--fs-body);
  opacity: 0.6;
}

.price-card__amount {
  font-weight: 900;
  font-size: var(--fs-item);
  line-height: 1.2;
}

.price-card__list {
  margin-block: var(--space-2) var(--space-3);
  padding-left: var(--space-2);
  font-weight: 300;
  line-height: 1.625;
  font-size: var(--fs-body);
  opacity: 0.7;
}

/* ปุ่มชิดล่างการ์ดเสมอ ให้ 3 ใบปุ่มอยู่แนวเดียวกัน */
.price-card .ghost-button {
  margin-top: auto;
  align-self: flex-start;
}

/* แถบงานแก้ไข/ปรับปรุง — แยกเป็นแถบเล็ก ไม่ใช่การ์ดใหญ่ (ห้ามตัดออก) */
.price__small-jobs {
  margin-top: var(--space-5);
  padding: 1.5rem;
  border-top: 1px solid var(--color-rule-light);
  text-align: center;
  line-height: 1.625;
  font-size: var(--fs-body);
}

/* แถวปัจจัยที่มีผลกับราคา */
.price__factors {
  text-align: center;
  font-size: var(--fs-micro);
  opacity: 0.6;
}

/* ================= Contact (DESIGN.md ข้อ 13) ================= */

.contact {
  text-align: center;
}

.contact__title {
  font-size: var(--fs-display);
}

.contact__text {
  max-width: 560px;
  margin: var(--space-4) auto 0;
  font-weight: 300;
  line-height: 1.625;
  font-size: var(--fs-lead);
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-5);
  list-style: none;
}

/* ล้างหน้าตาปุ่มของเบราว์เซอร์ — หน้าตาปุ่มมาจาก .ghost-button */
.contact-link {
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* ================= Footer (DESIGN.md ข้อ 13) ================= */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-rule-light);
  font-size: var(--fs-body);
}

.site-footer a {
  transition: opacity var(--dur-hover) var(--ease-soft);
}

.site-footer a:hover {
  opacity: 0.7;
}

/* ================= Price + Contact: Breakpoints ================= */

@media (min-width: 640px) {
  .price__title {
    margin-bottom: 5rem;
  }
}

@media (min-width: 768px) {
  .price__title {
    margin-bottom: 7rem;
  }

  .price__cards {
    grid-template-columns: repeat(3, 1fr);
  }

  /* ยกใบกลางขึ้น 12px — ใช้ translate แยกจาก transform เพราะ FadeIn ใช้ transform ของการ์ดใบนี้อยู่ */
  .price-card--featured {
    translate: 0 -12px;
  }
}

/* ================= Accessibility (เฟส 5A) ================= */

/* ลิงก์ข้ามไปเนื้อหาหลัก — อยู่นอกจอจนกว่าจะได้ focus */
.skip-link {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-text);
  color: var(--color-bg);
  font-weight: 500;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ปลายทางของลิงก์ข้าม (main มี tabindex="-1") — ไม่ต้องขึ้นกรอบ focus รอบเนื้อหาทั้งก้อน */
#main:focus {
  outline: none;
}

/* ขยายพื้นที่กดให้ถึง 44×44px โดยหน้าตาไม่เปลี่ยน (กล่องใส ๆ รอบลิงก์ที่รับการคลิกแทน)
   ลิงก์เมนู / ลิงก์ Footer / ปุ่ม Contact Me บนมือถือ (สูง 42px) */
.hero__nav a,
.site-footer a {
  position: relative;
}

.hero__nav a::before,
.site-footer a::before,
.contact-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}