/* ANYSRV Journal — article template. Readable column, ~760px target. */

.breadcrumbs {
  padding-block: var(--space-3);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.4em; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.4em; color: var(--color-border); }
.breadcrumbs a:hover { color: var(--color-accent); }
.breadcrumbs li[aria-current="page"] { color: var(--color-text); }

.article-header {
  padding-block-end: var(--space-4);
  max-width: 860px;
}
.article-header__category {
  color: var(--color-brand-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75em;
}
.article-header h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.15;
}
.article-header__lead {
  margin-top: var(--space-3);
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  max-width: 720px;
}
.article-header__meta {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}
.article-header__meta img {
  width: 28px; height: 28px; border-radius: 50%;
}

/*
  Hero images come from source illustrations with genuinely different
  aspect ratios (roughly 1.5:1 to 3:1) — a single forced aspect-ratio +
  object-fit: cover cropped some of them hard and upscaled/blurred the
  lowest-resolution ones. Instead: show the full image at its own
  ratio (height: auto) by default, with only a generous max-height cap
  so an unusually tall source can't blow out the hero. object-fit only
  engages — and only crops the minimum needed, centered — for the
  handful of images whose natural height at full article width would
  exceed that cap. Most images get zero crop; none get upscaled.
*/
.article-hero {
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-block: var(--space-4);
  background: var(--color-surface-muted);
}
.article-hero img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/*
  Three direct grid children (toc-rail, primary, sidebar) rather than
  nesting the TOC inside the sidebar — that's what lets the TOC sit
  sticky above the CTA panels on desktop (same right-hand column) while
  independently moving to the very top of the stack on mobile, without
  duplicating any markup for the two breakpoints.
*/
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas: "primary toc" "primary sidebar";
  gap: var(--space-6);
  align-items: start;
  padding-block-end: var(--space-6);
}

/*
  White box for the readable column, sitting on the page's blue field —
  same "box on a colored field" pattern as the rest of the shell, kept
  as one contained card (not a full-bleed white section).
*/
.article-primary {
  grid-area: primary;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.article-body {
  max-width: var(--content-max);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
}
.article-body > * + * { margin-top: 1.15em; }
.article-body h2 {
  font-size: 1.5rem;
  margin-top: 1.8em;
  scroll-margin-top: 150px; /* matches .headermain's real stuck height exactly, so TOC-anchor jumps clear the sticky header */
}
.article-body h3 {
  font-size: 1.2rem;
  margin-top: 1.5em;
  scroll-margin-top: 150px; /* matches .headermain's real stuck height exactly, so TOC-anchor jumps clear the sticky header */
}
.article-body ul, .article-body ol { padding-left: 1.3em; list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 0.4em; }
.article-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: var(--color-accent-hover); }
.article-body strong { color: var(--color-heading); }
.article-body blockquote {
  padding-left: 1.2em;
  border-left: 3px solid var(--color-brand);
  color: var(--color-text-muted);
  font-style: italic;
}

.article-body pre {
  background: #0f1b2d;
  color: #e6edf5;
  padding: 1.1em 1.3em;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.55;
}
.article-body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}
.article-body :not(pre) > code {
  background: var(--color-surface-muted);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--color-brand-dark);
}

.table-scroll { overflow-x: auto; }
.article-body table {
  font-size: 0.92rem;
  min-width: 480px;
}
.article-body th, .article-body td {
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-border);
  text-align: left;
}
.article-body th {
  background: var(--color-surface-muted);
  color: var(--color-heading);
  font-weight: 700;
}

/*
  Table of contents — deliberately light: a tinted strip with a brand
  rule, not a bordered box the same weight as the sidebar panels. It
  should read as a compact wayfinding aid, not a content block. The
  outer <details> (.article-toc-rail) owns position/stickiness/
  collapsibility; .toc is just the list, unchanged from before.
*/
.article-toc-rail {
  grid-area: toc;
  align-self: start;
  position: sticky;
  top: 90px;
}
.toc-summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0.85em var(--space-3);
}
.article-toc-rail:not([open]) .toc-summary { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.toc-summary::-webkit-details-marker { display: none; }
.toc-summary::marker { content: ""; }
.toc-summary::after {
  content: "\2212"; /* minus, shown when open */
  float: right;
  color: var(--color-brand-dark);
}
.article-toc-rail:not([open]) .toc-summary::after { content: "+"; }
.toc {
  background: var(--color-surface-muted);
  border-left: 3px solid var(--color-brand);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 0.7em var(--space-3) 0.85em;
  margin-bottom: var(--space-5);
}
.toc ol { list-style: none; padding: 0; display: grid; gap: 0.3em; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: 0.86rem; }
.toc li::before { content: counter(toc) "."; color: var(--color-brand-dark); font-weight: 700; margin-right: 0.4em; }
.toc a { color: var(--color-text); }
.toc a:hover { color: var(--color-accent); }
.toc a.is-active { color: var(--color-accent); font-weight: 700; }

/* Sidebar — deliberately NOT sticky (only the TOC rail is); avoids the
   two independently-sized sticky elements fighting for vertical space. */
.article-sidebar { grid-area: sidebar; display: grid; gap: var(--space-4); }
.sidebar-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.sidebar-panel h2 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.75em; }
.sidebar-cta { background: var(--color-brand-tint); border-color: var(--color-brand); }
.sidebar-cta p { font-size: 0.9rem; color: var(--color-text); margin-bottom: var(--space-3); }
.sidebar-cta .btn { width: 100%; }

