/* ==========================================================================
   Sidebar component sheet
   Shared grid/table styles live in sheet.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variant card wrappers
   background/page + full border, 24px padding — mirrors Figma card frame
   -------------------------------------------------------------------------- */
.sidebar-variant-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--background-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Sidebar — base
   -------------------------------------------------------------------------- */
.sidebar-demo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  background: var(--background-card);
  pointer-events: none;
}

/* Mobile — no border, 24px top/bottom, 16px left/right */
.sidebar-demo--mobile {
  padding: var(--spacing-md) var(--spacing-sm);
  max-width: 375px;
}

/* Tablet — bottom border only */
.sidebar-demo--tablet {
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--border-subtle);
}

/* Desktop — right border only, 0 outer padding (inner frame handles it) */
.sidebar-demo--desktop {
  width: 360px;
  border-right: 1px solid var(--border-subtle);
}

/* --------------------------------------------------------------------------
   Desktop — inner padding frame
   -------------------------------------------------------------------------- */
.sidebar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
  padding: var(--spacing-lg);
}

/* --------------------------------------------------------------------------
   Tablet — 2-column layout
   -------------------------------------------------------------------------- */
.sidebar__tablet-container {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.sidebar__tablet-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* --------------------------------------------------------------------------
   Context overrides — strip reading-column max-width inside sidebar
   -------------------------------------------------------------------------- */
.sidebar-demo .content-section__heading,
.sidebar-demo .content-section__body {
  max-width: none;
}

/* --------------------------------------------------------------------------
   CV section — text-link + button
   -------------------------------------------------------------------------- */
.sidebar__cv {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sidebar__cv-label {
  margin: 0;
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line-height);
  color: var(--text-secondary);
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* --------------------------------------------------------------------------
   Footer links
   -------------------------------------------------------------------------- */
.sidebar__links {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* --------------------------------------------------------------------------
   Branding footer — icon logo + handle
   -------------------------------------------------------------------------- */
.sidebar-footer {
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
  margin-top: calc(-1 * var(--spacing-md));
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  border-radius: var(--radius-xs);
}

.sidebar-logo:hover .sidebar-logo__icon [fill="var(--brand-cobalt)"] {
  fill: var(--text-link-hover);
}

.sidebar-logo:focus { outline: none; }

.sidebar-logo:focus-visible {
  outline: var(--border-width-focus) solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sidebar-logo__handle {
  font-family: var(--type-family-primary), system-ui, sans-serif;
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line-height);
  color: var(--text-info);
  white-space: nowrap;
  vertical-align: middle;
}

.sidebar-logo__copyright {
  position: relative;
  top: 1px;
}

.sidebar-logo__text {
  position: relative;
}