/* Projects page layout: the wrap is a container, so track counts respond to
   its width — never the viewport. Menu hugs the grid; blank falls right. */
.page-preface { max-width: 860px; margin-bottom: 2rem; }
.page-preface .hero-bio { max-width: none; color: var(--muted); }
.projects-wrap {
  container-type: inline-size;
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
}

.side-col { display: flex; flex-direction: column; width: min-content; }

/* layout footer is replaced by the docked one on this page */
body.page > footer { display: none; }

.projects-main {
  flex: none;
  width: fit-content;
  max-width: 100%;
}

.projects-main .card-grid {
  grid-template-columns: repeat(5, 326px);
  justify-content: start;
}

#filter-menu {
  flex: none;
  align-self: start;
  width: 326px;
  margin-top: 0;
  background: var(--surface);
  border: 2px solid var(--muted);
  padding: 1.5rem;
}

#filter-menu h2 { margin: 0; font-size: 1.25rem; }

.filter-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

#filter-menu h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* same width as a card; height stays content-minimum */
#filter-tech, #filter-status, #filter-source, #filter-sort { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

.filter-btn {
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border);
  border-radius: var(--card-radius);
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.filter-btn[data-mode="not"] {
  color: var(--muted);
  text-decoration: line-through;
}

.filter-count { color: var(--muted); margin: 0; font-size: 0.85rem; }

/* wrap width = grid + 1.5rem gap + 326 menu */
@container (max-width: 2075px) {
  .projects-main .card-grid { grid-template-columns: repeat(4, 326px); }
}
@container (max-width: 1725px) {
  .projects-main .card-grid { grid-template-columns: repeat(3, 326px); }
}
@container (max-width: 1375px) {
  .projects-main .card-grid { grid-template-columns: repeat(2, 326px); }
}
@container (max-width: 1025px) {
  .projects-wrap { flex-direction: column; }
  .projects-main .card-grid { grid-template-columns: repeat(2, 326px); }
  #filter-menu { width: auto; position: static; }
}
@container (max-width: 700px) {
  .projects-main .card-grid { grid-template-columns: 326px; }
}

/* Tablet collapse controls: inert on desktop (no layout, no paint). */
.filter-toggle,
.filter-bar { display: none; }

@media (max-width: 1100px) {
  .projects-wrap { flex-direction: column; min-width: 0; max-width: 100%; }
  /* Dissolve the rail so the bar/menu can sit above the grid
     while the footer drops below it. */
  .side-col { display: contents; }
  /* Visually hidden but focusable: label click + keyboard both toggle. */
  .filter-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
  .filter-toggle:focus-visible + .filter-bar {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    order: -2;
    cursor: pointer;
    background: var(--surface);
    border: 2px solid var(--muted);
    padding: 0.75rem 1rem;
    margin: 0;
    max-width: 100%;
  }
  .filter-bar-title { font-weight: 700; }
  .filter-bar-toggle { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
  .filter-bar-toggle .chev-down { transform: rotate(90deg); }
  .filter-bar-toggle .chev-up { transform: rotate(270deg); display: none; }
  /* Collapsed = one line bar only; checked reveals the full desktop menu. */
  .filter-toggle:not(:checked) ~ #filter-menu { display: none; }
  .filter-toggle:checked + .filter-bar .chev-down { display: none; }
  .filter-toggle:checked + .filter-bar .chev-up { display: inline; }
  #filter-menu { order: -1; width: auto; max-width: 100%; align-self: stretch; }
  .projects-main { order: 0; min-width: 0; width: 100%; max-width: 100%; }
  .projects-main .card-grid { max-width: 100%; grid-template-columns: repeat(2, minmax(280px, 326px)); justify-content: center; }
  .projects-wrap .col-footer {
    order: 1;
    align-self: start;
    text-align: left;
    padding: 1.5rem 0 0;
    max-width: 100%;
  }
}

/* Global card-grid policy (391–726): content < 584px can't hold 2×280,
   so force a single 326-centered column. Projects-qualified (a bare
   .card-grid rule would lose on specificity); placed after the 1100
   block so it wins in range; the 390 block (later) owns ≤390. */
@media (max-width: 726px) and (min-width: 391px) {
  .projects-main .card-grid { grid-template-columns: minmax(0, 326px); justify-content: center; }
}

/* Phone: single fluid column (explicit viewport query — the 326px fixed
   container tracks overflow the ~326px content width once borders count).
   Re-assert the desktop 480px card floor so copy never clips. */
@media (max-width: 390px) {
  .projects-main .card-grid { grid-template-columns: minmax(0, 1fr); }
  .projects-main .card { min-height: 480px; }
}