/* ==========================================================================
   BLOG ARTICLE (single.php) — article card + sticky sidebar.
   Building blocks for the content are listed in inc/article.php.
   ========================================================================== */
.art{ padding-top:calc(var(--header-h) + clamp(1rem, 3vw, 2rem)); }
.art-progress{ position:fixed; inset-inline:0; top:0; height:3px; z-index:120; pointer-events:none; }
.art-progress span{ display:block; height:100%; background:linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 50%, #fff)); transform:scaleX(0); transform-origin:right; box-shadow:0 0 10px var(--brand); }
:root[dir="ltr"] .art-progress span{ transform-origin:left; }
body.admin-bar .art-progress{ top:32px; }

.art-wrap{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 330px;
  gap:clamp(1.25rem, 2.5vw, 2rem);
  align-items:start;
  padding-bottom:clamp(3rem, 6vw, 5rem);
}
.art-card{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.25rem, 3.5vw, 2.75rem);
}

.art-main, .art-side, .art-card{ min-width:0; }

/* breadcrumb + title + meta */
.art-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:var(--fs-micro); color:var(--ink-faint); margin-bottom:var(--sp-4); }
.art-crumbs a{ color:var(--ink-soft); transition:color var(--dur-fast); }
.art-crumbs a:hover{ color:var(--brand-strong); }
.art-crumbs a:last-child{ color:var(--brand-strong); font-weight:700; }
:root[dir="ltr"] .art-crumbs svg{ transform:scaleX(-1); }
.art-title{ font-size:clamp(1.75rem, 1.3rem + 1.9vw, 2.7rem); line-height:1.35; margin:0 0 var(--sp-4); }
.art-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.2rem; font-size:var(--fs-micro); color:var(--ink-faint); margin-bottom:var(--sp-5); }
.art-meta span{ display:inline-flex; align-items:center; gap:.4em; }
.art-meta svg{ width:15px; height:15px; color:var(--brand-strong); }
.art-chip{ padding:.3em .9em; border-radius:999px; background:var(--brand-wash); border:1px solid var(--brand-line); color:var(--ink); font-weight:700; }
.art-cover{ margin:0 0 var(--sp-6); border-radius:var(--r-md); overflow:hidden; aspect-ratio:21 / 9; background:var(--bg-soft); }
.art-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* table of contents (inline on mobile, sticky in the sidebar on desktop) */
.art-toc__list{ list-style:none; margin:0; padding:0; counter-reset:toc; display:grid; gap:.15rem; }
.art-toc__list li{ counter-increment:toc; }
.art-toc__list a{ display:grid; grid-template-columns:1.9rem 1fr; gap:.5rem; align-items:start; padding:.45rem .6rem; border-radius:10px; font-size:var(--fs-small); line-height:1.6; color:var(--ink-soft); transition:background var(--dur-fast), color var(--dur-fast); }
.art-toc__list a::before{ content:counter(toc, decimal-leading-zero); font-family:var(--font-latin); font-size:.75rem; font-weight:800; color:var(--ink-faint); padding-top:.2em; }
.art-toc__list a:hover{ background:var(--glass-bg-2); color:var(--ink); }
.art-toc__list a.is-on{ background:var(--brand-wash); color:var(--ink); }
.art-toc__list a.is-on::before{ color:var(--brand-strong); }
.art-toc--inline{ display:none; margin-bottom:var(--sp-6); border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--bg-soft); }
.art-toc--inline summary{ display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4); cursor:pointer; font-weight:800; list-style:none; }
.art-toc--inline summary::-webkit-details-marker{ display:none; }
.art-toc--inline summary i{ font-style:normal; font-size:var(--fs-micro); color:var(--ink-faint); font-weight:600; }
.art-toc--inline .art-toc__list{ padding:0 var(--sp-3) var(--sp-4); }
.art-toc--side .art-toc__list{ max-height:min(48vh, 440px); overflow:auto; margin-inline:-.6rem; scrollbar-width:thin; }

