/* home.css — เลย์เอาต์เฉพาะหน้าแรก
   ชิ้นส่วนทั่วไปอยู่ใน theme2027.css — ถ้าใช้มากกว่า 1 หน้าให้ย้ายไปไว้ที่นั่น */

/* ===== index (หน้าแรก) ===== */
.mock-banner { margin: 0 0 var(--sp-5); }
.hero { display: grid; gap: var(--sp-8); align-items: center; padding-top: var(--sp-2); }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hero__title { margin: var(--sp-4) 0 var(--sp-3); color: var(--ink); }
.hero__lead { font-size: 1.125rem; max-width: 32ch; }
.hero__collage { position: relative; min-height: 300px; max-width: 440px; width: 100%; margin-inline: auto; }
.hero__collage > * { position: absolute; }
@media (max-width: 599px) { .hero { gap: var(--sp-5); } .hero__collage { min-height: 230px; max-width: 330px; } .hero__collage .hello-tag { transform: rotate(-6deg) scale(.85); transform-origin: left center; } .hero__collage .bandaid { left: auto; right: 30%; bottom: -6%; } .hero__collage .bubble { bottom: 0; } }
.hero__collage .polaroid { width: 52%; right: 4%; top: 0; transform: rotate(4deg); }
.hero__collage .hello-tag { left: 0; top: 30%; transform: rotate(-6deg); }
.hero__collage .checker { left: 8%; top: 4%; width: 34%; height: 54px; transform: rotate(-3deg); box-shadow: var(--shadow-1); }
.hero__collage .smiley-sticker { right: 0; bottom: 12%; transform: rotate(10deg); }
.hero__collage .bandaid { left: 38%; bottom: 2%; transform: rotate(-14deg); }
.hero__collage .bubble { left: 6%; bottom: 8%; }

.countdown { display: grid; grid-template-columns: repeat(3, auto); gap: var(--sp-3); justify-content: start; }
.countdown div { text-align: center; }
.countdown b { display: block; font-family: var(--f-mono); font-size: 2rem; line-height: 1; }
.countdown span { font-size: var(--fs-caption); }
.big-ticket .ticket__main { padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--sp-6) + 6px); }
.big-ticket .ticket__stub { padding: var(--sp-5); }
@media (max-width: 599px) {
  .big-ticket { grid-template-columns: 1fr; }
  .big-ticket .ticket__stub { border-left: 0; border-top: 2px dashed rgba(31,36,48,.45); }
}

.notes { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.note { position: relative; padding: var(--sp-6) var(--sp-4) var(--sp-4); background: var(--c-yellow-soft); color: var(--ink); box-shadow: var(--shadow-1); }
.note--blue { background: var(--c-blue-soft); }
.note--pink { background: var(--c-pink-soft); }
.note--paper { background: var(--paper); }
:root[data-theme="dark"] .note { background: #4a4120; }
:root[data-theme="dark"] .note--blue { background: #1d2a44; }
:root[data-theme="dark"] .note--pink { background: var(--c-pink-soft); }
:root[data-theme="dark"] .note--paper { background: var(--paper); }
.note h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.note p { font-size: var(--fs-small); margin: 0; }
.note .t-caption { display: block; margin-top: var(--sp-3); color: var(--ink-3); }

.love { display: grid; gap: var(--sp-4); grid-template-columns: 1fr auto; align-items: center; }
.love__num { font-family: var(--f-mono); font-weight: 700; font-size: clamp(2rem, 1.4rem + 3vw, 3rem); line-height: 1; color: var(--c-pink-text); }

.explore-card h3 { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.explore-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.explore-card li a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.explore-card li a:hover { background: var(--paper-2); }
.home-scene { transition: opacity var(--t-med); }
.notes-empty { padding: var(--sp-6) var(--sp-4); }

/* มือถือ: ย่อความสูง — ภาพตกแต่งเล็กลง, การ์ดหมวดปัดแนวนอน (.rail), สัตว์ของฉันกะทัดรัด */
@media (max-width: 599px) {
  .hero__collage { min-height: 200px; max-width: 300px; }
  .hero__title { font-size: 2.6rem; margin-top: var(--sp-3); }
  .split { gap: var(--sp-6); }
  .pet-home { padding-top: var(--sp-6); padding-bottom: var(--sp-4); }
  .pet-home .pet-stage { max-width: 150px !important; }
  #explore-grid.grid-tilt > * { --tilt: 0deg; }
}

/* ===== หน้าแรกแบบ "แนะนำศิลปิน" (สำหรับคนทั่วไป/แบรนด์) ===== */
.hero--artist .hero__title { letter-spacing: -0.02em; }
.artist-tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; }
.artist-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow-1); }
.artist-tags i { color: var(--c-pink-text); }
.social-row .icon-btn { width: 42px; height: 42px; font-size: 1.15rem; }
.hero--artist .hero__collage .polaroid { width: 58%; right: 6%; top: 0; }
.hero--artist .hero__collage .polaroid__img { aspect-ratio: 4 / 5; object-fit: cover; }
.hero--artist .hero__collage .hello-tag { top: 46%; }
.hero--artist .hero__collage { min-height: 380px; }
@media (max-width: 599px) {
  .hero--artist .hero__collage { min-height: 300px; max-width: 320px; }
  .hero--artist .hero__collage .polaroid { width: 64%; }
}

/* ตัวเลขเด่น: ใบเสร็จ 3 ใบ (มือถือเรียง 1 / แท็บเล็ตขึ้นไป 3) */
.highlights { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.hl-card { display: grid; gap: 4px; align-content: start; text-decoration: none; }
.hl-card .love__num { font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); overflow-wrap: anywhere; }
.hl-card--link { transition: transform var(--t-med) var(--ease-out); }
@media (hover: hover) { .hl-card--link:hover { transform: translateY(-3px); } }

/* มุมแฟนคลับ: แถบเล็กๆ ไม่แย่งความสนใจ */
.fan-corner {
  display: grid; grid-template-columns: 76px 1fr auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg);
  background: var(--c-pink-soft); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1);
}
.fan-corner__pet { width: 76px; max-width: 76px; }
.fan-corner h2 { font-size: 1.0625rem; }
.fan-corner__go { font-size: 1.4rem; color: var(--c-pink-text); }
/* ชื่อยาว "CHUTHIWAT" ต้องไม่ล้นจอแคบ: ขนาดตามความกว้างจอ */
.hero--artist .hero__title { font-size: clamp(2.2rem, 11.5vw, 4.4rem); }
@media (min-width: 900px) { .hero--artist .hero__title { font-size: clamp(3rem, 5.4vw, 4.6rem); } }

