/* ==========================================================================
   หน้าหลักสูตรทั้งหมด (modules/course/course_list) - วางการ์ดแบบตาราง / รายการ
   --------------------------------------------------------------------------
   โหลดต่อจาก home-elearning.css (ตัวแปร --el-* และการ์ด .el-course-card ตัวเดียวกับหน้าแรก)
   แบนเนอร์ / แถบเครื่องมือ / เลขหน้า เป็นชิ้นส่วนร่วม อยู่ที่ components.css
   สเกลเดียวกับหน้าข่าวสารทั้งหมดของ mrta-news: ความกว้างเนื้อหา .el-container (1302px) ขนาดเป็น px
   ========================================================================== */

/* ระยะจากแบนเนอร์ถึงแถบเครื่องมือเท่าหน้าข่าวสาร (.nw-listpage) - ต้องมี .el-home นำหน้า
   ไม่งั้น .el-home .el-container { padding: 0 15px } ของ home-elearning.css ทับเป็น 0 */
.el-home .el-catalog-body { padding-top: 40px; }
/* ใต้หัวเรื่องกลาง (component sub-banner) - ระยะล่างของหัวเรื่องเป็นระยะถึงแถบเครื่องมือแล้ว */
.el-home .list-head + .el-catalog-body { padding-top: 0; }

/* .el-home a { color: inherit } ของ home-elearning.css แรงกว่าสีปุ่มสลับมุมมองใน components.css - ใส่สีซ้ำ */
.el-home .btn-show-view { color: #B4BDCE; }
.el-home .btn-show-view:hover { color: var(--bs-primary-900); }
.el-home .btn-show-view.active { color: #fff; }

/* ── มุมมองตาราง: 4 คอลัมน์ ระยะห่างแนวนอนเท่า carousel หน้าแรก ── */
.el-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px 30px;
}

/* ── มุมมองรายการ: การ์ดแนวนอน รูปซ้าย เนื้อหาขวา ความคืบหน้า + ปุ่มอยู่แถวล่าง ── */
.el-catalog-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.el-catalog-list .el-course-card { flex-direction: row; }
.el-catalog-list .el-cc-cover {
    flex: 0 0 300px;
    height: auto;
    min-height: 200px;
}
.el-catalog-list .el-cc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-content: start;
    column-gap: 30px;
    min-width: 0;
    padding: 20px 24px;
}
.el-catalog-list .el-cc-body > * { grid-column: 1 / -1; }
.el-catalog-list .el-cc-title { height: auto; }
/* วันที่ | ชั่วโมง | ผู้เรียน อยู่บรรทัดเดียว (ตารางขึ้นบรรทัดใหม่ก่อนจำนวนผู้เรียน) */
.el-catalog-list .el-cc-meta-br { display: none; }
.el-catalog-list .el-cc-desc { height: auto; max-height: 48px; }
.el-catalog-list .el-cc-body > .el-cc-progress {
    grid-column: 1;
    align-self: center;
    margin-top: 16px;
}
.el-home .el-catalog-list .el-cc-btn {
    grid-column: 2;
    margin-top: 16px;
}

@media (max-width: 1199.98px) {
    .el-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .el-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
    .el-catalog-list .el-cc-cover { flex-basis: 240px; }
    .el-catalog-list .el-cc-body { grid-template-columns: minmax(0, 1fr) 180px; column-gap: 20px; }
}
@media (max-width: 767.98px) {
    .el-home .el-catalog-body { padding-top: 28px; }
    /* รายการ: กลับเป็นการ์ดแนวตั้งแบบตาราง (จอแคบวางรูปข้างเนื้อหาไม่พอ) */
    .el-catalog-list { gap: 18px; }
    .el-catalog-list .el-course-card { flex-direction: column; }
    .el-catalog-list .el-cc-cover { flex: none; height: 170px; min-height: 0; }
    .el-catalog-list .el-cc-body { display: flex; flex-direction: column; padding: 15px 15px 24px; }
    .el-catalog-list .el-cc-meta-br { display: block; }
    .el-home .el-catalog-list .el-cc-btn { margin-top: 10.5px; }
}
@media (max-width: 575.98px) {
    .el-catalog-grid { grid-template-columns: minmax(0, 1fr); }
}