:root {
  --brand:#0d6efd;
  --ink:#0e1726;
  --muted:#6b7280;
  --bg:#F7FAFC;
  --card:#ffffff;
  --cradradius:8px;
  --shadow:0 8px 24px #F7FAFC;
  --footer-bg: #f6fafc;       /* 淺底色，接近截圖 */
  --footer-line: #d9e3ef;     /* 頂部分隔線 */
  --footer-text: #3b6ea5;   /* 文字顏色 */
}

/* Hero / Carousel */
.hero {
  padding-top:88px; 
  padding-bottom:12px; 
  background:#ffffff;
  overflow: hidden;
}
.carousel {
    position:relative;
    width: 1300px; /* 固定寬度，避免跳動 */
    height: 720px; /* 固定高度，避免跳動 */
    display: flex; 
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.viewport {
  position:relative;
  overflow:visible;/* 讓左右邊緣可見 */
}
.track {
  list-style:none;
  margin:0; 
  padding:0;
  display:flex; 
  gap:100px;
  transition:transform .5s ease;
  will-change:transform;
}
.slide {
  flex:0 0 80%;/* 中間大、左右露出 */
  border-radius:20px;
  overflow:hidden;
  transform:scale(.8);
  transition:transform .5s ease, box-shadow .5s ease;
  box-shadow: var(--shadow);
  opacity: .6;
}
.slide.active { 
    transform:scale(1.1);/* 中間放大 */
    opacity: 1;
}  
.slide img { 
    width:100%; 
    height:550px; 
    object-fit:cover; 
    display:block;
}
/* 無彈跳瞬移：加在 .carousel 上的 class，暫停 slide 的過場 */
.no-anim .slide,
.no-anim .slide.active { transition: none !important; }

.ctrl {
    position:absolute; 
    top:50%; 
    transform:translateY(-50%);
    border:none; 
    width:50px; 
    height:50px; 
    border-radius:999px;
    background:var(--bg); 
    cursor:pointer;
    display:grid; 
    place-items:center; 
    font-size:30px;
    color: #666666;
    z-index: 10;/* ↑ 提高層級，蓋過圖片 */
}
.ctrl:hover {filter:brightness(.98);}
.prev {left:-20px;}
.next {right:-20px;}

/* ===== Dots：小圓 -> 5秒拉長成膠囊 + 進度填滿 ===== */
.dots { 
  display:flex; 
  justify-content:center; 
  gap:10px; 
  margin:50px 0 0;
}

/* 預設是小圓點 8x8，移除你先前給的固定 28px 寬度 */
.dots button{
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 999px;
  background: #e5e7eb;   /* 淺底 */
  position: relative;
  padding: 0;
  cursor: pointer;
  overflow: hidden;       /* 裁切內部進度條 */
  transition: width .2s ease;  /* 當切到非 active 時，柔和縮回小圓 */
}

/* 進度條：跟著 5 秒由 0% 填到 100%（與自動輪播同步） */
.dots button::after{
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 0%;
  height: 100%;
  background: var(--ink);
  border-radius: inherit;
  transform-origin: left center;
}

/* 啟動兩段動畫：
   1) 外層寬度 8px -> 28px（形狀由圓變膠囊）
   2) 內層進度 0% -> 100%（條狀填滿）
*/
.dots button.active{
  animation: dotGrow 5s linear forwards;
  /* 保持淺底，讓進度條清楚 */
  background:#e5e7eb !important;
}
.dots button.active::after{
  animation: dotFill 5s linear forwards;
}

/* 懸停暫停：JS 會在 stopAuto() 時加上 .paused */
.paused .dots button.active,
.paused .dots button.active::after{
  animation-play-state: paused !important;
}

@keyframes dotGrow {
  from { width: 8px; }
  to   { width: 28px; }
}
@keyframes dotFill {
  from { width: 0%; }
  to   { width: 100%; }
}

@media (max-width: 760px) {
  .carousel {
    width: 100%;
    height: 400px; /* 高度自適應 */
  }
  .slide {
    flex: 0 0 90%; /* 中間大、左右露出 */
    border-radius: 0;
  }
  .slide img {
    height: 400px; /* 高度自適應 */
    aspect-ratio: 16/9; /* 固定寬高比，避免變形 */
  }
  .ctrl {
    display: none; /* 小螢幕隱藏按鈕 */
  }
  .dots {
    margin: 0; /* 調整間距 */
  }
}

/* Courses */
.courses {padding: 80px 0;}
.courses h2 {
  margin:0 0 16px;
  color: #414141;
  font-size:30px;  
}
.grid {
  display:grid; 
  gap:25px;
  grid-template-columns: repeat(3, 1fr);
}
.card-wrap {
  text-decoration:none; 
  color:inherit;
}
.card {
  border-radius:var(--cradradius); 
  overflow:hidden;
  box-shadow: var(--bg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { 
    transform: translateY(-2px); 
    box-shadow:0 12px 28px rgba(0,0,0,.10);
}
.card img { 
    width:100%; 
    height:210px; 
    object-fit:cover; 
    display:block;
    border-radius: var(--cradradius);
}
.card-body { padding:20px 10px; }
.card-body h3 {
  font-size:21px; 
  line-height:1.35; 
  margin:0 0 8px; 
  font-weight:700;
}
.meta {
  display:flex; 
  align-items:flex-start; 
  justify-content:space-between;
  font-size:12px; 
  color:var(--muted);
  flex-direction:column;
}
.price { 
    color:var(--brand);
    font-size: 20px;
    font-weight:bolder; 
    letter-spacing:.2px;
    margin-bottom: 5px;
}
.time {
    font-size: 16px;
}
.time i {
    margin-right: 6px;
    color: var(--muted);
}

/* Responsive */
@media (max-width: 900px) {
    .grid { 
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .grid { 
        grid-template-columns: 1fr;
    }
}