/* =============================================================================
   Blog article layout — loaded only on article pages (see includes/head.php).
   Uses the tokens defined in main.css.

   Layout: sticky quote sidebar on the LEFT, article beside it, nothing to the
   right of the article.
   ========================================================================== */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 250; pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .08s linear; }

/* Header ------------------------------------------------------------------ */
.article-head { background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FB 100%); }
.article-head .crumbs { border-bottom: 1px solid rgba(6,43,91,.08); }
/* Title block left, cover right: the header uses the full 1600px instead of
   leaving the right half empty. */
.article-head__inner {
  display: grid; align-items: center; gap: clamp(32px, 5vw, 96px);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  padding-block: clamp(32px, 4vw, 56px);
}
@media (max-width: 1000px) { .article-head__inner { grid-template-columns: minmax(0, 1fr); } }
.article-head h1 { font-size: var(--fs-hero); line-height: 1.08; margin-bottom: var(--s-5); max-width: 22ch; }
.article-head__sub { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; margin-bottom: var(--s-6); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3);
}
.article-meta li { display: flex; align-items: center; gap: 7px; margin: 0; }
.article-meta .pna-icon { color: var(--blue); }

/* Two columns: sidebar | article ----------------------------------------- */
.article-wrap { background: #fff; padding-block: clamp(28px, 3.5vw, 52px) var(--section-y); }

.article-layout {
  display: grid; gap: clamp(32px, 4.5vw, 72px); align-items: start;
  grid-template-columns: 400px minmax(0, 1fr);
}
@media (max-width: 1100px) {
  .article-layout { grid-template-columns: 360px minmax(0, 1fr); }
}
/* Narrow screens: article first, form below it. */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-side { order: 2; }
}

.article-main { min-width: 0; }

/* Cover: sized to the article column, not the page ------------------------ */
.article-cover {
  margin: 0; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-3); aspect-ratio: 16 / 10; background: var(--bg-light);
  max-height: 440px; width: 100%;
}
.article-cover .pna-photo { border-radius: 0; height: 100%; object-fit: cover; }
.article-cover .pna-photo--placeholder { height: 100%; border: 0; }
@media (max-width: 640px) { .article-cover { border-radius: var(--r-lg); } }

/* Reading column. The column fills the space beside the sidebar; the running
   text is held to a readable line length rather than stretched edge to edge. */
.article-body { max-width: 980px; font-size: 1.125rem; line-height: 1.8; color: var(--ink-2); }
.article-body > p:first-of-type { font-size: 1.2rem; line-height: 1.7; color: var(--ink); }
.article-body h2 {
  font-size: var(--fs-h2); margin-top: var(--s-10); margin-bottom: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.article-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 { margin-top: var(--s-8); }
.article-body ul, .article-body ol { padding-left: 0; list-style: none; display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.article-body ul li { position: relative; padding-left: 30px; margin: 0; }
.article-body ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 10px; height: 10px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-12);
}
.article-body ol { counter-reset: li; }
.article-body ol li { position: relative; padding-left: 44px; margin: 0; counter-increment: li; }
.article-body ol li::before {
  content: counter(li); position: absolute; left: 0; top: .15em;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue); color: #fff; font-size: .8rem; font-weight: 700; line-height: 1;
}
.article-body .answer { margin-block: var(--s-7); }
.article-body .answer p { font-size: 1.12rem; color: var(--navy); font-weight: 500; }
.article-body .note { margin-block: var(--s-6); }
.article-body .spec-table { min-width: 0; }

/* Contents ---------------------------------------------------------------- */
.toc { margin-bottom: var(--s-8); padding: var(--s-6) var(--s-7); background: var(--bg-light); border-radius: var(--r-lg); }
.toc__title {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  margin-bottom: var(--s-4);
}
.toc__title .pna-icon { color: var(--blue); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2) var(--s-7); counter-reset: toc; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .toc ol { grid-template-columns: minmax(0, 1fr); } }
.toc li { margin: 0; counter-increment: toc; }
.toc a { display: flex; gap: var(--s-3); align-items: baseline; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); line-height: 1.4; }
.toc a::before { content: counter(toc, decimal-leading-zero); color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.toc a:hover, .toc a.is-active { color: var(--blue); }

/* Share + author ---------------------------------------------------------- */
.article-foot { margin-top: var(--s-10); display: grid; gap: var(--s-6); }
.share { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-5); border-block: 1px solid var(--line); }
.share__label { font-weight: 700; color: var(--navy); margin-right: auto; font-size: var(--fs-sm); }
.share__btn {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--bg-light); color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.share__btn:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.author-box { display: flex; gap: var(--s-5); align-items: flex-start; padding: var(--s-6); background: var(--bg-light); border-radius: var(--r-lg); }
.author-box strong { display: block; margin-bottom: 4px; }
.author-box p { margin: 0; font-size: var(--fs-sm); color: var(--ink-3); }

