/* ============================================================
   CORE — RESPONSIVE LAYER (Mobile / Tablet)
   [2026-08-07] เพิ่มใหม่ — รวมกฎ responsive ระดับ "ทั้งระบบ" ไว้ที่ไฟล์เดียว
   รองรับ Smart phone / Tablet ทุกเมนู (TOR: การแสดงผลบนอุปกรณ์พกพา)

   ตำแหน่งโหลด: ไฟล์รองสุดท้ายใน $_CORE_CSS ของ includes/layouts/header.php
                (ก่อน accessibility.css เสมอ — accessibility.css ต้องอยู่ท้ายสุด)
   เหตุผล: โหลดหลัง component ทุกตัว → override ได้โดย "ไม่ต้องใช้ !important"
           (ใช้ !important เฉพาะจุดที่ต้องชนะ inline style เท่านั้น มีคอมเมนต์กำกับทุกจุด)

   ── Breakpoints มาตรฐานของโปรเจกต์ (อย่าเพิ่มค่าใหม่นอกชุดนี้) ──────────────
     ≤1280px  โน้ตบุ๊กจอเล็ก   — ซ่อนช่องค้นหา inline (header.css)
     ≤1000px  แท็บเล็ต        — nav → hamburger · grid 3-5 คอลัมน์ → 2 · ถือเป็น "โหมดสัมผัส"
     ≤ 768px  แท็บเล็ตแนวตั้ง / มือถือแนวนอน
     ≤ 560px  มือถือ          — grid → 1 คอลัมน์
     ≤ 400px  มือถือจอเล็ก    — iPhone SE / Galaxy A ฯลฯ
   ============================================================ */


/* ============================================================
   1) OVERFLOW GUARD — กันเนื้อหาดันจอ (ใช้ทุกขนาดจอ)
   html/body มี overflow-x:clip อยู่แล้ว (core/reset.css) แต่ clip = "ตัดทิ้ง"
   ไม่ใช่ "จัดให้พอดี" → เนื้อหาที่ล้นจะหายไปเงียบ ๆ กฎชุดนี้ทำให้พอดีจริง
   ============================================================ */

/* reset.css คุม img/svg/video/iframe แล้ว — เพิ่มชนิดที่เหลือ */
canvas, embed, object, table { max-width: 100%; }

/* โค้ด/ข้อความ preformat ยาว → เลื่อนในกล่องตัวเอง ไม่ดันหน้า */
pre, code, kbd, samp { max-width: 100%; overflow-x: auto; }

/* คำยาว / URL / อีเมล ที่ตัดบรรทัดไม่ได้ → บังคับตัด ไม่ให้ดันกล่องล้น */
p, li, td, th, dd, dt, blockquote, figcaption,
h1, h2, h3, h4, h5, h6,
.card-title, .breadcrumb, .empty-state,
.prose, .article-content, .post-body, .ql-rendered {
  overflow-wrap: break-word;
}

/* utility: ครอบ <table> ที่กว้างเกินจอ (ใช้แทนการเขียน inline overflow-x ซ้ำ ๆ) */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ตารางในเนื้อหา rich text (จาก TinyMCE) — ผู้เขียนคุมความกว้างไม่ได้ */
.prose table, .article-content table, .post-body table, .ql-rendered table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ============================================================
   2) SELECT2 — กัน phantom overflow + dropdown ล้นจอ
   <select> ต้นฉบับถูกซ่อนแบบ position:absolute + clip แต่ยัง "กินความกว้าง"
   เพราะ .form-control{width:100%} ชนะกฎ width:1px ของ select2 ในบางหน้า
   → ใช้ max-width ปิดท้าย (clamp ได้เสมอไม่ว่ากฎ width ตัวไหนจะชนะ)
   ============================================================ */
select.select2-hidden-accessible {
  width: 1px !important;      /* ต้อง !important เพื่อชนะ .form-control{width:100%} */
  max-width: 1px !important;  /* กันเหนียว: clamp ทับ width ที่หลุดมาได้ทุกกรณี */
  min-width: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
}
.select2-container { max-width: 100%; }
.select2-dropdown  { max-width: calc(100vw - 24px); }

/* ช่องค้นหาใน dropdown ของ select2 บนมือถือ: ≥16px กัน iOS zoom ตอน focus */
@media (max-width: 1000px) {
  .select2-container--default .select2-search--dropdown .select2-search__field { font-size: 16px; }
  .select2-results__options { max-height: 50vh; }
}


