@layer screens {
/* Projects index — card grid + live search toolbar. */

/* Mobile-first single column; 2-up then 3-up on wider viewports. */
.project-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 600px) {
  .project-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .project-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Live search form (markup + behaviour unchanged from the classic screen). */
body#projects_index {
  & .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-2);

    & input[type="text"] {
      flex: 1 1 240px;
      min-width: 0;
      min-height: var(--tap-min);
      padding-inline: var(--spacing-3);
      font-size: var(--font-size-base);
      color: var(--text);
      background: var(--surface);
      border: var(--border-width) solid var(--border-strong);

      &:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: -3px;
      }
    }

    & a {
      display: inline-flex;
      align-items: center;
      min-height: var(--tap-min);
      padding-inline: var(--spacing-3);
      color: var(--text);
      text-decoration: underline;

      &:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
      }
    }
  }
}
}