/* ---------------------------------------------------------------- content */
.art-content{ font-size:var(--fs-body); line-height:2; color:var(--ink-soft); }
.art-content > * + *{ margin-top:var(--sp-4); }
.art-content p{ margin:0; }
.art-content strong{ color:var(--ink); }
.art-content h2{
  position:relative;
  font-size:clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height:1.45;
  margin-top:clamp(2.5rem, 5vw, 3.5rem); margin-bottom:var(--sp-4);
  padding-bottom:.6rem; padding-inline-start:1rem;
  border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h-shrunk) + 1.5rem);
}
.art-content h2::before{ content:""; position:absolute; inset-inline-start:0; top:.35em; bottom:calc(.6rem + .35em); width:4px; border-radius:4px; background:var(--brand); box-shadow:0 0 12px color-mix(in srgb, var(--brand) 50%, transparent); }
.art-content h3{ font-size:clamp(1.12rem, 1rem + .45vw, 1.35rem); line-height:1.5; color:var(--brand-strong); margin-top:var(--sp-6); margin-bottom:var(--sp-3); }
.art-content ul, .art-content ol{ padding:0; margin-block-start:var(--sp-4); list-style:none; }
.art-content ul:not([class]) li, .art-content ul.ad-check li, .art-content ul.ad-cross li{ position:relative; padding-inline-start:1.9rem; }
.art-content ul:not([class]) li + li, .art-content ol li + li{ margin-top:.55rem; }
.art-content ul:not([class]) li::before{ content:""; position:absolute; inset-inline-start:.35rem; top:.8em; width:8px; height:8px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-wash); }
.art-content ol:not([class]){ counter-reset:ol; }
.art-content ol:not([class]) li{ counter-increment:ol; position:relative; padding-inline-start:2.4rem; }
.art-content ol:not([class]) li::before{ content:counter(ol); position:absolute; inset-inline-start:0; top:.25em; width:1.7rem; height:1.7rem; border-radius:50%; display:grid; place-items:center; font-family:var(--font-latin); font-size:.8rem; font-weight:800; background:var(--brand-wash); border:1px solid var(--brand-line); color:var(--ink); line-height:1; }

/* lead */
.art-content .ad-lead{ font-size:var(--fs-lead); color:var(--ink); line-height:1.95; padding-inline-start:1.1rem; border-inline-start:3px solid var(--brand); }

