/* The course card: the catalogue's reader card and the management card on
   "Courses you manage". The GitHub-style card of the Articles
   catalogue (articles.css's .article-card; the structured model is
   agent_docs/card-catalogue-metadata.yaml): no border, fill, shadow or
   padding, 0.5rem corners on card and cover with 1.75rem under the cover,
   the labels row (a status line above it on the management card), a 22px
   medium-weight title in the heading colour, the short description as a
   muted teaser, the facts line, then text links. Sizes and spacing are
   copied from assessments.css's .assessment-card (these pages don't load
   it); keep the copies in step. */
.course-card {
  --bs-card-border-width: 0;
  --bs-card-bg: transparent;
  border-radius: 0.5rem;
}

.course-card .card-body {
  padding: 0;
}

.course-card__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1.75rem;
}

/* --focal-x/--focal-y/--zoom are set inline per course
   (Course.image_focal_style): object-position centres the stored focal
   point, then transform zooms in around it. */
.course-card__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
}

/* The same Planful Minds gradient and centred glyph the other cards use
   when there's no cover image. */
.course-card__image--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, #0067b8, #00365e);
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.5rem;
}

/* Management card only: the publishing status on its own line above the
   labels. With no labels after it, it takes the labels row's own gap. */
.course-card__status {
  display: flex;
  margin-bottom: 0.5rem;
}

.course-card__status:has(+ .course-card__labels:empty) {
  margin-bottom: 1.25rem;
}

/* .card__token (static/shared/css/cards.css) with the fixed status colours
   of the other management cards (agent_docs/card-catalogue-metadata.yaml).
   The word carries the meaning; the fill only echoes it (WCAG 1.4.1).
   Text contrast: 4.69:1, 4.53:1, 8.18:1. */
.course-card__status-token--draft {
  background-color: #6c757d;
  color: #fff;
}

.course-card__status-token--published {
  background-color: #198754;
  color: #fff;
}

.course-card__status-token--archived {
  background-color: #495057;
  color: #fff;
}

/* Type, category and price. Written on one line in the templates, so it's
   :empty (and takes no space) when none applies. */
.course-card__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.course-card__labels:empty {
  display: none;
}

/* The price, or Free: .card__token in a pale green so it stands out
   from the grey type and category labels (product owner, 2026-11-03). The
   tag icon and the amount say what it is; the fill only echoes it (WCAG
   1.4.1). #0f5132 on #d1e7dd is about 7.2:1. */
.course-card__price-token {
  background-color: #d1e7dd;
  color: #0f5132;
  /* Always on a line of its own: the margin fills the row, so the wrapping
     labels row pushes it down; flex: none keeps the badge at its own width. */
  margin-right: 100%;
  flex: none;
}

.course-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.75rem;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
}

/* The whole card is the link; its hover cue is the arrow, not the colour. */
.course-card__title a {
  color: var(--site-heading-color, #1d1d1f);
}

/* Course.description (at most 300 characters). #5c6672 is 5.8:1 on white. */
.course-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 6em;
  margin-bottom: 0.75rem;
  color: #5c6672;
  font-size: 1rem;
  line-height: 1.5;
}

/* A registration card's session start (the catalogue's Registered tab and
   Learning progress), on a pale blue panel of its own under the title
   rather than in the small grey facts: someone registered for two sessions
   of one course tells them apart by it (product owner, 2026-11-03). It
   hugs its text instead of stretching across the flex column. #00365e on
   #e9f2fc is about 11:1; the icon's #0067b8 about 5.1:1. */
