/* ฟุตเตอร์แบบ B: แถบม่วงเวลาเปิด/จองด้านบน ตัวฟุตเตอร์พื้นขาว ใช้ร่วมหน้าแรก นิทรรศการ และหน้าใน */
/* ชื่อคลาสขึ้นต้น foot- และผูกกับ footer.site-foot เพื่อไม่ไปทับส่วน .visit ของหน้าเข้าชม */
/* แบนราบ ไม่มี gradient/กระจก/เส้นขอบ ตามแบบที่อนุมัติ */

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("../fonts/LINESeedSansTH_W_Rg.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("../fonts/LINESeedSansTH_W_Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== ฐาน ===== */
footer.site-foot {
  --brand: #9e5da5;
  --brand-dark: #7d4485;
  --brand-tint: #f4edf5;
  --ink: #111111;
  --mute: #5c5c5c;
  --foot-wrap: 1200px;
  --foot-pad: clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: #fff;
  font-family: "LINE Seed Sans TH", "Noto Sans Thai", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

footer.site-foot * { box-sizing: border-box; }

footer.site-foot p,
footer.site-foot h2,
footer.site-foot h3,
footer.site-foot address,
footer.site-foot ul {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-style: normal;
}

footer.site-foot a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
footer.site-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
footer.site-foot a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

footer.site-foot .foot-wrap {
  max-width: var(--foot-wrap);
  margin: 0 auto;
  padding: 0 var(--foot-pad);
}

footer.site-foot h3 {
  margin-bottom: 6px;
  color: var(--mute);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
}
footer.site-foot .foot-gap { margin-top: 20px; }

/* ===== แถบม่วง: เวลาเปิด เบอร์จอง ปุ่มจอง ===== */
footer.site-foot .foot-band {
  padding: 36px 0;
  background: var(--brand);
  color: #fff;
}
footer.site-foot .foot-band-in {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 24px 48px;
  align-items: center;
}
footer.site-foot .foot-band h3,
footer.site-foot .foot-band .foot-note { color: #fff; }

footer.site-foot .foot-big { font-size: 24px; font-weight: 700; line-height: 1.4; }
footer.site-foot .foot-time { font-size: 18px; font-weight: 700; }
footer.site-foot .foot-note { margin-top: 2px; font-size: 14px; }

footer.site-foot .foot-num {
  display: inline-block;
  font-size: clamp(28px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

footer.site-foot .foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  font-size: 17px;
  white-space: nowrap;
}
footer.site-foot .foot-cta:hover { text-decoration: none; }
footer.site-foot .foot-cta img, footer.site-foot .foot-cta svg.ic { width: 22px; height: 22px; }

/* ===== ตัวฟุตเตอร์: ชื่อหน่วยงาน เบอร์ทั่วไป ===== */
footer.site-foot .foot-body { padding: 52px 0 48px; }
footer.site-foot .foot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 44px;
}
footer.site-foot .foot-brand { display: flex; gap: 20px; align-items: center; }
footer.site-foot .foot-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 132px;
  height: 88px;
  border-radius: 16px;
  background: var(--brand-tint);
}
footer.site-foot .foot-logo img { display: block; width: 118px; height: auto; }
footer.site-foot .foot-kicker { color: var(--mute); font-size: 14px; line-height: 1.6; }
footer.site-foot h2 {
  padding-top: 2px;
  color: var(--brand-dark);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.35;
}
footer.site-foot .foot-name { max-width: 30em; font-size: 16px; line-height: 1.6; }
footer.site-foot .foot-gen { text-align: right; }
footer.site-foot .foot-gen .foot-num { color: var(--brand-dark); }

/* ===== ที่อยู่ อีเมล โซเชียล การเข้าชม เมนู ===== */
footer.site-foot .foot-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr .8fr 1.3fr;
  gap: 32px 40px;
}
footer.site-foot .foot-grid a { color: var(--brand-dark); }
footer.site-foot .foot-link { display: inline-block; margin-top: 8px; }
footer.site-foot .foot-social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* ไอคอนแบรนด์ (Simple Icons) สีเดียวกับตัวอักษร ให้ชื่อยังอ่านได้และกดได้ทั้งแถว */
footer.site-foot .foot-social a { display: inline-flex; align-items: center; gap: 6px; }
footer.site-foot .foot-social .si { width: 16px; height: 16px; flex: none; }
footer.site-foot .foot-menu {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 4px 32px;
  list-style: none;
}
footer.site-foot .foot-menu a { white-space: nowrap; }

/* ===== ลิขสิทธิ์ ===== */
footer.site-foot .foot-copy {
  padding: 20px 0;
  background: var(--brand-tint);
  color: #4d4d4d;
  font-size: 14px;
}
footer.site-foot .foot-copy .foot-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;
}
footer.site-foot .foot-copy a { color: var(--brand-dark); }

/* ===== จอกลาง ===== */
@media (max-width: 980px) {
  footer.site-foot .foot-band-in { grid-template-columns: 1fr 1fr; }
  footer.site-foot .foot-cta { grid-column: 1 / -1; justify-self: start; }
  footer.site-foot .foot-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== มือถือ ===== */
@media (max-width: 900px) {
  /* กล่องเมนูมือถือตรึงมุมซ้ายบน 16+52px ติ่งกลมยื่นถึง 78px
     เว้นซ้าย 84px เนื้อหาฟุตเตอร์จะไม่อยู่ใต้กล่องไม่ว่าเลื่อนถึงไหน */
  footer.site-foot .foot-wrap { padding-left: max(var(--foot-pad), 84px); }
}

@media (max-width: 600px) {
  footer.site-foot .foot-band { padding: 32px 0; }
  footer.site-foot .foot-band-in { grid-template-columns: 1fr; gap: 20px; }
  footer.site-foot .foot-cta { width: 100%; justify-content: center; justify-self: stretch; }
  footer.site-foot .foot-body { padding: 40px 0 36px; }
  footer.site-foot .foot-head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
  }
  footer.site-foot .foot-brand { flex-direction: column; align-items: flex-start; gap: 14px; }
  footer.site-foot .foot-gen { text-align: left; }
  footer.site-foot .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  footer.site-foot .foot-copy .foot-wrap { flex-direction: column; align-items: flex-start; }
}

/* ทำไม: ลิงก์ข้อความเตี้ยกว่า 44px นิ้วแตะพลาดง่ายบนมือถือ */
@media (max-width: 768px) {
  footer.site-foot .foot-grid a,
  footer.site-foot .foot-copy a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  footer.site-foot .foot-link { margin-top: 0; }
}

/* ===== จอคอม ===== */
@media (min-width: 901px) {
  /* โลโก้ตรึงมุมซ้ายบนกว้างราว g+110px จอแคบกว่า ~1420px ขอบเนื้อหาจะชิดโลโก้
     จึงดันซ้ายเฉพาะตอนจำเป็น */
  footer.site-foot .foot-wrap {
    padding-left: max(
      var(--foot-pad),
      calc(var(--g, 32px) + 110px - max(0px, (100vw - var(--foot-wrap)) / 2))
    );
  }

  /* หน้าแรกมีปุ่มวิดีโอ (.reel) ตรึงมุมขวาล่าง
     เว้นล่างแถบลิขสิทธิ์ให้ลิงก์กลับด้านบนไม่อยู่ใต้ปุ่ม */
  body:has(.reel) footer.site-foot .foot-copy { padding-bottom: 72px; }
}