/* Total Love: ใบเสร็จแถวเดียว (มือถือเรียงลง) */
.love-card { display: grid; gap: var(--sp-3); align-items: center; grid-template-columns: 1fr; }
.love-card .love__num { font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); }
@media (min-width: 700px) { .love-card { grid-template-columns: auto 1fr auto; gap: var(--sp-6); } .love-card .love__num { text-align: center; } }

/* ===== hero2: รูปเป็นพระเอก ===== */
.hero2 { display: grid; gap: var(--sp-6); align-items: center; justify-items: center; text-align: center; padding-top: var(--sp-2); }
.hero2__photo { position: relative; width: min(78vw, 300px); }
.hero2__polaroid { margin: 0; transform: rotate(-3deg); padding: 12px 12px 46px; }
.hero2__polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--c-pink-soft); }
.hero2__polaroid .tape { --tape-tilt: 3deg; }
.hero2__smiley { position: absolute; right: -18px; top: 38%; transform: rotate(12deg); }
.hero2__hash { position: absolute; left: -14px; bottom: 58px; transform: rotate(-7deg); font-size: var(--fs-caption); }
.hero2__text { display: grid; justify-items: center; gap: var(--sp-3); }
.hero2__name { margin: var(--sp-2) 0 0; font-size: clamp(2.4rem, 12vw, 4.6rem); line-height: .95; letter-spacing: -0.02em; }
.hero2__name span { color: var(--c-pink-text); }
.hero2__thai { margin: 0; font-family: var(--f-head); font-size: 1.125rem; font-weight: 600; }
.hero2__thai::before, .hero2__thai::after { content: "♥"; margin: 0 .5em; color: var(--c-pink-text); font-size: .8em; }
.hero2__cta { justify-content: center; margin-top: var(--sp-2); }
.hero2 .social-row { justify-content: center; }
@media (min-width: 860px) {
  .hero2 { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); justify-items: start; text-align: left; gap: var(--sp-12); }
  .hero2__photo { justify-self: center; width: min(100%, 360px); }
  .hero2__text { justify-items: start; }
  .hero2__name { font-size: clamp(3.4rem, 6vw, 5rem); }
  .hero2__cta, .hero2 .social-row { justify-content: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero2__polaroid { transition: transform var(--t-med) var(--ease-out); }
  .hero2__photo:hover .hero2__polaroid { transform: rotate(-1deg) scale(1.01); }
}

