/**
 * article-sidebar.css — sticky right column for TOC / CTA · procyclingapparel.com
 * Sticky works because global.css uses body{overflow-x:clip} (not hidden) and the aside is a
 * direct grid child with align-self:start (silent-layout-bugs #1/#2).
 * Below 992px the aside dissolves (display:contents): the TOC bar moves above the article,
 * the CTA stays after it.
 */

.article-sidebar,
.blog-sidebar,
[data-article-sidebar] { box-sizing: border-box; }

@media (min-width: 992px) {
  .article-sidebar,
  [data-article-sidebar] {
    position: sticky;
    top: 96px;
    align-self: start;
  }
  /* the TOC list scrolls inside itself so the CTA under it always stays on screen */
  .article-sidebar #toc-list-content { max-height: max(160px, calc(100vh - 640px)); }
}

@media (max-width: 991.98px) {
  .article-page .row > .col-lg-4 { display: contents; }
  .article-page .article-sidebar { display: contents; }
  .article-page #toc-nav-container { order: -1; margin: 0; }
}

/* Sidebar widget container */
.sidebar-widget {
  margin: 0 0 16px;
  padding: 24px;
  background: var(--g-100, #F3F4F6);
  border-radius: 10px;
}
.sidebar-widget-title {
  font: 600 13px/1.4 var(--ff-body, "IBM Plex Sans", Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g-600, #4B5563);
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--g-200, #E5E7EB);
}

/* Sidebar CTA — ink block, one red button (§0.1 CTA fill) */
.sidebar-cta {
  margin: 0 0 16px;
  padding: 28px 24px;
  background: var(--ink, #111827);
  border-radius: 10px;
  color: #fff;
}
.sidebar-cta h4 {
  font: 600 22px/1.25 var(--ff-head, "IBM Plex Sans Condensed", Arial, sans-serif);
  color: #fff;
  margin: 0 0 10px;
}
.sidebar-cta p { font-size: 15px; line-height: 1.55; color: var(--on-ink-2, #D1D5DB); margin: 0 0 20px; }
.sidebar-cta .sidebar-cta-list { list-style: none; margin: 0 0 20px; padding: 0; font-size: 15px; line-height: 1.5; color: var(--on-ink-2, #D1D5DB); }
.sidebar-cta .sidebar-cta-list li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.sidebar-cta .sidebar-cta-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.sidebar-cta a.btn,
.sidebar-cta a.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  background: var(--red, #DC2626);
  color: #fff;
  font: 600 16px/1.3 var(--ff-body, "IBM Plex Sans", Arial, sans-serif);
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  transition: background-color 160ms;
}
.sidebar-cta a.btn:hover,
.sidebar-cta a.btn-primary:hover { background: var(--red-dark, #B91C1C); color: #fff; }
.sidebar-cta .sidebar-cta-note { margin: 14px 0 0; font-size: 13px; color: var(--on-ink-2, #D1D5DB); }

@media (max-width: 991.98px) {
  .article-page .sidebar-cta { margin: 16px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-cta a.btn { transition: none; }
}