/* ============================================================
   3) ≤1000px — แท็บเล็ต + "โหมดสัมผัส" (จุดเดียวกับที่ nav → hamburger)
   ============================================================ */
@media (max-width: 1000px) {

  /* ความสูงจริงของแถบ header เปลี่ยนตามจอ — element ที่ sticky ใต้ header
     ต้องใช้ค่านี้ (top: calc(var(--header-h) + n)) ไม่งั้นจะมุดหลัง header (z-index 100) */
  :root { --header-h: 70px; }

  /* ระยะห่าง section กระชับขึ้น — จอเตี้ยกว่าเดิมมาก */
  .section    { padding: 48px 0; }
  .section-sm { padding: 32px 0; }

  /* แท็บจำนวนมาก → เลื่อนแนวนอนแทนตัดบรรทัด (ไม่ให้เส้นใต้ active เพี้ยน) */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { white-space: nowrap; flex-shrink: 0; }

  /* ===== TAP TARGET — เป้ากดขั้นต่ำ ~44px ตามแนวทาง WCAG 2.5.5 ===== */
  .pagination { flex-wrap: wrap; row-gap: 10px; }
  .pagination .page-btn { width: 44px; height: 44px; }

  .footer-main li            { margin-bottom: 4px; }
  .footer-main li a,
  .footer-bottom .links a {
    display: inline-block;
    padding: 10px 0;          /* 19px text + 20px padding ≈ 39-44px */
    line-height: 1.4;
  }
  .footer-partners-cta a     { padding: 14px 24px; }

  .filter-list li a          { padding: 12px 14px; }
  .post-actions a            { padding: 8px 4px; }
  .breadcrumb a              { padding: 4px 0; display: inline-block; }
  .section-title .link-arrow { padding: 8px 0; }   /* "ดูทั้งหมด →" เดิมสูง 22px */
  .chip                      { padding: 9px 16px; }

  /* hover effect ของการ์ด/ปุ่มค้างบนอุปกรณ์สัมผัส → ปิดเฉพาะเครื่องที่ไม่มี hover จริง */
  @media (hover: none) {
    .card:hover,
    .chip:hover,
    .partner:hover,
    .footer-social a:hover,
    .btn-join:hover { transform: none; box-shadow: inherit; }
  }
}


/* ============================================================
   4) ≤768px — แท็บเล็ตแนวตั้ง / มือถือแนวนอน
   ============================================================ */
@media (max-width: 768px) {

  /* หัวข้อ section: ปุ่ม "ดูทั้งหมด" ลงบรรทัดใหม่ชิดซ้าย ไม่เบียดหัวข้อ */
  .section-title { align-items: flex-start; gap: 12px; margin-bottom: 24px; }

  /* แถวสถิติ/ฟิลเตอร์ที่ใช้ .hstack → ยอมตัดบรรทัดเสมอ */
  .hstack { row-gap: 10px; }

  /* กล่องเนื้อหา 2 ชั้นบนหน้า detail — ลด padding ให้เนื้อหากว้างขึ้น */
  .detail-main, .detail-side { padding: 20px; }
}


/* ============================================================
   5) ≤560px — มือถือ
   ============================================================ */