/*
  Share row — compact, icon-only buttons with a visible text label and
  individual aria-labels (never icon-only-ambiguous). Uses ANYSRV's
  brand green/accent-blue pairing rather than platform brand colors, to
  stay visually restrained rather than a loud row of logo colors.
*/
.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-top: var(--space-3);
}
.article-primary > .share-row { margin-top: var(--space-5); }
.share-row__label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-right: 0.2em;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.share-btn:hover { background: var(--color-brand-tint); border-color: var(--color-brand); color: var(--color-brand-dark); }
.share-btn[hidden] { display: none; }
.share-row__feedback {
  font-size: 0.82rem;
  color: var(--color-brand-dark);
  font-weight: 700;
}

/* Author / publisher block — compact, no invented named human author. */
.author-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.author-block__avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-tint);
  color: var(--color-brand-dark);
  font-weight: 700;
  font-size: 0.85rem;
}
.author-block__name { font-weight: 700; color: var(--color-heading); font-size: 0.92rem; }
.author-block__bio { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 0.15em; }

/* In-article service CTA — last thing in the editorial column, tinted
   so it reads as a distinct, clearly-commercial block, not body copy. */
.service-note {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-5);
}
.service-note__label { color: var(--color-brand-dark); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4em; }
.service-note h2 { font-size: 1.2rem; }
.service-note p { margin-top: 0.5em; color: var(--color-text-muted); font-size: 0.95rem; }
.service-note .btn { margin-top: var(--space-3); }

/*
  Editorial callouts — a reusable component system, used only where an
  article genuinely needs one. Markup (for any future article copy):
  <div class="callout callout--tip"><p class="callout__label">Practical tip</p><p>…</p></div>
  Variants: callout--takeaway, callout--tip, callout--mistake, callout--note.
*/
.callout {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-muted);
}
.callout__label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4em; }
.callout--takeaway { border-left-color: var(--color-brand); }
.callout--takeaway .callout__label { color: var(--color-brand-dark); }
.callout--tip { border-left-color: var(--color-accent); }
.callout--tip .callout__label { color: var(--color-accent); }
.callout--mistake { border-left-color: #b3401f; }
.callout--mistake .callout__label { color: #b3401f; }
.callout--note { border-left-color: var(--color-text-muted); }
.callout--note .callout__label { color: var(--color-text-muted); }

/* Related articles */
.related-articles { padding-block: var(--space-6); border-top: 1px solid var(--color-border); }
.related-articles h2 { font-size: 1.3rem; margin-bottom: var(--space-4); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.related-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}
.related-card:hover { border-color: var(--color-brand); }
.related-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--color-surface-muted); }
.related-card__media img { width: 100%; height: 100%; object-fit: cover; }
.related-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.related-card__category { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-brand-dark); margin-bottom: 0.4em; }
.related-card h3 { font-size: 0.98rem; line-height: 1.35; }
.related-card h3 a { color: var(--color-heading); }
.related-card h3 a:hover { color: var(--color-accent); }
.related-card__meta { margin-top: 0.5em; font-size: 0.8rem; color: var(--color-text-muted); }

/* Prev/next */
.article-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.article-pager a {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.article-pager a:hover { border-color: var(--color-brand); }
.article-pager__label { font-size: 0.78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.article-pager__title { margin-top: 0.4em; font-weight: 700; color: var(--color-heading); display: block; }
.article-pager--next { text-align: right; }

/*
  Reading progress — a hairline fixed at the absolute top of the
  viewport (above the header's own pinned z-index of 9999) so it never
  depends on the header's own sticky/pin mechanics. Purely informational,
  not decorative: width is set directly from scroll position in JS, and
  the base stylesheet's global prefers-reduced-motion rule already
  collapses its transition duration, so it still updates, just without
  the smoothing animation.
*/
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10000;
  background: transparent;
  pointer-events: none;
}
.reading-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-brand);
  transition: width 120ms linear;
}

/* Back to top */
.back-to-top {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 500;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-to-top:hover { background: var(--color-brand-tint); border-color: var(--color-brand); color: var(--color-brand-dark); }
.back-to-top[hidden] { display: none; }

@media (max-width: 980px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "primary" "sidebar"; }
  .article-toc-rail { position: static; }
  .article-sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .article-sidebar { grid-template-columns: minmax(0, 1fr); }
  .article-pager { grid-template-columns: minmax(0, 1fr); }
  .article-pager--next { text-align: left; }
  .related-grid { grid-template-columns: minmax(0, 1fr); }
  .back-to-top { right: var(--space-3); bottom: var(--space-3); }
}