/* The course title page.
 *
 * Colours come from static/design-system/tokens.css (--color-*). Bootstrap's --bs-*
 * custom properties are NOT this app's palette: a rule written as
 * var(--bs-primary, #0d6efd) does not fail loudly, it silently falls back, and the
 * component comes up Bootstrap blue inside a forest-green app.
 *
 * Spec: docs/specs/white-label-and-course-landing-page.md §4
 */

.course-landing {
  --hero-min-h: 78vh;
  --landing-max-w: 1180px;
  color: var(--color-text, #14210f);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.course-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: var(--hero-min-h);
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  /* Painted by the SECTION, so a blocked or broken hero image degrades to a designed
   * surface rather than a hole. img-src is 'self' data: blob:, so a creator-supplied
   * external image URL is refused by CSP in the browser — this is what they see. */
  background:
    radial-gradient(120% 100% at 15% 100%,
      var(--color-surface-sunken, #eef1ec) 0%,
      var(--color-surface, #fff) 70%);
  color: var(--color-text, #14210f);
}

/* No art at all: lean on the org's accent so the page still feels like theirs. */
.course-hero--noart {
  background:
    linear-gradient(135deg,
      var(--color-primary, #2f5d3a) 0%,
      var(--color-surface-sunken, #eef1ec) 85%);
}

.course-hero__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contrast is guaranteed by the scrim, never by the picture. An AI-generated hero
 * can be any brightness; without this the title is unreadable on roughly half. */
.course-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .12) 100%),
    linear-gradient(to right, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .18) 55%, transparent 100%);
}

/* Any hero carrying art is on a dark scrim, so its own text is light regardless of
 * the app theme. Scoped to :has() with a fallback below for engines without it. */
.course-hero:not(.course-hero--noart) .course-hero__inner,
.course-hero:not(.course-hero--noart) .course-hero__inner a {
  color: #fff;
}

.course-hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--landing-max-w);
  margin-inline: auto;
}

.course-hero__eyebrow {
  margin: 0 0 .5rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.course-hero__eyebrow a { text-decoration: none; }
.course-hero__eyebrow a:hover { text-decoration: underline; }

.course-hero__title {
  margin: 0 0 .75rem;
  max-width: 18ch;
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.course-hero__tagline {
  margin: 0 0 1rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.4;
  opacity: .95;
}

.course-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  opacity: .9;
}

.course-hero__meta li + li::before {
  content: "·";
  margin-inline-end: 1.25rem;
  opacity: .6;
}

.course-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}

.course-hero__synopsis {
  max-width: 56ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  opacity: .88;
  /* Three lines on the hero; the rest of the story is the page below it. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Calls to action ──────────────────────────────────────────────────────── */

.course-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8125rem 1.75rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, opacity .12s ease;
}

.course-cta:hover { transform: translateY(-1px); }
.course-cta:active { transform: translateY(0); }

/* Every control on this page is keyboard-reachable and must SHOW that it is —
 * the hero sits on a photograph, where the UA default ring often disappears. */
.course-cta:focus-visible {
  outline: 3px solid var(--color-accent, #d8a657);
  outline-offset: 3px;
}

.course-cta--primary {
  background: var(--color-primary, #2f5d3a);
  color: #fff;
}

.course-cta--primary:hover { background: var(--color-primary-dark, #24482d); }

/* A disabled CTA is an in-flight request, never a permanent state — the page has no
 * CTA that ships disabled, because a control that never works is one people keep
 * pressing. */
.course-cta[disabled] { opacity: .6; cursor: progress; transform: none; }

.course-cta--ghost {
  background: rgba(255, 255, 255, .14);
  border-color: currentColor;
  color: inherit;
  backdrop-filter: blur(6px);
}

.course-hero--noart .course-cta--ghost {
  background: transparent;
  border-color: var(--color-primary, #2f5d3a);
  color: var(--color-primary, #2f5d3a);
}

.course-cta--ghost:hover { background: rgba(255, 255, 255, .26); }

/* ── Sections ─────────────────────────────────────────────────────────────── */

.course-section {
  max-width: var(--landing-max-w);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 5vw, 4rem);
}

.course-section__heading {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.course-empty {
  margin: 0;
  padding: 1.5rem;
  border: 1px dashed var(--color-border, #d5dbd2);
  border-radius: .75rem;
  color: var(--color-text-muted, #5c6b57);
  text-align: center;
}

.course-outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: .625rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-outcomes li { display: flex; gap: .625rem; align-items: flex-start; }
.course-outcomes i { color: var(--color-success, #3f7d4a); flex: none; margin-top: .15rem; }

/* ── Curriculum rails ─────────────────────────────────────────────────────── */

.course-rail + .course-rail { margin-top: 2rem; }

.course-rail__title {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted, #5c6b57);
}

.course-rail__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 .75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* The rail scrolls inside itself; the page body must never scroll horizontally. */
  overscroll-behavior-x: contain;
}

.course-rail__track > * { scroll-snap-align: start; }

.lesson-card {
  flex: 0 0 15.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border: 1px solid var(--color-border, #d5dbd2);
  border-radius: .875rem;
  background: var(--color-surface, #fff);
}

.lesson-card__icon { font-size: 1.5rem; color: var(--color-primary, #2f5d3a); }
.lesson-card.lesson-locked .lesson-card__icon { color: var(--color-text-muted, #5c6b57); }

.lesson-card__title {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.lesson-card__badge {
  margin-top: auto;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-success, #3f7d4a);
}

.lesson-card__badge--locked {
  font-weight: 500;
  color: var(--color-text-muted, #5c6b57);
}

/* ── Quotes ───────────────────────────────────────────────────────────────── */

.quote-card {
  flex: 0 0 20rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border, #d5dbd2);
  border-radius: .875rem;
  background: var(--color-surface, #fff);
}

.quote-card__stars { margin: 0 0 .5rem; color: var(--color-accent, #d8a657); }
.quote-card__quote { margin: 0 0 .75rem; font-style: italic; }
.quote-card__author { margin: 0; font-weight: 600; font-size: .9375rem; }

/* ── Creator ──────────────────────────────────────────────────────────────── */

.course-instructor { display: flex; gap: 1.25rem; align-items: flex-start; }
.course-instructor__avatar { border-radius: 50%; object-fit: cover; flex: none; }
.course-instructor__name { margin: 0; font-weight: 700; font-size: 1.0625rem; }
.course-instructor__headline { margin: 0 0 .5rem; color: var(--color-text-muted, #5c6b57); }

/* ── Guarantee ────────────────────────────────────────────────────────────── */

.course-guarantee {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  max-width: var(--landing-max-w);
}

.course-guarantee > i { font-size: 1.75rem; color: var(--color-accent, #d8a657); flex: none; }
.course-guarantee__title { margin: 0 0 .25rem; font-weight: 700; }
.course-guarantee__text { margin: 0; color: var(--color-text-muted, #5c6b57); }

/* ── Sticky bar ───────────────────────────────────────────────────────────── */

.course-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .75rem clamp(1rem, 5vw, 4rem);
  background: var(--color-surface, #fff);
  border-top: 1px solid var(--color-border, #d5dbd2);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .12);
}

/* `hidden` must actually hide it: the flex display above would otherwise win, which
 * is the single most common way a [hidden] element stays on screen. */
.course-sticky[hidden] { display: none; }

.course-sticky__title {
  margin: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 36rem) {
  .course-sticky__title { display: none; }
  .course-sticky .course-cta { width: 100%; justify-content: center; }
  .course-hero__actions .course-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .course-cta { transition: none; }
  .course-cta:hover { transform: none; }
}