/* ===== Header / Nav ===== */
header{ border-bottom:2px solid #d4d3d3; }
.brand{ font-weight:700; margin-bottom:4px; }
.links a{ text-decoration:none; color:#000; }
.links a:hover{ text-decoration: underline; } /* 避免 hover 放大造成位移 */

/* nav：控制左側(品牌+選單)與右側(搜尋)分佈 */
.nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.nav-left{ display:flex; align-items:center; gap:14px; }

/* ===== Layout ===== */
.container{width:100%; }
.grid{ display:grid; grid-template-columns:260px 1fr; align-items:start; }
@media (max-width:768px){ .grid{ grid-template-columns:1fr; } }

aside{ border-right:2px solid #d4d3d3; }
.card{ border:1px solid #e5e5e5; border-radius:10px; background:#fff; }
.card .head{ padding:10px 12px; font-weight:700; border-bottom:1px solid #eee; }
.card .body{ padding:12px; }
.btn{ display:inline-block; border:1px solid #333; padding:8px 12px; border-radius:8px; text-decoration:none; color:#333; }
.btn-primary{ background:#0b57d0; color:#fff; border-color:#0b57d0; }
.profile .name{ font-weight:700; font-size:18px; }
.profile .status{ font-size:12px; color:#4caf50; margin:4px 0 8px; }
.profile .slogan{ margin:8px 0; padding:8px; border:2px dashed #f36; color:#d22; font-weight:700; }
.dot{ width:8px; height:8px; display:inline-block; border-radius:50%; background:#ccc; margin-right:6px; }
.dot.on{ background:#19c37d; }
.logo{ height:80px; background:#eef6ff; border:1px solid #cfe3ff; display:grid; place-items:center; border-radius:8px; font-weight:700; }

.peach{padding: 1rem ; border-right:2px solid #d4d3d3 ; }

/* ===== Search ===== */
.search{ width:100%; max-width:600px; margin:1rem auto; display:flex; align-items:center; gap:.5rem; }
.search label{ white-space:nowrap; font-weight:600; margin-top:10px; }
.search-box{ position:relative; flex:1; }
.search-box input{ width:100%; height:50px; padding:0 12px; font-size:1.1rem; border:2px solid #ccc; border-radius:8px; }
.suggest{ position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #ccc; border-top:none; border-radius:0 0 8px 8px; box-shadow:0 4px 10px rgba(0,0,0,.08); display:none; }
.suggest .title{ font-size:.85rem; font-weight:700; color:#555; padding:6px 10px; border-bottom:1px solid #eee; }
.suggest ul{ list-style:none; margin:0; padding:0; }
.suggest li{ padding:8px 12px; cursor:pointer; }
.suggest li:hover{ background:#f0f0f0; }

/* ===== Tabs ===== */
.tabs{ display:flex; gap:8px; margin:6px 0 14px; flex-wrap:wrap; }
.tab{ padding:10px 14px; border:1px solid #e5e5e5; border-bottom:none; border-radius:8px 8px 0 0; background:#fff; cursor:pointer; }
.tab.active{ font-weight:700; }
.section-title{ margin:0 0 10px; font-size:14px; color:#666; }

/* ===== Cards Grid ===== */
.cards-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
@media (max-width:1100px){ .cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .cards-grid{ grid-template-columns:1fr; } }
@media (max-width:640px){ .carousel{ --perView:1; } }            /* 手機：1 張 */
@media (min-width:641px) and (max-width:1024px){ .carousel{ --perView:2; } } /* 平板：2 張 *//* 桌機：3 張 */

.carousel{ --perView:3; }      
.course-card{ border:1px solid #e5e5e5; border-radius:10px; overflow:hidden; background:#fff; }
.course-card .head{ padding:10px 12px; font-weight:700; border-bottom:1px solid #ddd; }
.head.red{ background:#ffe9ea; }
.head.yellow{ background:#fff8dc; }
.head.blue{ background:#eaf6ff; }
.head.orange{ background:#ffe9d9; }
.course-card .row{ display:flex; align-items:center; gap:6px; padding:8px 12px; font-size:14px; color:#555; }
.course-card .row + .row{ border-top:1px solid #f0f0f0; }
.course-card .price{ padding:8px 12px; font-size:13px; color:#3366cc; }
.muted{ color:#888; font-weight:400; }

.cta{ display:flex; justify-content:flex-start; margin-top:14px; }
.filters label{ display:block; font-size:14px; margin:8px 0; }
.filters input{ margin-right:6px; }

footer{ padding:1rem; text-align:center; border-top: 2px solid #d4d3d3;}
[hidden]{ display:none !important; }

/* ===== Carousel in Tab ===== */
@media (max-width:640px){ .carousel{ --perView:1; } }
@media (min-width:641px){ .carousel{ --perView:2; } }
@media (max-width:1024px){ .carousel{ --perView:3; } }
.carousel{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  width:100%;
  display:block;
}
.track{ display:flex; transition:transform .5s ease; }
.slide{ width:calc(100% / var(--perView)); padding:.5rem; box-sizing:border-box; 
flex: 0 0 calc(100% / var(--perView));  /* ← 不允許縮小，寬度固定為 1/每頁顯示數 */
  max-width: calc(100% / var(--perView)); /* 保險：不超過容器份額 */
  padding: .5rem;
  box-sizing: border-box;
}
.slide .card{ border:1px solid #ddd; border-radius:10px; overflow:hidden; background:#fff; }
.slide img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.slide .meta{ padding:.6rem .75rem; font-size:.95rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.navBtn{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff; border:0; border-radius:8px; padding:.35rem .55rem; cursor:pointer; z-index:10; }
.prev{ left:8px; } .next{ right:8px; }
.dots{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:6px; z-index:2; }
.dot{ width:10px; height:10px; border-radius:50%; background:#ddd; border:1px solid #c9c9c9; }
.dot.active{ background:#0b57d0; border-color:#0b57d0; }

/* ====== 漢堡選單（details/summary） ====== */
/* 桌機：強制展開，隱藏 summary */
@media (min-width: 769px){
  .nav-collapse summary{ display:none; }
  .nav-collapse .links{ display:flex !important; gap:1.5rem; }
}

/* 手機：顯示漢堡、選單預設收合 */
@media (max-width: 768px){
  .nav{ flex-direction: column; align-items: stretch; gap:.5rem; }
  .brand{ margin-bottom:.25rem; }

  .nav-collapse summary{
    display:flex; align-items:center; gap:.5rem;
    padding:.5rem .75rem;
    border:1px solid #e5e5e5; border-radius:8px;
    background:#fff; cursor:pointer; list-style:none;
  }
  .nav-collapse summary::-webkit-details-marker{ display:none; }
  .nav-collapse summary::before{ content:"☰"; font-size:1.1rem; line-height:1; }
  .nav-collapse summary:focus-visible{ outline:2px solid #0b57d0; outline-offset:2px; border-radius:8px; }

  .nav-collapse .links{ display:block; padding:.5rem 0; }
  .nav-collapse:not([open]) .links{ display:none; }

  .links a{ display:block; padding:.5rem .125rem; }
}


/* 報名表樣式 */
.signup-form {
  display: grid;
  gap: 12px;
  max-width: 480px;
}
.signup-form label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
}
.signup-form input,
.signup-form select,
.signup-form textarea {
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}
.signup-form button {
  width: fit-content;
}
.carousel{ --perView:3; }                            /* 桌機：3 張 */
@media (max-width:1024px){ .carousel{ --perView:2; } } /* 平板：2 張 */
@media (max-width:640px){  .carousel{ --perView:1; } } /* 手機：1 張 */

/* === Carousel Safety & RWD Caps (APPENDED) === */
/* Guarantee slides don't shrink and images don't overflow; breakpoints enforce 3/2/1 cards */
.carousel{ width:100%; box-sizing:border-box; margin-inline:auto; }
.track{ display:flex; transition: transform .45s ease; will-change: transform; }
.slide{
  flex: 0 0 calc(100% / var(--perView));
  max-width: calc(100% / var(--perView));
  padding:.5rem;
  box-sizing:border-box;
}
.carousel img{ display:block; width:100%; height:auto; object-fit:cover; }
/* Breakpoints: Desktop 3, Tablet 2, Mobile 1 — keep this near file end */
.carousel{ --perView:3; }
@media (max-width:1024px){ .carousel{ --perView:2; } }
@media (max-width:640px){  .carousel{ --perView:1; } }