/**
 * Illustration SPA: fade only the main project column (#spa-main-content).
 */

.spa-main-host {
  transition: opacity 300ms ease;
}

.spa-main-host.spa-main--fading-out {
  opacity: 0;
}

.spa-main-host:not(.spa-main--fading-out) {
  opacity: 1;
}

/* ===== Sidebar: filters (index) and back button (project) =====
   Both live inside the .menu-category card, so the header, the filters and the
   back button share one border the way the Figma stacks them. archive.js shows
   whichever belongs to the current route. */
.menu-filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
  /* Sits above the share card, which overlaps this card's bottom edge by 15px. */
  padding: 0 var(--spacing-m) var(--spacing-xl);
  /* Long tag lists scroll inside the card rather than pushing the share card
     off the bottom of the fixed sidebar. */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.menu-filters::-webkit-scrollbar {
  width: 0;
}

/* Neither the filters nor the back button want a project list's distance
   between the header card and the share card below it. The outline, when a
   project has one, keeps its own 25px. */
.global-menu-inner {
  gap: var(--spacing-none);
}

.menu-outline {
  margin-top: var(--spacing-l);
}

/* ----- Index: the filters card -----
   It takes the sidebar's slack, and the share card docks onto its squared-off
   bottom edge the way the Figma stacks them. The filters stay at the top of the
   card, so the leftover space collects under the last group. */
.global-menu-inner:has(.menu-filters:not([hidden])) .menu-category {
  flex: 1 1 auto;
  min-height: 0;
  border-bottom-left-radius: var(--corner-radius-none);
  border-bottom-right-radius: var(--corner-radius-none);
}

.global-menu-inner:has(.menu-filters:not([hidden])) .menu-stack {
  flex: 0 0 auto;
}

/* ----- Project: the back link card -----
   Here the card closes itself off instead — it keeps its rounded bottom, hugs
   its content, and the share card drops to the foot of the sidebar with the
   slack between them. */
.global-menu-inner:has(.menu-back:not([hidden])) .menu-category {
  padding-bottom: var(--spacing-l);
}

.global-menu-inner:has(.menu-back:not([hidden])) .menu-stack {
  justify-content: flex-end;
}

.global-menu-inner:has(.menu-back:not([hidden])) .connect {
  margin-top: var(--spacing-none);
}

.menu-filter {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.menu-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
}

.menu-filter-title {
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
}

.menu-filter-clear {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  cursor: pointer;
}

.menu-filter-clear:hover {
  color: var(--color-primary);
}

.menu-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
}

.menu-chip {
  padding: var(--spacing-xs) var(--spacing-m);
  border: 1px solid var(--color-text-secondary);
  border-radius: var(--corner-radius-l);
  background: none;
  font-family: var(--font-family-body);
  font-size: var(--font-size-mini);
  line-height: 13.4px;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.menu-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.menu-chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

.menu-back {
  margin-top: var(--spacing-s);
  padding: 0 var(--spacing-m);
}

.menu-back-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--corner-radius-s);
  background: var(--color-primary);
  color: var(--color-bg);
  font-size: var(--font-size-body);
  transition: opacity 0.3s ease;
}

.menu-back-btn:hover {
  opacity: 0.85;
}

/* ===== Index: project grid ===== */
.archive-index {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
}

.arc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-l);
  width: 100%;
}

.arc-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  min-width: 0;
}

.arc-card-thumb {
  height: 171px;
  overflow: hidden;
}

.arc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.arc-card-meta {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-s);
}

.arc-card-head {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.arc-card-title {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.arc-card:hover .arc-card-title {
  text-decoration: underline;
}

.arc-card-date {
  color: var(--color-text-secondary);
}

.arc-card-desc {
  flex: 1 1 0;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-mini);
  line-height: 13.4px;
}

.arc-empty {
  color: var(--color-text-secondary);
}

@media (max-width: 1023px) {
  .arc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1060px) {
  .arc-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}