/**
* FILE INFO:: 
* Course Styles
* File Version: 1.0.0
* File Date: 2026-03-23
*/
 /* =====================================================================
   COURSE STYLES - INDEX
   ---------------------------------------------------------------------
   MARK: Base Styles
   MARK: Header
   MARK: Layout and Sidebar
   MARK: Footer
   MARK: Typography
   MARK: Buttons
   MARK: Course Styles
   MARK: Lesson Styles
   MARK: Project Styles
   MARK: Cards
   MARK: Breadcrumbs
   MARK: Dashboard
   MARK: Experimental
===================================================================== */

/* =====================================================================
   MARK: Base Styles
===================================================================== */

:root {
   /* Colors */
  --gbm-site-primary: #4da896;
  --gbm-site-primary-hover: #338373;
  --gbm-course-c1: #2e3141;
  --gbm-course-c2: #416089;
  --gbm-course-c3: #408d5b;
  --gbm-course-c4: #6a271e;
  --gbm-course-c5: #73524e;
  --dash-main-bg: #eeeeee;
  --dash-sidebar-bg: #2c3142;
  --dash-sidebar-text: #e8e9ec;
  --dash-border-color: #ddd;
  --dash-border-color-dark: rgba(255,255,255,0.10);

  --dash-member-bg: rgba(242, 254, 255, 0.166);
  --dashnav-link-color: #e8e9ec;
  --dashnav-link-hover-bg: rgba(255,255,255,0.08);
  --dashnav-link-active-bg: rgba(236, 248, 250, 0.191);
  --dash-shadow: 0 12px 24px rgba(18, 32, 38, 0.08);

  --meta: #1b6e66;
  --meta-soft: #daf2ee;
  
  /* Testing Colors */
   --paper: #fffdfa;
   --ink: #1f2937;
   --muted: #6b7280;
   --line: #e8ded2;
   --primary: #1b6e66;
   --primary-soft: #daf2ee;
   --accent: #b15f1f;
   --danger: #b33a2f;
   --radius-lg: 18px;
   --radius-md: 12px;

   /* Typography */
   --course-h1-size: 1.4rem;
   --course-h2-size: 1.2rem;
   --course-h3-size: 1rem;
   --course-h4-size: 1rem;
   --course-txt-sm: 0.75rem;
   --course-txt-md: 0.85rem;
   --course-txt-lg: 0.95rem;
   --course-txt-xl: 1.05rem;

   /* Spacing */
   --dash-h-space-xl: 0.6rem;
   --dash-h-space-sm: 0.8rem;
   --dash-h-space-base: 1rem;
   --dash-h-space-lg: 1.2rem;
   --dash-h-space-xl: 1.5rem;
}

/* =====================================================================
   MARK: Header
===================================================================== */

/* .gbm-action-strip {
  background: var(--gbm-site-primary);
}

.gbm-site-header .navbar::after {
  background: var(--gbm-site-primary);
} */

/* Hover underline for ALL nav links */
.navbar-nav .nav-item:hover::after,
.navbar-nav .nav-item:focus-within::after {
   background: var(--gbm-site-primary);
}

/* =====================================================================
   MARK: Layout and Sidebar
===================================================================== */

/* =====================================================================
   MARK: Footer
===================================================================== */

/* .gbm-site-footer {
  border-top: solid 5px var(--gbm-site-primary);
} */

/* =====================================================================
   MARK: Typography
===================================================================== */

/* =====================================================================
   MARK: Buttons
===================================================================== */

.btn-outline-primary {
   color: var(--gbm-site-primary);
   border-color: var(--gbm-site-primary);
}

.btn-outline-primary:hover {
   background: var(--gbm-site-primary);
   border-color: white;
}

.btn-outline-primary:active {
   background: var(--gbm-site-primary) !important;
   border-color: white !important;
}

.btn-primary {
   background: var(--gbm-site-primary);
   color: white;
   border-color: var(--gbm-site-primary);
}

