/**
 * CourseGlade Course Styles
 * Archive, Single Course, and Learning Mode
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
  /* Course-specific color overrides (intentionally different from base.css) */
  --courseglade-primary-light: #74c0fc;
  --courseglade-success: #16a34a;
  --courseglade-warning: #d97706;
  --courseglade-danger: #dc2626;
  /* 12px intentional (more compact than base.css 16px) */
  --courseglade-radius-lg: 12px;
  /* Course-specific aliases */
  --courseglade-text: #212529;
  --courseglade-bg: #f8f9fa;
}

/* ==========================================================================
   Container
   ========================================================================== */
.courseglade-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ==========================================================================
   Course Archive
   ========================================================================== */
.courseglade-course-archive {
  padding: 40px 0;
}

.courseglade-archive-header {
  text-align: center;
  margin-bottom: 40px;
}

.courseglade-archive-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--courseglade-text);
}

.courseglade-archive-description {
  color: var(--courseglade-on-surface-muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* Filters */
/* A row, not a panel. This was a white card with a shadow sitting above a
   grid of white cards with shadows, so the controls competed with the results
   they were meant to filter. The fields carry their own borders — the tray
   around them was doing no work. */
.courseglade-course-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 24px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.courseglade-result-count {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.courseglade-filter-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--courseglade-on-surface-muted);
  white-space: nowrap;
}

.courseglade-filter-select {
  min-width: 140px;
}

/* The selects group at the end; search keeps the rest of the line. */
.courseglade-filter-group:not(.courseglade-filter-group--search) {
  flex: 0 0 auto;
}

.courseglade-filter-group--search {
  flex: 0 1 260px;
  min-width: 200px;
  margin-right: auto;
}

.courseglade-search-wrap {
  position: relative;
  width: 100%;
  max-width: 360px;
}

.courseglade-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--courseglade-on-surface-muted);
  pointer-events: none;
}

input.courseglade-search-input {
  padding-left: 38px;
}

/* Filter bar — narrow screens.
   The bar is a right-aligned flex row on desktop: search on the left, the
   selects grouped at the end. Below the point where all five fit on one line
   that arrangement falls apart — search sits alone on the first row and the
   selects hang off the right edge of the second. These breakpoints follow the
   grid's own (1023 / 767), so the bar reflows on the same lines the cards do. */
@media (max-width: 1023px) {
  .courseglade-course-filters {
    justify-content: flex-start;
  }

  /* Its own row, full width. `margin-right: auto` is what pushed the selects
     to the far edge, and there is no far edge to push to once it wraps. */
  .courseglade-filter-group--search {
    flex: 1 0 100%;
    min-width: 0;
    margin-right: 0;
  }

  .courseglade-search-wrap {
    max-width: none;
  }

  /* The selects share what is left rather than each claiming 140px and
     wrapping one at a time. */
  .courseglade-filter-group:not(.courseglade-filter-group--search) {
    flex: 1 1 0;
    min-width: 0;
  }

  .courseglade-filter-select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  /* Two per row. Four selects across a phone leaves each too narrow to read
     "Price: low to high". */
  .courseglade-filter-group:not(.courseglade-filter-group--search) {
    flex: 1 1 calc(50% - 5px);
  }
}

@media (max-width: 479px) {
  .courseglade-course-filters {
    gap: 8px;
  }

  .courseglade-filter-group:not(.courseglade-filter-group--search) {
    flex: 1 1 100%;
  }
}

/* Course Grid */
.courseglade-grid-wrap {
  position: relative;
}

.courseglade-grid-wrap--loading .courseglade-course-grid {
  opacity: 0.4;
  pointer-events: none;
}

.courseglade-grid-overlay {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.courseglade-grid-wrap--loading .courseglade-grid-overlay {
  display: flex;
}

/* .courseglade-block-course-grid is a legacy grid class reused by the
   instructor profile (InstructorProfileRenderer); it shares the course-grid
   layout (moved here from the removed blocks stylesheet). */
.courseglade-course-grid,
.courseglade-block-course-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  gap: 20px;
}

@media (max-width: 1399px) {
  .courseglade-course-grid,
  .courseglade-block-course-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  .courseglade-course-grid,
  .courseglade-block-course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .courseglade-course-grid,
  .courseglade-block-course-grid {
    grid-template-columns: 1fr;
  }
}

/* Course Card — reset theme overrides (e.g. Astra adds padding/margin via post_class). */
.courseglade-course-grid .courseglade-course-card,
.courseglade-block-course-grid .courseglade-course-card {
  padding: 0;
  margin: 0;
  border: 1px solid var(--courseglade-border);
}

.courseglade-course-grid .courseglade-course-card:hover,
.courseglade-block-course-grid .courseglade-course-card:hover {
  border-color: var(--courseglade-primary);
}

/* Course Card */
.courseglade-course-card {
  position: relative;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  overflow: hidden;
  box-shadow: var(--courseglade-shadow-sm);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}

/* A scrim over the thumbnail, darkening only the strips where badges sit.
   The category chip and the level caption are white text over whatever the
   author uploaded, and a pale photograph made both unreadable. A flat overlay
   would dull the whole image; this leaves the middle alone. */
.courseglade-course-card__thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 62%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* Everything meant to sit above the scrim. */
.courseglade-course-card__badge,
.courseglade-course-card__level,
.courseglade-course-card__wishlist,
.courseglade-course-card__placeholder {
  z-index: 2;
}

/* The level is a caption, not a chip — deliberately a different form from the
   category pill above it, so the two read as different kinds of information
   rather than as two tags. */
.courseglade-course-card__level {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}

/* Lifts on hover, but not to shadow-lg — that is the modal elevation, and a
   grid of twelve cards each jumping that far reads as the page twitching. */
.courseglade-course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--courseglade-shadow);
  border-color: var(--courseglade-primary);
}

.courseglade-course-card a,
.courseglade-course-card a:hover,
.courseglade-course-card a:focus {
  text-decoration: none !important;
}

h3.courseglade-course-card__title a {
  text-decoration: none !important;
  color: inherit;
}

h3.courseglade-course-card__title a:hover {
  color: var(--courseglade-primary);
}

.courseglade-course-card__content {
  flex: 1;
}

/* Thumbnail */
.courseglade-course-card__thumbnail {
  position: relative;
  /* A ratio rather than a fixed 200px. The grid goes three, two and one column
     across the breakpoints, so a fixed height cropped the same image
     differently at each width. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--courseglade-bg);
}

.courseglade-course-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.courseglade-course-card:hover .courseglade-course-card__image {
  transform: scale(1.05);
}

.courseglade-course-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-course-card__placeholder svg {
  width: 48px;
  height: 48px;
}

/* Badges */

/* The row is positioned; the chips inside it are not. `right` clears the
   wishlist heart so a long category name wraps rather than running under it. */
.courseglade-course-card__tags {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 54px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 2;
}

.courseglade-course-card__badge {
  position: absolute;
  padding: 4px 9px;
  border-radius: var(--courseglade-radius-pill);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 2;
}

.courseglade-course-card__tags .courseglade-course-card__badge {
  position: static;
}

.courseglade-course-card__badge--category {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--courseglade-surface-lowest);
  backdrop-filter: blur(4px);
}

.courseglade-course-card__badge--free {
  background: var(--courseglade-success);
  color: var(--courseglade-surface-lowest);
  top: auto;
  bottom: 12px;
  left: auto;
  right: 12px;
}

