/* หน้าสาธารณะ (PublicController + แถบนำทางสาธารณะ) — โหลดจาก app/Views/public/_kit.php และ expert/_kit.php
   ใช้ token สีของธีมกลางทั้งหมด จึงเป็นสีเหลือง AI SIAM + ดำ และสลับโหมดมืดตามธีมเอง */

/* หน้าของผู้ที่ยังไม่ล็อกอินใช้ .content-plain (กว้าง 520px สำหรับหน้าเข้าสู่ระบบ) — หน้าที่มีแถบสาธารณะขยายเต็มจอ */
.content-plain:has(.pub-nav) { max-width: 1240px; margin: 0 auto; padding: 0 28px 64px; }
body:has(.pub-nav) { overflow-x: clip; } /* 100vw รวมแถบเลื่อน — กันเลื่อนแนวนอน */

/* แถบนำทางของผู้ที่ยังไม่ล็อกอิน — เต็มความกว้างจอ */
.pub-nav {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--bar-edge);
  margin: 0 calc(50% - 50vw) 24px; padding: 10px 24px; padding-right: 130px; /* เว้นที่ให้ปุ่มสลับภาษาที่ลอยมุมขวา */
}
.pub-brand { display: flex; align-items: center; gap: 10px; color: var(--bar-ink); font-weight: 700; }
.pub-brand:hover { text-decoration: none; }
.pub-logo { height: 30px; width: auto; color: var(--bar-logo); }
.pub-links { display: flex; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; }
.pub-links a { color: var(--bar-ink); padding: 6px 10px; border-radius: 8px; font-size: 15.5px; }
.pub-links a:hover { background: var(--bar-soft); text-decoration: none; }
.pub-links a[aria-current="page"] { background: var(--bar-chip); color: var(--bar-chip-ink); }

/* หน้าแรก */
.pub-hero {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: center;
  background: var(--yellow); color: var(--black); border-radius: var(--radius); padding: 36px;
}
.pub-hero h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.3; }
.pub-hero p { margin: 0 0 18px; font-size: 18px; line-height: 1.7; }
.pub-hero .btn-row .btn { background: var(--black); color: var(--yellow); border-color: var(--black); }
.pub-hero .btn-row .btn-outline { background: transparent; color: var(--black); }
.pub-hero-logo { color: var(--black); width: 100%; max-width: 320px; height: auto; justify-self: center; }
.pub-tagline { font-style: italic; opacity: .8; font-size: 15px; }

.pub-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.pub-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.pub-stat b { display: block; font-size: 28px; line-height: 1.2; }
.pub-stat span { color: var(--muted); font-size: 14.5px; }

.pub-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 24px; }
.pub-door {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; color: var(--ink);
}
.pub-door:hover { text-decoration: none; border-color: var(--brand); }
.pub-door .ico { font-size: 28px; }
.pub-door b { display: block; font-size: 18px; margin: 6px 0 4px; }
.pub-door span { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* การ์ดผลงาน */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.pub-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.pub-card h3 { margin: 0; font-size: 17px; line-height: 1.45; overflow-wrap: anywhere; }
.pub-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.pub-type { color: var(--muted); font-size: 13.5px; }
.pub-who { font-size: 14.5px; color: var(--ink-2); }
.pub-card .pub-actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.pub-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--surface-3); }

.pub-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.pub-filters .form-row { margin: 0; flex: 1 1 180px; }
.pub-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; font-size: 15px; }

@media (max-width: 760px) {
  .content-plain:has(.pub-nav) { padding: 0 16px 48px; }
  .pub-nav { padding: 10px 16px; padding-right: 110px; gap: 8px 12px; }
  .pub-brand span { display: none; }
  /* ลิงก์เป็นแถวเดียวเลื่อนแนวนอนได้ ไม่ให้แถบกินพื้นที่สามบรรทัด */
  .pub-links { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -94px; }
  .pub-links a { white-space: nowrap; }
  .pub-signin { margin-left: auto; }
  .pub-hero { grid-template-columns: 1fr; padding: 24px; }
  .pub-hero-logo { display: none; }
  .pub-hero h1 { font-size: 26px; }
}

/* นโยบายความเป็นส่วนตัว (/privacy) — อ่านยาว: จำกัดความกว้าง และระยะห่างระหว่างหัวข้อ */
.privacy-doc { max-width: 920px; }
.privacy-doc .card { margin-bottom: 14px; }
.privacy-doc h2 { font-size: 18px; margin: 0 0 10px; }
.privacy-doc p, .privacy-doc li { font-size: 15.5px; line-height: 1.75; }
.privacy-doc ul { margin: 0 0 8px; padding-left: 22px; }
.privacy-doc .table td, .privacy-doc .table th { vertical-align: top; font-size: 14.5px; line-height: 1.6; }
.privacy-todo { background: #fff3b0; color: #5c4a00; padding: 1px 4px; border-radius: 4px; font-size: 13.5px; }
html[data-theme="dark"] .privacy-todo { background: #4a3d00; color: #ffe680; }