/* ============================================================================
   Aulas — the platform's course, and one lesson of it.

   Two surfaces in one sheet because they are one thing read twice: the index
   is the syllabus, the article is a page of it, and the number that locates a
   lesson has to look the same in both.

   The index is a register, not a grid and not a stack of cards. These rows
   have an order — that is the whole claim a numbered course makes — so they
   are hairline-separated rows inside one panel, threaded by a rule that runs
   down the number gutter. Six bordered cards with a gap between them read as
   six unrelated things. The number is set in the mono face like every other
   machine value on this site: a position is data.

   Almost no accent: orange is money and the primary action, and a lesson is
   not money. The single orange on the page is the button that starts the
   course, which is the primary action by definition. The level is drawn as a
   greyscale ordinal rather than tinted — the state hues here mean a state,
   and a reader's level is not one. Written in logical properties throughout;
   this page is served under `dir="rtl"` too.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Index.
   ------------------------------------------------------------------------ */

.lessons {
  padding-block: var(--sp-10) var(--sp-16);
}

/* Sized against the row, which is the reading measure plus the number gutter,
   the reading-time column and the chevron. The page container's 1280px leaves
   half of every row empty to the end of the line. */
.lessons .lessons__frame {
  max-width: 54rem;
}

.lessons__head {
  margin-block-end: var(--sp-6);
}

.lessons__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0;
  text-wrap: balance;
}

/* The claim and the way in on one line, so the register starts higher. The
   lede keeps the reading measure and the button never shrinks below its own
   label; under about 640px they stack. */
.lessons__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  margin-block-start: var(--sp-3);
}

.lessons__lede {
  flex: 1 1 26rem;
  color: var(--ink-300);
  max-width: 58ch;
  margin: 0;
  text-wrap: pretty;
}

.lessons__start {
  flex: 0 0 auto;
}

/* The house strip, holding what the syllabus is worth reading for: how many
   articles there are and how long the whole thing takes. Capped well short of
   the measure — two cells stretched across 54rem put a one-digit figure in
   the middle of an empty field, and these are small numbers stated plainly,
   not headline totals. */
.lessons__ledger {
  max-inline-size: 30rem;
  margin-block-end: var(--sp-8);
}

/* The track is a band over the modules that belong to it, not a box around
   them. It used to be the panel, back when a level held one flat list; now
   the module is the panel, and a panel inside a panel would draw two borders
   around one thing. What is left of the track is what a heading is: a name, a
   line saying who it is for, and air. */
.lessons__track + .lessons__track {
  margin-block-start: var(--sp-12);
}

.lessons__track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-5);
}

.lessons__track-headings {
  min-inline-size: 0;
}

/* The track name is content here, not a panel's chrome label, so it keeps the
   section-heading size rather than the uppercase micro title. */
.lessons__track-title {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  margin: 0;
}

.lessons__track-note {
  font-size: var(--fs-sm);
  color: var(--ink-400);
  margin: var(--sp-1) 0 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.lessons__track-count {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin: 0;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   The module — the unit a reader finishes, and so the unit that gets a box.
   ------------------------------------------------------------------------ */

.lessons__module + .lessons__module {
  margin-block-start: var(--sp-5);
}

.lessons__module-head {
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
}

.lessons__module-headings {
  min-inline-size: 0;
}

/* The number, set above the name rather than glued in front of it. It is how
   the module is addressed — "estou no módulo 4" — and in the label face it
   reads as the machine value it is instead of as part of the title. */
.lessons__module-eyebrow {
  display: block;
  margin: 0 0 var(--sp-1);
  color: var(--ink-400);
}

.lessons__module-title {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink-050);
  margin: 0;
  text-wrap: pretty;
}

.lessons__module-note {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-400);
  margin: var(--sp-1) 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* What the chapter costs, in the same two units the strip at the top of the
   page uses. One line, never wrapped: it is a pair of figures, and a figure
   that falls to a second line stops being a column. */
.lessons__module-cost {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  margin: 0;
  white-space: nowrap;
}

.lessons__module-dot {
  color: var(--ink-600);
}

/* The register. The counter is the browser's, but the printed number is the
   record's own position, so the marker is suppressed and the number is drawn
   as content. A gap in the numbering is a real editorial state and the page
   shows it. */
.lessons__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The spine: one hairline down the centre of the number gutter, from the
   track header's rule to the panel's floor, with each number seated over it.
   It is the only thing on the page that says "in this order" without words.
   `inset-inline-start` keeps it in the gutter under `dir="rtl"`, where the
   gutter is on the other side.

   Lifted over the rows rather than left under them: a row's hover fill paints
   over anything its parent drew, so at rest the thread ran the height of the
   register and the moment a reader pointed at a row it snapped in two. The
   node lifts one step further so the rule passes behind the digit, not
   through it. */
.lessons__list::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-block: 0;
  inset-inline-start: calc(var(--sp-5) + 0.875rem);
  inline-size: 1px;
  background: var(--line);
}