.courseglade-course-card__badge--sale {
  background: var(--courseglade-danger);
  color: var(--courseglade-surface-lowest);
  top: auto;
  bottom: 12px;
  left: auto;
  right: 12px;
}

.courseglade-course-card__badge--enrolled {
  background: var(--courseglade-primary);
  color: var(--courseglade-surface-lowest);
  top: auto;
  bottom: 12px;
  left: auto;
  right: 12px;
}

/* Content */
.courseglade-course-card__content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.courseglade-course-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
  color: var(--courseglade-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Instructor */
.courseglade-course-card__instructor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0 0 10px !important;
}

.courseglade-course-card__instructor-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.courseglade-course-card__instructor-link:hover {
  color: var(--courseglade-primary);
}

.courseglade-course-card__instructor svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.courseglade-course-card__instructor-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

/* Rating + Students row */
.courseglade-course-card__stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-course-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The finished state, sitting where the rating row does on every other card. */
.courseglade-course-card__stats {
  flex-wrap: wrap;
}

.courseglade-course-card__stats-sep {
  color: var(--courseglade-gray-400);
  user-select: none;
}

.courseglade-course-card__grade {
  font-weight: 700;
  color: var(--courseglade-on-surface);
}

.courseglade-course-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--courseglade-on-surface-muted);
}

/* The tick keeps the colour: it marks the state, the words report it. */
.courseglade-course-card__status svg {
  color: var(--courseglade-success);
  flex: none;
}

.courseglade-course-card__rating svg {
  color: var(--courseglade-amber);
  flex: none;
}

.courseglade-course-card__rating-value {
  font-weight: 700;
  color: inherit;
}

.courseglade-course-card__stats-dot {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--courseglade-border);
  flex: none;
  vertical-align: middle;
  user-select: none;
  font-size: 0;
}

.courseglade-course-card__students {
  font-weight: 600;
  color: inherit;
}

/* Progress (enrolled) */
/* The seam along the bottom of the thumbnail. Sits over the scrim, so it needs
   its own dark ground to read against a pale image. */
.courseglade-course-card__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.courseglade-course-card__bar i {
  display: block;
  height: 100%;
  background: var(--courseglade-success);
}

.courseglade-course-card__progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.courseglade-course-card__progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.courseglade-course-card__progress-label,
.courseglade-course-card__progress-pct {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-course-card__progress-bar {
  height: 6px;
  background: var(--courseglade-surface-low);
  border-radius: var(--courseglade-radius-pill);
  overflow: hidden;
}

.courseglade-course-card__progress-fill {
  height: 100%;
  background: var(--courseglade-success);
  border-radius: var(--courseglade-radius-pill);
  transition: width 0.4s ease;
}

/* Footer */
.courseglade-course-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  margin-top: auto;
  border-top: 1px solid var(--courseglade-surface-low);
}

.courseglade-course-card__footer:has(.courseglade-course-card__continue-btn) {
  gap: 10px;
  justify-content: flex-end;
}

.courseglade-course-card__footer:has(.courseglade-course-card__next) {
  justify-content: space-between;
}

.courseglade-course-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 0;
  justify-content: space-between;
  flex: 1;
}

.courseglade-course-card__next {
  min-width: 0;
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.courseglade-course-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.courseglade-course-card__price--original {
  text-decoration: line-through;
  color: var(--courseglade-on-surface-muted);
  font-size: 0.75rem;
  opacity: 0.7;
}

.courseglade-course-card__price--sale,
.courseglade-course-card__price--current {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--courseglade-on-surface);
}

.courseglade-course-card__price--free {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--courseglade-success);
}

/* Shown where a price would be when the course is not sold outright.
   FREE's fallback is a status ("With membership") and reads as one. An addon
   naming a real price supplies the parts below instead, and those keep a
   price's weight — a shopper scanning a grid is comparing numbers, and fine
   print is what the eye skips. */
.courseglade-course-card__price--membership {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-course-card__price-prefix,
.courseglade-course-card__price-cadence {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--courseglade-on-surface-muted);
}

/* Smaller than an outright price (1.75rem): "From $290.00/year" is a long
   string in a narrow card, and a figure that wraps is worse than one a size
   down. */
.courseglade-course-card__price--membership .courseglade-course-card__price--current {
  font-size: 1.125rem;
}

.courseglade-course-card__price-prefix {
  margin-right: -1px;
}

/* Difficulty tag in stats row */

/* Arrow view button */
.courseglade-course-card__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  /* A labelled button, not an arrow in a circle. "View" says what happens;
     an arrow asks the reader to guess, and it carried the whole meaning of
     the action through an aria-label nobody sighted could read. */
  height: 34px;
  padding: 0 14px;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--courseglade-radius-sm);
  border: 1.5px solid var(--courseglade-border);
  color: var(--courseglade-on-surface-muted);
  text-decoration: none;
  flex-shrink: 0;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

/* The certificate is what finishing earned; reviewing the material is the
   quieter of the two, so the pair is not two identical outlines. */
.courseglade-course-card__view-btn--primary {
  background: var(--courseglade-primary);
  border-color: var(--courseglade-primary);
  color: var(--courseglade-on-primary);
}

.courseglade-course-card .courseglade-course-card__view-btn--primary:hover,
.courseglade-course-card .courseglade-course-card__view-btn--primary:focus {
  background: var(--courseglade-primary-dark);
  border-color: var(--courseglade-primary-dark);
  color: var(--courseglade-on-primary);
}

/* The secondary button keeps its white face on hover: filling it primary made
   it the twin of the primary button beside it, which is the distinction the
   pair exists to draw. */
.courseglade-course-card .courseglade-course-card__view-btn:hover,
.courseglade-course-card .courseglade-course-card__view-btn:focus {
  border-color: var(--courseglade-primary);
  background: var(--courseglade-surface-lowest);
  color: var(--courseglade-primary);
  text-decoration: none;
}

.courseglade-course-card__continue-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  white-space: nowrap;
  height: 34px;
  padding: 0 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--courseglade-radius-sm);
  background: var(--courseglade-primary);
  color: #fff;
  transition: background 0.15s ease;
}

.courseglade-course-card__continue-btn:hover {
  background: var(--courseglade-primary-dark);
  color: #fff;
}

/* Pagination */
.courseglade-pagination {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

nav.courseglade-pagination .page-numbers,
nav.courseglade-pagination a.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 36px, not the mockup's 30px. Thirty is well under any usable touch
     target, and this control is tapped on phones more than anywhere else. */
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  /* Rounded square rather than a pill. Pills now mean "badge" everywhere else
     on the site, and a page number is a control, not a status. */
  border-radius: var(--courseglade-radius-sm);
  color: var(--courseglade-on-surface-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--courseglade-transition);
}

nav.courseglade-pagination a.page-numbers:hover,
nav.courseglade-pagination a.page-numbers:focus {
  background: var(--courseglade-bg);
  border-color: var(--courseglade-primary);
  color: var(--courseglade-primary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--courseglade-shadow-sm);
}

nav.courseglade-pagination .page-numbers.current {
  background: var(--courseglade-primary);
  border-color: var(--courseglade-primary);
  color: var(--courseglade-surface-lowest);
  box-shadow: var(--courseglade-shadow-sm);
}

nav.courseglade-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--courseglade-border);
  min-width: 24px;
  padding: 0;
  cursor: default;
}

nav.courseglade-pagination a.prev.page-numbers,
nav.courseglade-pagination a.next.page-numbers {
  padding: 0 20px;
  line-height: 1;
  background: var(--courseglade-surface-lowest);
  border-color: var(--courseglade-border);
  font-weight: 700;
}

