/* ============================================================
   style.css — index.html only.
   Shared tokens/header/footer/buttons live in shared.css.
   ============================================================ */

@keyframes gentle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

.hero {
  position: relative;
}

.hero-inner {
  display: grid;
  grid-template-columns: 53fr 47fr;
  min-height: 620px;
}

.hero-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-col-copy {
  background: linear-gradient(90deg, #f8c3db 0%, #fdeef5 100%);
  padding: 112px clamp(20px, 2vw, 40px);
  justify-content: flex-start;
}

.hero-col-visual {
  background: linear-gradient(90deg, #fdeef5 0%, #f5aece 100%);
  padding: clamp(32px, 6vh, 64px) clamp(20px, 5vw, 56px) 72px;
  align-items: flex-start;
}

.hero-wing {
  position: absolute;
  bottom: 0;
  right: 0;
  /* ขนาดใหญ่ตามต้นฉบับเดิม ใช้เฉพาะจอ PC (>960px) เท่านั้น — ที่ขนาดนี้
     wing จะทับซ้อนกับ .hero-preview-bg บ้าง (มี z-index ด้านล่างกันไม่ให้
     บัง bubble) ส่วนจอเล็กกว่า (มือถือ/แท็บเล็ต) ลดขนาดลงใน media query
     ด้านล่างแทน เพราะพื้นที่แคบกว่ามากจนไม่มีที่ให้ wing ใหญ่ขนาดนี้ได้โดย
     ไม่ซ้อนกับ bubble เต็มๆ (ค่าที่ปรับให้เล็กลงนั้นวัดแล้วว่าเป็นขนาดใหญ่
     ที่สุดเท่าที่ยังไม่ซ้อนกับ bubble ในช่วงจอนั้นๆ) */
  width: 120%;
  max-width: 640px;
  height: auto;
  pointer-events: none;
  /* ต้องอยู่ต่ำกว่า .hero-visual (z-index:1 ด้านล่าง) เสมอทุก breakpoint —
     ห้ามปรับค่านี้ขึ้นไปเท่ากับหรือมากกว่า 1 เด็ดขาด เพราะ .hero-preview-bg
     (bubble พื้นหลังของ preview slide) อยู่ใต้ .hero-visual และต้องซ้อนทับ
     อยู่บน .hero-wing เสมอ ไม่ให้ปีกมาบังลูกบอลพื้นหลังได้ */
  z-index: 0;
}

.hero-copy {
  text-align: left;
  position: relative;
  max-width: 480px;
  width: 100%;
  margin: auto;
}

.hero-copy .eyebrow {
  margin: 0 0 20px;
  font-size: clamp(0.875rem, 1vw, 1rem);
  font-weight: 600;
  color: var(--dark-pink);
}

.hero h1,
.section-heading h2 {
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(4.5rem, 6vw, 5.25rem);
  font-weight: 800;
  color: #171717;
  letter-spacing: 0.02em;
}

.hero-subtitle {
  max-width: 450px;
  margin: 0 0 32px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;
}

.hero-category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 40px;
  color: var(--dark-pink);
  font-size: clamp(0.9375rem, 1vw, 1rem);
  font-weight: 500;
}

.hero-category img {
  width: 16px;
  height: 16px;
}

.hero-category-tail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.pill {
  border-radius: 999px;
  background: #ffffff;
  color: var(--dark-pink);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  width: fit-content;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.hero-visual {
  position: relative;
  /* z-index:1 นี้คือสิ่งที่ทำให้ .hero-preview-bg (bubble พื้นหลัง ลูกอยู่
     ข้างใน) วาดทับอยู่บน .hero-wing (z-index:0) เสมอทุก breakpoint — ห้าม
     ลบหรือลดค่านี้ต่ำกว่า .hero-wing เด็ดขาด ไม่งั้นปีกจะบัง bubble */
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(8px, 3vh, 28px);
}

.hero-media {
  position: relative;
  width: clamp(220px, 34vw, 320px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.hero-preview-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* z-index:0 นี้เทียบกับพี่น้องใน .hero-media เท่านั้น (อยู่ล่างสุดในนั้น
     ให้ hero-preview-image/hero-card วาดทับได้) — ไม่ได้แข่งกับ .hero-wing
     โดยตรง เพราะทั้งกล่องนี้ถูกยกไปอยู่บน .hero-wing แล้วผ่าน .hero-visual
     (z-index:1) ที่เป็นแม่ ดู comment ที่ .hero-wing / .hero-visual */
  z-index: 0;
  pointer-events: none;
}

.hero-preview-image {
  position: relative;
  z-index: 1;
  max-width: 56%;
  max-height: 56%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 300ms ease;
}

.hero-preview-image.is-fading {
  opacity: 0;
}

.hero-card {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 24px;
  width: min(90vw, 400px);
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(229, 106, 156, 0.16);
  padding: 14px 20px;
  text-align: left;
}

.hero-card-label {
  margin: 0 0 4px;
  color: var(--dark-pink);
  font-size: 12px;
  font-weight: 600;
}

.hero-card-title {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section {
  padding: 88px 0;
}

.section.alt {
  background: #ffffff;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.section-heading h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.section-heading p {
  max-width: 470px;
  margin: 12px 0 0;
  color: var(--muted);
  text-wrap: balance;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

/* Portfolio (LottieFiles/IconScout) มีแค่ 3 การ์ดเสมอ ใช้ grid 4 คอลัมน์ของ
   .grid ทั่วไปแล้วเหลือช่องว่างคอลัมน์ที่ 4 ดูไม่สมดุล ให้ใช้ 3 คอลัมน์แทน
   เพื่อเติมเต็มแถวพอดี (breakpoint tablet/mobile ยังลดคอลัมน์ตาม .grid ปกติ
   เพราะ media query ของ .grid มี specificity เท่ากันแต่มาทีหลังในไฟล์) */
.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 12px 34px rgba(229, 106, 156, 0.08);
  overflow: hidden;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(229, 106, 156, 0.55);
  box-shadow: var(--shadow-hover);
}

.card-media {
  flex-shrink: 0;
  aspect-ratio: 5 / 7;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, #fff2f7, #ffffff);
  padding: 10px;
}

.card-media span {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--dark-pink);
  font-weight: 700;
  text-align: center;
  transition: transform 220ms ease;
}

.card:hover .card-media span {
  transform: scale(1.08);
}

.tone-1 .card-media {
  background: linear-gradient(135deg, var(--tone-1), #ffffff);
}
.tone-2 .card-media {
  background: linear-gradient(135deg, var(--tone-2), #ffffff);
}
.tone-3 .card-media {
  background: linear-gradient(135deg, var(--tone-3), #ffffff);
}
.tone-4 .card-media {
  background: linear-gradient(135deg, var(--tone-4), #ffffff);
}
.tone-5 .card-media {
  background: linear-gradient(135deg, var(--tone-5), #ffffff);
}
.tone-6 .card-media {
  background: linear-gradient(135deg, var(--tone-6), #ffffff);
}
.tone-7 .card-media {
  background: linear-gradient(135deg, var(--tone-7), #ffffff);
}
.tone-8 .card-media {
  background: linear-gradient(135deg, var(--tone-8), #ffffff);
}
.tone-9 .card-media {
  background: linear-gradient(135deg, var(--tone-9), #ffffff);
}

.card-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  align-content: end;
  gap: 16px;
  padding: 18px;
  border-top: 1px solid var(--border);
}

.card-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  text-wrap: balance;
}

.card-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff8fb;
  color: var(--dark-pink);
  font-size: 1.25rem;
  transition: transform 220ms ease;
}

.arrow img {
  width: 14px;
  height: auto;
}

.card:hover .arrow {
  transform: translateX(3px);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.filter-button {
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.filter-button:hover,
.filter-button.is-active {
  border-color: var(--dark-pink);
  background: #fff2f7;
  color: var(--dark-pink);
}

.line-group {
  scroll-margin-top: 96px;
  margin-top: 54px;
}

.line-group:first-of-type {
  margin-top: 0;
}

.line-group-title {
  margin: 0 0 18px;
  font-size: 1.45rem;
  color: var(--dark-pink);
}

.work-card {
  position: relative;
  padding: 24px;
}

/* มีแค่การ์ดเดียว (Drinks & Beverages) ที่มี .arrow จริง การ์ดอื่นไม่มี —
   padding-right เดิมที่กันพื้นที่ให้ลูกศรถูกใส่ไว้กับ .work-card ทุกใบเลย
   ดันพรีวิว lottie ของการ์ดที่ไม่มีลูกศรเยื้องซ้าย ไม่ centered เลยย้ายมา
   ใส่เฉพาะการ์ดที่มีลูกศรจริงแทน */
.work-card:has(.arrow) {
  padding-right: 64px;
}

.work-card h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  text-wrap: balance;
}

.work-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.work-card .arrow {
  position: absolute;
  bottom: 24px;
  right: 24px;
}

/* ============ REAL IMAGE PREVIEWS (แทน placeholder) ============ */
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 220ms ease;
}

.card:hover .card-media img {
  transform: scale(1.06);
}

/* ============ LOTTIE PLAYER (แอนิเมชันขยับได้จริง) ============ */
.lottie-player {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, #fff2f7, #ffffff);
}

.lottie-player svg {
  width: 100% !important;
  height: 100% !important;
}

/* ============ SOCIAL ICON ROW (โลโก้เปล่า + hover ไล่เฉดสี) ============ */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.social-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  transition:
    transform 200ms ease,
    filter 200ms ease;
}

.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(229, 106, 156, 0.18);
}

.social-icon:hover {
  transform: translateY(-5px) scale(1.06);
}

.social-icon:hover img {
  box-shadow: var(--shadow-hover);
}

.social-card-title {
  margin: -12px 0 20px;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--dark-pink);
}

.social-card {
  border: 1px solid #f0b8d3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #ffffff 0%, #fdeef5 100%);
  box-shadow: var(--shadow);
  padding: clamp(24px, 5vw, 40px);
}

.portfolio-source-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.portfolio-source-link h3 {
  margin: 0;
  color: var(--dark-pink);
  font-size: 1.1rem;
}

.portfolio-source-link img {
  width: 26px;
  height: 26px;
  transition: transform 200ms ease;
}

.portfolio-source-link:hover img {
  transform: translateX(3px);
}

@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-col-copy {
    padding: 56px clamp(24px, 6vw, 80px) 40px;
  }

  .hero-col-visual {
    min-height: 500px;
    padding: 40px clamp(20px, 5vw, 56px) 56px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============ TABLET ONLY (iPad portrait ~768px – ช่วงก่อน desktop
   กลับมาที่ 961px) แยกจาก @media max-width:720px ของมือถือโดยเจตนา
   เพื่อไม่ให้กระทบ mobile ============ */
@media (min-width: 721px) and (max-width: 960px) {
  /* ลดขนาด wing ลงจากค่า PC (120%/640px) — วัดแบบละเอียดจากพิกเซลจริงของ
     ภาพ (ไม่ใช่กะจาก bounding box ซึ่งอนุรักษ์นิยมเกินไป) แล้วพบว่าใหญ่ได้
     ถึงขนาดนี้โดยยังไม่มีพิกเซลทึบของ wing แตะเข้าไปใน .hero-preview-bg
     เลยตลอดช่วง 721–960px (จุดแคบสุดอยู่ที่ 721px เอง มีระยะกันชนเหลือ
     ~10px ก่อนจะเริ่มซ้อนจริงที่ราว 570px) ห้ามขยายใหญ่กว่านี้โดยไม่ตรวจ
     ระยะห่างจาก bubble ใหม่ด้วยวิธีเดียวกัน */
  .hero-wing {
    width: 110%;
    max-width: 540px;
  }

  /* Hero ถูกเรียงเป็น 1 คอลัมน์ (ซ้อนบน-ล่าง) ในช่วงนี้ รอยต่อระหว่าง
     hero-col-copy (สีพื้นเรียบ) กับ hero-col-visual (ไล่เฉดซ้าย-ขวา) เลย
     กลายเป็นเส้นแนวนอน — gradient ซ้าย-ขวาเดิมจะชนกันสีตรงกันแค่ที่ขอบซ้าย
     สุดเท่านั้น ฝั่งขวาของรอยต่อยังเห็นสีตัดกันอยู่ เปลี่ยนทิศ gradient เป็น
     บน-ล่างเฉพาะช่วงนี้ ให้ขอบบนที่ชนกับ hero-col-copy เป็นสีเดียวกันตลอด
     ทั้งแนว แล้วค่อยไล่เข้มลงด้านล่างแทน */
  .hero-col-copy {
    background: linear-gradient(180deg, #f8c3db 0%, #fdeef5 100%);
  }

  .hero-col-visual {
    background: linear-gradient(180deg, #fdeef5 0%, #f5aece 100%);
  }

  /* .section-heading ถูกสลับเป็นแนวตั้ง (column) ในช่วงนี้แล้ว (จาก media
     query ด้านบน) แต่ p ยังใช้ max-width: 470px ที่ตั้งไว้สำหรับตอนอยู่
     แถวเดียวกับ h2 (จอ desktop) พอมาอยู่ใต้ h2 เต็มความกว้าง container
     แล้ว 470px เลยแคบเกินจำเป็น ทำให้ตัดบรรทัดทั้งที่มีที่ว่างเหลือ */
  .section-heading p {
    max-width: 100%;
  }

  /* กล่องนอกเต็มคอลัมน์แล้ว แต่ตัวเนื้อหาข้างใน .hero-copy ยังมี
     max-width: 480px (ค่าตั้งไว้สำหรับ desktop ที่แบ่งพื้นที่ครึ่งจอ) เหลือ
     พื้นที่ว่างด้านขวาราว 227px โดยไม่จำเป็น ขยายให้เต็ม padding ที่มีแทน */
  .hero-copy {
    max-width: 100%;
    text-align: center;
  }

  /* text-align:center จัดกลางได้แค่ตัวอักษร/inline — แถวที่เป็น flex
     (category, ปุ่ม) กับ subtitle ที่มี max-width ของตัวเองต้องสั่ง center
     แยกต่างหาก ไม่งั้นจะยังค้างชิดซ้ายอยู่ */
  .hero-subtitle {
    max-width: 100%;
  }

  .hero-category,
  .hero-actions {
    justify-content: center;
  }

  /* ขอกลับมา center ทั้ง 3 ชั้น (bg วงกลม, รูปสติกเกอร์ preview, hero-card)
     ให้อยู่จุดกึ่งกลางเดียวกันเป๊ะ เลยตัด transform เลื่อนซ้ายที่เคยใส่ไว้
     ออก — .hero-media เองก็ center อยู่แล้ว (align-items:center ด้านบน)
     ส่วน hero-card center อยู่แล้วโดยธรรมชาติเพราะ position ยึดกับกล่อง
     hero-media ทำให้ตอนนี้ทั้ง 3 ชั้นซ้อนกันตรงจุดเดียวกันพอดี */
  .hero-preview-bg,
  .hero-preview-image {
    transform: none;
  }
}

@media (max-width: 720px) {
  /* ลดขนาด wing ลงจากค่า PC (120%/640px) — วัดแบบละเอียดจากพิกเซลจริงของ
     ภาพ (ไม่ใช่กะจาก bounding box ซึ่งอนุรักษ์นิยมเกินไป) แล้วพบว่าใหญ่ได้
     ถึงขนาดนี้โดยยังไม่มีพิกเซลทึบของ wing แตะเข้าไปใน .hero-preview-bg
     เลยตลอดช่วง 320–720px (จุดแคบสุดอยู่แถว 500–550px เพราะรัศมี bubble
     คงที่ 110px ตลอดช่วงนี้ มีระยะกันชนเหลือ ~25px ก่อนจะเริ่มซ้อนจริงที่
     ราว 447px) ห้ามขยายใหญ่กว่านี้โดยไม่ตรวจระยะห่างจาก bubble ใหม่ทั้งช่วง
     ด้วยวิธีเดียวกัน ไม่ใช่แค่บางจุด */
  .hero-wing {
    width: 84%;
    max-width: 420px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 13vw, 3.6rem);
  }

  .hero-col-copy {
    background: linear-gradient(180deg, #f8c3db 0%, #fdeef5 100%);
  }

  .hero-col-visual {
    min-height: 460px;
    background: linear-gradient(180deg, #fdeef5 0%, #f5aece 100%);
  }

  /* เดิมมี transform: translateX(-6%) เลื่อนวงกลมพื้นหลัง + สติกเกอร์
     ตัวอย่างไปทางซ้าย ทำให้ไม่ตรงกึ่งกลางเดียวกับ hero-card ที่ยึด
     position กับ .hero-media (ซึ่ง center อยู่แล้วจาก align-items:center
     ด้านบน) — ตัดออกให้ทั้ง 3 ชั้นอยู่จุดกึ่งกลางเดียวกัน เหมือนที่แก้ไว้
     แล้วในช่วง tablet (721–960px) */
  .hero-preview-bg,
  .hero-preview-image {
    transform: none;
  }

  .section {
    padding: 68px 0;
  }

  .section-heading h2 {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card-body {
    padding: 16px;
  }
}