/* ============================================================
   PAGE HEADER (used by courses.html, course-details.html, etc.)
   ============================================================ */
.page-hero {
  background: var(--grad-hero); color: var(--white);
  padding: 150px 0 var(--sp-8); position: relative; overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: rgba(255,255,255,0.65); margin-bottom: var(--sp-4); }
.breadcrumb a:hover { color: var(--white); }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-3); }
.page-hero p { color: rgba(255,255,255,0.78); max-width: 560px; font-size: var(--fs-body-lg); }

/* ============================================================
   COURSES LISTING — filter bar
   ============================================================ */
.filter-bar {
  margin-top: -34px; position: relative; z-index: 2; padding: var(--sp-5);
  border-radius: var(--radius-xl); display: flex; flex-direction: column; gap: var(--sp-4);
}
.search-row { position: relative; }
.search-row svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--grey-500); pointer-events: none; }
.search-row input {
  width: 100%; padding: 14px 18px 14px 46px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--grey-100); font-size: var(--fs-body); font-family: var(--font-bn);
  background: var(--white); transition: border-color var(--dur-fast) var(--ease-out);
}
.search-row input:focus { border-color: var(--royal); outline: none; }

.filter-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.filter-select {
  padding: 10px 34px 10px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--grey-100);
  background: var(--white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236B7A96" stroke-width="2.4"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 12px center;
  font-size: var(--fs-sm); font-family: var(--font-bn); font-weight: 600; color: var(--grey-700);
  appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 40px;
}
.filter-select:focus { outline: none; border-color: var(--royal); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  padding: 8px 16px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600;
  background: var(--grey-100); color: var(--grey-700); border: 1.5px solid transparent;
  transition: all var(--dur-fast) var(--ease-out); min-height: 36px;
}
.filter-chip[aria-pressed="true"] {
  background: rgba(30,79,216,0.1); color: var(--royal); border-color: rgba(30,79,216,0.3);
}
.filter-chip:hover { border-color: var(--royal); }

.filter-meta-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--grey-100); }
.results-count { font-size: var(--fs-sm); color: var(--grey-500); }
.results-count strong { color: var(--ink-navy); font-family: var(--font-data); }

.clear-filters { font-size: var(--fs-sm); font-weight: 600; color: var(--royal); }
.clear-filters:hover { text-decoration: underline; }

/* ============================================================
   EMPTY STATE / NO RESULTS
   ============================================================ */
.empty-state {
  text-align: center; padding: var(--sp-9) var(--sp-5); grid-column: 1 / -1;
}
.empty-state .es-icon { font-size: 2.6rem; margin-bottom: var(--sp-4); }
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { color: var(--grey-500); margin-bottom: var(--sp-5); }

/* ============================================================
   DENSE COURSE GRID (10-Minute-School style) — used on courses.html
   and the homepage popular-courses row
   ============================================================ */
.course-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 560px) { .course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .course-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

.cc-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--grey-100); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,34,74,0.04), 0 6px 18px rgba(16,34,74,0.06);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cc-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(16,34,74,0.14); }

/* 16:9, matching what the admin panel stores (10 Minute School-এর কোর্স
   কার্ডের মতো)। কিছুদিন 1:1 ছিল — ফোনে কার্ডগুলো খুব লম্বা হয়ে যেত। */
