/* ============================================================
   PAGE — Home (index.php + role variants)
   ขยาย/ปรับ component hero เฉพาะหน้าหลัก
   ============================================================ */

.home-hero { padding: 84px 0 104px; }
.home-hero .container {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 48px; align-items: center;
}
@media (max-width: 1000px) { .home-hero .container { grid-template-columns: 1fr; } }

/* Trending ranked cards */
.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);
}
.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; }

/* Registration info row — ใต้ card-meta */
.course-card .course-reg-info {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-heading);
  font-size: 9pt;
  color: var(--text-muted);
}
.course-card .course-reg-info > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.course-card .course-reg-info .text-danger { color: #dc3545; font-weight: 700; }
.course-card .course-rounds  { color: var(--secondary-blue); font-weight: 600; }
.course-card .course-deadline { color: var(--orange);       font-weight: 600; }

/* Featured chip — แนะนำ (มุมซ้ายบน หรือเลื่อนลงถ้ามี rank-badge) */
.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 มีทั้ง rank-badge และ featured-chip → เลื่อน featured ลงใต้ rank */
.card-media:has(.rank-badge) .course-featured-chip {
  top: 50px;   /* rank-badge สูง ~32px + 14px gap = 46-50px */
}
/* Fallback สำหรับ browser ที่ยังไม่รองรับ :has() — ใช้ class manual */
.card-media.has-rank .course-featured-chip { top: 50px; }

/* Difficulty + Language chips — ใต้ card-meta, เหนือ reg-info */
.course-card .course-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.course-card .course-chips .chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 8pt; font-weight: 600;
  background: rgba(0, 0, 0, .04);
  color: var(--text-muted);
  border: 1px solid rgba(0, 0, 0, .06);
}
.course-card .chip-diff-beginner     { background: rgba(46, 160, 67, .12);  color: #1e7d34; border-color: rgba(46, 160, 67, .25); }
.course-card .chip-diff-intermediate { background: rgba(255, 152, 0, .14);  color: #b35900; border-color: rgba(255, 152, 0, .28); }
.course-card .chip-diff-advanced     { background: rgba(220, 53, 69, .12);  color: #a02030; border-color: rgba(220, 53, 69, .25); }
.course-card .chip-lang { background: rgba(31, 92, 219, .10); color: #1f5cdb; border-color: rgba(31, 92, 219, .22); }

/* Testimonial glass cards */
.tm-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: 0 12px 32px rgba(0, 116, 75, 0.08);
}
.tm-card .mark {
  font-family: var(--font-display);
  font-size: 60pt; line-height: 0.3;
  color: var(--primary-light); opacity: 0.5;
  margin-bottom: 14px; display: inline-block;
}
.tm-card q {
  font-family: var(--font-display);
  font-size: 14pt; line-height: 1.45;
  color: var(--text-strong); display: block; min-height: 120px;
  quotes: none;
}
.tm-card .stars {
  color: #ffb449; font-size: 12pt; letter-spacing: 2px;
  margin: 16px 0 14px;
}
.tm-card .who {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line);
}


/* ============================================================
   Hero Slider v2 — Background image + flush arrows
   ใช้รูป banner เป็นพื้นหลังเต็ม, ข้อความซ้อนบน dark gradient
   ลูกศรชิดขอบจอ ไม่บังเนื้อหา
   ============================================================ */
.hero-slider-wrap {
  position: relative;
  padding-bottom: 24px;
}

.hero-slider {
  position: relative;
  width: 100%;
  height: clamp(460px, 62vh, 620px);
  overflow: hidden;
  isolation: isolate;
}

.hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  will-change: transform;
  transition: transform .6s cubic-bezier(.45, 0, .2, 1);  /* เลื่อนซ้าย-ขวาแบบ smooth */
}

/* --- Slide: เลื่อนแนวนอนใน track (translateX) — ไม่ fade ไม่กระพริบ --- */
.hero-slide {
  position: relative;
  flex: 0 0 100%;       /* 1 slide = เต็มความกว้าง slider */
  width: 100%;
  height: 100%;
  background-color: #0a2d1e;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* .is-active ใช้คุมแค่ dots/aria — การแสดงผล slide คุมด้วย transform ของ .hero-track */

/* เคารพผู้ใช้ที่ปิด motion */
@media (prefers-reduced-motion: reduce) {
  .hero-track { transition: none; }
}

/* Dark gradient overlay เพื่อให้ข้อความอ่านง่าย */
.hero-slide-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 37, 23, .82) 0%, rgba(0, 37, 23, .55) 45%, rgba(0, 37, 23, .15) 75%, transparent 100%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .4) 100%);
  pointer-events: none;
}

/* Inner content (constrained by container) */
.hero-slide-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-slide-text {
  max-width: 620px;
  color: #fff;
  z-index: 1;
}

.hero-slide-tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 9pt;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--secondary-yellow, #ffc857);
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(10px);
  margin-bottom: 18px;
}
.hero-slide-title {
  font-family: var(--font-display);
  font-size: clamp(23pt, 4.4vw, 41pt);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 18px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}
.hero-slide-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(11pt, 1.8vw, 14pt);
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 28px;
  max-width: 620px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}