nav.courseglade-pagination a.prev.page-numbers:hover,
nav.courseglade-pagination a.next.page-numbers:hover {
  background: var(--courseglade-primary);
  border-color: var(--courseglade-primary);
  color: var(--courseglade-surface-lowest);
}

/* Sits under the pager. Centred to match it, and muted — it is read, not
   clicked. */
.courseglade-pagination__range {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

/* No Courses */
/* The catalog uses the shared empty state from base.css. The bespoke card that
   lived here had its own size, shadow and an orange gradient icon, so the one
   screen a visitor is most likely to hit empty looked unlike every other. */

/* ==========================================================================
   Single Course
   ========================================================================== */
.courseglade-single-course {
  background: var(--courseglade-bg);
}

/* ---- Hero ----
   A dark gradient band rather than the light one it replaces. The change is
   worth the risk it carries because the hero is the first thing on the most
   visited page, and a light hero on a light page gave the title nothing to sit
   against.
   Everything inside inherits white, so any descendant that sets its own dark
   colour has to be re-stated below — there are three, and they are all here.
   The instructor card is not one of them: it carries its own white background
   over the image, so its contents stay dark on purpose. */
.courseglade-course-hero {
  padding: 56px 0 48px;
  background: linear-gradient(120deg, #0f1f4b, var(--courseglade-primary));
  color: var(--courseglade-surface-lowest);
}

.courseglade-course-hero__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 48px;
  align-items: center;
}

.courseglade-course-hero__content {
  max-width: 640px;
}

.courseglade-course-hero__categories {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.courseglade-course-hero__category {
  display: inline-block;
  padding: 5px 12px;
  /* Translucent white, not the pale-blue tint this used to carry — that was
     primary-on-primary once the band went dark, and vanished entirely. */
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--courseglade-radius-pill);
  color: var(--courseglade-surface-lowest);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--courseglade-transition);
}

.courseglade-course-hero__category:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--courseglade-surface-lowest);
}

/* The outline variant is a primary-coloured border on a transparent ground,
   which is close to invisible on the dark band. Restated in white here rather
   than changed globally, because everywhere else on the site it sits on a
   light surface and is correct as it is. */
.courseglade-course-hero .courseglade-btn-outline {
  color: var(--courseglade-surface-lowest);
  border-color: rgba(255, 255, 255, 0.45);
  background: transparent;
}

.courseglade-course-hero .courseglade-btn-outline:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--courseglade-surface-lowest);
  color: var(--courseglade-surface-lowest);
}

.courseglade-course-hero__title {
  /* 2.5rem, not 3.5rem. At 56px the title wrapped to three lines on a laptop
     and pushed the buttons below the fold, which is the one thing the hero
     exists to avoid. */
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 14px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--courseglade-surface-lowest);
}

.courseglade-course-hero__excerpt {
  font-size: 1.0625rem;
  /* Not the muted token — that is a grey for light surfaces and disappears on
     this one. Translucent white keeps the same "quieter than the title"
     relationship the muted grey had. */
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
  line-height: 1.6;
  max-width: 52ch;
}

.courseglade-course-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Hero Media */
.courseglade-course-hero__image-wrap {
  position: relative;
  /* 16/10 rather than 4/3. Course thumbnails are recommended at 1280×720, so
     the old 4/3 frame was cropping the shape authors are told to upload. */
  aspect-ratio: 16 / 10;
  border-radius: var(--courseglade-radius-md);
  overflow: hidden;
  box-shadow: var(--courseglade-shadow-lg);
}

.courseglade-course-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.courseglade-course-hero__image-wrap:hover .courseglade-course-hero__image {
  transform: scale(1.05);
}

.courseglade-course-hero__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 21, 51, 0.45), transparent 55%);
}

.courseglade-course-hero__instructor-card {
  position: absolute;
  bottom: 16px;
  left: 16px;
  min-width: min(260px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px);
  padding: 10px 14px;
  border-radius: var(--courseglade-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.courseglade-course-hero__instructor-avatar {
  flex-shrink: 0;
}

.courseglade-course-hero__avatar-img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.courseglade-course-hero__instructor-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--courseglade-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

.courseglade-course-hero__instructor-text {
  min-width: 0;
}

.courseglade-course-hero__instructor-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.courseglade-course-hero__instructor-more {
  flex: none;
  margin-left: auto;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--courseglade-primary);
  background: color-mix(in srgb, var(--courseglade-primary) 12%, transparent);
  border-radius: var(--courseglade-radius-pill);
  white-space: nowrap;
}

/* ---- Highlights Panel ---- */
.courseglade-course-highlights {
  background: var(--courseglade-surface-lowest);
  border-bottom: 1px solid var(--courseglade-border);
  padding: 18px 0;
}

/* Spread across the band rather than a fixed track count: the strip has four
   items or five depending on whether the course has reviews, and a grid has to
   be told which. */
.courseglade-course-highlights__grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 48px;
}

.courseglade-course-highlights__value--rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.courseglade-course-highlights__value--rating svg {
  flex: none;
  color: var(--courseglade-amber);
}

.courseglade-course-highlights__value-sub {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-course-highlights__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--courseglade-on-surface-muted);
  margin: 0 0 2px;
}

.courseglade-course-highlights__value {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
  margin: 0;
}

/* ---- Course Body ---- */
.courseglade-course-body {
  padding: 80px 0;
}

.courseglade-course-body__grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}

.courseglade-course-body__main {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.courseglade-course-body__sidebar {
  position: sticky;
  top: 120px;
}

/* Sections */
.courseglade-course-section {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.courseglade-course-section__title {
  /* 1.375rem, down from 2rem. At 32px these competed with the page title for
     attention, and there are eight of them down the page. */
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--courseglade-text);
  letter-spacing: -0.015em;
}

/* What You'll Learn — Bento Grid */
.courseglade-course-learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* A row, not a card: tick beside the sentence it confirms. Stacking a large
   boxed icon above the text made each one a third taller than its content and
   left an orphan whenever the count was odd. `shadow-lg` is modal elevation —
   there are four of these side by side. */
.courseglade-course-learn-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--courseglade-radius-sm);
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
}

.courseglade-course-learn-card__icon {
  display: flex;
  flex: none;
  margin-top: 2px;
  color: var(--courseglade-success);
}

.courseglade-course-learn-card__text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--courseglade-on-surface);
  margin: 0;
}

/* Course Description */
.courseglade-course-description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-course-description strong {
  font-weight: 700;
  color: var(--courseglade-on-surface);
}

.courseglade-course-description h2,
.courseglade-course-description h3,
.courseglade-course-description h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--courseglade-on-surface);
}

.courseglade-course-description p {
  margin-bottom: 14px;
}

.courseglade-course-description p:last-child {
  margin-bottom: 0;
}

.courseglade-course-description ul,
.courseglade-course-description ol {
  margin-bottom: 14px;
  margin-left: 0;
  padding-left: 20px;
  list-style-position: outside;
}

.courseglade-course-description ul {
  list-style: none;
  padding-left: 0;
}

.courseglade-course-description ul > li {
  position: relative;
  padding-left: 24px;
}

.courseglade-course-description ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--courseglade-primary);
}

.courseglade-course-description li {
  margin-bottom: 8px;
}

.courseglade-course-description li:last-child {
  margin-bottom: 0;
}

.courseglade-course-description li p {
  margin: 0;
}