.btn-primary:hover {
   background: var(--gbm-site-primary-hover);
   color: white;
   border-color: var(--gbm-site-primary);
}
.btn-primary.disabled {
   background: var(--muted);
   color: white;
   border-color: var(--muted);
}
/* =====================================================================
   MARK: Course Styles
===================================================================== */

/* =====================================================================
   MARK: Lesson Styles
===================================================================== */

/* =====================================================================
   MARK: Project Styles
===================================================================== */

/* =====================================================================
   MARK: Cards
===================================================================== */

/* .dash-login-hero-card {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 2rem;
   margin: 2rem auto;
   box-shadow: 0 4px 12px rgba(27, 110, 102, 0.1);
   text-align: center;
}
 
.gbm-ad-card {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 2rem;
   margin: 2rem auto;
   box-shadow: 0 4px 12px rgba(27, 110, 102, 0.1);
} */

/* =====================================================================
   MARK: Breadcrumbs
===================================================================== */

/* =====================================================================
   MARK: DASHBOARD
===================================================================== */

/* MARK: Reusable badges
------------------------ */
.course-process-badge {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: var(--course-txt-sm);
   font-weight: 700;
}

.course-process-badge--in-progress {
   background: #e5f3ff;
   color: #115f9a;
}

.course-process-badge--next-up {
   background: #e6f6ea;
   color: #24683a;
}

.course-process-badge--locked {
   background: #f3f4f6;
   color: #6b7280;
}

.course-process-badge--to-do {
   background: #db8955;
   color: #24683a;
}
.course-process-badge--review {
   background: #e6f6ea;
   color: #24683a;
}

/* MARK: Reusable tags
---------------------- */

.course-tag-badge {
   display: inline-flex;
}

/* MARK: Reusable eyebrows
-------------------------- */
.course-eyebrow-sm {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-sm);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.course-eyebrow-lg {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-lg);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.course-eyebrow-xl {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-xl);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}

/* MARK: Reusable Panel Links
-------------------------- */
.course-panel-link {
   display: flex;
   align-items: center;
   gap: 1rem;
   text-decoration: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

   background: #ffffff;
   border: 2px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.5rem 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
   color: #333;
}
.course-panel-link:hover {
   background: #f3f5f5;
   transform: translateY(-2px);
   border-color: rgba(77, 168, 150, 0.5);
}

.course-panel-link p {
   margin: 0;
   font-size: 1.1rem;
}

/* MARK: Reusable Dash Panel
---------------------------- */
.course-dash h1 {
   margin: var(--dash-h-space-xs) 0;
   font-size: 1.4rem;
   color: var(--gbm-site-primary);
}

.course-dash h2 {
   margin: var(--dash-h-space-sm) 0 var(--dash-h-space-base);
   color: var(--gbm-course-c2);
   font-size: 1.3rem;
}

.course-dash h3 {
   margin: 0.5rem 0rem;
   color: var(--gbm-course-c3);
   font-size: 1.2rem;
}

.course-dash,
.course-dash * {
   box-sizing: border-box;
}

.course-dash {
   font-family: Arial, sans-serif;
   color: #222;
}

.add-announcement {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.add-announcement p {
   width: fit-content;
   margin-left: auto;
   margin-right: auto;
}

.course-dash-announce {
   font-size: var(--gbm-text-xl);
   font-weight: 700;
   color: var(--gbm-course-c2);
}

.course-dash-layout {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 0;
   background: var(--dash-main-bg);
   overflow: hidden;
}

.course-dash-sidebar {
   background: var(--dash-sidebar-bg);
   border-right: 2px solid #5b6160; 
   color: var(--dash-sidebar-text);
   padding: 1.5rem 1rem;
}

.course-dash-main {
   padding: 1rem;
}

.course-dash-panel {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
}

.course-dash-panel img {
   max-width: 100%;
   border-radius: 8px;
}

.course-dash-panel--top {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
}

.course-dash-panel-header {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 1rem;
   margin: 1rem;
}

/* Dashnav Menu */
/* ------------ */
.course-dashnav {
   display: grid;
   gap: 0.25rem;
}

.course-dash-sidebar h2 {
   color: white;
}

.course-dashnav__link {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  color: var(--dashnav-link-color);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s ease, color 0.15s ease;
}

.course-dashnav__link:hover {
  background: var(--dashnav-link-hover-bg);
}

.course-dashnav__link.is-active {
  background: var(--dashnav-link-active-bg);
  border: 1px solid var(--dash-border-color-dark);
  border-bottom: 2px solid var(--gbm-site-primary);
  font-weight: 600;
}

.course-dashnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.course-dashnav__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  opacity: 0.8;
}

