/* ========================================================================
   Phase 4 Step 1 — Sidebar wrapper (sticky stack of cards)

   Targets Blocksy's left-sidebar layout. The outer <aside data-sidebar=left>
   and inner <div class="ct-sidebar"> come from Blocksy. We style only:
     - .cai-side-stack  (our wrapper inside ct-sidebar)
     - .cai-card        (generic card primitive used by all sidebar cards)
     - graceful-degradation: hide stack + Blocksy wrapper when fully empty
   ======================================================================== */

/* --- Width override: tighter than Blocksy default 27% --- */
@media (min-width: 1000px) {
  body.single-post {
    --sidebar-width: var(--cai-sidebar-width);    /* 240px from tokens */
    --sidebar-gap:   var(--cai-sidebar-gap);
  }
}

/* --- The sticky stack inside ct-sidebar --- */
.cai-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cai-space-lg);                       /* 1rem between cards */
  font-family: var(--cai-font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* --- Generic card primitive — every sidebar card uses these --- */
.cai-card {
  background: var(--cai-card-bg);
  border: 1px solid var(--cai-card-border);
  border-radius: var(--cai-card-radius);
  padding: var(--cai-card-padding) calc(var(--cai-card-padding) * 1.15);
  color: var(--cai-text);
}
.cai-card__label {
  font-family: var(--cai-font-sans);
  font-size: var(--cai-eyebrow-size);            /* 0.72rem */
  font-weight: var(--cai-eyebrow-weight);
  letter-spacing: var(--cai-eyebrow-spacing);
  text-transform: uppercase;
  color: var(--cai-eyebrow-color);
  margin: 0 0 var(--cai-space-md);                /* 0.75rem before body */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cai-card__body {
  margin: 0;
}

/* --- Graceful degradation:
       If the stack contains ONLY the TOC card (no other cards rendered)
       AND that TOC's target ended up empty (JS found no h2/h3),
       hide the whole stack and Blocksy's wrapper.
   --- */
.cai-side-stack:has(.cai-card--toc:only-child .cai-toc-target:empty) {
  display: none;
}
aside:has(.cai-side-stack:has(.cai-card--toc:only-child .cai-toc-target:empty)) {
  display: none;
}

/* --- Mobile: when Blocksy stacks the sidebar below content,
       reduce visual weight of the cards so they don't feel like
       a second article.
   --- */
@media (max-width: 999px) {
  .cai-side-stack {
    margin-top: var(--cai-space-2xl);             /* 2rem breathing room */
  }
  .cai-card {
    /* Slightly tighter horizontal padding on small screens */
    padding: var(--cai-card-padding);
  }
}