.courseglade-course-description img {
  max-width: 100%;
  height: auto;
  border-radius: var(--courseglade-radius);
}

/* White rather than the shared secondary's tinted ground: it sits on the
   page's grey, where a grey button reads as disabled. Hover borrows the
   card hover — a border, not a colour flip. */
.courseglade-reviews-view-all {
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  color: var(--courseglade-on-surface);
  font-weight: 600;
}

.courseglade-reviews-view-all:hover:not(:disabled),
.courseglade-reviews-view-all:focus:not(:disabled) {
  background: var(--courseglade-surface-lowest);
  border-color: var(--courseglade-on-surface-muted);
  color: var(--courseglade-on-surface);
  box-shadow: none;
}

.courseglade-course-description__toggle-wrap {
  padding-top: 12px;
}

/* Matches the instructor bio's toggle, which does the same job a few sections
   down. Both reveal the rest of a block of prose, and a bordered button says
   that is a bigger action than it is. */
.courseglade-course-description__toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--courseglade-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--courseglade-transition);
}

.courseglade-course-description__toggle:hover {
  background: none;
  color: var(--courseglade-primary-dark);
}

.courseglade-course-description__toggle:focus,
.courseglade-course-description__toggle:active {
  background: none;
  color: var(--courseglade-primary);
}

.courseglade-course-description__toggle:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.courseglade-course-description__toggle:focus-visible {
  outline: 2px solid var(--courseglade-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.courseglade-course-description__toggle svg {
  transition: transform var(--courseglade-transition);
}

.courseglade-course-description__toggle.is-expanded svg {
  transform: rotate(180deg);
}

/* Curriculum — left-border style */
/* One panel with the modules divided inside it, rather than five detached
   cards with gaps. The draft reads as a single table of contents; separate
   cards read as five unrelated things. */
.courseglade-curriculum {
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  overflow: hidden;
}

.courseglade-curriculum-section {
  border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-curriculum-section:last-child {
  border-bottom: 0;
}

.courseglade-curriculum-section__header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px;
  background: var(--courseglade-surface-lowest);
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 14px;
}

.courseglade-curriculum-section__header:hover {
  background: var(--courseglade-surface);
}

.courseglade-curriculum-section__header:focus,
.courseglade-curriculum-section__header:active {
  background: var(--courseglade-surface);
  color: inherit;
}

.courseglade-curriculum-section__header:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.courseglade-curriculum-section__header:focus-visible {
  outline: 2px solid var(--courseglade-primary);
  outline-offset: -2px;
}

.courseglade-curriculum-section__number {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--courseglade-radius-sm);
  background: var(--courseglade-primary-surface);
  color: var(--courseglade-primary);
  font-size: 0.8125rem;
  font-weight: 800;
}

.courseglade-curriculum-section__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.courseglade-curriculum-section__title {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface);
  margin: 0;
}

.courseglade-curriculum-section__header:focus .courseglade-curriculum-section__number,
.courseglade-curriculum-section__header:active .courseglade-curriculum-section__number {
  background: var(--courseglade-primary-surface);
  color: var(--courseglade-primary);
}

.courseglade-curriculum-section__header:focus .courseglade-curriculum-section__meta,
.courseglade-curriculum-section__header:active .courseglade-curriculum-section__meta {
  color: var(--courseglade-on-surface-muted);
}

.courseglade-curriculum-section__meta {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-curriculum-section__icon {
  transition: transform var(--courseglade-transition);
  color: var(--courseglade-on-surface-muted);
}

.courseglade-curriculum-section__header[aria-expanded="true"] .courseglade-curriculum-section__icon {
  transform: rotate(180deg);
}

.courseglade-curriculum-section__content {
  padding: 0 16px 10px 60px;
}

.courseglade-curriculum-section__content[hidden] {
  display: none;
}

.courseglade-curriculum-item {
  border-top: 1px solid var(--courseglade-surface-low);
}

.courseglade-curriculum-item__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--courseglade-text);
  transition: background var(--courseglade-transition);
}

a.courseglade-curriculum-item__link:hover {
  background: var(--courseglade-bg);
}

.courseglade-curriculum-item--locked .courseglade-curriculum-item__link {
  color: var(--courseglade-on-surface-muted);
  cursor: not-allowed;
}

.courseglade-curriculum-item__icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--courseglade-primary-surface);
  color: var(--courseglade-primary);
  flex: none;
}

.courseglade-curriculum-item--completed .courseglade-curriculum-item__icon {
  background: color-mix(in srgb, var(--courseglade-success) 12%, transparent);
  color: var(--courseglade-success);
}

.courseglade-curriculum-item__title {
  flex: 1;
  font-size: 0.9375rem;
}

.courseglade-curriculum-item__lock {
  color: var(--courseglade-on-surface-muted);
}

.courseglade-curriculum-item__preview-badge,
.courseglade-curriculum-item__badge {
  flex: none;
  padding: 2px 8px;
  background: var(--courseglade-primary-light);
  color: var(--courseglade-primary-dark);
  border-radius: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.courseglade-curriculum-item__badge--quiz {
  background: var(--courseglade-warning-bg);
  color: var(--courseglade-warning-text);
}

/* Duration or question count, right-aligned against the row's end so a column
   of them lines up down the section. */
.courseglade-curriculum-item__meta {
  flex: none;
  font-size: 0.75rem;
  color: var(--courseglade-on-surface-muted);
  font-variant-numeric: tabular-nums;
}

/* Requirements & Audience Lists */
.courseglade-course-requirements-list,
.courseglade-course-audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.courseglade-course-requirements-list__item,
.courseglade-course-audience-list__item {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.courseglade-course-requirements-list__item::before,
.courseglade-course-audience-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--courseglade-primary);
}

/* Downloadable Resources */
.courseglade-course-resources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.courseglade-course-resource a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--courseglade-surface-lowest);
  border-radius: var(--courseglade-radius-md);
  color: var(--courseglade-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--courseglade-shadow);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}

.courseglade-course-resource a:hover {
  border-color: var(--courseglade-primary);
  box-shadow: 0 4px 12px rgba(0, 75, 202, 0.12);
  transform: translateY(-1px);
}

.courseglade-course-resource__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--courseglade-radius);
  flex-shrink: 0;
}

.courseglade-course-resource__body {
  flex: 1;
  min-width: 0;
}

.courseglade-course-resource__name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--courseglade-text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.courseglade-course-resource__ext {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-course-resource__download {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: var(--courseglade-radius);
  color: var(--courseglade-on-surface-muted);
  transition: background 0.15s, color 0.15s;
}

.courseglade-course-resource a:hover .courseglade-course-resource__download {
  background: rgba(0, 75, 202, 0.08);
  color: var(--courseglade-primary);
}

/* Instructors Section */
.courseglade-instructors-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Instructor Cards ---- */
.courseglade-instructor-card {
  background: var(--courseglade-surface-lowest);
  border-radius: var(--courseglade-radius-md);
  border: 1px solid var(--courseglade-border);
  padding: 20px;
  transition: box-shadow var(--courseglade-transition);
}

.courseglade-instructor-card:hover {
  box-shadow: var(--courseglade-shadow);
}

.courseglade-instructor-card__main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.courseglade-instructor-card__avatar-link {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
}

.courseglade-instructor-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  transition: opacity var(--courseglade-transition);
}

.courseglade-instructor-card__avatar-link:hover .courseglade-instructor-card__avatar {
  opacity: 0.85;
}

.courseglade-instructor-card__body {
  flex: 1;
  min-width: 0;
}

