/**
 * หน้าติดต่อคณะ
 *
 * ยึดโทเค็นชุดเดียวกับหน้าแรกและ footer ของปลั๊กอิน (--rxsu-home-*) แทนที่จะตั้งสีของตัวเอง
 * ถ้าตั้งเอง วันที่คณะเปลี่ยนโทน หน้านี้จะเป็นหน้าเดียวที่ไม่เปลี่ยนตาม · ค่า fallback ในทุก
 * var() คือค่าที่ assets/home-page.css ประกาศไว้จริง ไม่ใช่ค่าที่เดาขึ้นมา
 *
 * ทุกสีข้อความที่นี่ประกาศบนตัว element เอง ไม่ใช่ให้ inherit จากกล่องแม่ - The7 ประกาศสี
 * heading และ a ตรงบน element ซึ่งชนะค่าที่ inherit มาเสมอไม่ว่ากล่องแม่จะ specific แค่ไหน
 * (บทเรียน 0.26.1 และ 0.29.0 ของเปลือกเว็บไซต์ ที่นี่เดินตามตั้งแต่แรกแทนที่จะรอให้พัง)
 */

.rxsu-contact {
  --rxsu-contact-ink: var(--rxsu-home-ink, #263126);
  --rxsu-contact-muted: var(--rxsu-home-muted, #5f6b5c);
  --rxsu-contact-surface: var(--rxsu-home-soft, #f3f6ef);
  --rxsu-contact-line: var(--rxsu-home-hairline, #d3ddcf);
  --rxsu-contact-accent: var(--rxsu-home-brand-dark, #315c52);
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  max-width: 1100px;
  margin-inline: auto;
  color: var(--rxsu-contact-ink);
}

.rxsu-contact h2,
.rxsu-contact h3 { color: var(--rxsu-contact-ink); margin: 0; }
.rxsu-contact p { color: var(--rxsu-contact-ink); margin: 0; }
.rxsu-contact a { color: var(--rxsu-contact-accent); text-decoration: none; }
.rxsu-contact a:hover,
.rxsu-contact a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.rxsu-contact :focus-visible { outline: 2px solid var(--rxsu-contact-accent); outline-offset: 2px; }

/* จุดดำหน้ารายการ: ประกาศบน li ไม่ใช่แค่บน ul
 *
 * The7 ประกาศ `.content ul { list-style: disc }` ไว้ใน main.min.css ซึ่ง specificity เท่ากับ
 * `.rxsu-contact__social ul` ของเราพอดี (0,1,1) และไฟล์ของเขาพิมพ์ทีหลัง เสมอกันแล้วตัวหลัง
 * ชนะ - รายการโซเชียลจึงขึ้นจุดดำบนหน้าจริง
 *
 * แก้ที่ li เพราะ **ค่าที่ประกาศตรงบน element ชนะค่าที่สืบทอดมาเสมอ** ไม่ว่าตัวที่ประกาศไว้
 * บนกล่องแม่จะ specific แค่ไหน · เป็นบทเรียนเดียวกับที่ capsule.css จดไว้เรื่องสี heading
 * และ a ของ The7 ต่างกันแค่คราวนี้เป็น list-style
 *
 * ทำไมเห็นเฉพาะแถวโซเชียล: li ในกลุ่มผู้ติดต่อเป็น display:flex ซึ่งแทนที่ display:list-item
 * ไปแล้ว จึงไม่มีกล่อง marker ให้วาดตั้งแต่แรก · แถวโซเชียลไม่ได้ตั้ง display จึงยังเป็น
 * list-item เต็มตัว - กฎนี้ครอบทุกรายการในหน้านี้ ทั้งที่มีอยู่และที่จะเพิ่มทีหลัง
 *
 * และทำไมตัวอย่างในแอดมินไม่เคยฟ้อง: หน้าแอดมินไม่ได้โหลด CSS ของ The7 และไม่ได้อยู่ใน
 * .content ตัวอย่างจึงถูกเสมอในเรื่องที่เป็นการชนกับธีม */
.rxsu-contact li { list-style: none; }

.rxsu-contact__intro h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.rxsu-contact__intro { border-bottom: 2px solid var(--rxsu-contact-line); padding-bottom: 12px; }

/* ที่อยู่ + แผนที่: สองคอลัมน์บนจอกว้าง ซ้อนกันบนจอแคบ */
.rxsu-contact__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--rxsu-contact-line);
  border-radius: 16px;
  background: var(--rxsu-contact-surface);
}
.rxsu-contact__map { position: relative; min-height: 260px; }
/* ยังไม่แนบรูป: บล็อกยุบเหลือแค่ปุ่ม จัดกลางบนพื้นอ่อน แทนที่จะเป็นกล่องสูง 260px ที่ว่างเปล่า */
.rxsu-contact__map.is-linkonly {
  min-height: 0; display: grid; place-items: center;
  padding: 22px; background: var(--rxsu-contact-surface);
}
.rxsu-contact__map.is-linkonly .rxsu-contact__map-link { position: static; }
.rxsu-contact__map-link {
  position: absolute; inset-block-end: 12px; inset-inline-start: 12px;
  padding: 8px 14px; border-radius: 999px;
  background: #fff; color: var(--rxsu-contact-accent);
  font-size: 0.875rem; font-weight: 700;
  box-shadow: 0 2px 10px -4px rgba(6, 32, 24, .5);
}
/* รูปแทนแผนที่ (เมื่อปิด Google) — ทั้งบล็อกเป็นลิงก์เดียว ป้ายทับกลางภาพบนฉากมืดโปร่ง
   แบบเดียวกับหน้าเดิม · ฉากมืดคือสิ่งเดียวที่ทำให้ป้ายสีขาวอ่านออกบนภาพที่เราไม่รู้ว่าสว่าง
   หรือมืด - ตัวอักษรขาวบนภาพดิบคือตัวอักษรที่หายไปเมื่อคณะเปลี่ยนรูป */
.rxsu-contact__map.is-image { display: grid; }
.rxsu-contact__map-cover { position: relative; display: block; block-size: 100%; min-block-size: 260px; }
.rxsu-contact__map-cover img {
  display: block; inline-size: 100%; block-size: 100%;
  min-block-size: 260px; object-fit: cover;
}
.rxsu-contact__map-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 32, 24, .18), rgba(6, 32, 24, .52));
}
.rxsu-contact .rxsu-contact__map-cover-label {
  position: absolute; inset-inline: 0; inset-block-end: 18px;
  z-index: 1; display: block; text-align: center;
  color: #fff; font-weight: 800; font-size: 1.05rem;
  text-shadow: 0 1px 8px rgba(6, 32, 24, .7);
}
.rxsu-contact .rxsu-contact__map-cover:hover .rxsu-contact__map-cover-label { text-decoration: underline; text-underline-offset: 4px; }