.course-dashnav__link.is-active .course-dashnav__icon {
  opacity: 1;
}

/* MARK: Dash Member 
------------------- */
.course-dashmember {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.9rem 0.85rem;
   margin-bottom: 1rem;

   border-radius: 12px;
   background: var(--dash-member-bg);
   border: 1px solid var(--dash-border-color-dark);
}

.course-dashmember__name {
   font-size: var(--course-txt-lg);
   font-weight: 600;
   line-height: 1.2;
   color: var(--dash-sidebar-text);
   word-break: break-word;
}

.course-dashmember__sub {
   margin-top: 0.15rem;
   font-size: var(--course-txt-sm);
   opacity: 0.85;
}

/* MARK: Course Card
-------------------- */
.course-card {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1rem;
   padding: 1rem;
}

.course-card__item {
   background: #fff;
   border: 1px solid var(--dash-border-color);
   border-radius: 8px;

   display:flex; 
   flex-direction:column; 
   height:100%;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.course-card__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 42px rgba(0,0,0,0.10);
}
.course-card__title h2 {
   margin: 0.5rem 0;
   font-size: 1.2rem;
   color: var(--gbm-course-c2);
   padding: 0.6rem;
}
.course-card__graphic img {
   max-width: 100%;
   border-radius: 8px 8px 0 0;
}
.course-card__content {
   display:flex; 
   flex-direction:column; 
   flex:1;
   /* padding: 0 0.8rem 0.8rem 0.8rem; */
   margin: 0;
}
.course-card__title {
   margin: 0;
   font-size: 1.2rem;
   color: var(--gbm-course-c1);
   margin-bottom: 0.5rem;
   padding: 0.15rem;
}
.course-card__action {
   margin-top:auto;
   background: #f2f2f3;
   padding: 0.5rem 1rem 0.5rem 0.5rem;
   border-top: 1px solid #dfe2e4;
   border-radius: 0 0 8px 8px;
   display:inline-flex;
   justify-content:flex-end;
}
.course-card__action a {
   text-decoration: none;
   color: #636868;
   font-size: 1.1rem;
}

.course-card__action a:hover {
   color: var(--gbm-course-c2);
}

#dash-top {
  scroll-margin-top: 100px;
}

/* MARK: Course Overview
------------------------ */

.course-overview-hero {
   display: grid;
   grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
}
.course-overview-hero__eyebrow {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-sm);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.course-overview-hero__summary {
   margin: 0.9rem 0 0;
   max-width: 62ch;
   color: var(--muted);
   font-size: var(--course-txt-xl);
   line-height: 1.65;
}
.course-overview-hero__meta {
   display:flex;
   flex-wrap: wrap;
   gap: 0.65rem;
   margin-top: 1rem;
}
.course-overview-hero__meta span {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 0.35rem 0.85rem;
   border-radius: 999px;
   background: var(--meta-soft);
   color: var(--meta);
   font-size: var(--course-txt-md);
   font-weight: 600;
}
.course-overview-hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-top: 1.25rem;
}

.course-overview-hero__media img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 16px;
   box-shadow: 0 16px 36px rgba(27, 110, 102, 0.14);
}

/* MARK: Section Head
--------------------- */
.course-overview-sectionhead {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
}

.course-overview-sectionhead span {
   color: var(--muted);
   font-size: var(--course-txt-md);
   font-weight: 600;
}