.courseglade-instructor-card__top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.courseglade-instructor-card__role-badge {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--courseglade-primary);
  margin-bottom: 3px;
}

.courseglade-instructor-card__role-badge--co {
  color: var(--courseglade-on-surface-muted);
}

.courseglade-instructor-card__name {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.courseglade-instructor-card__name a {
  color: var(--courseglade-on-surface);
  text-decoration: none !important;
  transition: color var(--courseglade-transition);
}

.courseglade-instructor-card__name a:hover {
  color: var(--courseglade-primary);
}

.courseglade-instructor-card__headline {
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0;
  line-height: 1.4;
}

/* Stat chips */
.courseglade-instructor-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.courseglade-instructor-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-instructor-card__stat--rating svg {
  color: var(--courseglade-amber);
}

.courseglade-instructor-card__stat svg {
  flex-shrink: 0;
}

.courseglade-instructor-card__stat-value {
  font-weight: 700;
  color: var(--courseglade-on-surface);
}

/* Bio with collapsible */
.courseglade-instructor-card__bio {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--courseglade-border);
  font-size: 0.9375rem;
  color: var(--courseglade-gray-700);
  line-height: 1.7;
}

.courseglade-instructor-card__bio-content {
  overflow: hidden;
}

.courseglade-instructor-card__bio-content p {
  margin: 0 0 10px;
}

.courseglade-instructor-card__bio-content p:last-child {
  margin-bottom: 0;
}

.courseglade-instructor-card__bio.is-collapsed .courseglade-instructor-card__bio-content {
  max-height: 4.8em;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.courseglade-instructor-card__bio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--courseglade-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: color var(--courseglade-transition);
}

.courseglade-instructor-card__bio-toggle:hover {
  color: var(--courseglade-primary-dark);
  background: none;
}

.courseglade-instructor-card__bio-toggle:focus:not(:focus-visible),
.courseglade-instructor-card__bio-toggle:active {
  outline: none;
  box-shadow: none;
  background: none;
  color: var(--courseglade-primary);
}

.courseglade-instructor-card__bio-toggle:focus-visible {
  outline: 2px solid var(--courseglade-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.courseglade-instructor-card__bio-toggle svg {
  transition: transform var(--courseglade-transition);
}

.courseglade-instructor-card__bio-toggle-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.courseglade-instructor-card__bio .courseglade-instructor-card__bio-toggle-less {
  display: none;
}

.courseglade-instructor-card__bio.is-expanded .courseglade-instructor-card__bio-toggle-more {
  display: none;
}

.courseglade-instructor-card__bio.is-expanded .courseglade-instructor-card__bio-toggle-less {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Mobile */
@media (max-width: 576px) {
  .courseglade-instructor-card {
    padding: 20px;
  }

  .courseglade-instructor-card__top-row {
    flex-wrap: wrap;
  }

  .courseglade-instructor-card__profile-link {
    width: 100%;
    justify-content: center;
  }

  .courseglade-instructor-card__stat {
    font-size: 0.75rem;
  }
}

/* Course Sidebar */
.courseglade-course-sidebar__card {
  background: var(--courseglade-surface-lowest);
  border-radius: var(--courseglade-radius-md);
  overflow: hidden;
  /* `shadow` is the hover elevation for a card in a grid. This one never
     moves and sits beside body copy, so it takes the resting shadow. */
  box-shadow: var(--courseglade-shadow-sm);
  border: 1px solid var(--courseglade-border);
  padding: 22px;
}

/* Video play button — full reset when used as hero inline button */
.courseglade-course-hero__actions .courseglade-video-play-btn {
  position: static;
  inset: auto;
  border-radius: var(--courseglade-radius);
  background: rgba(255, 255, 255, 0.14);
  color: var(--courseglade-surface-lowest);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.courseglade-course-hero__actions .courseglade-video-play-btn:hover,
.courseglade-course-hero__actions .courseglade-video-play-btn:focus,
.courseglade-course-hero__actions .courseglade-video-play-btn:active {
  background: rgba(255, 255, 255, 0.24);
  color: var(--courseglade-surface-lowest);
  border-color: rgba(255, 255, 255, 0.4);
}

.courseglade-video-play-btn svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Video Modal */
.courseglade-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
}

.courseglade-video-modal.is-open {
  display: flex;
}

.courseglade-video-modal__inner {
  position: relative;
  width: 90%;
  max-width: 900px;
}

.courseglade-video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}

.courseglade-video-modal__close:hover {
  color: #ccc;
}

.courseglade-video-modal__content {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.courseglade-video-modal__content iframe,
.courseglade-video-modal__content video {
  width: 100%;
  height: 100%;
  display: block;
}

/* The figure leads, the two facts about it sit under it. Side by side they
   competed: a struck-through number and a coloured pill either side of the
   price made three things of similar weight on one line. */
.courseglade-course-sidebar__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 16px;
}

.courseglade-course-sidebar__price--original {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-course-sidebar__price--sale,
.courseglade-course-sidebar__price--current {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--courseglade-on-surface);
  line-height: 1;
}

.courseglade-course-sidebar__price--free {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--courseglade-success);
}

.courseglade-course-sidebar__discount {
  flex-basis: 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--courseglade-success);
  white-space: nowrap;
}

.courseglade-course-sidebar__cta {
  margin-bottom: 0;
}

/* Neutral, not primary-outlined. Two blue buttons stacked read as two calls to
   action; wishlisting is not one. */
.courseglade-course-sidebar__card .courseglade-wishlist-btn {
  height: 44px;
  padding: 0 20px;
  font-size: 0.9375rem;
  background: var(--courseglade-surface-lowest);
  border-color: var(--courseglade-border);
  color: var(--courseglade-on-surface);
}

.courseglade-course-sidebar__card .courseglade-wishlist-btn:hover:not(:disabled),
.courseglade-course-sidebar__card .courseglade-wishlist-btn:focus:not(:disabled) {
  background: var(--courseglade-surface-lowest);
  border-color: var(--courseglade-on-surface-muted);
  color: var(--courseglade-on-surface);
}

.courseglade-course-sidebar__card .courseglade-wishlist-btn--active,
.courseglade-course-sidebar__card .courseglade-wishlist-btn--active:hover:not(:disabled) {
  border-color: var(--courseglade-danger);
  color: var(--courseglade-danger);
}

.courseglade-course-sidebar__guarantee {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
  margin: 8px 0 0;
}

/* Wishlist button in sidebar */
.courseglade-course-sidebar__card>.courseglade-wishlist-btn {
  margin-top: 12px;
  margin-bottom: 0;
}

.courseglade-course-sidebar__includes {
  padding-top: 0;
  margin-top: 18px;
}

.courseglade-course-sidebar__includes-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--courseglade-on-surface-muted);
}

/* Course Sidebar Date Notices */
.courseglade-course-sidebar__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--courseglade-radius);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 16px;
  text-align: left;
}

.courseglade-course-sidebar__notice svg {
  flex-shrink: 0;
}

.courseglade-course-sidebar__notice--upcoming {
  background: #e7f5ff;
  color: #1971c2;
  border: 1px solid #a5d8ff;
}

.courseglade-course-sidebar__notice--ended {
  background: #f8f9fa;
  color: #868e96;
  border: 1px solid var(--courseglade-border);
}

.courseglade-course-sidebar__progress {
  margin-bottom: 20px;
}

.courseglade-course-sidebar__progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--courseglade-on-surface-secondary);
}

