/* ============================================================
   COMPONENT — Course card (v2: medal อันดับ + chips ดึงดูด + info list)
   ใช้ร่วมทั้งหน้าหลัก (home) และหน้ารายการคอร์ส (courses)
   ย้ายมาจาก pages/home.css เพื่อให้เป็น global component
   ============================================================ */

/* Trending ranked cards — medal อันดับ */
.rank-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: var(--surface); color: var(--primary-dark);
  padding: 5px 12px; border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 11pt;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  display: inline-flex; align-items: center; gap: 5px;
}
.rank-badge.rank-1 { background: linear-gradient(135deg, #ffd24d, #f0a500); color: #5a3a00; }
.rank-badge.rank-2 { background: linear-gradient(135deg, #e3e7ec, #b9c0c9); color: #3a4047; }
.rank-badge.rank-3 { background: linear-gradient(135deg, #f0b27a, #cd7f32); color: #4a2a08; }
.rank-badge.rank-4 { background: var(--surface); color: var(--primary-dark); }

.card-dur-overlay {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 10pt; font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Course registration status badge — บนรูปคอร์ส */
.course-status-badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  padding: 4px 12px; border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 9pt; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
}
.course-status-badge.badge-open    { background: rgba(46, 160, 67, .95);   color: #fff; }
.course-status-badge.badge-full    { background: rgba(220, 53, 69, .95);   color: #fff; }
.course-status-badge.badge-expired { background: rgba(108, 117, 125, .95); color: #fff; }
.course-status-badge.badge-closed  { background: rgba(73, 80, 87, .95);    color: #fff; }
.course-status-badge.badge-soon    { background: rgba(255, 180, 73, .95);  color: #5a3a00; }
.course-status-badge.badge-enrolled { background: #dbeafe; color: #1e40af; }
.course-status-badge.badge-done     { background: #dcfce7; color: #166534; }

/* price ครองมุมบนขวา → ดันสถานะการรับสมัครไปมุมล่างขวา */
.course-card .card-media .course-status-badge { top: auto; bottom: 14px; right: 14px; }

/* Featured chip — แนะนำ */
.course-featured-chip {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 8pt; font-weight: 700;
  background: linear-gradient(135deg, #ffd54f 0%, #ff9800 100%);
  color: #5a3a00;
  box-shadow: 0 4px 10px rgba(255, 152, 0, .35);
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 4px;
}
.course-featured-chip i { font-size: 8pt; }
.card-media:has(.rank-badge) .course-featured-chip { top: 50px; }
.card-media.has-rank .course-featured-chip { top: 50px; }

/* Price chip — มุมบนขวาบนรูป */
.price-chip {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  padding: 5px 13px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: 11pt;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.price-chip.price-free { background: #fff; color: #0f6e56; }
.price-chip.price-paid { background: var(--primary); color: #fff; }

/* meta (ผู้สอน / ยอดดู) */
.course-card .card-meta { font-size: 11pt; }

/* chips ดึงดูด: ระดับชั้น + หมวดวิชา + สมรรถนะ */
.course-attr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.achip {
  font-size: 9pt; line-height: 1.2;
  padding: 4px 10px; border-radius: 8px;
  font-family: var(--font-heading); font-weight: 600;
}
.achip.chip-level   { background: #e6f1fb; color: #185fa5; }
.achip.chip-subject { background: #eaf3de; color: #3b6d11; }
.achip.chip-comp    { background: #f3eefe; color: #534ab7; }
.achip.chip-diff-beginner     { background: rgba(46, 160, 67, .12);  color: #1e7d34; }
.achip.chip-diff-intermediate { background: rgba(255, 152, 0, .14);  color: #b35900; }
.achip.chip-diff-advanced     { background: rgba(220, 53, 69, .12);  color: #a02030; }
.achip.chip-lang { background: rgba(31, 92, 219, .10); color: #1f5cdb; display: inline-flex; align-items: center; gap: 4px; }

/* info list — ราคา/เวลา/รับสมัคร/ที่นั่ง/เกียรติบัตร */
.course-info-list {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 7px;
  font-family: var(--font-heading); font-size: 10pt; color: var(--text-muted);
}
.course-info-list .cinfo { display: flex; align-items: center; gap: 8px; }
.course-info-list .cinfo i { width: 16px; text-align: center; color: var(--primary); flex-shrink: 0; }
.course-info-list .cinfo-price .free { color: #0f6e56; font-weight: 700; }
.course-info-list .cinfo-price .paid { color: var(--primary-dark); font-weight: 700; }
.course-info-list .cinfo-cert { color: var(--primary-dark); }
.course-info-list .text-danger { color: #dc3545; font-weight: 700; }

/* [RESPONSIVE 07/08/2569] เดิมบล็อกนี้ "ย่อ" ตัวอักษรลงบนมือถือ (8.5pt/9.5pt/10pt ≈ 11-13px)
   → เล็กเกินอ่านสบายสำหรับภาษาไทย (สระบน-ล่างชิดกันจนตัน) และเป็นเป้ากดที่เล็กด้วย
   เปลี่ยนเป็น "ไม่ย่อลงต่ำกว่าขั้นต่ำที่อ่านได้" โดยผูกกับ token กลาง (ห้าม hardcode px — CLAUDE.md §9) */
@media (max-width: 560px) {
  .course-attr-chips .achip { font-size: var(--fs-micro); padding: 4px 9px; }
  .course-info-list         { font-size: var(--fs-badge); }
  .price-chip               { font-size: var(--fs-badge); padding: 5px 12px; }
  .course-status-badge      { font-size: var(--fs-micro); }
}