/* public/contact/style.css — เฉพาะหน้า P6 (ติดต่อ & เส้นทาง)
   design/01-pages.md §3 — ที่อยู่/แผนที่ลิงก์ออก (ไม่มี iframe) + เบอร์โทร + เวลาเปิด-ปิด + รูปหน้าร้าน
   จอ ≥1024px: 2 คอลัมน์ ซ้าย (ที่อยู่·เบอร์·เวลา) / ขวา (การ์ดแผนที่·รูปหน้าร้าน) — ซ้ายกว้างไม่เกิน 560px */

.noscript-msg {
  margin: var(--sp-4) var(--gutter);
}

main.container {
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-7);
}
main.container > h1 {
  margin-bottom: var(--sp-6);
}

.contact-layout {
  display: grid;
  gap: var(--sp-6);
}
.contact-layout__left,
.contact-layout__right {
  display: grid;
  gap: var(--sp-6);
  min-width: 0; /* กันเบอร์/ที่อยู่ยาวดันกริดล้น */
}
.contact-layout__left > * + *,
.contact-layout__right > * + * {
  margin-top: 0; /* ระยะห่างคุมด้วย gap ของ grid แทน */
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 560px) 1fr;
    align-items: start;
  }
  /* เดิมบั๊ก: ก่อนหน้านี้การ์ดแผนที่ถูก mount ปนอยู่ในคอลัมน์ซ้ายทั้งหมด ทำให้คอลัมน์ขวามีแค่รูปหน้าร้าน
     (ซึ่งปกติไม่มีรูปจริงเลย → section รูปหน้าร้าน hidden เสมอ) ผลคือคอลัมน์ขวาว่างเปล่าทั้งคอลัมน์
     หน้าเว็บที่จอกว้าง 1920px จึงเห็นเนื้อหาทั้งหมดหุบอยู่คอลัมน์เดียวชิดซ้าย พื้นที่ 2 ใน 3 ของจอว่างเปล่า
     — แก้แล้วโดยย้ายการ์ดแผนที่ไป mount ที่คอลัมน์ขวาจริง (ดู #กล่อง-แผนที่-การ์ด ใน index.html/index.js)

     แต่ยังต้องกันไว้อีกชั้น: ถ้าวันหนึ่งไม่มีทั้งการ์ดแผนที่ (โหมด no-address) และไม่มีรูปหน้าร้าน คอลัมน์ขวา
     จะว่างเปล่าอีกครั้งด้วยเหตุผลอื่น (ไม่ใช่บั๊ก mount ผิดจุดแล้ว แต่เป็น "ไม่มีอะไรจะโชว์ฝั่งขวาจริงๆ")
     ใช้ :has() เช็คว่าคอลัมน์ขวามีลูกที่ไม่ได้ซ่อนอยู่จริงไหม ถ้าไม่มีเลย ให้ยุบกลับเป็นคอลัมน์เดียว
     กว้างเท่าคอลัมน์ซ้ายเดิม (560px) จัดกลางจอ แทนที่จะปล่อยให้หน้าเบี้ยวไปทางซ้ายอีกแบบหนึ่ง */
  .contact-layout:not(:has(.contact-layout__right > *:not([hidden]))) {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
  }
}

/* ---------- ที่อยู่ + การ์ดแผนที่ (§3.1, §3.3) ---------- */
.address-box {
  display: grid;
  gap: var(--sp-3);
}
.address-box__text {
  font-size: var(--fs-h2);
  user-select: text; /* เลือก-คัดลอกได้ (§3.1) */
  overflow-wrap: break-word;
}
.address-box__primary {
  width: 100%;
}

.link-inline {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.link-inline:active { text-decoration: underline; }

.address-fallback {
  display: grid;
  gap: var(--sp-3);
}
.address-fallback h2 {
  font-size: var(--fs-h2);
}

.map-facade {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  text-align: center;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--on-surface);
}
.map-facade:active { background: var(--surface-3); }
.map-facade h3 { margin-top: var(--sp-2); }

/* ---------- กล่องเบอร์โทร (§3.1) ---------- */
.phone-box__number {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin-bottom: var(--sp-3);
  overflow-wrap: normal; /* เบอร์ต้องไม่ตัดกลาง — เสริม .num-nowrap ที่ใส่ไว้แล้ว */
}
.phone-box__missing {
  color: var(--on-surface-2);
}
.phone-box__extra {
  margin-top: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}
.phone-box__extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- เวลาเปิด-ปิด (§3.2, §3.3) ---------- */
.hours-unconfirmed {
  display: grid;
  gap: var(--sp-3);
}
.hours-table {
  margin-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hours-row {
  display: flex;
  flex-wrap: wrap; /* ชื่อวัน+ป้าย "วันนี้" กับเวลา (num-nowrap) ต้องตกบรรทัดแยกกันได้ที่ 320px แทนดันจอล้น */
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
  min-height: 48px;
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.hours-row--today {
  background: var(--surface-3);
  border-left: 3px solid var(--accent);
  padding-left: calc(var(--sp-2) - 3px);
}
.hours-row__day {
  font-size: var(--fs-small);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hours-row__badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: var(--fs-fine);
  font-weight: 700;
}
.hours-row__time {
  font-size: var(--fs-small);
}
#เนื้อหา-เวลาเปิดปิด .fine-print { margin-top: var(--sp-2); }

/* ---------- วันหยุดพิเศษ ---------- */
#รายการวันหยุดพิเศษ li {
  padding-left: var(--sp-4);
  position: relative;
}
#รายการวันหยุดพิเศษ li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--on-surface-2);
}
#รายการวันหยุดพิเศษ li + li { margin-top: var(--sp-2); }

/* ---------- รูปหน้าร้าน ---------- */
.store-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-photo);
  border-radius: var(--radius);
  display: block;
}

/* ---------- ท้ายหน้า (§3.1) ---------- */
.contact-endnote {
  margin-top: var(--sp-7);
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.contact-endnote p {
  font-size: var(--fs-body);
}
.contact-endnote > div {
  width: 100%;
}