@media (max-width: 560px) {

  /* ขอบซ้าย-ขวาของ .container 24 → 16px (เนื้อหากว้างขึ้น ~16px) */
  :root { --gutter: 16px; --header-h: 64px; }

  .section    { padding: 36px 0; }
  .section-sm { padding: 24px 0; }

  /* ---- grid ที่กำหนดคอลัมน์ตายตัวผ่าน inline style → 1 คอลัมน์ ----
     หน้าเก่าหลายหน้าเขียน style="grid-template-columns: 320px 1fr" ตรง ๆ
     ซึ่ง CSS ภายนอกทับไม่ได้ถ้าไม่ใช้ !important
     ยกเว้น auto-fit / auto-fill — พวกนั้นคำนวณจำนวนคอลัมน์เองอยู่แล้ว */
  [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }

  /* ปุ่ม CTA คู่ในฮีโร่ → เต็มความกว้าง กดง่าย ไม่เบียดกัน */
  .hero-cta { width: 100%; }
  .hero-cta > .btn { flex: 1 1 100%; justify-content: center; }

  /* ฟอร์ม auth (login/register/forgot) — ปุ่มเต็มแถวอยู่แล้ว เพิ่มระยะกด */
  .auth-card .btn { min-height: 50px; }

  /* breadcrumb ยาวเกิน 1 บรรทัด → กระชับระยะบน-ล่าง */
  .breadcrumb { padding: 12px 0 14px; }
  .breadcrumb .sep { margin: 0 6px; }

  /* sidebar ตัวกรอง (ชุมชน/คลังสื่อ) เมื่อ stack ลงมาบนสุด */
  .sidebar { padding: 16px; }

  /* ---- พื้นขั้นต่ำของตัวอักษรบนมือถือ (readability floor) ----
     หน้ากลุ่ม pages/new/* (Google Classroom) และบางส่วนของ pages/admin|portfolio
     เขียน font-size 12-14px ฝังใน inline style ~200 จุด ซึ่งต่ำกว่า type scale ของโปรเจกต์มาก
     (--fs-meta = 15-16px) และเล็กเกินอ่านสบายบนมือถือสำหรับภาษาไทย
     ที่นี่ยกพื้นขึ้นเป็น --fs-meta "เฉพาะจอ ≤560px" — เดสก์ท็อปคงเดิม ไม่กระทบเลย์เอาต์เดิม

     ⚠️ นี่คือ stopgap ที่จำเป็นต้องใช้ attribute selector เพราะ inline style
        ทับด้วย stylesheet ปกติไม่ได้ · ทางแก้ถาวร = แทนที่ค่า px ในไฟล์เหล่านั้น
        ด้วย token (var(--fs-meta) / var(--fs-micro)) แล้วลบบล็อกนี้ทิ้ง */
  [style*="font-size: 12px"], [style*="font-size:12px"],
  [style*="font-size: 13px"], [style*="font-size:13px"],
  [style*="font-size: 14px"], [style*="font-size:14px"] {
    font-size: var(--fs-meta) !important;
  }

  /* หมายเหตุ: ขนาดตัวอักษรของ "การ์ดคอร์ส" บนมือถือ (achip / course-info-list /
     price-chip / course-status-badge) แก้ที่ต้นทาง 2 ไฟล์ ไม่ได้แก้ที่นี่ —
     components/course-card.css และ pages/home.css (home.css โหลดทีหลัง จึงทับไฟล์นี้ได้) */

  /* SweetAlert2 popup — เต็มความกว้างพอดีจอ ไม่ให้ padding กินเนื้อหา */
  .swal2-popup { padding: 26px 18px 22px !important; width: calc(100vw - 28px) !important; }
  .swal2-actions { flex-wrap: wrap; }
  .swal2-confirm, .swal2-cancel, .swal2-deny { padding: 13px 24px !important; }
}


/* ============================================================
   6) ≤400px — มือถือจอเล็ก (iPhone SE / จอ 360px)
   ============================================================ */
@media (max-width: 400px) {
  :root { --gutter: 14px; }

  /* การ์ดพันธมิตรใน footer: 2 ใบ/แถวยังพอดี แต่ชื่อยาวต้องไม่ล้น */
  .partner .name { font-size: 10pt; }

  /* ปุ่มคู่ในเมนูมือถือ (เข้าสู่ระบบ / สมัครสมาชิก) → ซ้อนแนวตั้ง */
  .mobile-auth { flex-direction: column; }

  /* ตารางตัวเลขในหน้า dashboard/admin — ลดขนาดลงนิดให้เห็นคอลัมน์มากขึ้น */
  .stat-card .num { font-size: var(--fs-h3); }
}


/* ============================================================
   7) มือถือแนวนอน (จอเตี้ย) — กันเมนู/ป็อปอัปสูงเกินจอ
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .site-header.nav-open .mobile-nav { max-height: 70vh; }
  .user-menu-dropdown { max-height: 70vh; overflow-y: auto; }
  .select2-results__options { max-height: 40vh; }
}


/* ============================================================
   8) PRINT — ปุ่มเมนูมือถือไม่ควรติดไปกับกระดาษ
   หมายเหตุ: ไม่แตะ .container / .site-header / .site-footer ที่นี่ —
   หน้าที่ต้องพิมพ์จริง (certificate/detail.php, portfolio/print.php)
   มี @media print ของตัวเองอยู่แล้ว อย่าซ้อนทับ
   ============================================================ */
@media print {
  .nav-toggle, .mobile-nav { display: none !important; }
}