.courseglade-course-sidebar__progress-bar {
  height: 8px;
  background: var(--courseglade-surface-low);
  border-radius: 4px;
  overflow: hidden;
}

.courseglade-course-sidebar__progress-fill {
  height: 100%;
  background: var(--courseglade-success);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.courseglade-course-sidebar__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.courseglade-course-sidebar__feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--courseglade-on-surface);
}

.courseglade-course-sidebar__feature svg {
  color: var(--courseglade-primary);
  flex-shrink: 0;
}

.courseglade-course-sidebar__feature--urgent {
  color: var(--courseglade-danger, #dc2626);
}

.courseglade-course-sidebar__feature--urgent svg {
  color: var(--courseglade-danger, #dc2626);
}

/* ==========================================================================
   Reviews
   ========================================================================== */

/* Reviews Summary */
.courseglade-reviews-summary {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  padding: 20px;
  margin-bottom: 16px;
}

.courseglade-reviews-summary__average {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.courseglade-reviews-summary__number {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  color: var(--courseglade-on-surface);
  letter-spacing: -0.02em;
}

.courseglade-reviews-summary__stars {
  display: flex;
  gap: 2px;
}

.courseglade-reviews-summary__count {
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-reviews-summary__breakdown {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.courseglade-reviews-breakdown__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.courseglade-reviews-breakdown__label {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
  white-space: nowrap;
  min-width: 52px;
}

.courseglade-reviews-breakdown__bar {
  flex: 1;
  max-width: 320px;
  height: 8px;
  background: var(--courseglade-border);
  border-radius: 4px;
  overflow: hidden;
}

.courseglade-reviews-breakdown__fill {
  height: 100%;
  background: var(--courseglade-amber);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.courseglade-reviews-breakdown__count {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}

/* Stars */
.courseglade-star {
  color: var(--courseglade-amber);
}

.courseglade-star--filled {
  color: var(--courseglade-amber);
}

.courseglade-star--half {
  color: var(--courseglade-amber);
}

.courseglade-star--empty {
  color: var(--courseglade-border);
}

/* Star Selector */
.courseglade-star-selector {
  display: flex;
  gap: 4px;
}

.courseglade-star-selector__star {
  cursor: pointer;
  fill: var(--courseglade-border);
  stroke: var(--courseglade-border);
  transition: fill 0.15s ease, stroke 0.15s ease, transform 0.1s;
}

.courseglade-star-selector__star:hover {
  transform: scale(1.15);
}

.courseglade-star-selector__star.is-active,
.courseglade-star-selector__star.is-hover {
  fill: var(--courseglade-amber);
  stroke: var(--courseglade-amber);
}

/* Review Form */
.courseglade-reviews-form {
  padding: 20px;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  margin-bottom: 16px;
  box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-reviews-form__heading {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--courseglade-text);
  letter-spacing: -0.01em;
}

.courseglade-reviews-form__rating {
  margin-bottom: 20px;
}

.courseglade-reviews-form__field {
  margin-bottom: 16px;
}

.courseglade-reviews-form__content {
  line-height: 1.6;
}

/* 44px, matching the sidebar's buttons: both sit at the same level of the
   page, and two heights a few inches apart read as an inconsistency rather
   than a hierarchy. Width still hugs the label — a full-width button would
   stretch two words across the whole form, and the hierarchy is already
   carried by position. */
.courseglade-reviews-form__submit {
  height: 44px;
  padding: 0 20px;
}

.courseglade-reviews-form__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

/* Auth/enrollment prompt */
.courseglade-reviews-form__prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 24px;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  margin-bottom: 32px;
  gap: 8px;
}

.courseglade-reviews-form__prompt-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(0, 75, 202, 0.08);
  color: var(--courseglade-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.courseglade-reviews-form__prompt-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--courseglade-text);
  margin: 0;
}

.courseglade-reviews-form__prompt-sub {
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0 0 8px;
}

/* Review Cards */
#courseglade-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.courseglade-reviews-page #courseglade-reviews-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}

@media (max-width: 768px) {
  .courseglade-reviews-page #courseglade-reviews-list {
    grid-template-columns: 1fr;
  }
}

/* A row in a list, not a card of its own. Ten bordered, shadowed boxes down
   the page read as ten unrelated things — white on the page's ground, spaced,
   is enough to separate them. */
.courseglade-review-card {
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
  padding: 16px;
}

.courseglade-review-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.courseglade-review-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.courseglade-review-card__meta {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.courseglade-review-card__name {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--courseglade-text);
}

.courseglade-review-card__rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.courseglade-review-card__rating {
  display: flex;
  gap: 2px;
}

.courseglade-review-card__date {
  font-size: 0.8125rem;
  color: var(--courseglade-on-surface-muted);
}

.courseglade-review-card__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--courseglade-text);
}

.courseglade-review-card__content {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--courseglade-on-surface-secondary);
  margin-bottom: 0;
}

.courseglade-review-card__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.courseglade-review-card__edit,
.courseglade-review-card__delete {
  background: none;
  border: none;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  transition: color var(--courseglade-transition);
  box-shadow: none;
  outline: none;
}

.courseglade-review-card__edit {
  color: var(--courseglade-primary);
}

.courseglade-review-card__edit:hover {
  color: var(--courseglade-primary-dark);
}

.courseglade-review-card__delete {
  color: var(--courseglade-on-surface-muted);
}

.courseglade-review-card__delete:hover {
  color: var(--courseglade-danger);
}

.courseglade-review-card--pending {
  background: var(--courseglade-warning-surface);
}

.courseglade-review-card__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.courseglade-review-card__pending-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #92400e;
  background: var(--courseglade-warning-bg);
  border: 1px solid var(--courseglade-warning-border);
  border-radius: 4px;
  padding: 2px 7px;
  line-height: 1.5;
}

/* Load More */
#courseglade-reviews-load-more {
  margin-top: 20px;
}

.courseglade-reviews-load-more__button {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--courseglade-text);
  cursor: pointer;
  transition: background var(--courseglade-transition), border-color var(--courseglade-transition);
  margin-top: 16px;
}

.courseglade-reviews-load-more__button:hover {
  background: var(--courseglade-bg);
  border-color: var(--courseglade-primary);
  color: var(--courseglade-primary);
}

/* Empty state */
.courseglade-reviews-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
}

.courseglade-reviews-empty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 75, 202, 0.08);
  color: var(--courseglade-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.courseglade-reviews-empty__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--courseglade-text);
  margin: 0 0 8px;
}

.courseglade-reviews-empty__sub {
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0;
}

/* Reviews Page */
.courseglade-reviews-page {
  padding: 48px 0 80px;
  min-height: 60vh;
  width: 100%;
}

.courseglade-reviews-page__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
  margin-bottom: 24px;
}

.courseglade-reviews-page__breadcrumb a {
  color: var(--courseglade-primary);
  text-decoration: none;
}

.courseglade-reviews-page__breadcrumb a:hover {
  text-decoration: underline;
}

.courseglade-reviews-page__heading {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--courseglade-on-surface);
  margin: 0 0 24px;
  letter-spacing: -0.02em;
}

/* Reviews Filter Bar */
/* ---- Loading placeholders ----
   Server-rendered, at the heights the real blocks occupy, so the page does not
   jump when the fetch lands. JS replaces each container's contents wholesale,
   which is what removes them. */
.courseglade-reviews-skeleton {
  background: var(--courseglade-surface-lowest);
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-md);
}

.courseglade-reviews-skeleton--summary {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 20px;
  margin-bottom: 16px;
}

