/* =========================================================
   contact.css — เฉพาะหน้าติดต่อเรา (กล่องช่องทางติดต่อ + แผนที่)
   ========================================================= */
.booking-grid { display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; }

/* ---------- Info panel ---------- */
.booking-info {
  --heading-color: var(--c-white);
  --text-color: var(--c-text);
  --link-color: var(--c-gold-light);
  position: relative; text-align: center;
  padding: clamp(32px, 4vw, 48px) clamp(22px, 3.5vw, 40px);
  background: var(--c-black) url("../../images/ui/grunge.svg") center / 600px;
  outline: 6px solid var(--c-gold); outline-offset: -14px;
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.booking-info h2 { margin-bottom: 0; }
.booking-info > p { margin: 18px auto 24px; max-width: 460px; font-size: .95rem; }
/* ---------- การ์ดช่องทางติดต่อ ---------- */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 28px; text-align: center; }
.contact-card:last-child:nth-child(odd) { grid-column: 1 / -1; } /* จำนวนคี่: การ์ดสุดท้ายเต็มแถว */
.contact-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 18px 22px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(201, 161, 74, .28); border-radius: var(--radius);
  color: var(--c-text);
  transition: border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s;
}
.contact-card.is-link:hover, .contact-card:has(.cc-phone:hover) {
  border-color: var(--c-gold); background: rgba(201, 161, 74, .08);
  transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.cc-icon {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 10px;
  border: 1px solid var(--c-gold); border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(231, 201, 131, .18), transparent 70%);
  color: var(--c-gold);
}
.cc-icon .icon { width: 24px; height: 24px; }
.contact-card h3 { margin: 0 0 2px; color: var(--c-white); }
.cc-value { font-size: .95rem; color: var(--c-gold-light); overflow-wrap: anywhere; }
/* ปุ่มในการ์ดที่กดได้ทั้งใบ: วางชิดล่าง หน้าตาแบบเดียวกับปุ่มเบอร์โทร */
.cc-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-width: 230px; min-height: 44px; margin-top: auto;
  border: 1px solid rgba(201, 161, 74, .45); border-radius: 40px;
  font-size: .95rem; font-weight: 500; letter-spacing: .04em; color: var(--c-gold-light);
  transition: background .25s, color .25s, border-color .25s;
}
.contact-card.is-link .cc-value { margin-bottom: 14px; }
.cc-cta .icon { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.contact-card.is-link:hover .cc-cta { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-black); }
.contact-card.is-link:hover .cc-cta .icon { transform: translateX(4px); }

/* เบอร์โทร: แต่ละเบอร์เป็นปุ่มกดโทรได้ทันที */
.cc-phones { display: grid; gap: 8px; width: 100%; max-width: 230px; margin-top: 6px; }
.cc-phone {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  border: 1px solid rgba(201, 161, 74, .45); border-radius: 40px;
  font-size: 1rem; font-weight: 500; letter-spacing: .06em; color: var(--c-gold-light);
  transition: background .25s, color .25s, border-color .25s;
}
.cc-phone:hover { background: var(--c-gold); border-color: var(--c-gold); color: var(--c-black); }
.map { aspect-ratio: 16 / 10; border: 1px solid var(--c-line); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.6) contrast(1.05); }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .booking-info { padding: 36px 20px; outline-width: 4px; outline-offset: -10px; }
}
@media (max-width: 575px) {
  .contact-cards { grid-template-columns: 1fr; gap: 12px; }
  .map { aspect-ratio: 4 / 3; }
}