/**
 * =====================================================================
 * ARTICLE COMPONENT — STYLES
 * =====================================================================
 * Copied from the authoritative design system CSS provided earlier in
 * this project (the same file .news/.partners/.newsletter/etc. all
 * came from).
 *
 * Tag qualifiers and font-family !important applied from the start,
 * not waiting for a bug report — both confirmed necessary, repeatedly,
 * elsewhere in this project: a bare single-class selector loses to
 * Blocksy's own base styling, and font-family specifically needs
 * !important since Blocksy uses !important on that property too, even
 * on selectors that already have a class+tag ancestor (confirmed on
 * .stat__num — specificity alone wasn't enough for that one property).
 * =====================================================================
 */

section.article-hero {
  padding-block: clamp(120px, 14vw, 170px) 0;
  background: var(--ivory);
  position: relative;
}
.article-hero .container { max-width: 820px; }
/*
 * ::before dash ADDED — not in the originally-provided CSS, but
 * confirmed present in the actual target design (a small red dash
 * before the kicker text, matching the same visual technique already
 * used by .eyebrow elsewhere in this project).
 */
span.article__kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--red);
}
.article__kicker::before { content: ""; width: 26px; height: 1px; background: var(--red); }
.article-hero h1 {
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
  font-weight: 300; letter-spacing: -0.02em; line-height: 1.08; margin: 20px 0 24px;
}
div.article__meta { display: flex; gap: 20px; flex-wrap: wrap; color: var(--slate); font-size: 13.5px; padding: 16px 0; border-block: 1px solid var(--line); }
.article__meta span::before { content: "·"; margin-right: 8px; color: var(--red); }
.article__meta span:first-child::before { content: ""; margin-right: 0; }

figure.article__figure { max-width: 1000px; margin: 40px auto 0; padding-inline: var(--gutter); }
.article__figure img { border-radius: var(--radius-lg); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.article__figure figcaption { font-family: var(--font-mono) !important; font-size: 13px; color: var(--slate); text-align: center; margin-top: 14px; letter-spacing: 0.05em; }

div.article__body {
  max-width: 720px; margin: 0 auto; padding: 60px var(--gutter) 20px;
  font-size: 1.08rem; line-height: 1.75;
}
.article__body p { color: var(--ink); margin-bottom: 1.4em; }
.article__body h2 { font-family: var(--font-display) !important; font-weight: 500; font-size: var(--step-3); margin: 1.4em 0 0.5em; line-height: 1.15; }
.article__body h3 { font-family: var(--font-display) !important; font-weight: 500; font-size: var(--step-2); margin: 1.4em 0 0.5em; }
.article__body ul { padding-left: 0; list-style: none; margin: 0 0 1.4em; }
.article__body ul li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--line); }
.article__body ul li:last-child { border-bottom: 1px solid var(--line); }
.article__body ul li::before { content: "→"; color: var(--red); position: absolute; left: 0; }
.article__body blockquote {
  margin: 40px 0; padding: 26px 30px;
  border-left: 3px solid var(--red);
  font-family: var(--font-display) !important; font-style: italic; font-size: var(--step-2);
  line-height: 1.3; color: var(--ink);
  background: var(--ivory); border-radius: 0 12px 12px 0;
}
.article__body a { color: var(--red); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.article__body a:hover { color: var(--red-deep); }

div.article__cta {
  max-width: 720px; margin: 30px auto 0; padding: 30px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  border-top: 1px solid var(--line);
}
.article__share { display: flex; gap: 8px; }
.article__share a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.article__share a:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.article__share svg { width: 15px; height: 15px; }

@media (max-width: 700px) {
  .article__cta { flex-direction: column; align-items: flex-start; }
}

/**
 * ---------- "single.html parity" two-column layout (show_facts) ----------
 * Copied verbatim from the current static design system's
 * ".single__*"/".share-row" rules (css/style.css) — the real
 * single.html structure this component's own "show_facts" attribute
 * opts into. ".doc-card" itself (used inside ".single__attachments")
 * is defined in components/document_library/style.css, reused via
 * this component's manual enqueue below.
 */
.single__layout { display: grid; grid-template-columns: 1fr 320px; gap: 60px; align-items: start; }
.single__main { min-width: 0; }
.single__sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 96px; }
@media (max-width: 900px) {
  .single__layout { grid-template-columns: 1fr; }
  .single__sidebar { position: static; }
}

/* Inside .single__main, .article__body/.article__cta no longer need
   their own single-column centering/max-width — the grid column
   itself already constrains the width, and the surrounding
   ".container" already supplies the side gutters. */
.single__main .article__body { max-width: none; margin: 0; padding: 40px 0 0; }
.single__main .article__cta { max-width: none; margin: 30px 0 0; padding: 30px 0 0; }

.single__media { aspect-ratio: 16/9; overflow: hidden; margin-bottom: 44px; border: 1px solid var(--line); max-width: 72ch; }
.single__media img { width: 100%; height: 100%; object-fit: cover; }
p.single__caption { font-family: var(--font-mono) !important; font-size: 13px; color: var(--slate); margin-top: -30px; margin-bottom: 30px; letter-spacing: 0.05em; }

.single__facts { border: 1px solid var(--line); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.single__facts:empty { display: none; }
.single__facts-item { display: flex; flex-direction: column; gap: 4px; }
.single__facts-label { font-family: var(--font-sans) !important; font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }
.single__facts-value { font-family: var(--font-serif) !important; font-size: 17px; color: var(--ink); }

.single__attachments { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 28px; max-width: 72ch; }
.single__attachments:empty { display: none; }
.single__attachment { flex: 1 1 260px; max-width: 320px; }
.single__attachment .doc-card { height: 100%; }
.single__attachment-label { display: block; margin-bottom: 10px; font-family: var(--font-sans) !important; font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--slate); }

.share-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 24px; border-top: 1px solid var(--line); }
.share-row__label { font-family: var(--font-sans) !important; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.share-row__icons { display: flex; gap: 10px; }
.share-row__icons a, .share-row__icons button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  color: var(--ink); background: var(--white);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.share-row__icons a:hover, .share-row__icons button:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.share-row__icons svg { width: 16px; height: 16px; }
.share-row__copied { font-size: 12.5px; color: var(--red); opacity: 0; transition: opacity 0.25s var(--ease); }
.share-row__copied.is-shown { opacity: 1; }