/* check / cross lists */
.art-content ul.ad-check li::before, .art-content ul.ad-cross li::before{ position:absolute; inset-inline-start:0; top:.35em; width:1.35rem; height:1.35rem; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:900; line-height:1; }
.art-content ul.ad-check li::before{ content:"✓"; background:var(--brand); color:var(--on-brand); }
.art-content ul.ad-cross li::before{ content:"✕"; background:color-mix(in srgb, #e2685a 18%, transparent); color:#e2685a; border:1px solid color-mix(in srgb, #e2685a 45%, transparent); }
.art-content ul.ad-check li + li, .art-content ul.ad-cross li + li{ margin-top:.6rem; }

/* steps */
.art-content ol.ad-steps{ counter-reset:st; display:grid; gap:.7rem; }
.art-content ol.ad-steps li{ counter-increment:st; display:grid; grid-template-columns:2.6rem 1fr; gap:.9rem; align-items:center; padding:.7rem .9rem; border-radius:var(--r-sm); background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); font-weight:600; line-height:1.7; }
.art-content ol.ad-steps li::before{ content:counter(st); width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; font-family:var(--font-latin); font-weight:800; background:var(--brand); color:var(--on-brand); box-shadow:var(--brand-glow-sm); }

/* tips grid */
.art-content ol.ad-tips{ counter-reset:tp; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap:.7rem; }
.art-content ol.ad-tips li{ counter-increment:tp; position:relative; padding:1rem 1rem .9rem; border-radius:var(--r-sm); background:var(--bg-soft); border:1px solid var(--line); color:var(--ink); font-weight:600; line-height:1.6; transition:border-color var(--dur-fast), transform var(--dur-fast); }
.art-content ol.ad-tips li:hover{ border-color:var(--brand-line); transform:translateY(-2px); }
.art-content ol.ad-tips li::before{ content:counter(tp, decimal-leading-zero); display:block; margin-bottom:.35rem; font-family:var(--font-latin); font-size:1.5rem; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1px var(--brand-strong); }

/* boxes */
.art-content .ad-box{ position:relative; padding:1.1rem 1.25rem; border-radius:var(--r-md); background:var(--brand-wash); border:1px solid var(--brand-line); color:var(--ink); }
.art-content .ad-box > * + *{ margin-top:.6rem; }
.art-content .ad-box__t{ display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--brand-strong); font-size:var(--fs-small); }
.art-content .ad-box--formula{ text-align:center; padding:1.4rem 1.25rem; background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--brand) 5%, transparent)); }
.art-content .ad-box--formula .ad-formula{ font-family:var(--font-display); font-weight:800; font-size:clamp(1rem, .9rem + .5vw, 1.25rem); color:var(--ink); line-height:1.9; }
.art-content .ad-box--formula .ad-formula b{ color:var(--brand-strong); }
.art-content .ad-box--example{ background:var(--bg-soft); border-color:var(--line-strong); border-inline-start:4px solid var(--brand); }
.art-content .ad-box--warn{ background:color-mix(in srgb, #e2685a 8%, transparent); border-color:color-mix(in srgb, #e2685a 35%, transparent); }
.art-content .ad-box--warn .ad-box__t{ color:#e2685a; }
.art-content .ad-box--summary{ padding:1.4rem 1.5rem; background:linear-gradient(135deg, var(--bg-soft), color-mix(in srgb, var(--brand) 10%, var(--bg-soft))); font-size:var(--fs-lead); line-height:1.9; }
.art-content .ad-box small{ display:block; color:var(--ink-faint); font-size:var(--fs-micro); }

/* tables: styled in wp.css (all articles and pages) */

/* FAQ */
.art-content .ad-faq{ border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--bg-soft); overflow:hidden; transition:border-color var(--dur-fast); }
.art-content .ad-faq + .ad-faq{ margin-top:.6rem; }
.art-content .ad-faq[open]{ border-color:var(--brand-line); }
.art-content .ad-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.15rem; cursor:pointer; list-style:none; color:var(--ink); font-weight:800; line-height:1.6; }
.art-content .ad-faq summary::-webkit-details-marker{ display:none; }
.art-content .ad-faq summary::after{ content:"+"; flex-shrink:0; width:1.8rem; height:1.8rem; border-radius:50%; display:grid; place-items:center; font-size:1.2rem; font-weight:400; line-height:1; background:var(--glass-bg-2); border:1px solid var(--line-strong); transition:transform .3s var(--ease-out), background .3s; }
.art-content .ad-faq[open] summary::after{ transform:rotate(45deg); background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.art-content .ad-faq > :not(summary){ padding:0 1.15rem 1.1rem; margin:0; }

/* share */
.art-share{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:clamp(2rem, 4vw, 3rem); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.art-share > span{ font-weight:800; }
.art-share div{ display:flex; gap:.5rem; }
.art-share a, .art-share button{ position:relative; width:2.6rem; height:2.6rem; border-radius:50%; display:grid; place-items:center; color:var(--ink-soft); background:var(--glass-bg-2); border:1px solid var(--line-strong); cursor:pointer; transition:background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.art-share a:hover, .art-share button:hover{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); transform:translateY(-2px); }
.art-share svg{ width:18px; height:18px; }
.art-share button em{ position:absolute; bottom:calc(100% + .4rem); white-space:nowrap; font-style:normal; font-size:.75rem; padding:.2em .6em; border-radius:6px; background:var(--ink); color:var(--bg); opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; pointer-events:none; }
.art-share button.is-done em{ opacity:1; transform:none; }

/* ---------------------------------------------------------------- sidebar */
.art-side{ position:sticky; top:calc(var(--header-h-shrunk) + 1rem); display:grid; gap:1rem; }
.art-widget{ background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem; }
.art-wtitle{ position:relative; font-size:1.05rem; margin:0 0 1rem; padding-bottom:.65rem; border-bottom:1px solid var(--line); }
.art-wtitle::after{ content:""; position:absolute; inset-inline-start:0; bottom:-1px; width:2.4rem; height:2px; background:var(--brand); }
.art-search div{ display:flex; gap:.4rem; }
.art-search input{ flex:1; min-width:0; height:2.9rem; padding-inline:1rem; border-radius:12px; border:1px solid var(--line-strong); background:var(--bg-soft); color:var(--ink); font:inherit; font-size:var(--fs-small); outline:0; transition:border-color var(--dur-fast); }
.art-search input:focus{ border-color:var(--brand); }
.art-search button{ width:2.9rem; height:2.9rem; border-radius:12px; border:0; display:grid; place-items:center; background:var(--brand); color:var(--on-brand); cursor:pointer; }
.art-latest{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.art-latest a{ display:grid; grid-template-columns:64px 1fr; gap:.75rem; align-items:center; }
.art-latest img{ width:64px; height:64px; border-radius:12px; object-fit:cover; background:var(--bg-soft); }
.art-latest b{ display:block; font-size:var(--fs-small); line-height:1.55; color:var(--ink); transition:color var(--dur-fast); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-latest a:hover b{ color:var(--brand-strong); }
.art-latest small{ display:block; margin-top:.2rem; font-size:.75rem; color:var(--ink-faint); }
.art-cats{ display:flex; flex-wrap:wrap; gap:.4rem; }
.art-cats a{ display:inline-flex; align-items:center; gap:.4em; padding:.4em .9em; border-radius:999px; font-size:var(--fs-micro); font-weight:700; color:var(--ink-soft); background:var(--glass-bg-2); border:1px solid var(--line-strong); transition:all var(--dur-fast); }
.art-cats a i{ font-style:normal; font-family:var(--font-latin); opacity:.6; font-size:.85em; }
.art-cats a:hover, .art-cats a.is-current{ background:var(--brand-wash); border-color:var(--brand-line); color:var(--ink); }
.art-cta{ text-align:center; background:radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%), var(--bg-elevated); border-color:var(--brand-line); }
.art-cta h3{ font-size:1.15rem; margin:0 0 .4rem; }
.art-cta p{ font-size:var(--fs-small); color:var(--ink-soft); margin:0 0 1rem; line-height:1.8; }
.art-cta .btn{ width:100%; justify-content:center; }

.art-related{ border-top:1px solid var(--line); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px){
  .art-wrap{ grid-template-columns:minmax(0, 1fr); }
  .art-side{ position:static; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .art-toc--side{ display:none; }
  .art-toc--inline{ display:block; }
}
@media (max-width: 640px){
  .art-card{ padding:1.1rem; border-radius:var(--r-md); }
  .art-side{ grid-template-columns:minmax(0, 1fr); }
  .art-cover{ aspect-ratio:16 / 9; }
  .art-share{ flex-direction:column; align-items:flex-start; }
}