/* =====================================================================
   OSE · Path · styles/components/path.css
   ---------------------------------------------------------------------
   The learning path, "Một lộ trình, ba chặng": three stages (Tiếng Anh
   trẻ em → THCS → IELTS) beside an orbit diagram — the small OSE planet
   with one orbit per stage and a marker for "con của bạn". Answers a
   parent's question: which stage is my child at, and what comes next?
   Component tokens only: --path-*.

   Markup
     <div class="path">
       <div class="path__visual">
         <div class="path__diagram" role="img" aria-label="Sơ đồ …">
           <span class="path__orbit" data-stage="1"><span class="path__orbit-light"></span></span>
           <span class="path__orbit" data-stage="2"><span class="path__orbit-light"></span></span>
           <span class="path__orbit" data-stage="3"><span class="path__orbit-light"></span></span>
           <span class="path__tick" data-stage="1">01 Trẻ em</span>
           <span class="path__tick" data-stage="2">02 THCS</span>
           <span class="path__tick" data-stage="3">03 IELTS</span>
           <div class="planet planet--sm path__planet" data-part="planet" aria-hidden="true">…</div>
           <span class="path__marker" aria-hidden="true">
             <span class="path__marker-dot"></span>
             <span class="path__marker-label">con của bạn</span>
           </span>
         </div>
       </div>
       <div class="path__stages">
         <article class="path__stage" data-stage="1" aria-labelledby="…">
           <div class="path__mini" aria-hidden="true">
             <span class="path__orbit path__orbit--current" data-stage="1"><span class="path__orbit-light"></span></span>
             <span class="path__orbit" data-stage="2"><span class="path__orbit-light"></span></span>
             <span class="path__orbit" data-stage="3"><span class="path__orbit-light"></span></span>
             <div class="planet path__planet" aria-hidden="true">…</div>
           </div>
           <p class="path__label">Chặng 1</p>
           <h3 class="path__title" id="…">Tiếng Anh trẻ em</h3>
           <dl class="path__facts">
             <dt class="path__term">Dành cho</dt>
             <dd class="path__detail">…</dd>
             …
           </dl>
           <a class="link link--arrow" href="/khoa-hoc/#…">…<span class="link__icon" aria-hidden="true"></span></a>
         </article>
         …
       </div>
     </div>
   Load after planet.css (the diagram reuses .planet).

   Geometry every part of the diagram is a share of its width (it is
            square): orbit diameters --path-orbit-1/2/3 (0.46 / 0.68 / 0.9,
            the brand's orbit-diagram ratios), the stage ticks sit on top of
            their orbit, the marker at the bottom of orbit 1 (6 o'clock), its
            label to the right. Every part is centred with insets and
            margins, never translate, so transform stays free for the scene:
            to move the marker from orbit 1 to orbit n, translate it down by
            (orbit-n − orbit-1) ÷ 2 × the diagram width.
   Light    each orbit holds a .path__orbit-light: the same circle, thicker,
            in full ink, opacity 0. .path__orbit--current shows it (the
            phone diagrams mark their own stage this way, and the sticky
            diagram marks orbit 1 for the static page); on the sticky
            diagram the learning-path scene fades the lights instead.
            No aurora here: the planet's ring is the section's one aurora.
   Scene    js/motion/scenes/learning-path.js adds a .path__marker (dot
            only, --path-mini-marker-size) to each .path__mini; the static
            page has none.
   Layout   < 64em  stages stacked; each opens with a small diagram
                    (.path__mini) with its own orbit lit. The big diagram is
                    not shown.
            >= 64em two halves: the big diagram, sticky at --path-sticky-top
                    (below the site nav and the chapter nav) and never taller
                    than the screen; the stages, each at least
                    --path-stage-min-height tall, so scrolling moves on one
                    stage at a time. The minis are not shown.
            .path--stacked: the phone layout at every width (previews).
   Facts    a <dl>: term (mono data label) above its detail; from 48em
            term | detail in two columns, a hairline above each row.
   Static, no states of its own (the link brings its own). No JS.
   ===================================================================== */

