/* หน้าสาธารณะที่ผู้ปกครองเห็น — ใช้โทเคนและคอมโพเนนต์จาก /ui.css */

.pub {
  max-width: 480px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 18px calc(36px + env(safe-area-inset-bottom));
}
.pub.wide { max-width: 560px; }

.pub-back {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: 16px; font-size: 14px; color: var(--u-muted); text-decoration: none;
}
.pub-back:hover { color: var(--u-brand); }

.pub-head { text-align: center; margin-bottom: 24px; }
.pub-logo { display: flex; justify-content: center; margin-bottom: 16px; --logo-height: 56px; }
.pub-logo .brand-logo { height: var(--logo-height); width: auto; object-fit: contain; }

/* มีโลโก้แล้วไม่ต้องเขียนชื่อค่ายซ้ำอีก ยกพื้นที่ให้โลโก้ใหญ่พอจะอ่านออก
 * ครอบทั้งหัวข้อใหญ่ (หน้าแรก/ส่งกำลังใจ/ล็อกอิน) และบรรทัดเล็กเหนือหัวข้อ (หน้ารายละเอียดงาน) */
.has-logo .pub-head [data-theme-camp] { display: none; }
.has-logo .pub-logo { --logo-height: 150px; margin-bottom: 14px; }

@media (max-width: 480px) {
  /* บนมือถือคุมด้วยความกว้างแทนความสูง ไม่ให้โลโก้ล้นขอบจอ */
  .has-logo .pub-logo { --logo-height: auto; }
  .has-logo .pub-logo .brand-logo { height: auto; width: 100%; max-width: 320px; }
}
.pub-head .u-label { display: block; margin-bottom: 9px; color: var(--u-brand); }
.pub-head h1 { font-size: 27px; margin-bottom: 9px; }
.pub-head p { margin: 0; color: var(--u-muted); font-size: 15px; line-height: 1.75; white-space: pre-line; }

/* เมนูปุ่มใหญ่บนหน้าแรก */
.pub-menu { display: flex; flex-direction: column; gap: 14px; }

.pub-menu a {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; border-radius: var(--u-r-lg);
  background: var(--u-tint, var(--u-tint-blue));
  text-decoration: none; color: var(--u-ink);
  transition: transform 0.12s, box-shadow 0.2s;
}
.pub-menu a:hover { box-shadow: var(--u-shadow); }
.pub-menu a:active { transform: scale(0.99); }

.pub-menu .icon {
  width: 56px; height: 56px; border-radius: 18px; flex: none;
  display: grid; place-items: center; font-size: 25px;
  background: rgba(255, 255, 255, 0.72); color: var(--u-brand);
}
.pub-menu .label { flex: 1; min-width: 0; }
.pub-menu .label strong { display: block; font-family: var(--font-hand); font-size: 20px; line-height: 1.35; }
.pub-menu .label span { display: block; font-size: 13px; color: var(--u-ink-2); margin-top: 3px; line-height: 1.6; }
.pub-menu .arrow { color: var(--u-brand); font-size: 19px; flex: none; }

.pub-foot { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--u-muted); line-height: 1.8; }