.cc-thumb {
  position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--grad-hero);
}
/* per-category thumbnail tints so the dense grid reads as varied, like 10MS */
.cc-thumb.cat-ai       { background: linear-gradient(135deg, #0A1428 0%, #1E4FD8 78%, #2F6FED 100%); }
.cc-thumb.cat-dev      { background: linear-gradient(135deg, #0A1428 0%, #1E4FD8 60%, #4DD9E8 120%); }
.cc-thumb.cat-design   { background: linear-gradient(135deg, #2A1348 0%, #6C34C9 70%, #A46BFF 120%); }
.cc-thumb.cat-data     { background: linear-gradient(135deg, #06231E 0%, #128C6E 70%, #2FD3A5 120%); }
.cc-thumb.cat-security { background: linear-gradient(135deg, #2A0E14 0%, #B3324B 70%, #FF7A8A 120%); }
.cc-thumb.cat-office   { background: linear-gradient(135deg, #10192E 0%, #2F6FED 70%, #163875 120%); }
.cc-thumb.cat-kids     { background: linear-gradient(135deg, #3A1E05 0%, #E07B1A 65%, #FFB763 120%); }
.cc-thumb-icon {
  font-family: var(--font-en); font-weight: 800; font-size: 2.4rem; color: rgba(255,255,255,0.92);
  letter-spacing: 0.02em; transition: transform var(--dur-med) var(--ease-out);
}
.cc-card:hover .cc-thumb-icon { transform: scale(1.12); }
.cc-badge { position: absolute; top: 10px; left: 10px; }
.cc-thumb .badge-discount { position: absolute; top: 10px; right: 10px; left: auto; }
.cc-type-tag {
  position: absolute; bottom: 10px; left: 10px; font-size: var(--fs-xs); font-weight: 600; color: var(--white);
  background: rgba(0,0,0,0.32); padding: 4px 10px; border-radius: var(--radius-pill);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.cc-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cc-cat { font-size: var(--fs-xs); font-weight: 700; color: var(--royal); text-transform: uppercase; letter-spacing: 0.03em; }
.cc-body h4 { font-size: 1rem; line-height: 1.3; }
.cc-desc { font-size: var(--fs-sm); color: var(--grey-500); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--grey-500); }
.cc-rating { font-size: var(--fs-sm); font-weight: 700; color: #E8890C; }
.cc-rating .cc-students { color: var(--grey-500); font-weight: 500; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--grey-100); }
.cc-price { font-family: var(--font-data); font-weight: 700; color: var(--ink-navy); font-size: 1.05rem; }
.cc-price .old { text-decoration: line-through; color: var(--grey-300); font-weight: 500; font-size: 0.72em; margin-right: 6px; }
.cc-btn { flex-shrink: 0; }

/* ============================================================
   COURSES PAGE — big banner + category grid (10MS-style top section)
   ============================================================ */
.courses-banner {
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  background: var(--grad-brand); color: var(--white);
  padding: var(--sp-7) var(--sp-6); margin-top: var(--sp-6); margin-bottom: var(--sp-7);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.courses-banner .cb-blob { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(70px); background: rgba(255,255,255,0.22); top: -160px; right: -80px; pointer-events: none; }
.courses-banner-text { position: relative; z-index: 1; max-width: 560px; }
.courses-banner-text h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-2); color: var(--white); }
.courses-banner-text p { color: rgba(255,255,255,0.88); font-size: var(--fs-body); }
.courses-banner .cb-cta { position: relative; z-index: 1; }

.category-strip { margin-bottom: var(--sp-8); }
.category-strip h3 { font-size: 1.15rem; margin-bottom: var(--sp-4); }
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .category-grid { grid-template-columns: repeat(7, 1fr); } }
.category-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: var(--sp-4) var(--sp-2); border-radius: var(--radius-md); background: var(--white);
  border: 1px solid var(--grey-100); box-shadow: 0 1px 2px rgba(16,34,74,0.04);
  font-size: var(--fs-xs); font-weight: 700; color: var(--grey-700);
  transition: all var(--dur-fast) var(--ease-out);
}
.category-tile:hover { transform: translateY(-3px); border-color: rgba(30,79,216,0.3); color: var(--royal); box-shadow: var(--shadow-card); }
.category-tile .ct-emoji { font-size: 1.7rem; }

/* ============================================================
   PAGINATION / LOAD MORE
   ============================================================ */
.load-more-row { display: flex; justify-content: center; margin-top: var(--sp-7); }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: var(--sp-7); flex-wrap: wrap; }
.page-btn {
  width: 40px; height: 40px; border-radius: var(--radius-md); border: 1.5px solid var(--grey-100);
  background: var(--white); font-family: var(--font-data); font-weight: 600; color: var(--grey-700);
}
.page-btn[aria-current="true"] { background: var(--grad-brand); color: var(--white); border-color: transparent; }
.page-btn:hover:not([aria-current="true"]) { border-color: var(--royal); color: var(--royal); }

/* ============================================================
   COURSE DETAILS — layout
   ============================================================ */
.details-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-8); align-items: flex-start; }
@media (min-width: 980px) { .details-layout { grid-template-columns: 1.65fr 1fr; } }

.details-section { margin-bottom: var(--sp-8); }
.details-section h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }

.outcome-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 640px) { .outcome-grid { grid-template-columns: 1fr 1fr; } }
.outcome-item { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--grey-700); }
.outcome-item .check { color: #1E9E6B; flex-shrink: 0; margin-top: 2px; }

/* Curriculum accordion */
.curriculum-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.curriculum-week {
  border-radius: var(--radius-lg); background: var(--grad-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.curriculum-week-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); background: transparent; border: none; text-align: left;
}
.curriculum-week-head .cw-title { font-weight: 700; font-size: var(--fs-body); }
.curriculum-week-head .cw-meta { font-size: var(--fs-xs); color: var(--grey-500); margin-top: 3px; }
.curriculum-week-head .chevron { transition: transform var(--dur-med) var(--ease-out); color: var(--grey-500); flex-shrink: 0; }
.curriculum-week[data-open="true"] .chevron { transform: rotate(180deg); }
.curriculum-week-body {
  max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-out);
}
.curriculum-week[data-open="true"] .curriculum-week-body { max-height: 600px; }
.curriculum-week-body ul { padding: 0 var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.curriculum-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--grey-700); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--cloud); }
.curriculum-item .ci-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(30,79,216,0.1); color: var(--royal); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.85rem; }
.curriculum-item .ci-dur { margin-left: auto; font-size: var(--fs-xs); color: var(--grey-500); font-family: var(--font-data); }
.ci-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.ci-link {
  font-size: var(--fs-xs); font-weight: 700; color: var(--royal); background: rgba(30,79,216,0.08);
  padding: 6px 12px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out);
}
.ci-link:hover { background: rgba(30,79,216,0.16); }
.ci-link-live { color: #D93636; background: rgba(217,54,54,0.08); }
.ci-link-live:hover { background: rgba(217,54,54,0.16); }

/* ---- Video timer / embedded player (student dashboard) ---- */
button.ci-link { border: none; cursor: pointer; font-family: inherit; }
.ci-watch-label { font-size: var(--fs-xs); color: var(--grey-500); align-self: center; }
.ci-player {
  flex-basis: 100%; margin-top: var(--sp-3); border-radius: var(--radius-md);
  overflow: hidden; position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--grey-900);
}
.ci-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* FAQ accordion (reuses curriculum-week pattern) */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { border-radius: var(--radius-lg); background: var(--grad-card); box-shadow: var(--shadow-card); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5); background: transparent; border: none; text-align: left; font-weight: 700; font-size: var(--fs-body);
}
.faq-q .chevron { transition: transform var(--dur-med) var(--ease-out); color: var(--grey-500); flex-shrink: 0; }
.faq-item[data-open="true"] .chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--dur-med) var(--ease-out); }
.faq-item[data-open="true"] .faq-a { max-height: 400px; }
.faq-a p { padding: 0 var(--sp-5) var(--sp-5); font-size: var(--fs-sm); color: var(--grey-500); }

