/* ═══════════════════════════════════════════════════════════
   Article Layout — CAAT Design System
   ═══════════════════════════════════════════════════════════ */

/* ── Hero image ──────────────────────────────────────────── */
.caat-article__hero-image {
  width: 100%;
  border-radius: var(--caat-radius);
  display: block;
}

/* ── Header ───────────────────────────────────────────────────
   The header is a tight stack grouping the title + byline; the
   article column is a stack for consistent block rhythm (see
   separator.css / .caat-stack). No bespoke structural margins. */
.caat-article__header h1 {
  font-family: var(--caat-font-primary);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--caat-color-text-heading);
}

/* ── Meta ─────────────────────────────────────────────────────
   Byline — COMPOSES the Byline/Meta component (.caat-byline). Spacing
   is governed by the header group, not a bespoke margin. */

/* ── Body (prose) ────────────────────────────────────────── */
/* COMPOSES the canonical prose container (.caat-rich-text, text-title.css)
   for vertical rhythm, headings, paragraphs, lists and links. Only the
   article-specific reading measure + blockquote styling live here. */
.caat-article__body {
  max-width: var(--caat-prose-measure);
}

.caat-article--has-sidebar .caat-article__body {
  max-width: 100%;
}

.caat-article__body blockquote {
  border-left: 4px solid var(--caat-blue-700);
  padding: 1rem 1.5rem;
  margin: var(--caat-prose-flow) 0;
  background: var(--caat-color-bg-brand-subtle);
  border-radius: 0 var(--caat-radius) var(--caat-radius) 0;
  font-style: italic;
  color: var(--caat-color-text-heading);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.caat-article__sidebar {
  position: sticky;
  top: 5rem;
  align-self: start;
}

/* ── Table of Contents ──────────────────────────────────────
   Now COMPOSES the In-page Nav component (.caat-in-page-nav,
   in-page-nav.css). No bespoke ToC styling lives here. */

/* ── Related articles ────────────────────────────────────── */
.caat-article__related {
  background: var(--caat-color-bg-page);
  border: 1px solid var(--caat-color-border);
  border-radius: var(--caat-radius);
  padding: 1.25rem;
}

.caat-article__related h5 {
  font-family: var(--caat-font-primary);
  font-weight: 700;
  font-size: var(--caat-font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--caat-color-text-heading);
  margin-bottom: 0.75rem;
}

.caat-article__related-item {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--caat-color-border);
}

.caat-article__related-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.caat-article__related-item:hover .caat-article__related-title,
.caat-article__related-item:focus-visible .caat-article__related-title {
  color: var(--caat-color-text-link-hover);
}

/* Keyboard focus for in-content nav links (AODA conformance — these are
   interactive anchors that previously had :hover but no focus indicator). */
.caat-article__related-item:focus-visible {
  outline: 0;
  box-shadow: var(--caat-color-focus-ring);
  border-radius: 4px;
}

.caat-article__related-title {
  font-family: var(--caat-font-primary);
  font-weight: 600;
  font-size: var(--caat-font-size-sm);
  color: var(--caat-color-text-heading);
  margin-bottom: 0.125rem;
  line-height: 1.35;
}

.caat-article__related-meta {
  font-size: var(--caat-font-size-2xs);
  color: var(--caat-color-text-muted);
}

/* ── Share row ────────────────────────────────────────────────
   COMPOSES Social/Share Links (.caat-social-links) + Icon Button
   (.caat-icon-btn--circle --outline). This wrapper only owns the
   vertical spacing; the control styling lives in those components. */
/* Share row spacing: governed by the article column stack when share is a
   direct child (standard/minimal). When nested after the body (sidebar
   variant) it gets an explicit top gap from the spacing scale. */
.caat-article__share { margin: 0; }
.caat-article__body > .caat-article__share { margin-top: var(--caat-space-6); }

/* ── Minimal variant (centered prose) ────────────────────── */
.caat-article--minimal .caat-article__body {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.caat-article--minimal .caat-article__header {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .caat-article__sidebar {
    position: static;
    margin-top: 2rem;
  }
}