/*
 * single.css — single Learn article (Phase 5, A1; editorial redesign). Consumes
 * tokens.css only; zero literals outside the sanctioned @media breakpoints (each
 * commented with its --bp-* token name). Enqueued on is_singular('post') after
 * components.css, product.css (the cross-sell reuses .crosssell-card) and
 * learn.css (the "Keep reading" row reuses .learn-card).
 *
 * The page reads as a dark editorial feature (ref-04's indexed confidence):
 *   - a balanced split hero: title + standfirst + meta chips | the cover at 4:5;
 *   - the article on the narrow measure at the left, with a sticky rail of
 *     numbered section links at the far right from --bp-lg;
 *   - numbered section heads under hairline rules, a brand drop cap, framed
 *     figures, a Sources panel;
 *   - a thin brand reading-progress bar (article.js sets --progress).
 */

/* — Shared rhythm for the post-body sections (cross-sell, keep reading). — */
.article-section {
  padding-block: var(--space-80);
  border-block-start: var(--border-hairline) solid var(--color-border);
}

/* Anchored headings land clear of the sticky header (≈ --space-64 tall). */
.article-body h2 {
  scroll-margin-block-start: calc(var(--space-64) + var(--space-32));
}

/* ============================================================
 * Reading progress — a hairline of brand red pinned to the viewport top,
 * above the sticky header. Width is a transform (GPU-cheap), driven by
 * article.js through --progress (0 → 1). No JS → it stays at 0 (invisible).
 * ============================================================ */
.article-progress {
  position: fixed;
  inset-inline: 0;
  top: var(--wp-admin--admin-bar--height, 0);
  /* Structural stacking value (not a design token): one above the sticky
     header's z-index 5 — same raw-integer convention as header.css. */
  z-index: 6;
  height: var(--border-thin);
  pointer-events: none;
}

.article-progress__bar {
  display: block;
  height: 100%;
  background-color: var(--color-brand);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
}

/* ============================================================
 * Hero — copy | cover. Mobile-first stack (copy, then cover); a 7:5 split
 * from --bp-lg so the title leads and the 4:5 cover counterweights it.
 * ============================================================ */
.article-hero {
  padding-block: var(--space-48) var(--space-64);
}

.article-hero__inner {
  display: grid;
  gap: var(--space-48);
  align-items: center;
}

.article-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.article-back {
  display: inline-block;
  margin-block-end: var(--space-32);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.article-back:hover,
.article-back:focus-visible {
  color: var(--color-text);
}

.article-hero__title {
  margin-block-end: var(--space-24);
  font-size: var(--type-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.article-hero__standfirst {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-32);
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
}

/* Meta — hairline pills: date · read time · sources (the last jumps to them). */
.article-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.article-meta__item {
  padding: var(--space-8) var(--space-16);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-meta__item a {
  color: var(--color-text);
  transition: color var(--duration-fast);
}

.article-meta__item a:hover,
.article-meta__item a:focus-visible {
  color: var(--color-brand-hover);
}

/* The cover — a 4:5 frame whatever the source ratio (the two client covers are
   one portrait, one landscape); cover-cropped, rounded per --radius-none. */
.article-hero__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background-color: var(--color-surface);
  border-radius: var(--radius-none);
}

.article-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 1024px) /* --bp-lg */ {
  .article-hero {
    padding-block: var(--space-64) var(--space-80);
  }

  .article-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-64);
  }
}

/* ============================================================
 * Layout — body + contents rail. Mobile: the rail is a compact panel above
 * the body (it comes first in the DOM), flush under the hero. --bp-lg: the
 * body holds the left column, aligned with the hero title, and the sticky
 * rail sits at the far right of the container.
 * ============================================================ */
.article-layout {
  display: grid;
  gap: var(--space-48);
  padding-block: 0 var(--space-96);
}

@media (min-width: 768px) /* --bp-md */ {
  .article-layout {
    padding-block-start: var(--space-16);
  }
}

.article-body {
  min-width: 0;
  max-width: var(--container-narrow);
}

@media (min-width: 1024px) /* --bp-lg */ {
  .article-layout {
    grid-template-columns: minmax(0, var(--container-narrow)) minmax(0, 1fr);
    column-gap: var(--space-64);
    align-items: start;
  }

  .article-body {
    grid-column: 1;
    grid-row: 1;
  }

  /* Rail capped at three --space-96 steps and pushed to the right edge. */
  .article-toc {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: calc(var(--space-96) * 3);
    position: sticky;
    top: calc(var(--space-64) + var(--space-32));
  }
}

/* — Contents rail — numbered section links on a hairline track; the active
     section (article.js → .is-active) lights its index red and claims the
     track with a brand edge. — */
.article-toc {
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
}

.article-toc__title {
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.article-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: var(--border-hairline) solid var(--color-border);
}

.article-toc__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
  margin-inline-start: calc(-1 * var(--border-hairline));
  padding: var(--space-8) 0 var(--space-8) var(--space-16);
  border-inline-start: var(--border-thin) solid transparent;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.article-toc__index {
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-wide);
  color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-bg));
  transition: color var(--duration-fast);
}