.course-card__when {
  display: flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.25rem;
  background-color: #e9f2fc;
  color: #00365e;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

.course-card__when .bi {
  color: #0067b8;
}

/* The "at a glance" facts in the article card's read-time spot: delivery,
   duration, next session. The colour is .card__meta's (cards.css). */
.course-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.course-card__facts > span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.course-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.course-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

/* Every footer action is a text link (or a text-style <button> in a form),
   lifted above the title's .stretched-link, or a click would fall through to
   the card's own destination. The padding keeps each target at least 24px
   tall (WCAG 2.5.8). */
.course-card__link {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--site-link-color, #0067b8);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.course-card__link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 6.5:1 on white. */
.course-card__link--danger {
  color: #b02a37;
}

/* GitHub's expanding arrow, as on "Read article". */
.course-card__arrow {
  flex-shrink: 0;
  margin-inline-start: 0.25rem;
  transition: transform 0.2s ease;
}

.course-card__arrow-stem {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  transition: stroke-dashoffset 0.2s ease;
}

.course-card:hover .course-card__arrow,
.course-card:focus-within .course-card__arrow {
  transform: translateX(2px);
}

.course-card:hover .course-card__arrow-stem,
.course-card:focus-within .course-card__arrow-stem {
  stroke-dashoffset: 20;
}

@media (prefers-reduced-motion: reduce) {
  .course-card__arrow,
  .course-card__arrow-stem {
    transition: none;
  }
}

/* A course's page (courses/detail.html), laid out like the assessment page
   (assessments.css's .assessment-detail__*): the cover clipped to the cards'
   0.5rem corners, the labels under it, the title in the site blue, the facts
   as rows between hairlines, then bordered sections in the builder's darker
   #adb5bd hairline. Values copied from assessments.css; keep them in step. */
.course-detail__hero-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
}

.course-detail__hero {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  transform: scale(var(--zoom, 1));
  transform-origin: var(--focal-x, 50%) var(--focal-y, 50%);
}

.course-detail__hero--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 6;
  background: linear-gradient(135deg, #0067b8, #00365e);
  color: rgba(255, 255, 255, 0.85);
  font-size: 4rem;
}

.course-detail__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.course-detail__title {
  color: #0067b8;
}

/* The facts: one per row between hairlines, the label bold above its value
   (assessments.css's .fact-list--stacked). Labels #1f2328 16:1, values
   #5c6672 5.9:1 on white. */
.course-detail__facts {
  margin: 0 0 1.5rem;
  border-top: 1px solid #adb5bd;
  font-size: 1.0625rem;
}

.course-detail__facts > div {
  padding: 0.85rem 0;
  border-bottom: 1px solid #adb5bd;
}

.course-detail__facts dt {
  margin-bottom: 0.2rem;
  color: #1f2328;
  font-size: 1.125rem;
  font-weight: 700;
}

.course-detail__facts dd {
  margin: 0;
  color: #5c6672;
}

.course-detail__prose {
  font-size: 1.125rem;
}

.course-detail__section.card--bordered {
  border-color: #adb5bd;
}

.course-detail__section .card-title {
  font-size: 1.375rem;
}

.course-detail__section .card-body > :last-child {
  margin-bottom: 0;
}

.course-detail__list,
.course-detail__lessons {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.course-detail__modules,
.course-detail__agenda {
  margin: 0;
  padding-left: 1.25rem;
}

.course-detail__modules > li + li,
.course-detail__agenda > li + li {
  margin-top: 1rem;
}

/* #495057 on white: 8.6:1. */
.course-detail__agenda-text {
  color: #495057;
}

/* Sessions: one per row between light rules. */
.course-detail__sessions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.course-detail__session {
  padding: 1rem 0;
}

.course-detail__session:first-child {
  padding-top: 0;
}

.course-detail__session + .course-detail__session {
  border-top: 1px solid #dee2e6;
}

/* Added by local_times.js when the reader's zone isn't the session's. */
.course-detail__your-time {
  display: block;
  color: #5c6672;
  font-size: 0.9375rem;
}

/* The catalogue's switch (_catalog_switch.html: Courses /
   Registered / Authored for a publisher) is wider than a phone. Rather than
   scroll sideways with a tab out of sight (the shared .catalog-switch's last
   resort), whenever one line wouldn't fit its row the tabs share the row
   equally, centred and at most 30rem wide, each badge under its name.
   Container queries in rem, so text made larger gets the same (WCAG 1.4.4,
   1.4.10). One line of three needs about 29rem below 768px, 33.4rem to 991px
   and 37.9rem from 992px (the tabs' padding grows with the window,
   list-controls.css), hence a threshold per breakpoint, each with room for
   longer counts. Sharing the row, the tabs take less side padding and the
   phone's text size at every width; "Courses" wraps at its
   spaces, and the longest word ("Registered", about 5rem) fits a third of
   18rem; narrower than that (a phone with the text at 200%) it's one tab per
   row. Whole rows avoid what plain wrapping did, a lone pill under the
   others (list-controls.css, .catalog-switch--compact); the track's corners
   ease from a pill to a rounded box. Fewer tabs (signed out, or not a
   publisher) share the row the same way. */
.catalog-switch.course-catalog-switch {
  container-type: inline-size;
}

@container (max-width: 31.5rem) {
  .catalog-switch.course-catalog-switch .segmented-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 30rem;
    overflow-x: visible;
    border-radius: 1.25rem;
  }

  .catalog-switch.course-catalog-switch .segmented-tabs__btn {
    flex-direction: column;
    row-gap: 0.125rem;
    padding-inline: 0.25rem;
    font-size: 0.8125rem;
    white-space: normal;
  }
}

@media (min-width: 768px) {
  @container (max-width: 36rem) {
    .catalog-switch.course-catalog-switch .segmented-tabs {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      width: 100%;
      max-width: 30rem;
      overflow-x: visible;
      border-radius: 1.25rem;
    }

    .catalog-switch.course-catalog-switch .segmented-tabs__btn {
      flex-direction: column;
      row-gap: 0.125rem;
      padding-inline: 0.25rem;
      font-size: 0.8125rem;
      white-space: normal;
    }
  }
}

@media (min-width: 992px) {
  @container (max-width: 40.5rem) {
    .catalog-switch.course-catalog-switch .segmented-tabs {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      width: 100%;
      max-width: 30rem;
      overflow-x: visible;
      border-radius: 1.25rem;
    }

    .catalog-switch.course-catalog-switch .segmented-tabs__btn {
      flex-direction: column;
      row-gap: 0.125rem;
      padding-inline: 0.25rem;
      font-size: 0.8125rem;
      white-space: normal;
    }
  }
}

@container (max-width: 18rem) {
  .catalog-switch.course-catalog-switch .segmented-tabs {
    grid-auto-flow: row;
  }
}