/* MARK: Lesson Menu
--------------------- */
.lesson-dashnav__link {
   display: block;
   padding: 0.65rem 0.85rem;
   border-radius: 8px;
   color: var(--dashnav-link-color);
   text-decoration: none;
   font-size: 0.9rem;
   transition: background 0.15s ease, color 0.15s ease;
}

.lesson-dashnav__link:hover {
  background: var(--dashnav-link-hover-bg);
}

.lesson-dashnav__link.is-active {
  background: var(--dashnav-link-active-bg);
  border: 1px solid var(--dash-border-color-dark);
  border-bottom: 2px solid var(--gbm-site-primary);
  font-weight: 600;
}

.lesson-dashnav__index {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 25px;
   min-height: 25px;
   border-radius: 8px;
   /* border: 0.5px solid var(--gbm-site-primary); */
   background: var(--gbm-site-primary);
   color: #f4f8f7;
   font-weight: 600;
}
 
/* MARK: Lesson Row
------------------- */
/* .course-dash-panel-link {
   background: #ffffff;
   border: 2px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.5rem 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
   color: #333;
}

.course-dash-panel-link:hover {
   border-bottom: 2px solid var(--gbm-site-primary);
}

.course-dash-panel-link p {
   margin: 0;
   font-size: 1.1rem;
}

.course-dash-panel:last-child {
   margin-bottom: 0;
} */

.course-lesson-row {
   display: flex;
   align-items: center;
   gap: 1rem;
   text-decoration: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;

   background: #ffffff;
   border: 2px solid var(--dash-border-color);
   border-radius: 8px;
   padding: 0.6rem 0.6rem 0.6rem 1rem;
   margin: 0.5rem 1rem;
   box-shadow: 0 2px 4px var(--dash-shadow);
   color: #333;
}
.course-lesson-row:hover {
   transform: translateY(-2px);
   border-color: rgba(77, 168, 150, 0.5);
}

.course-lesson-row p {
   margin: 0;
   font-size: 1.1rem;
}

.course-lesson-row:last-child {
   margin-bottom: 0;
}
.course-lesson-row__index {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 46px;
   min-height: 46px;
   border-radius: 12px;
   background: #f4f8f7;
   color: var(--gbm-course-c1);
   font-weight: 700;
}
.course-lesson-row__body {
   flex: 1;
   min-width: 0;
}

.course-lesson-row__title {
   margin: 0;
   color: var(--gbm-course-c2);
   font-size: 1.05rem;
   font-weight: 600;
}

.course-lesson-row__meta {
   display: inline-block;
   margin-top: 0.25rem;
   color: var(--muted);
   font-size: var(--course-txt-md);
}

.course-lesson-row__img img {
   width: 200px;
   height: auto;
   border-radius: 8px;
   object-fit: cover;
}

.course-lesson-row__status {
   margin-left: auto;
}

.course-lesson-badge {
   display: inline-flex;
   align-items: center;
   min-height: 32px;
   padding: 0.3rem 0.75rem;
   border-radius: 999px;
   font-size: var(--course-txt-sm);
   font-weight: 700;
}

.course-lesson-badge--in-progress {
   background: #e5f3ff;
   color: #115f9a;
}

.course-lesson-badge--next-up {
   background: #e6f6ea;
   color: #24683a;
}

.course-lesson-badge--locked {
   background: #f3f4f6;
   color: #6b7280;
}

/* MARK: Lesson Overview
------------------------ */

.lesson-overview-hero {
   display: grid;
   grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.4fr);
   gap: 1.5rem;
   align-items: center;
}
.lesson-overview-hero__eyebrow {
   margin: 0 0 0.75rem;
   font-size: var(--course-txt-lg);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
}
.lesson-overview-hero__summary {
   margin: 0.9rem 0 0;
   max-width: 62ch;
   color: var(--muted);
   font-size: var(--course-txt-xl);
   line-height: 1.65;
}
.lesson-overview-hero__meta {
   display:flex;
   flex-wrap: wrap;
   gap: 0.65rem;
   margin-top: 1rem;
}
.lesson-overview-hero__meta span {
   display: inline-flex;
   align-items: center;
   min-height: 34px;
   padding: 0.35rem 0.85rem;
   border-radius: 999px;
   background: var(--meta-soft);
   color: var(--meta);
   font-size: var(--course-txt-md);
   font-weight: 600;
}
.lesson-overview-hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
   margin-top: 1.25rem;
}