.lessons__row + .lessons__row {
  border-block-start: 1px solid var(--line);
}

.lessons__link {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}

.lessons__link:hover {
  background: var(--ink-800);
}

/* The ring is drawn outside the row, so the row has to paint over its
   neighbours' fills and the panel's border while it holds focus. */
.lessons__link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  z-index: 3;
  border-radius: var(--r-xs);
}

/* The last row closes the panel, so it takes the panel's own corner back —
   one hairline in, which is where the fill actually ends. */
.lessons__row:last-child .lessons__link {
  border-end-start-radius: calc(var(--r-lg) - 1px);
  border-end-end-radius: calc(var(--r-lg) - 1px);
}

/* A node on the spine, not a badge: the lesson's place in its track, round
   because it is a counter, opaque because the rule runs behind it. Fixed size
   so two- and three-digit positions keep every title on one vertical. */
.lessons__num {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-300);
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
}

/* One step above the row's own hover fill, so the node stays a node while the
   row lights up under it. */
.lessons__link:hover .lessons__num {
  color: var(--ink-050);
  background: var(--ink-750);
  border-color: var(--line-hard);
}

.lessons__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-inline-size: 0;
  padding-block-start: 0.1875rem;
}

.lessons__row-title {
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-050);
  text-wrap: pretty;
}

/* Two lines, clamped. A summary that runs to three or four lines turns the
   register back into a stack of paragraphs and the numbers stop reading as a
   column. */
.lessons__row-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--ink-300);
  max-width: 74ch;
}

.lessons__row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-1);
}

/* A column, so the figures line up and a reader can pick an article by the
   time they have. Tabular via `.num`; end-aligned so the unit stays on one
   vertical whether the figure is one digit or three.

   It also replaces the chevron this row used to end on. A chevron repeats
   what a whole tappable row already says, and beside a figure it reads as a
   second, weaker end column — the row's own fill and its number lighting up
   are the affordance. */
.lessons__time {
  font-size: var(--fs-xs);
  color: var(--ink-400);
  white-space: nowrap;
  text-align: end;
  padding-block-start: 0.3125rem;
  transition: color var(--dur-1) var(--ease);
}

/* Not only for the lift: `--ink-400` is 4.71:1 on the panel and 4.31:1 on the
   row's hover fill, so left alone the figure would fall under 4.5:1 exactly
   while a reader is pointing at it. `--ink-300` is 6.5:1 there. */
.lessons__link:hover .lessons__time {
  color: var(--ink-300);
}

/* Under 480px the reading time drops out of the end column and sits under the
   summary instead: a 3rem column taken out of a 320px row is width the title
   needs more than the figure does. */
@media (max-width: 30rem) {
  .lessons__module-head {
    padding: var(--sp-4);
  }

  .lessons__list::before {
    inset-inline-start: calc(var(--sp-4) + 0.875rem);
  }

  .lessons__link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4);
  }

  .lessons__time {
    grid-column: 2;
    text-align: start;
    padding-block-start: 0;
  }
}

/* ---------------------------------------------------------------------------
   One lesson. An article: prose at a reading measure, and nothing beside it.
   ------------------------------------------------------------------------ */

.lesson {
  padding-block: var(--sp-8) var(--sp-20);
}

.lesson .lesson__frame {
  max-width: 46rem;
}