/* Sticky sidebar ----------------------------------------------------------
   Motion, in order of appearance:
   1. the column slides in from the left when the page loads;
   2. once it locks to the viewport (.is-stuck) the card lifts — deeper shadow,
      a thin accent line along the top, the header glows;
   3. the line along the top of the card fills as the article is read;
   4. about a third of the way down, the submit button gives two gentle pulses.
   All of it is switched off for visitors who prefer reduced motion. */
.article-side__sticky {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: grid; gap: var(--s-4);
  animation: side-in .7s var(--ease-out) both;
}
@media (max-width: 900px) { .article-side__sticky { position: static; animation: none; max-height: none; overflow: visible; } }

/* Stays pinned on every screen height. If the form is taller than the window
   (a laptop with the browser toolbars showing), the pinned column scrolls inside
   itself, so the submit button is always reachable and the sidebar never
   dissolves into an empty column below the form. */
@media (max-height: 900px) and (min-width: 901px) {
  .article-side__sticky {
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    padding: 4px 6px 10px; margin: -4px -6px;
  }
}
/* On short windows, tighten the form so it mostly fits without scrolling. */
@media (max-height: 820px) {
  .side-quote__head { padding: var(--s-4) var(--s-5) var(--s-3); }
  .side-quote__head p { display: none; }
  .side-quote .form { padding: var(--s-4) var(--s-5); gap: 8px; }
  .side-quote .field { gap: 4px; }
  .side-quote .field input, .side-quote .field select { min-height: 40px; padding-block: 8px; }
  .side-quote .field textarea { min-height: 60px; }
  .side-contact { display: none; }
}

@keyframes side-in {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

.side-quote {
  position: relative;
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh-2);
  border: 1px solid rgba(6,43,91,.06); overflow: hidden;
  transition: box-shadow .45s var(--ease), transform .45s var(--ease-out);
}
.is-stuck .side-quote { box-shadow: 0 2px 6px rgba(6,43,91,.06), 0 28px 64px rgba(6,43,91,.20); transform: translateY(-2px); }

.side-quote__progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,.14); z-index: 2; }
.side-quote__progress span { display: block; height: 100%; width: 0; background: var(--cyan-bright); transition: width .12s linear; }

.side-quote__head { padding: var(--s-6) var(--s-6) var(--s-5); background: var(--navy); transition: background .45s var(--ease); }
.is-stuck .side-quote__head { background: linear-gradient(135deg, #0B4FB5 0%, #062B5B 100%); }
.side-quote__head h2 { color: #fff; font-size: 1.3rem; margin: 0 0 4px; }
.side-quote__head p { color: rgba(255,255,255,.78); font-size: var(--fs-sm); margin: 0; }

.side-quote .form { padding: var(--s-6); gap: var(--s-3); }
/* One field per row: two columns in a 400px card truncate the placeholders. */
.side-quote .form__row, .side-quote .form__row--3 { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.side-quote .field textarea { min-height: 88px; }
.side-quote .form__foot { align-items: flex-start; }

.side-quote .btn.is-nudge { animation: nudge 1.1s var(--ease) 2; }
@keyframes nudge {
  0%   { box-shadow: 0 0 0 0 rgba(20,123,239,.55); transform: scale(1); }
  45%  { transform: scale(1.025); }
  100% { box-shadow: 0 0 0 16px rgba(20,123,239,0); transform: scale(1); }
}

.side-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.side-contact a {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 13px 10px; border-radius: var(--r-md); background: var(--bg-light);
  font-size: var(--fs-sm); font-weight: 700; color: var(--navy);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.side-contact a:hover { background: var(--blue-12); color: var(--blue); transform: translateY(-2px); }
.side-contact .pna-icon { color: var(--blue); }
.side-contact .pna-icon--fill { color: #1DA851; }

@media (prefers-reduced-motion: reduce) {
  .article-side__sticky { animation: none; }
  .side-quote, .side-quote__head { transition: none; }
  .is-stuck .side-quote { transform: none; }
  .side-quote .btn.is-nudge { animation: none; }
}