/* Reviews */
.review-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 680px) { .review-grid { grid-template-columns: 1fr 1fr; } }
.review-card { padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--grad-card); box-shadow: var(--shadow-card); }
.review-stars { color: #F5A623; font-size: 0.85rem; margin-bottom: var(--sp-3); letter-spacing: 2px; }
.review-quote { font-size: var(--fs-sm); color: var(--grey-700); margin-bottom: var(--sp-4); }

/* ---- Sidebar: sticky enroll card ---- */
.enroll-card { position: sticky; top: 100px; border-radius: var(--radius-xl); overflow: hidden; }
/* 16:9, like every other course thumbnail on the site. */
.enroll-card-visual {
  aspect-ratio: 16 / 9; background: var(--grad-hero); display: flex; align-items: center; justify-content: center;
}
.enroll-card-visual .ecv-icon { font-size: 2.6rem; }
.enroll-card-body { padding: var(--sp-5); }
.enroll-price-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.enroll-price { font-family: var(--font-data); font-weight: 700; font-size: 1.7rem; color: var(--royal); }
.enroll-price-old { text-decoration: line-through; color: var(--grey-300); font-family: var(--font-data); }
.enroll-discount-badge { margin-bottom: var(--sp-5); }
.enroll-list { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-5) 0; }
.enroll-list li { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); color: var(--grey-700); }
.enroll-list .check { color: #1E9E6B; flex-shrink: 0; }
.enroll-card .btn { width: 100%; }
.enroll-note { text-align: center; font-size: var(--fs-xs); color: var(--grey-500); margin-top: var(--sp-3); }

/* Instructor mini card */
.instructor-card { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-5); border-radius: var(--radius-lg); background: var(--grad-card); box-shadow: var(--shadow-card); }
.instructor-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--grad-brand); flex-shrink: 0; }
.instructor-name { font-weight: 700; }
.instructor-role { font-size: var(--fs-sm); color: var(--grey-500); }

/* Requirements list */
.req-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.req-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--grey-700); }
.req-list .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--royal); margin-top: 8px; flex-shrink: 0; }

/* Sticky mobile enroll bar */
.mobile-enroll-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
  padding: var(--sp-4); gap: var(--sp-3); align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border); box-shadow: 0 -6px 24px rgba(16,34,74,0.1);
}
@media (max-width: 979px) { .mobile-enroll-bar { display: flex; } }
.mobile-enroll-bar .me-price { font-family: var(--font-data); font-weight: 700; color: var(--royal); }
.mobile-enroll-bar .me-old { text-decoration: line-through; color: var(--grey-300); font-size: 0.85em; margin-right: 4px; }

.instructor-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* PHASE 5 — course catalogue/details mobile optimization */
.cc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:600px){
  .course-browser{padding-top:22px}
  .course-browser-top{gap:12px}
  .course-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .course-filter-row .filter-select{width:100%;min-width:0}
  .course-grid{grid-template-columns:1fr!important;gap:13px}
  .cc-card{border-radius:16px}
  .cc-thumb{height:auto;aspect-ratio:16/9}
  .details-layout{gap:18px}
  .details-section{padding:16px!important}
  .outcome-grid{grid-template-columns:1fr!important}
  .curriculum-week-head{padding:15px}
  .curriculum-week-body ul{padding:0 12px 14px}
  .enroll-card{position:static}
  .mobile-enroll-bar{padding:10px 12px;gap:8px}
  .mobile-enroll-bar .btn{padding:10px 13px}
}