/* =====================================================================
   OSE · Link  (styles/components/link.css)
   ---------------------------------------------------------------------
   Inline text link inside running copy, and a standalone arrow link.

     <p>Lớp nhỏ, tối đa 15 học viên.
        <a class="link" href="/khoa-hoc/">Xem lộ trình học</a>.</p>

     <a class="link link--arrow" href="/khoa-hoc/">
       Xem tất cả khoá học<span class="link__icon" aria-hidden="true"></span>
     </a>

   Inline   hairline underline in the strong border colour; on hover the
            underline turns aurora lilac and thickens. The text stays navy
            (cream on navy), so body contrast never drops.
   Arrow    medium weight, no underline at rest, a >= 44px tall hit area;
            on hover the lilac underline appears and the arrow nudges right
            (transform only; the distance is 0 under reduced motion).
   States   visited (colour-only, per the :visited privacy rules) ·
            focus-visible (ring, cloned across wrapped lines) · hover ·
            active. Links have no disabled state: render plain text instead.
   JS       none.
   ===================================================================== */

@layer components {
  .link {
    border-radius: var(--link-radius);
    color: var(--link-text);
    text-decoration-line: underline;
    text-decoration-color: var(--link-underline);
    text-decoration-thickness: var(--link-underline-thickness);
    text-underline-offset: var(--link-underline-offset);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    -webkit-tap-highlight-color: transparent;
    transition:
      color var(--link-duration) var(--link-ease),
      text-decoration-color var(--link-duration) var(--link-ease),
      text-decoration-thickness var(--link-duration) var(--link-ease),
      box-shadow var(--link-duration) var(--link-ease);
  }

  /* ---- Standalone arrow link ------------------------------------------ */

  .link--arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--link-arrow-gap);
    min-block-size: var(--link-arrow-min-height);
    font-family: var(--link-arrow-font-family);
    font-weight: var(--link-arrow-font-weight);
    text-decoration-color: var(--link-arrow-underline);
  }

  .link__icon {
    flex: none;
    inline-size: var(--link-arrow-icon-size);
    block-size: var(--link-arrow-icon-size);
    background-color: currentColor;
    -webkit-mask-image: var(--link-arrow-icon);
    mask-image: var(--link-arrow-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    forced-color-adjust: none; /* keep the glyph painted in the forced text colour */
    transition: transform var(--link-duration) var(--link-ease);
  }

  /* ---- States (order matters: visited < focus < hover < active) ------- */

  .link:visited {
    color: var(--link-text-visited);
    text-decoration-color: var(--link-underline-visited);
  }

  .link--arrow:visited {
    text-decoration-color: var(--link-arrow-underline);
  }

  .link:focus-visible {
    box-shadow: var(--link-focus-ring);
  }

  @media (hover: hover) {
    .link:hover {
      color: var(--link-text-hover);
      text-decoration-color: var(--link-underline-hover);
      text-decoration-thickness: var(--link-underline-thickness-hover);
    }

    .link--arrow:hover .link__icon {
      transform: translateX(var(--link-arrow-nudge));
    }
  }

  .link:active {
    color: var(--link-text-active);
    text-decoration-color: var(--link-underline-active);
    text-decoration-thickness: var(--link-underline-thickness-hover);
  }

  .link--arrow:active .link__icon {
    transform: translateX(var(--link-arrow-nudge));
  }
}