/* ==========================================================================
   article.css — long-form guide pages only (/guides/…). ADR-019.
   Loaded AFTER the five site stylesheets, and ONLY on guide pages, so the
   home page budget is untouched. Every value comes from tokens.css.
   ========================================================================== */

.article-page { padding-block: var(--sp-6) var(--section-y); }

/* ----------------------------------------------------------- breadcrumb -- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-3); }
.breadcrumb li + li::before { content: '›'; margin-right: var(--sp-2); color: var(--ink-3); }
.breadcrumb a { color: var(--blue-600); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current='page'] { color: var(--ink-2); }

/* ------------------------------------------------------------- heading -- */
.article-head { display: grid; gap: var(--sp-4); max-width: var(--measure); margin-top: var(--sp-5); }
.article-head h1 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.article-head__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); }
.article-head__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-xs); color: var(--ink-3); }

/* Optional product render under the lead (commercial pages). */
.article-figure { margin: var(--sp-2) 0 0; max-width: 40rem; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--hairline); background: var(--paper-2); }
.article-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }

/* -------------------------------------------------------------- layout -- */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); margin-top: var(--sp-7); }
@media (min-width: 64rem) {
  .article-layout { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
  .article-aside { position: sticky; top: calc(var(--header-h-lg) + var(--sp-5)); }
}

/* ------------------------------------------------------------------ toc -- */
.toc { padding: var(--sp-5); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper-2); }
.toc__title { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--blue-600); }
.toc ol { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: 1.5em 1fr; }
.toc li::before { content: counter(toc) '.'; color: var(--ink-3); }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--blue-600); text-decoration: underline; }
.aside-cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--studio); color: var(--on-studio); }
.aside-cta p { font-size: var(--fs-sm); color: var(--on-studio-2); }
.aside-cta strong { color: var(--on-studio); font-size: var(--fs-body); }

/* ---------------------------------------------------------------- prose -- */
.prose { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-h3); line-height: var(--lh-h3); scroll-margin-top: calc(var(--header-h-lg) + var(--sp-4)); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-body); font-weight: var(--fw-bold); }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: var(--sp-2); padding-left: var(--sp-5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--blue-600); }
/* Buttons inside the article keep their own colours (not the link colour). */
.prose a.btn { color: var(--btn-fg); text-decoration: none; }
.article-cta .btn--whatsapp { --btn-fg: var(--on-studio); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { padding: var(--sp-3); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); color: var(--ink); font-weight: var(--fw-semi); }
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.table-scroll table { min-width: 32rem; }

.callout-note { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--blue-100); color: var(--ink); }
.callout-note p { color: var(--ink); }
.callout-note__title { font-weight: var(--fw-bold); color: var(--blue-700); }

/* ------------------------------------------------------- article CTA ---- */
.article-cta { display: grid; gap: var(--sp-4); margin-top: var(--sp-7); padding: var(--sp-6); border-radius: var(--r-xl); background: var(--studio); color: var(--on-studio); }
.article-cta h2 { margin: 0; color: var(--on-studio); font-size: var(--fs-h3); }
.article-cta p { color: var(--on-studio-2); }
.article-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ---------------------------------------------------------------- FAQ --- */
.article-faq { margin-top: var(--sp-7); }
.article-faq h2 { font-size: var(--fs-h3); }

/* ------------------------------------------------------------ related -- */
.related { margin-top: var(--sp-8); }
.related h2 { font-size: var(--fs-h3); }
.related__grid { display: grid; gap: var(--grid-gap); margin-top: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.guide-card { position: relative; display: grid; gap: var(--sp-2); padding: var(--sp-5); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--sh-1); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.guide-card__tag { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--blue-600); }
.guide-card h3 { font-size: var(--fs-body); }
.guide-card p { font-size: var(--fs-sm); color: var(--ink-2); }
.guide-card a { color: var(--ink); text-decoration: none; }
.guide-card a::after { content: ''; position: absolute; inset: 0; }
.guide-card:has(a:focus-visible) { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--focus-offset); }
.guide-card a:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
}
@media (prefers-reduced-motion: reduce) {
  .guide-card, .guide-card:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------- guides index ---- */
.guides-hub__group { margin-top: var(--sp-8); }
.guides-hub__group h2 { font-size: var(--fs-h3); }
.guides-hub__grid { display: grid; gap: var(--grid-gap); margin-top: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

/* Kept LAST so it overrides .aside-cta above. Phones: the table of contents comes first (useful before a long read); the
   aside CTA is dropped there because the article carries its own CTAs. */
@media (max-width: 63.99rem) {
  .article-aside { order: -1; }
  .aside-cta { display: none; }
}