/* ============================================================
   SoftwarePedia — Article page styles
   Read-progress · article hero · TOC layout · prose · HowTo ·
   key-terms · callouts
   ============================================================ */

/* ---- Read progress bar -------------------------------- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; background: transparent; }
.read-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-500), var(--amber)); transition: width .1s linear; }

/* ---- Article hero ------------------------------------- */
.art-hero { padding-block: var(--sp-7) var(--sp-6); background: var(--bg-soft); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.art-hero .hexgrid { opacity: .6; }
.art-hero__inner { position: relative; max-width: 56rem; }
.art-hero h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); margin-top: var(--sp-4); }
.art-hero .dek { margin-top: var(--sp-5); font-size: var(--fs-md); color: var(--ink-600); max-width: 54ch; }
.art-meta { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-5); }
.art-author { display: flex; align-items: center; gap: .7rem; }
.art-author .av { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--bg-soft-2); border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink-400); font-family: var(--font-display); font-weight: 700; flex: none; }
.art-author b { font-family: var(--font-display); font-weight: 500; color: var(--ink-900); display: block; line-height: 1.1; }
.art-author span { font-size: var(--fs-sm); color: var(--ink-500); }
.art-meta__item { display: flex; align-items: center; gap: .45em; font-size: var(--fs-sm); color: var(--ink-600); }
.art-meta__item svg { width: 1.05em; height: 1.05em; color: var(--brand-500); }
.art-meta__divider { width: 1px; height: 26px; background: var(--line-2); }

/* ---- Article layout (TOC + body) ---------------------- */
.art-layout { display: grid; grid-template-columns: 256px minmax(0,1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (max-width: 940px){ .art-layout { grid-template-columns: 1fr; } .art-aside { display: none; } }

/* TOC card */
.art-aside .toc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); }
.art-aside .share { margin-top: var(--sp-5); display: flex; gap: .5rem; }
.art-aside .share a { width: 40px; height: 40px; border-radius: var(--r-pill); border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--ink-500); transition: all var(--dur) var(--ease); }
.art-aside .share a:hover { border-color: var(--brand-300); color: var(--brand-600); background: var(--brand-50); }

/* ---- Prose -------------------------------------------- */
.prose { max-width: 70ch; font-size: var(--fs-md); color: var(--ink-700); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: var(--fs-xl); margin-top: 2.4em; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.8em; scroll-margin-top: 100px; }
.prose p { line-height: var(--lh-body); }
.prose a { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--brand-500); }
.prose strong { color: var(--ink-900); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-top: .5em; line-height: 1.55; }
.prose li::marker { color: var(--brand-500); }
.prose blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.4em; border-left: 3px solid var(--brand-400);
  font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; color: var(--ink-800); font-style: normal; }
.prose figure img, .prose .ph { border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption { margin-top: .7em; font-size: var(--fs-sm); color: var(--ink-500); text-align: center; }

/* key term highlight */
.term { background: var(--brand-50); color: var(--brand-700); padding: .04em .35em; border-radius: 5px;
  font-weight: 500; border: 1px solid var(--brand-100); }

/* lead paragraph */
.prose .lead { font-size: var(--fs-lg); color: var(--ink-600); line-height: 1.5; }

/* ---- Callout ------------------------------------------ */
.callout { display: flex; gap: 1rem; padding: var(--sp-5); border-radius: var(--r-md);
  background: var(--bg-tint); border: 1px solid var(--brand-100); }
.callout .hex { --_size: 40px; flex: none; }
.callout b { font-family: var(--font-display); color: var(--ink-900); display: block; margin-bottom: .25em; }
.callout p { font-size: var(--fs-sm); color: var(--ink-600); margin: 0; }

/* ---- HowTo -------------------------------------------- */
.howto { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.howto__head { padding: var(--sp-5) var(--sp-6); background: var(--surface-dark); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.howto__head h3 { color: #fff; font-size: var(--fs-lg); margin: 0; }
.howto__head .meta { font-family: var(--font-mono); font-size: .74rem; color: #A9ADB6; letter-spacing: .05em;
  display: flex; gap: 1.2rem; }
.howto__head .meta span { display: flex; align-items: center; gap: .4em; }
.howto__steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.howto__step { display: grid; grid-template-columns: 64px 1fr; gap: 1.2rem; padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--line); }
.howto__step:first-child { border-top: 0; }
.howto__num { counter-increment: step; width: 48px; height: 52px; display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, var(--brand-400), var(--brand-600)); color: #fff;
  -webkit-clip-path: var(--hex); clip-path: var(--hex); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.howto__num::before { content: counter(step); }
.howto__step h4 { font-size: var(--fs-md); margin: .3rem 0 0; color: var(--ink-900); }
.howto__step p { margin-top: .4rem; font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.6; }

/* ---- In-article gallery strip ------------------------- */
.art-gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-4); }
@media (max-width: 560px){ .art-gallery { grid-template-columns: 1fr; } }

/* ---- Related / next ----------------------------------- */
.related { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
@media (max-width: 760px){ .related { grid-template-columns: 1fr; } }
.related-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.related-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.related-card .ph { aspect-ratio: 16/9; }
.related-card .body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.related-card .body .badge { margin-bottom: .7rem; }
.related-card h4 { font-size: var(--fs-md); color: var(--ink-900); }
.related-card:hover h4 { color: var(--brand-700); }