.rxsu-contact__detail { display: grid; gap: 10px; align-content: start; padding: clamp(18px, 2.5vw, 30px); }
.rxsu-contact__detail h3 { font-size: 1.05rem; line-height: 1.5; }
.rxsu-contact__address { color: var(--rxsu-contact-muted); line-height: 1.75; }
.rxsu-contact__line { font-size: 0.95rem; }
.rxsu-contact .rxsu-contact__phone { font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; }

/* กลุ่มผู้ติดต่อ */
.rxsu-contact__groups { display: grid; gap: 14px; }
.rxsu-contact__groups > h2 { font-size: 1.15rem; }
.rxsu-contact__group {
  padding: 18px 20px;
  border: 1px solid var(--rxsu-contact-line);
  border-radius: 14px;
  background: var(--rxsu-contact-surface);
}
.rxsu-contact__group h3 { font-size: 1rem; line-height: 1.6; padding-bottom: 10px; border-bottom: 1px solid var(--rxsu-contact-line); }
.rxsu-contact__note { color: var(--rxsu-contact-muted); font-weight: 400; }
.rxsu-contact__group ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.rxsu-contact__group li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rxsu-contact__label { color: var(--rxsu-contact-muted); font-size: 0.9rem; }

/* สื่อสังคมออนไลน์ */
.rxsu-contact__social ul {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--rxsu-contact-line); border-radius: 14px;
  background: var(--rxsu-contact-line);
}
.rxsu-contact__social li { background: #fff; }
.rxsu-contact__social a {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; font-weight: 600;
}
/* ไอคอนของแต่ละเครือข่ายเป็นไฟล์คนละทรง (วงกลมบนผืนสี่เหลี่ยม / สี่เหลี่ยมเต็ม / glyph เปล่า)
   clip เป็นวงกลมเส้นผ่านศูนย์กลางเดียวเหมือน footer ของแคปซูล ไม่งั้นตัวสี่เหลี่ยมจะดูใหญ่กว่า
   ตัวกลมอย่างเห็นได้ชัด - เหตุผลเต็มอยู่ใน assets/shell/capsule.css หัวข้อ social */
.rxsu-contact__social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; inline-size: 28px; block-size: 28px;
}
.rxsu-contact__social-icon img {
  display: block; inline-size: 100%; block-size: 100%;
  object-fit: contain; border-radius: 50%;
}

/* ปุ่มการกระทำ */
.rxsu-contact__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rxsu-contact .rxsu-contact__action {
  display: block; padding: 16px 20px; border-radius: 12px;
  border: 1px solid var(--rxsu-contact-line);
  background: var(--rxsu-contact-surface);
  color: var(--rxsu-contact-ink);
  font-weight: 700; text-align: start; text-decoration: none;
}
.rxsu-contact .rxsu-contact__action.is-emphasis {
  background: var(--rxsu-contact-accent); border-color: transparent; color: #fff;
}
.rxsu-contact .rxsu-contact__action:hover { text-decoration: none; box-shadow: 0 6px 18px -12px rgba(6, 32, 24, .6); }

@media (max-width: 48em) {
  .rxsu-contact__card { grid-template-columns: 1fr; }
}