.lesson__crumb {
  margin-block-end: var(--sp-6);
}

.lesson__crumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-300);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease);
}

.lesson__crumb-link:hover {
  color: var(--ink-050);
}

.lesson__crumb-link:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

/* The crumb names the chapter the article belongs to, which is two parts: the
   number that addresses it and the name. The number is set like every other
   position on this page — mono, quieter than the words beside it — and the
   whole thing wraps rather than pushing a long module title off the line. */
.lesson__crumb-link {
  flex-wrap: wrap;
  row-gap: var(--sp-1);
}

.lesson__crumb-module {
  color: var(--ink-400);
}

.lesson__crumb-dot {
  color: var(--ink-600);
}

/* The arrow points back, so under `dir="rtl"` it has to point the other way.
   The icon is drawn once and mirrored here rather than shipped twice. */
[dir="rtl"] .lesson__crumb-link .icon,
[dir="rtl"] .lesson__step-go {
  transform: scaleX(-1);
}

.lesson__head {
  margin-block-end: var(--sp-8);
}

.lesson__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.lesson__number {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-200);
}

.lesson__time {
  font-size: var(--fs-xs);
  color: var(--ink-400);
}

.lesson__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0;
  text-wrap: balance;
}

.lesson__lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--ink-300);
  margin: var(--sp-4) 0 0;
  max-width: var(--w-prose);
  text-wrap: pretty;
}

.lesson__draft {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-200);
  background: var(--danger-wash);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-5) 0 0;
}

.lesson__draft .icon {
  color: var(--danger);
  flex-shrink: 0;
}

/* The article. `.prose` already sets the measure and the paragraph rhythm;
   this raises the line height, because a lesson is read straight through
   where the site's other prose is scanned. */
.lesson__prose {
  color: var(--ink-100);
  line-height: var(--lh-body);
}

.lesson__prose p {
  margin: 0;
}

.lesson__prose p + p {
  margin-block-start: var(--sp-5);
}

/* A picture set among the paragraphs.

   It runs the reading measure exactly rather than breaking wider than it: the
   article is one column read straight down, and a figure that bleeds past the
   text is a second column the eye has to come back from. It also means no
   negative margins to get wrong under `dir="rtl"`.

   The border and the sunken fill are the empty box, drawn before the bytes
   arrive — the `width`/`height` on the image reserve the space, and this is
   what occupies it while the file loads. */
.lesson__figure {
  margin-block: var(--sp-8);
  margin-inline: 0;
}

.lesson__figure-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* The caption is the picture's description, not a second paragraph: set small
   and in tertiary ink so it reads as a label under the frame rather than as
   prose the reader has to work through. */
.lesson__figure-caption {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-400);
  margin-block-start: var(--sp-3);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------------------
   The way on. Only within the reader's own track.
   ------------------------------------------------------------------------ */

.lesson__pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-12);
  padding-block-start: var(--sp-6);
  border-block-start: 1px solid var(--line);
}

.lesson__step {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 15rem;
  min-inline-size: 0;
  padding: var(--sp-4);
  color: inherit;
  text-decoration: none;
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: background-color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.lesson__step:hover {
  background: var(--ink-800);
  border-color: var(--line-hi);
}

.lesson__step:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* The next step is the one the reader wants, so it is the one that reads
   forward: label and title flush to the end edge, arrow last. */
.lesson__step--next {
  text-align: end;
}

.lesson__step-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-inline-size: 0;
  flex: 1 1 auto;
}

.lesson__step-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--ink-400);
}

.lesson__step-title {
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink-050);
  text-wrap: pretty;
}

.lesson__step-go {
  color: var(--ink-500);
  flex-shrink: 0;
  transition: color var(--dur-1) var(--ease);
}

.lesson__step:hover .lesson__step-go {
  color: var(--ink-200);
}

.lesson__end {
  flex: 1 1 15rem;
  align-self: center;
  font-size: var(--fs-sm);
  color: var(--ink-400);
  margin: 0;
  text-wrap: pretty;
}

.lesson__end-link {
  color: var(--ink-200);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lesson__end-link:hover {
  color: var(--ink-050);
}