.courseglade-reviews-skeleton--card {
  padding: 16px;
}

.courseglade-reviews-skeleton__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.courseglade-reviews-skeleton span,
.courseglade-reviews-skeleton__average,
.courseglade-reviews-skeleton__bars span {
  display: block;
  background: var(--courseglade-surface-low);
  border-radius: var(--courseglade-radius-sm);
}

.courseglade-reviews-skeleton__average {
  width: 72px;
  height: 66px;
  flex: none;
}

.courseglade-reviews-skeleton__bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 400px;
}

.courseglade-reviews-skeleton__bars span {
  height: 8px;
  border-radius: 4px;
}

.courseglade-reviews-skeleton__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
}

.courseglade-reviews-skeleton__name {
  width: 140px;
  height: 14px;
}

.courseglade-reviews-skeleton__line {
  width: 100%;
  height: 12px;
  margin-bottom: 6px;
}

.courseglade-reviews-skeleton__line--short {
  width: 62%;
  margin-bottom: 0;
}

/* A pulse says "working"; without it a grey block reads as content that failed
   to load. Anyone who has asked for less motion gets the block and no pulse. */
@media (prefers-reduced-motion: no-preference) {
  .courseglade-reviews-skeleton span,
  .courseglade-reviews-skeleton__average {
    animation: courseglade-skeleton-pulse 1.4s ease-in-out infinite;
  }
}

@keyframes courseglade-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.courseglade-reviews-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.courseglade-reviews-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-sm);
  background: var(--courseglade-surface-lowest);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--courseglade-on-surface);
  cursor: pointer;
  transition: background var(--courseglade-transition), border-color var(--courseglade-transition), color var(--courseglade-transition);
}

.courseglade-reviews-filter__btn:hover:not(.is-active) {
  background: rgba(0, 75, 202, 0.06);
  border-color: var(--courseglade-primary);
  color: var(--courseglade-primary);
}

.courseglade-reviews-filter__btn.is-active,
.courseglade-reviews-filter__btn.is-active:hover,
.courseglade-reviews-filter__btn.is-active:focus {
  background: var(--courseglade-primary);
  border-color: var(--courseglade-primary);
  color: #fff;
}

.courseglade-reviews-filter__btn:focus:not(.is-active),
.courseglade-reviews-filter__btn:active:not(.is-active) {
  background: var(--courseglade-surface-lowest);
  color: var(--courseglade-on-surface);
}

/* ==========================================================================
   Wishlist
   ========================================================================== */

/* Wishlist button states */
.courseglade-wishlist-btn:hover:not(:disabled),
.courseglade-wishlist-btn:focus:not(:disabled) {
  background: transparent;
  border-color: var(--courseglade-danger);
  color: var(--courseglade-danger);
  box-shadow: none;
}

.courseglade-wishlist-btn__icon {
  flex-shrink: 0;
  fill: none;
  transition: fill var(--courseglade-transition);
}

.courseglade-wishlist-btn--active {
  background: transparent;
  border-color: var(--courseglade-danger);
  color: var(--courseglade-danger);
}

.courseglade-wishlist-btn--active .courseglade-wishlist-btn__icon {
  fill: var(--courseglade-danger);
}

.courseglade-wishlist-btn--active:hover {
  background: transparent;
  border-color: var(--courseglade-danger);
  color: var(--courseglade-danger);
}

/* Course card wishlist icon */
.courseglade-wishlist-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--courseglade-on-surface-muted);
  transition: all var(--courseglade-transition);
  z-index: 2;
  padding: 0;
}

.courseglade-wishlist-icon svg {
  fill: none;
  transition: fill var(--courseglade-transition), color var(--courseglade-transition);
}

.courseglade-wishlist-icon:hover {
  background: var(--courseglade-surface-lowest);
  color: var(--courseglade-danger);
  box-shadow: var(--courseglade-shadow);
  transform: scale(1.1);
}

.courseglade-wishlist-icon--active {
  color: var(--courseglade-danger);
}

.courseglade-wishlist-icon--active svg {
  fill: var(--courseglade-danger);
}

.courseglade-wishlist-icon:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Course Card Lock Badge
   ========================================================================== */
.courseglade-course-card__badge--locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--courseglade-surface-lowest);
  position: absolute;
  bottom: 12px;
  right: 12px;
  top: auto;
  padding: 4px 10px;
  border-radius: var(--courseglade-radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.courseglade-course-card__badge--locked svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Featured Badge
   ========================================================================== */
.courseglade-course-card__badge--featured {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--courseglade-amber);
  color: var(--courseglade-amber-on);
  padding: 4px 9px;
  border-radius: var(--courseglade-radius-pill);
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.courseglade-course-card__badge--featured svg {
  flex-shrink: 0;
}

/* ==========================================================================
   Course Password Form
   ========================================================================== */
.courseglade-course-password-form {
  max-width: 480px;
  margin: 60px auto;
  padding: 40px;
  background: var(--courseglade-surface-lowest);
  border-radius: var(--courseglade-radius-lg);
  box-shadow: var(--courseglade-shadow);
  text-align: center;
}

.courseglade-course-password-form__icon {
  color: var(--courseglade-on-surface-muted);
  margin-bottom: 20px;
}

.courseglade-course-password-form__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--courseglade-text);
}

.courseglade-course-password-form__excerpt {
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.courseglade-course-password-form__message {
  font-size: 0.9375rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0 0 24px;
  line-height: 1.5;
}

.courseglade-course-password-form__error {
  background: #fff5f5;
  color: var(--courseglade-danger);
  border: 1px solid #ffc9c9;
  border-radius: var(--courseglade-radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  text-align: left;
}

.courseglade-course-password-form__input {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius);
  font-size: 1rem;
  color: var(--courseglade-text);
  background: var(--courseglade-surface-lowest);
  margin-bottom: 16px;
  box-sizing: border-box;
  transition: border-color var(--courseglade-transition), box-shadow var(--courseglade-transition);
}

.courseglade-course-password-form__input:focus {
  outline: none;
  border-color: var(--courseglade-primary);
  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.1);
}

.courseglade-course-password-form__submit {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: var(--courseglade-primary);
  color: var(--courseglade-surface-lowest);
  border: none;
  border-radius: var(--courseglade-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--courseglade-transition);
}