.article-toc__link:hover,
.article-toc__link:focus-visible {
  color: var(--color-text);
}

.article-toc__link.is-active {
  border-inline-start-color: var(--color-brand);
  color: var(--color-text);
}

.article-toc__link.is-active .article-toc__index {
  color: var(--color-brand);
}

/* On the rail (--bp-lg up) the panel chrome drops away — the rail is quiet
   furniture beside the article, not a card. */
@media (min-width: 1024px) /* --bp-lg */ {
  .article-toc {
    padding: 0;
    background-color: transparent;
    border: 0;
  }
}

/* ============================================================
 * Body — Gutenberg block HTML on the narrow measure. Every block the
 * articles use (heading, paragraph, image, list, quote, Sources) is styled.
 * ============================================================ */
.article-body > * + * {
  margin-block-start: var(--space-24);
}

/* Section heads — each opens on a hairline rule with its number above it
   (data-index from spalux_article_prepare(); ref-04 indexed sections). */
.article-body h2 {
  margin-block-start: var(--space-64);
  padding-block-start: var(--space-32);
  border-block-start: var(--border-hairline) solid var(--color-border);
  font-size: var(--type-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.article-body h2[data-index]::before {
  content: attr(data-index);
  display: block;
  margin-block-end: var(--space-12);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-brand);
}

/* The first section opens straight under the hero — no rule above it. */
.article-body > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.article-body h3 {
  margin-block-start: var(--space-40);
  font-size: var(--type-subheading);
}

.article-body p {
  margin-block-end: 0;
  color: var(--color-text);
  line-height: var(--leading-normal);
}

/* Drop cap — the opening paragraph's first letter in brand-red Manrope. */
.article-body > h2:first-child + p::first-letter {
  float: inline-start;
  margin-block-start: var(--space-4);
  margin-inline-end: var(--space-12);
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  color: var(--color-brand);
}

.article-body strong {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.article-body a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-brand);
  text-underline-offset: var(--space-4);
  transition: color var(--duration-fast);
}

.article-body a:hover,
.article-body a:focus-visible {
  color: var(--color-brand-hover);
}

.article-body ul,
.article-body ol {
  padding-inline-start: var(--space-24);
}

.article-body li + li {
  margin-block-start: var(--space-8);
}

/* Images — the WP image block. Framed (rounded per --radius-none), extra air
   so a photo breaks the prose. Portrait photos (is-portrait, flagged by
   spalux_article_prepare()) crop to 4:5 rather than towering at 2:3. */
.article-body figure {
  margin-block: var(--space-48);
  margin-inline: 0;
}

.article-body figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-none);
}

.article-body figure.is-portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.article-body figcaption {
  margin-block-start: var(--space-12);
  font-size: var(--type-caption);
  color: var(--color-text-muted);
}

.article-body blockquote {
  margin-inline: 0;
  padding-inline-start: var(--space-24);
  border-inline-start: var(--border-thin) solid var(--color-brand);
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* — Sources — an unnumbered, quieter head over a numbered citation panel. — */
.article-body h2.article-sources-title {
  font-size: var(--type-subheading);
}

.article-body .article-sources {
  list-style: none;
  margin-block-start: var(--space-20);
  padding: var(--space-8) var(--space-24);
  counter-reset: source;
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
  font-size: var(--type-caption);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}

.article-body .article-sources li {
  counter-increment: source;
  display: grid;
  grid-template-columns: var(--space-32) minmax(0, 1fr);
  padding-block: var(--space-12);
  overflow-wrap: anywhere;
}

.article-body .article-sources li + li {
  margin-block-start: 0;
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.article-body .article-sources li::before {
  content: counter(source, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
  color: var(--color-brand);
}

.article-body .article-sources a {
  color: var(--color-text-muted);
  text-decoration-color: var(--color-border);
}

/* ============================================================
 * Cross-sell — the article's product + the Recovery Stack (product.css owns
 * .crosssell-card / .crosssell-grid). Every card is one link (.card-link on
 * the title); the pill is a visual cue that follows the card's hover.
 * ============================================================ */
/* From --bp-lg the two cards lie landscape — photo beside copy — so the pair
   reads as a compact closing band, not two towering 4:5 posters. */
@media (min-width: 1024px) /* --bp-lg */ {
  .article-crosssell .crosssell-card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }
}

.crosssell-card:hover .crosssell-card__cta--cue.btn--ghost {
  border-color: var(--color-text);
}

.crosssell-card:hover .crosssell-card__cta--cue.btn--primary {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

/* ============================================================
 * Keep reading — section head with an "All articles" link on its baseline,
 * then the Learn card grid (learn.css).
 * ============================================================ */
.article-more__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
  margin-block-end: var(--space-48);
}

.article-more__head .product-section__head {
  margin-block-end: 0;
}

.article-more__all {
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--duration-fast);
}

.article-more__all:hover,
.article-more__all:focus-visible {
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .article-back,
  .article-meta__item a,
  .article-toc__link,
  .article-toc__index,
  .article-body a,
  .article-more__all {
    transition: none;
  }
}