/* RIVET Academy product-family rail (build spec F1 S10): the four RIVET courses as one compact sub-nav near the
   top of academy.html and each course page. The current page carries aria-current="page" and a 2px underline.
   Prices and "which memberships include it" come from FACTS.md (section 5). On phones the rail scrolls sideways
   inside itself; the page never does. No cards, no box borders: one hairline under the rail, hairlines between items.
   Light by default; dark on html[data-mode="dark"] and on the dark course pages (body.gtm-dark). */

.arail{
  --ar-ink:    var(--black, #000);
  --ar-soft:   var(--slate, #4A4A68);
  --ar-line:   var(--silver, #D1D1D9);
  --ar-mark:   var(--purple, #3B06D4);
  --ar-hover:  var(--ghost-white, #F8F8FA);
  --ar-tag-bg: var(--purple-subtle, #F6F8FF);
  --ar-tag:    var(--purple, #3B06D4);
  padding-block-start: clamp(12px, 1.6vw, 20px);
}
html[data-mode="dark"] .arail,
body.gtm-dark .arail{
  --ar-ink:    var(--white, #fff);
  --ar-soft:   var(--slate-on-dark, #9A9BBD);
  --ar-line:   color-mix(in oklab, var(--white, #fff) 16%, transparent);
  --ar-mark:   var(--purple-500, #7B87FF);
  --ar-hover:  color-mix(in oklab, var(--white, #fff) 5%, transparent);
  --ar-tag-bg: var(--purple-950, #180067);
  --ar-tag:    var(--purple-500, #7B87FF);
}

.arail__in{
  display: flex; align-items: stretch;
  border-block-end: 1px solid var(--ar-line);
}
.arail__list{
  list-style: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-inline-size: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.arail__list > li{ display: flex; min-inline-size: 0; }

.arail a{ text-decoration: none; }
.arail__home,
.arail__i{
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px;
  padding-block: 12px 14px; padding-inline: 18px;
  color: var(--ar-soft);
  transition: background-color var(--dur-instant, 120ms) var(--ease-standard, ease);
}
.arail__home{ flex: none; padding-inline-start: 0; padding-inline-end: 24px; }
.arail__i{ flex: 1 1 auto; min-inline-size: 0; border-inline-start: 1px solid var(--ar-line); }
.arail__home::after,
.arail__i::after{
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px;
  background: transparent;
  transition: background-color var(--dur-instant, 120ms) var(--ease-standard, ease);
}
.arail__home::after{ inset-inline-end: 24px; }
.arail__i:hover{ background: var(--ar-hover); }
.arail__home:hover::after,
.arail__i:hover::after{ background: var(--ar-line); }
.arail [aria-current="page"]::after{ background: var(--ar-mark); }
.arail [aria-current="page"]:hover{ background: transparent; }

.arail .arail__k{ color: var(--ar-soft); }
.arail [aria-current="page"] .arail__k,
.arail .arail__home:hover .arail__k{ color: var(--ar-ink); }

.arail__top{ display: flex; align-items: center; gap: 8px; min-inline-size: 0; }
.arail .arail__n{
  color: var(--ar-ink); font-weight: 600; font-size: var(--t-small, .875rem); line-height: 1.3;
  min-inline-size: 0; text-wrap: balance;
}
.arail__i:not([aria-current]) .arail__n,
.arail__home:not([aria-current]) .arail__n{ color: var(--ar-soft); }
.arail__i:not([aria-current]):hover .arail__n,
.arail__home:not([aria-current]):hover .arail__n{ color: var(--ar-ink); }
.arail .arail__tag{
  flex: none; padding-block: 2px; padding-inline: 7px; border-radius: 999px;
  background: var(--ar-tag-bg); color: var(--ar-tag);
}
.arail .arail__m{ display: flex; flex-direction: column; gap: 2px; color: var(--ar-soft); }
.arail .arail__m > span{ color: inherit; min-inline-size: 0; }
.arail .arail__m .arail__p{ color: var(--ar-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Arabic twins: type.css moves .t-meta to Almarai; prices stay Plex Mono with Western digits (Brand OS) */
.arail .arail__p:lang(ar){ font-family: var(--font-mono); }

/* Tighten the hero that follows the rail, so the course card's buy button stays in the first screen */
.arail ~ section:first-of-type{ padding-block-start: clamp(28px, 3.4vw, 48px) !important; }

@media (max-width: 1100px){
  .arail__home:not([aria-current]){ display: none; }
  .arail__home:not([aria-current]) + .arail__list > li:first-child .arail__i{ border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 860px){
  .arail__in{ overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .arail__in::-webkit-scrollbar{ display: none; }
  .arail__list{ display: flex; flex: none; }
  .arail__list > li{ flex: 0 0 auto; }
  .arail__home{ padding-inline-end: 14px; }
  .arail__home::after{ inset-inline-end: 14px; }
  .arail__i{ inline-size: max-content; max-inline-size: 300px; padding-inline: 14px; }
  .arail .arail__n{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the scroll box clips on both axes, so draw the focus ring inside the link */
  .arail a:focus-visible{ outline-offset: -3px; }
}

@media (prefers-reduced-motion: reduce){
  .arail__home, .arail__i, .arail__home::after, .arail__i::after{ transition: none; }
}