.hero-slide-text .hero-cta {
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* Theme: light (default) — text สว่างบนรูปเข้ม */
/* Theme: dark — สำหรับ banner ที่รูปเป็นสีอ่อน ต้องใช้ตัวอักษรเข้ม */
.hero-slide--dark .hero-slide-tag {
  background: rgba(0, 0, 0, .12);
  color: var(--text-strong);
  border-color: rgba(0, 0, 0, .15);
}
.hero-slide--dark .hero-slide-title {
  color: var(--text-strong);
  text-shadow: 0 2px 16px rgba(255, 255, 255, .5);
}
.hero-slide--dark .hero-slide-subtitle {
  color: var(--text);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .5);
}
.hero-slide--dark .hero-slide-overlay {
  background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.5) 100%);
}
.hero-slide--dark .btn-ghost-light {
  background: rgba(0, 0, 0, .08);
  border-color: rgba(0, 0, 0, .35);
  color: var(--text-strong);
}

/* Ghost light button (สำหรับปุ่มบน background เข้ม) */
.btn-ghost-light {
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .55);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover {
  background: rgba(255, 255, 255, .25);
  border-color: #fff;
  color: #fff;
}

/* --- Nav arrows: ชิดขอบจอซ้าย-ขวา --- */
.hero-nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  border: 1.5px solid rgba(255, 255, 255, .4);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background .2s, transform .2s, border-color .2s;
  z-index: 5;
  font-size: 13pt;
}
.hero-nav:hover {
  background: #fff;
  border-color: #fff;
  color: var(--primary-dark);
  transform: translateY(-50%) scale(1.08);
}
.hero-prev { left: 20px; }
.hero-next { right: 20px; }

/* --- Dots --- */
.hero-dots {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex; gap: 10px;
  z-index: 5;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  padding: 0;
  transition: background .25s, width .35s;
}
.hero-dot:hover { background: rgba(255, 255, 255, .75); }
.hero-dot.is-active {
  background: #fff;
  width: 32px;
  border-radius: 999px;
}

/* --- Stats cards ใต้ slider (การ์ด 5 ใบ — icon/เลข/คำอธิบาย) --- */
.hero-stats {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  gap: 18px;
}
.hero-stat {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 18px);
  padding: 26px 20px 22px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 116, 75, 0.07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hero-stat:hover {
  transform: translateY(-4px);
  border-color: var(--primary-light, #6fb894);
  box-shadow: 0 18px 42px rgba(0, 116, 75, 0.14);
}
.hero-stat-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--primary, #00744b);
  font-size: 17pt;
  margin-bottom: 14px;
  background: transparent;
}
.hero-stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18pt, 2.6vw, 26pt);
  color: var(--primary-dark, #005c3b);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.hero-stat-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11pt;
  color: var(--text-muted);
  line-height: 1.35;
}

/* --- Responsive --- */
@media (max-width: 1000px) {
  .hero-slider { height: clamp(420px, 70vh, 540px); }
  .hero-slide-overlay {
    background: linear-gradient(180deg, rgba(0,37,23,.4) 0%, rgba(0,37,23,.85) 100%);
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .hero-prev { left: 10px; }
  .hero-next { right: 10px; }
  .hero-nav { width: 44px; height: 44px; }
}

@media (max-width: 560px) {
  /* [2026-07-31] height → min-height: ข้อความ/CTA ยาวบนจอ 320-360px ขยายได้ ไม่ถูก clip */
  .hero-slider { min-height: 460px; }
  .hero-slide-title { font-size: clamp(17pt, 6.5vw, 24pt); margin-bottom: 20px; }
  .hero-slide-text .hero-cta { gap: 10px; }
  .hero-slide-text .hero-cta .btn { flex: 1 1 calc(50% - 5px); min-width: 0; justify-content: center; }
  /* [2026-07-31] รวม 2 block @560 ที่ซ้ำ (เดิม repeat(2,1fr) ถูก 1fr ทับ = dead) → เหลือ 1 คอลัมน์กันตัวเลขบีบ */
  .hero-stats { grid-template-columns: 1fr; }
  .hero-dots { bottom: 16px; }
}

/* ============================================================
   Trending course card v2 — medal อันดับ + chips ดึงดูด + info list
   ============================================================ */
.rank-badge { display: inline-flex; align-items: center; gap: 5px; }
/* meta (ยอดดู · ลงทะเบียน) — ลดจาก 13pt → 11pt */
.course-card .card-meta { font-size: 11pt; }
.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); }

.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; }

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

.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; }

.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] สำเนากฎเดียวกับ components/course-card.css — ต้องแก้คู่กันเสมอ
   (home.css โหลดหลัง core/responsive.css จึงทับกฎกลางได้ ถ้าไม่แก้ที่นี่ด้วยจะไม่มีผลบนหน้าแรก)
   เดิมย่อเป็น 8.5pt/9.5pt/10pt (≈11-13px) → เล็กเกินอ่านสบายบนมือถือ */
@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); }
  .hero-slide-tag           { font-size: var(--fs-micro); }

  /* [RESPONSIVE 07/08/2569] จุดสไลด์ฮีโร่กว้าง-สูง 10px = เล็กเกินกดด้วยนิ้ว
     ขยาย "พื้นที่แตะ" เป็น 30px ด้วย ::after (จุดที่มองเห็นยังเท่าเดิม)
     + เพิ่ม gap เป็น 18px กันพื้นที่แตะของจุดข้างเคียงซ้อนกันจนกดผิด */
  .hero-dots { gap: 18px; }
  .hero-dot  { position: relative; }
  .hero-dot::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px;
  }
}