.courseglade-course-password-form__submit:hover {
  background: var(--courseglade-primary-dark);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Between the sidebar stacking at 992 and a full desktop, 380px plus a 64px
   gutter takes more than a third of the line and the prose column gets
   noticeably tight. The sidebar holds short rows — a label and a value — so it
   gives up the width more gracefully than the text beside it. */
@media (max-width: 1200px) {
  .courseglade-course-body__grid {
    grid-template-columns: 1fr 320px;
    gap: 40px;
  }
}

@media (max-width: 992px) {
  .courseglade-course-hero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .courseglade-course-hero__title {
    font-size: 2.5rem;
  }

  .courseglade-course-hero {
    padding: 40px 0 32px;
  }

  .courseglade-course-highlights__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .courseglade-course-body__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .courseglade-course-body__sidebar {
    position: static;
    order: -1;
  }

  .courseglade-course-body {
    padding: 40px 0;
  }
}

@media (max-width: 768px) {
  /* The filter bar's narrow-screen layout lives with the rest of the filter
     styles, on the 1023/767 breakpoints the grid uses. What was here stacked
     every control one per row and boxed the bar in padding it no longer has a
     background to justify. */
  .courseglade-archive-title {
    font-size: 1.75rem;
  }

  .courseglade-course-hero__title {
    font-size: 2rem;
  }

  .courseglade-course-hero__excerpt {
    font-size: 1.0625rem;
  }

  .courseglade-course-section__title {
    font-size: 1.5rem;
  }

  .courseglade-course-learn-grid {
    grid-template-columns: 1fr;
  }

  .courseglade-course-highlights__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .courseglade-reviews-summary__breakdown {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .courseglade-course-hero__title {
    font-size: 1.75rem;
  }

  .courseglade-course-highlights__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Course page, narrow screens ─────────────────────────────────────────────
   The page already stacks its hero and body at 992px and steps the headings
   down at 768/576. What was missing is the row-level behaviour: a flex row
   whose text child is `flex: 1` will not shrink past that text's own width
   unless it is told it may, so a long lesson title pushes the badge and the
   duration off the end of the row rather than truncating. That is a bug at
   every width; it just only shows on a phone. */

.courseglade-curriculum-section__info,
.courseglade-curriculum-item__title,
.courseglade-course-sidebar__feature,
.courseglade-instructor-card__main,
.courseglade-instructor-card__top-row {
  min-width: 0;
}

.courseglade-curriculum-section__title,
.courseglade-curriculum-item__title,
.courseglade-course-resource a {
  overflow-wrap: anywhere;
}

@media (max-width: 576px) {
  .courseglade-curriculum-section__header {
    padding: 14px 12px;
    gap: 10px;
  }

  /* The 60px left inset lines the items up under the section title, past the
     numbered badge. On a phone that is a fifth of the screen spent on
     alignment, and the titles pay for it. */
  .courseglade-curriculum-section__content {
    padding-left: 16px;
  }

  /* An avatar beside two lines of text leaves neither enough room. */
  .courseglade-instructor-card__main,
  .courseglade-course-hero__instructor-card {
    flex-wrap: wrap;
  }

  .courseglade-instructor-card__top-row {
    flex-direction: column;
    gap: 6px;
  }

  .courseglade-review-card__header,
  .courseglade-review-card__rating-row,
  .courseglade-review-card__actions,
  .courseglade-reviews-form__actions,
  .courseglade-course-resource a,
  .courseglade-course-sidebar__notice,
  .courseglade-course-sidebar__progress-header,
  .courseglade-course-card__footer,
  .courseglade-course-card__price {
    flex-wrap: wrap;
  }

  .courseglade-reviews-form__actions .courseglade-btn {
    width: 100%;
  }

  /* The page is full-bleed, so the only thing holding content off the screen
     edge is the container's gutter — 15px, which is tight once the cards
     inside also carry their own border. The bands set the token rather than
     their own padding, because the container is what reads it. */
  .courseglade-course-hero,
  .courseglade-course-highlights,
  .courseglade-course-body {
    --courseglade-gutter-x: 1.25rem;
  }
}

@media (max-width: 400px) {
  /* Two highlight cards across 400px leaves each too narrow for its label. */
  .courseglade-course-highlights__grid {
    grid-template-columns: 1fr;
  }
}

/* Confirm Modal */
.courseglade-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: courseglade-fade-in 0.15s ease;
}

@keyframes courseglade-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.courseglade-confirm-dialog {
  background: var(--courseglade-surface, #fff);
  border-radius: var(--courseglade-radius-lg, 12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
  padding: 2rem;
  max-width: 380px;
  width: 100%;
  animation: courseglade-dialog-in 0.18s ease;
}

@keyframes courseglade-dialog-in {
  from { transform: scale(0.96) translateY(6px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.courseglade-confirm-dialog__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--courseglade-danger-bg, #fef2f2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--courseglade-danger, #dc2626);
}

.courseglade-confirm-dialog__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--courseglade-text);
  margin: 0 0 0.375rem;
  text-align: center;
}

.courseglade-confirm-dialog__message {
  font-size: 0.875rem;
  color: var(--courseglade-on-surface-muted);
  margin: 0 0 1.5rem;
  line-height: 1.5;
  text-align: center;
}

.courseglade-confirm-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}

.courseglade-confirm-dialog__actions .courseglade-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.875rem;
}

.courseglade-confirm-dialog .courseglade-btn-outline {
  border-color: var(--courseglade-border, #e2e8f0);
  color: var(--courseglade-on-surface-muted);
}

.courseglade-confirm-dialog .courseglade-btn-outline:hover {
  border-color: var(--courseglade-border-dark, #cbd5e1);
  background: var(--courseglade-surface-alt, #f8fafc);
  color: var(--courseglade-text);
}
/* The hero jumps here. Smooth, so the reader sees the page move rather than
   arriving somewhere new. No offset: the section starts where it starts, and
   any allowance for a sticky header belongs to the theme that has one. */
.courseglade-course-body {
  scroll-margin-top: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.courseglade-course-body) {
    scroll-behavior: smooth;
  }
}

/* ── Purchase options ─────────────────────────────────────────────────────
   Outright or a subscription tier, asked once. Rows read as a list of
   choices: name left, price right, the selected one outlined. */

.courseglade-purchase-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.courseglade-purchase-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--courseglade-border);
  border-radius: var(--courseglade-radius-sm);
  background: var(--courseglade-surface-lowest);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.courseglade-purchase-option:hover {
  border-color: var(--courseglade-gray-300);
}

.courseglade-purchase-option.is-selected {
  border-color: var(--courseglade-primary);
  background: var(--courseglade-primary-surface);
  box-shadow: 0 0 0 1px var(--courseglade-primary) inset;
}

/* The native control, sized up to be a real target rather than replaced —
   it keeps its focus ring and its keyboard behaviour. */
.courseglade-purchase-option__input {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin: 2px 0 0;
  accent-color: var(--courseglade-primary);
  cursor: pointer;
}

/* Themes and browsers ring this in their own way, which lands badly on a
   1.125rem control inside a bordered row. Dropped for the pointer, kept for
   the keyboard — and moved onto the row, which is the thing being chosen. */
.courseglade-purchase-option__input:focus {
  outline: none;
  box-shadow: none;
}

.courseglade-purchase-option:has(.courseglade-purchase-option__input:focus-visible) {
  outline: 2px solid var(--courseglade-primary);
  outline-offset: 2px;
}

.courseglade-purchase-option__body {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Wraps rather than truncating: two long membership names ellipsised at the
   same point read as the same offer. */
.courseglade-purchase-option__label {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--courseglade-on-surface);
  overflow-wrap: anywhere;
}

/* What a plan covers is a fact about it and stays quiet. A free trial is a
   reason to pick the row, so that one gets the colour. */
.courseglade-purchase-option__note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--courseglade-on-surface-muted);
}

/* Green, not the accent colour: a saving is good news about money, and it has
   to read as such next to a coverage line that is merely a fact. */
.courseglade-purchase-option__badge {
  flex: none;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--courseglade-success);
  background: var(--courseglade-success-bg);
  border-radius: var(--courseglade-radius-pill);
  padding: 2px 7px;
}

.courseglade-purchase-option__note.is-accent {
  color: var(--courseglade-success-text);
  font-weight: 600;
}

/* Under the name, not beside it: a plan name and a cadence are both long
   enough that side by side each squeezes the other, and stacked they read in
   the order the reader wants them — what it is, then what it costs. */
.courseglade-purchase-option__price {
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--courseglade-primary);
}

.courseglade-purchase-cta[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .courseglade-purchase-option {
    transition: none;
  }
}