@layer components {
  .path {
    display: grid;
    gap: var(--path-gap);
  }

  /* ---- Big diagram (≥ 64em only) ---------------------------------- */
  .path__visual {
    display: none;
  }

  .path__diagram,
  .path__mini {
    position: relative;
    aspect-ratio: var(--path-diagram-ratio);
    forced-color-adjust: none;
  }

  .path__diagram {
    inline-size: min(100%, var(--path-diagram-max));
  }

  .path__mini {
    inline-size: var(--path-mini-size);
  }

  /* An orbit: a circle --_r × the diagram, centred. */
  .path__orbit {
    --_r: var(--path-orbit-1);
    position: absolute;
    inset: 0;
    inline-size: calc(var(--_r) * 100%);
    block-size: calc(var(--_r) * 100%);
    margin: auto;
    border: var(--path-orbit-width) solid var(--path-orbit-color);
    border-radius: var(--path-orbit-radius);
  }

  .path__orbit[data-stage="2"],
  .path__tick[data-stage="2"] {
    --_r: var(--path-orbit-2);
  }

  .path__orbit[data-stage="3"],
  .path__tick[data-stage="3"] {
    --_r: var(--path-orbit-3);
  }

  .path__orbit-light {
    position: absolute;
    inset: calc(var(--path-orbit-width) * -1);
    border: var(--path-orbit-light-width) solid var(--path-orbit-light);
    border-radius: var(--path-orbit-radius);
    opacity: var(--path-orbit-light-opacity);
  }

  .path__orbit--current .path__orbit-light {
    opacity: var(--path-orbit-light-opacity-current);
  }

  /* Stage tick: on top of its orbit (12 o'clock), cutting the line. */
  .path__tick {
    --_r: var(--path-orbit-1);
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(50% - var(--_r) * 50%);
    display: flex;
    align-items: center;
    inline-size: max-content;
    block-size: var(--path-tick-height);
    margin-inline: auto;
    margin-block-start: calc(var(--path-tick-height) / -2);
    padding-inline: var(--path-tick-padding-inline);
    background-color: var(--path-tick-bg);
    color: var(--path-tick-color);
    font: var(--path-tick-font);
    letter-spacing: var(--path-tick-tracking);
    white-space: nowrap;
  }

  /* The planet sits in the middle of either diagram. */
  .path__planet {
    position: absolute;
    inset: 0;
    margin: auto;
  }

  .path__mini .path__planet {
    --_d: var(--path-mini-planet-size);
  }

  /* Marker: "con của bạn", at the bottom of orbit 1. */
  .path__marker {
    --_m: var(--path-marker-size);
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: calc(50% + var(--path-orbit-1) * 50%);
    inline-size: var(--_m);
    block-size: var(--_m);
    margin-inline-start: calc(var(--_m) / -2);
    margin-block-start: calc(var(--_m) / -2);
  }

  /* The smaller dot the learning-path scene adds to each small diagram. */
  .path__mini .path__marker {
    --_m: var(--path-mini-marker-size);
  }

  .path__marker-dot {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border-radius: var(--path-orbit-radius);
    background-color: var(--path-marker-color);
    box-shadow: 0 0 0 var(--path-marker-halo-width) var(--path-marker-halo);
  }

  .path__marker-label {
    position: absolute;
    inset-inline-start: calc(100% + var(--path-marker-label-gap));
    inset-block-start: 50%;
    translate: 0 -50%;
    padding-inline: var(--path-marker-label-padding-inline);
    background-color: var(--path-marker-label-bg);
    color: var(--path-marker-label-color);
    font: var(--path-marker-label-font);
    letter-spacing: var(--path-marker-label-tracking);
    white-space: nowrap;
  }

  /* ---- Stages ------------------------------------------------------ */
  .path__stages {
    display: grid;
    min-inline-size: 0;
  }

  .path__stage {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--path-stage-gap);
    min-inline-size: 0;
    padding-block: var(--path-stage-padding-block);
    border-block-start: var(--path-rule-width) solid var(--path-rule);
  }

  .path__mini {
    margin-block-end: var(--path-mini-gap);
  }

  .path__label {
    font: var(--path-label-font);
    letter-spacing: var(--path-label-tracking);
    color: var(--path-label-color);
  }

  .path__title {
    font: var(--path-title-font);
    letter-spacing: var(--path-title-tracking);
    color: var(--path-title-color);
    text-wrap: balance;
  }

  /* Facts: term above detail; two columns from 48em. */
  .path__facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    inline-size: 100%;
    margin-block: var(--path-facts-margin-block);
    border-block-end: var(--path-rule-width) solid var(--path-rule);
  }

  .path__term {
    padding-block-start: var(--path-fact-padding-block);
    border-block-start: var(--path-rule-width) solid var(--path-rule);
    color: var(--path-term-color);
    font: var(--path-term-font);
    letter-spacing: var(--path-term-tracking);
  }

  .path__detail {
    padding-block: var(--path-term-gap) var(--path-fact-padding-block);
    color: var(--path-detail-color);
  }

  @media (min-width: 48em) {
    .path__facts {
      grid-template-columns: max-content minmax(0, 1fr);
    }

    .path__term {
      padding-block-end: var(--path-fact-padding-block);
      padding-inline-end: var(--path-facts-column-gap);
    }

    .path__detail {
      padding-block-start: var(--path-fact-padding-block);
      border-block-start: var(--path-rule-width) solid var(--path-rule);
    }
  }

  /* ---- Two halves from 64em: sticky diagram | stages ----------------- */
  @media (min-width: 64em) {
    .path:not(.path--stacked) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: var(--path-column-gap);
      align-items: start;
    }

    .path:not(.path--stacked) .path__visual {
      position: sticky;
      inset-block-start: var(--path-sticky-top);
      display: grid;
      place-items: center;
      min-inline-size: 0;
    }

    .path:not(.path--stacked) .path__mini {
      display: none;
    }

    .path:not(.path--stacked) .path__stage {
      align-content: center;
      min-block-size: var(--path-stage-min-height);
    }

    /* A tail under the last stage keeps the diagram sticky (marker on the
       IELTS orbit) while the last stage is still being read. */
    .path:not(.path--stacked) .path__stages {
      padding-block-end: var(--path-stages-tail);
    }
  }
}