/* ===== Total Love: ตั๋วชมพู ===== */
.love-ticket .ticket__main { display: grid; gap: 2px; padding-block: var(--sp-5); }
.love-ticket__num { margin: 0; font-family: var(--f-mono); font-weight: 700; font-size: clamp(2.2rem, 1.4rem + 4vw, 3.4rem); line-height: 1.1; color: #1f2430; overflow-wrap: anywhere; }
.love-ticket .ticket__stub { gap: 4px; }
.love-loading { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-body); font-size: 1.05rem; font-weight: 600; }
.love-loading i { color: var(--c-pink-deep); font-size: 1.6rem; animation: pulse 1.1s ease-in-out infinite; }
#love-meta:empty { display: none; }
.fan-corner__visit { margin-top: 4px; font-weight: 700; color: var(--c-pink-text); }

/* ===== ตกแต่งบอร์ด ===== */
/* ธงราวพาดบนสุด */
.garland {
  position: relative; display: flex; justify-content: space-between;
  margin: calc(var(--sp-6) * -1) calc(var(--gutter) * -1) var(--sp-4); padding: 0 var(--sp-3);
  height: 40px; overflow: hidden; pointer-events: none;
}
.garland::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 18px; border-top: 2px solid rgba(80, 50, 20, .55); border-radius: 50%; }
.garland span { position: relative; top: 10px; width: 22px; height: 26px; clip-path: polygon(0 0, 100% 0, 50% 100%); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.garland span:nth-child(3n+1) { background: var(--c-pink); }
.garland span:nth-child(3n+2) { background: var(--c-yellow); }
.garland span:nth-child(3n) { background: var(--c-blue); }
.garland span:nth-child(odd) { transform: rotate(-4deg); }
.garland span:nth-child(even) { transform: rotate(4deg) translateY(2px); }
@media (min-width: 1024px) { .garland { margin-top: calc(var(--sp-10) * -1); height: 46px; } .garland span { width: 28px; height: 32px; } }
:root[data-theme="dark"] .garland::before { border-top-color: rgba(255, 230, 190, .35); }

/* ลายวาดมือ */
.hero2, .love-wrap, #explore { position: relative; }
.doodle { position: absolute; z-index: 0; pointer-events: none; width: 34px; height: 34px; opacity: .9; }
.doodle svg { width: 100%; height: 100%; }
.doodle--heart { color: var(--c-pink-deep); }
.doodle--star { color: var(--c-yellow-deep); }
.doodle--spark { color: #fff7d6; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.doodle--squig { width: 70px; height: 18px; color: var(--c-blue); }
:root[data-theme="dark"] .doodle--squig { color: var(--c-blue-text); }
.d1 { top: 4%; left: 2%; transform: rotate(-14deg); }
.d2 { top: 30%; right: 3%; width: 28px; height: 28px; transform: rotate(12deg); }
.d3 { bottom: 34%; left: 6%; width: 26px; height: 26px; }
.d4 { bottom: 4%; right: 8%; transform: rotate(-6deg); }
.d5 { top: -16px; right: 18%; width: 28px; height: 28px; transform: rotate(10deg); z-index: 2; }
.d6 { top: -14px; right: 10%; width: 30px; height: 30px; transform: rotate(-12deg); z-index: 2; }
.d7 { position: static; display: inline-block; margin-left: var(--sp-3); }
.board-head { align-items: center; justify-content: flex-start; }
.hero2 > *:not(.doodle) { position: relative; z-index: 1; }

/* แสตมป์วันเดบิวท์ข้างรูป */
.hero2__stamp { position: absolute; left: -26px; top: 6%; transform: rotate(-10deg) scale(.72); transform-origin: left top; z-index: 2; }
.hero2__stamp .stamp__inner { min-width: 92px; min-height: 104px; }
.hero2__stamp i { font-size: 1.4rem; color: var(--c-yellow); }

/* คลิปหนีบกระดาษ */
.paperclip { position: absolute; top: -18px; left: 22px; width: 18px; height: 40px; color: #9aa3ad; z-index: 3; transform: rotate(-8deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.paperclip svg { width: 100%; height: 100%; }

/* มุมแฟนคลับมีหมุด */
.fan-corner { position: relative; }
.fan-corner .pin { top: -6px; left: 28px; translate: none; }

@media (max-width: 479px) {
  .hero2__stamp { left: -16px; transform: rotate(-10deg) scale(.6); }
  .d2 { right: 0; } .d3 { left: 0; }
}

/* ===== ชื่อใหญ่อยู่บนสุด (ตามที่ชอบ) — มือถือ: ชื่อ → รูป · คอม: ชื่อซ้าย รูปขวา ===== */
.hero2__text { order: -1; }
.hero2 { justify-items: start; text-align: left; gap: var(--sp-8); }
.hero2__text { justify-items: start; }
.hero2__cta, .hero2 .social-row { justify-content: flex-start; }
.hero2__thai::before { content: none; }
.hero2__photo { justify-self: center; width: min(68vw, 270px); }
@media (min-width: 860px) {
  .hero2 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .hero2__photo { width: min(100%, 340px); }
}