.lesson-overview-hero__media img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: contain;
   border-radius: 16px;
   box-shadow: 0 16px 36px rgba(27, 110, 102, 0.14);
}
.lesson-overview-hero__media img:hover {
   transform: translateY(-2px);
   box-shadow: 0 24px 48px rgba(27, 110, 102, 0.20);
}

/* MARK: Lesson Layout 
---------------------- */
.lesson-content {
   display: grid;
   grid-template-columns: 1fr 0.6fr;
   /* gap: 0.5rem;  */
}

.lesson-content__media {
   display: grid;
}
.lesson-content__project {
   display: grid;
}

/* MARK: Lesson Video
--------------------- */

.lesson-video {
  display: flex;
  flex-direction: column;
  /* align-items: center;
  gap: 1rem; */
}

.lesson-video__head {
  font-size: var(--course-h2-size);
  color: var(--gbm-course-c1);
}

.lesson-video__item {
  margin-bottom: 1.5rem;
}

.lesson-video__frame {
  width: min(100%, 640px); /* change max width as needed */
  /* margin: 0 auto 1rem; */
}

.lesson-video__video {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 16 / 9; */
}

/* Mark: Lesson Audio
--------------------- */

/* Mark: Lesson Ebook
--------------------- */

/* Mark: Lesson Project
----------------------- */

/* MARK: Evaluation Overview
---------------------------- */
.evaluation-overview-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
   gap: 0;
}
.evaluation-overview-progress {
   background: #fffdfa;
   /* display: flex;
   flex-direction: column; */
   /* background:
      linear-gradient(135deg, rgba(77, 168, 150, 0.12), rgba(255, 255, 255, 0.94)),
      #fff; */
}
.evaluation-overview-progress__bar {
   width: 100%;
   height: 12px;
   margin-top: 1rem;
   overflow: hidden;
   border-radius: 999px;
   background: #dfe8e6;
}
.evaluation-overview-progress__bar span {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--gbm-site-primary), var(--gbm-site-primary-hover));
}

.evaluation-overview-stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.85rem;
   margin-top: 1.1rem;
}

.evaluation-overview-stat {
   padding: 1rem;
   border: 1px solid #d7e7e3;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.88);
}

.evaluation-overview-stat strong {
   display: block;
   margin-top: 0.4rem;
   color: var(--gbm-course-c2);
   font-size: 1rem;
   line-height: 1.4;
}

.evaluation-overview-stat__label {
   display: block;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.evaluation-overview-sidecard {
   background: #fffdfa;
}

.evaluation-overview-guide {
   display: grid;
   gap: 0.9rem;
   margin: 1rem 0 0;
}
.evaluation-overview-guide div {
   padding-bottom: 0.9rem;
   border-bottom: 1px solid var(--line);
}
.evaluation-overview-guide div:last-child {
   padding-bottom: 0;
   border-bottom: 0;
}
.evaluation-overview-results {
   display: flex;
   flex-direction: column;
   padding: 1rem;
   border: 1px solid #d7e7e3;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.88);
   margin-top: 0.6rem;
}
.evaluation-overview-results span {
   display: block;
   font-size: var(--course-txt-lg);
   font-weight: 700;
   letter-spacing: 0.08rem;
   text-transform: uppercase;
   color: var(--gbm-site-primary);
   text-align: center;
   margin-bottom: 0.6rem;
}
.evaluation-overview-results strong {
   display: block;
   color: var(--gbm-course-c2);
   font-size: 1.25rem;
   line-height: 1.4;
   text-align: center;
   margin-bottom: 0.6rem;
}
.evaluation-overview-results p {
   display: block;
   color: var(--gbm-course-c2);
   font-size: 1rem;
   line-height: 1.4;
   text-align: center;
}
.evaluation-overview-results__buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
   margin: 0 auto;
}

/* 

.course-overview-facts dt {
   margin-bottom: 0.3rem;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.course-overview-facts dd {
   margin: 0;
   color: var(--gbm-course-c2);
   font-size: var(--course-txt-lg);
   font-weight: 600;
} */

/* MARK: Evaluation Question
---------------------------- */

/* input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--gbm-site-primary);
} */

.course-eval-option label {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  line-height: 1.35;
  cursor: pointer;
  
}

.course-eval-option input[type="checkbox"] {
  width: 25px;
  height: 25px;
  accent-color: var(--gbm-site-primary);
  margin: 2px 0 0;
  flex: 0 0 25px;
}


/* MARK: Media Queries
---------------------- */

@media (max-width: 992px) {

   /* Course card */
   .course-card {
      grid-template-columns: 1fr;
   }
   .course-card__item {
      max-width: 100%;
   }

   /* Course Overview */
   .course-overview-hero,
   .course-overview-grid,
   .course-overview-stats {
      grid-template-columns: 1fr;
   }

   .lesson-overview-hero {
      grid-template-columns: 1fr;
   }

   /* Lesson Content */
   .lesson-content {
      grid-template-columns: 1fr;
   }

   /* Evaluation Overview */
   .evaluation-overview-grid {
      grid-template-columns: 1fr;
   }

   .evaluation-overview-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.5rem;
   }
}


@media (max-width: 768px) {
   .course-dash-layout {
      grid-template-columns: 1fr;
   }
   .course-dash-sidebar {
   border-right: 0;
   border-bottom: 1px solid var(--dash-border-color);
   }
   .course-overview-sectionhead {
      flex-direction: column;
      align-items: flex-start;
   }
   .course-lesson-row {
      flex-wrap: wrap;
      align-items: flex-start;
   }
   .course-lesson-row__status {
      margin-left: 0;
   }

   /* Evaluation Overview */
   .evaluation-overview-stats {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 0.5rem;
   }

}

/* =====================================================================
   MARK: 00) EXPERIMENTAL
===================================================================== */

/* .course-overview-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr);
   gap: 0;
}

.course-overview-progress {
   background:
      linear-gradient(135deg, rgba(77, 168, 150, 0.12), rgba(255, 255, 255, 0.94)),
      #fff;
}

.course-overview-progress__bar {
   width: 100%;
   height: 12px;
   margin-top: 1rem;
   overflow: hidden;
   border-radius: 999px;
   background: #dfe8e6;
}

.course-overview-progress__bar span {
   display: block;
   height: 100%;
   border-radius: inherit;
   background: linear-gradient(90deg, var(--gbm-site-primary), var(--gbm-course-c1));
}

.course-overview-stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 0.85rem;
   margin-top: 1.1rem;
}

.course-overview-stat {
   padding: 1rem;
   border: 1px solid #d7e7e3;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.88);
}

.course-overview-stat strong {
   display: block;
   margin-top: 0.4rem;
   color: var(--gbm-course-c2);
   font-size: 1rem;
   line-height: 1.4;
}

.course-overview-stat__label {
   display: block;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.course-overview-sidecard {
   background: #fffdfa;
}

.course-overview-facts {
   display: grid;
   gap: 0.9rem;
   margin: 1rem 0 0;
}

.course-overview-facts div {
   padding-bottom: 0.9rem;
   border-bottom: 1px solid var(--line);
}

.course-overview-facts div:last-child {
   padding-bottom: 0;
   border-bottom: 0;
}

.course-overview-facts dt {
   margin-bottom: 0.3rem;
   color: var(--muted);
   font-size: var(--course-txt-sm);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.course-overview-facts dd {
   margin: 0;
   color: var(--gbm-course-c2);
   font-size: var(--course-txt-lg);
   font-weight: 600;
} */